bootstrap-rn 0.2.9 → 0.2.11

package/dist/bootstrap-rn.cjs.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var overlays = require('@react-native-aria/overlays');
 var reactNative = require('react-native');
 var cssToReactNative = require('css-to-react-native');
-var polished = require('polished');
 var React = require('react');
 var PropTypes = require('prop-types');
 var invariant = require('tiny-invariant');
+var focus = require('@react-native-aria/focus');
 var reactNativeSvg = require('react-native-svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -202,6 +202,10 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function _toArray(arr) {
+  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+}
+
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
@@ -511,7 +515,7 @@ var directive = {
   }
 };
 
-var SELECTOR_TYPES = ['hover', 'focus', 'active'];
+var SELECTOR_TYPES = ['hover', 'focus', 'focus-visible', 'active'];
 var selector = {
   locate: function locate(input) {
     return input.peek() === '&' && input.peek(1) === ':';
@@ -641,128 +645,145 @@ function parse() {
 
 var transformREMUnitRE = /([+-]+)?([\d.Ee]+)rem/g;
 
+var convertRemToPx = function convertRemToPx(value) {
+  return reactNative.PixelRatio.getFontScale() * 16 * value;
+};
+
 function rem(value) {
   if (reactNative.Platform.OS === 'web') {
     return value;
   }
 
-  return value.replace(transformREMUnitRE, function (_, unary, number) {
-    return "".concat(unary || '').concat(reactNative.PixelRatio.getFontScale() * 16 * number, "px");
+  return value.replace(transformREMUnitRE, function (_) {
+    var unary = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    var number = arguments.length > 2 ? arguments[2] : undefined;
+    return "".concat(unary).concat(convertRemToPx(number), "px");
   });
 }
 
-var valueRE = /^([+-]?(?:\d+|\d*\.\d+))([a-z]*|%)$/;
+var valueRE = /^([+-]?(?:\d+|\d*\.\d+))(rem|px|%)?$/;
 
-var parseValue = function parseValue(value) {
-  if (Array.isArray(value)) {
-    return value;
-  }
-
-  if (typeof value === 'number') {
-    return [value, null];
-  }
+var UnitValue = /*#__PURE__*/function () {
+  function UnitValue(value) {
+    var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'number';
 
-  var matchedValue = value.match(valueRE);
+    _classCallCheck(this, UnitValue);
 
-  if (matchedValue) {
-    return [parseFloat(value), matchedValue[2]];
-  }
+    _defineProperty(this, "value", void 0);
 
-  return [value, undefined];
-};
+    _defineProperty(this, "unit", void 0);
 
-var getUnit = function getUnit(left, right) {
-  if (!left && !right) {
-    return '';
+    this.value = value;
+    this.unit = unit;
   }
 
-  if (!left) {
-    return right;
-  }
+  _createClass(UnitValue, [{
+    key: "toPercentage",
+    value: function toPercentage() {
+      if (!['number', 'percent'].includes(this.unit)) {
+        throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
+      }
 
-  if (!right || left === right) {
-    return left;
-  }
+      if (this.unit === 'percent') {
+        return this.value / 100;
+      }
 
-  throw new Error("Different units ".concat(left, " and ").concat(right, " found for arithmetic operation."));
-};
+      return this.value;
+    }
+  }, {
+    key: "toNumber",
+    value: function toNumber() {
+      if (!['number', 'px', 'rem'].includes(this.unit)) {
+        throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
+      }
 
-var POWER = Math.pow(10, 8);
+      if (this.unit === 'rem') {
+        return this.value * reactNative.PixelRatio.getFontScale() * 16;
+      }
 
-var fixRounding = function fixRounding(value) {
-  return Math.round(value * POWER) / POWER;
-};
+      return this.value;
+    }
+  }, {
+    key: "toString",
+    value: function toString() {
+      return "".concat(this.value).concat(this.unit === 'number' ? '' : this.unit);
+    }
+  }], [{
+    key: "parse",
+    value: function parse(value) {
+      if (value instanceof UnitValue) {
+        return value;
+      }
 
-var calculateValue = function calculateValue(leftValue, operator, rightValue) {
-  if (operator === '+') {
-    return leftValue + rightValue;
-  }
+      if (typeof value === 'number') {
+        return new UnitValue(value, 'number');
+      }
 
-  if (operator === '-') {
-    return leftValue - rightValue;
-  }
+      var match = value.match(valueRE);
 
-  if (operator === '*') {
-    return fixRounding(leftValue * rightValue);
-  }
+      if (!match) {
+        throw new Error("Cannot parse number \"".concat(value, "\"."));
+      }
 
-  if (operator === '/') {
-    return fixRounding(leftValue / rightValue);
-  }
+      return new UnitValue(parseFloat(match[1]), match[2] === '%' ? 'percent' : match[2]);
+    }
+  }]);
 
-  if (operator === '%') {
-    return leftValue % rightValue;
-  }
+  return UnitValue;
+}();
 
-  throw new Error('Unknown operator.');
+var POWER = Math.pow(10, 8);
+
+var fixRounding = function fixRounding(value) {
+  return Math.round(value * POWER) / POWER;
 };
 
-function calculate(left, operator, right) {
-  var _parseValue = parseValue(left),
-      _parseValue2 = _slicedToArray(_parseValue, 2),
-      leftValue = _parseValue2[0],
-      leftUnit = _parseValue2[1];
+var calculateValue = function calculateValue(value1, operator, value2) {
+  switch (operator) {
+    case '+':
+      return value1 + value2;
 
-  var _parseValue3 = parseValue(right),
-      _parseValue4 = _slicedToArray(_parseValue3, 2),
-      rightValue = _parseValue4[0],
-      rightUnit = _parseValue4[1];
+    case '-':
+      return value1 - value2;
 
-  var unit = getUnit(leftUnit, rightUnit);
-  return "".concat(calculateValue(leftValue, operator, rightValue)).concat(unit);
-}
+    case '*':
+      return fixRounding(value1 * value2);
 
-var convertToREM = function convertToREM(value) {
-  var remValue = value / (reactNative.PixelRatio.getFontScale() * 16);
-  return [remValue, 'rem'];
-}; // Use calculateAdvanced for mixed px/rem units.
+    case '/':
+      return fixRounding(value1 / value2);
 
+    case '%':
+      return value1 % value2;
 
-function calculateAdvanced(left, operator, right) {
-  var parsedLeft = parseValue(left);
-
-  var _parsedLeft = _slicedToArray(parsedLeft, 2),
-      leftValue = _parsedLeft[0],
-      leftUnit = _parsedLeft[1];
+    default:
+      throw new Error('Unknown operator.');
+  }
+};
 
-  var parsedRight = parseValue(right);
+var pxToRem = function pxToRem(value) {
+  return value / (reactNative.PixelRatio.getFontScale() * 16);
+};
 
-  var _parsedRight = _slicedToArray(parsedRight, 2),
-      rightValue = _parsedRight[0],
-      rightUnit = _parsedRight[1];
+function calculate(value1, operator, value2) {
+  var number1 = UnitValue.parse(value1);
+  var number2 = UnitValue.parse(value2);
 
-  if (leftUnit === 'px' && rightUnit === 'rem') {
-    return calculate(convertToREM(leftValue), operator, parsedRight);
+  if (number1.unit === 'px' && number2.unit === 'rem') {
+    return "".concat(calculateValue(pxToRem(number1.value), operator, number2.value), "rem");
   }
 
-  if (leftUnit === 'rem' && rightUnit === 'px') {
-    return calculate(parsedLeft, operator, convertToREM(rightValue));
+  if (number1.unit === 'rem' && number2.unit === 'px') {
+    return "".concat(calculateValue(number1.value, operator, pxToRem(number2.value)), "rem");
   }
 
-  return calculate(parsedLeft, operator, parsedRight);
+  var unit = number1.unit === 'number' ? number2.unit : number1.unit;
+  return "".concat(calculateValue(number1.value, operator, number2.value)).concat(unit === 'number' ? '' : unit);
+}
+function normalizeNumber(value) {
+  return UnitValue.parse(value).toNumber();
 }
 
-var formulaRE = /([+-])?([\d.Ee]+)(rem|px)?\s*(\+|-|\*|%)\s*([+-])?([\d.Ee]+)(rem|px)?/g;
+var formulaRE = /([+-]+)?([\d.Ee]+)(rem|px|%)?\s*(\+|-|\*|%)\s*([+-]+)?([\d.Ee]+)(rem|px|%)?/g;
 
 function formula(value) {
   // Naïve approach to calculate simple formulas.
@@ -770,22 +791,316 @@ function formula(value) {
   return value.replace(formulaRE, function (_) {
     var leftUnary = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     var leftNumber = arguments.length > 2 ? arguments[2] : undefined;
-    var leftUnit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    var leftUnit = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
     var operator = arguments.length > 4 ? arguments[4] : undefined;
     var rightUnary = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';
     var rightNumber = arguments.length > 6 ? arguments[6] : undefined;
-    var rightUnit = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-    var leftValue = [parseFloat("".concat(leftUnary).concat(leftNumber)), leftUnit];
-    var rightValue = [parseFloat("".concat(rightUnary).concat(rightNumber)), rightUnit];
+    var rightUnit = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : '';
+    var leftValue = "".concat(leftUnary).concat(leftNumber).concat(leftUnit);
+    var rightValue = "".concat(rightUnary).concat(rightNumber).concat(rightUnit);
     return calculate(leftValue, operator, rightValue);
   });
 }
 
+// Copied from https://github.com/styled-components/polished/blob/main/src/color/parseToRgb.js
+var hexRE = /^#[a-fA-F0-9]{6}$/;
+var hexRgbaRE = /^#[a-fA-F0-9]{8}$/;
+var shortHexRE = /^#[a-fA-F0-9]{3}$/;
+var shortRgbaHexRE = /^#[a-fA-F0-9]{4}$/;
+var rgbRE = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+var rgbaRE = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+var hslRE = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+var hslaRE = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i; // Copied from https://reactnative.dev/docs/colors
+// prettier-ignore
+
+var colorNames = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32'
+};
+
+var hslToRgb = function hslToRgb(h, s, l) {
+  var a = s * Math.min(l, 1 - l);
+
+  var f = function f(n) {
+    var k = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : (n + h / 30) % 12;
+    return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+  };
+
+  return [f(0), f(8), f(4)];
+};
+
+var RgbaValue = /*#__PURE__*/function () {
+  function RgbaValue(red, green, blue) {
+    var alpha = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+    _classCallCheck(this, RgbaValue);
+
+    _defineProperty(this, "red", void 0);
+
+    _defineProperty(this, "green", void 0);
+
+    _defineProperty(this, "blue", void 0);
+
+    _defineProperty(this, "alpha", void 0);
+
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+
+  _createClass(RgbaValue, [{
+    key: "toRgb",
+    value: function toRgb() {
+      return [this.red, this.green, this.blue];
+    }
+  }, {
+    key: "toRgba",
+    value: function toRgba() {
+      return [].concat(_toConsumableArray(this.toRgb()), [this.alpha]);
+    }
+  }, {
+    key: "toHex",
+    value: function toHex() {
+      var _this$toRgb = this.toRgb(),
+          _this$toRgb2 = _toArray(_this$toRgb),
+          values = _this$toRgb2.slice(0);
+
+      if (this.alpha < 1) {
+        values.push(this.alpha);
+      }
+
+      return "#".concat(values.map(function (x) {
+        var hex = x.toString(16);
+        return hex.length === 1 ? "0".concat(hex) : hex;
+      }).join(''));
+    }
+  }], [{
+    key: "parse",
+    value: function parse(value) {
+      if (value instanceof RgbaValue) {
+        return value;
+      }
+
+      var color = colorNames[value] || value; // Handle hex value
+
+      var hexMatch = color.match(hexRE) || color.match(hexRgbaRE) || color.match(shortHexRE) || color.match(shortRgbaHexRE);
+
+      if (hexMatch) {
+        var params = (hexMatch[0].length <= 4 ? hexMatch[0].match(/\w/g).map(function (x) {
+          return "".concat(x).concat(x);
+        }) : hexMatch[0].match(/\w\w/g)).map(function (hex, key) {
+          var x = parseInt(hex, 16);
+          var alpha = key === 3;
+          return alpha ? (x / 255).toFixed(2) : x;
+        });
+        return _construct(RgbaValue, _toConsumableArray(params));
+      } // Handle rgb(a) value
+
+
+      var rgbMatch = color.match(rgbRE) || color.match(rgbaRE);
+
+      if (rgbMatch) {
+        var _params = rgbMatch.slice(1).map(function (x, key) {
+          var alpha = key === 3;
+          return alpha ? parseFloat(x) : parseInt(x, 10);
+        });
+
+        return _construct(RgbaValue, _toConsumableArray(_params));
+      } // Handle hsl(a) value
+
+
+      var hslMatch = color.match(hslRE) || color.match(hslaRE);
+
+      if (hslMatch) {
+        var h = parseInt(hslMatch[1], 10);
+        var s = parseInt(hslMatch[2], 10) / 100;
+        var l = parseInt(hslMatch[3], 10) / 100;
+        var alpha = hslMatch[4] && parseFloat(hslMatch[4]);
+        return _construct(RgbaValue, [].concat(_toConsumableArray(hslToRgb(h, s, l)), [alpha]));
+      }
+
+      throw new Error("Unknown color \"".concat(value, "\"."));
+    }
+  }]);
+
+  return RgbaValue;
+}();
+
+function rgba$1(value, alpha) {
+  var color = RgbaValue.parse(value);
+  return "rgba(".concat(color.red, ",").concat(color.green, ",").concat(color.blue, ",").concat(alpha, ")");
+} // Sass equivalent
+
+function opacity(value) {
+  return RgbaValue.parse(value).alpha;
+} // Sass equivalent
+
+function mix(color1, color2) {
+  var weight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
+  var rgb1 = RgbaValue.parse(color1).toRgb();
+  var rgb2 = RgbaValue.parse(color2).toRgb();
+  var percentage = UnitValue.parse(weight).toPercentage();
+
+  var _rgb1$map = rgb1.map(function (value, key) {
+    return Math.round(rgb2[key] + (value - rgb2[key]) * percentage);
+  }),
+      _rgb1$map2 = _slicedToArray(_rgb1$map, 3),
+      r = _rgb1$map2[0],
+      g = _rgb1$map2[1],
+      b = _rgb1$map2[2];
+
+  return new RgbaValue(r, g, b).toHex();
+}
+
 var transformRgbaRE = /rgba\(\s*([#0-9a-z]+)\s*,\s*([\d.Ee]+)\s*\)/g;
 
 function rgba(value) {
-  return value.replace(transformRgbaRE, function (_, color, alpha) {
-    return polished.rgba(color, Number(alpha));
+  return value.replace(transformRgbaRE, function (_, hex, alpha) {
+    return rgba$1(hex, alpha);
   });
 }
 
@@ -1113,15 +1428,19 @@ function createStyle(definitions) {
       var active = platformDefinitions[key].scopes.every(function (scope) {
         if (scope.type === 'selector') {
           if (scope.name === 'hover') {
-            return interaction && interaction.hovered;
+            return interaction && interaction.hover;
           }
 
           if (scope.name === 'focus') {
-            return interaction && interaction.focused;
+            return interaction && interaction.focus;
+          }
+
+          if (scope.name === 'focus-visible') {
+            return interaction && interaction.focusVisible;
           }
 
           if (scope.name === 'active') {
-            return interaction && interaction.pressed;
+            return interaction && interaction.active;
           }
         }
 
@@ -1224,20 +1543,16 @@ function getElementId(identifier, name) {
   return "".concat(identifier).concat(name ? "-".concat(name) : '');
 }
 function transformPlacement$1(placement) {
-  if (placement === 'left') {
-    return reactNative.I18nManager.isRTL ? 'end' : 'start';
-  }
+  switch (placement) {
+    case 'left':
+      return reactNative.I18nManager.isRTL ? 'end' : 'start';
 
-  if (placement === 'right') {
-    return reactNative.I18nManager.isRTL ? 'start' : 'end';
-  }
+    case 'right':
+      return reactNative.I18nManager.isRTL ? 'start' : 'end';
 
-  return placement;
-}
-function convertToNumber(value) {
-  return parseFloat(value.replace(/([+-])?([\d.Ee]+)rem/g, function (_, unary, number) {
-    return "".concat(unary || '').concat(reactNative.PixelRatio.getFontScale() * 16 * number, "px");
-  }));
+    default:
+      return placement;
+  }
 }
 
 // keys, but not the resolved values. The values are added later by the used
@@ -2113,8 +2428,7 @@ var fn = function fn(handle) {
 
     return function (t) {
       var input = args.map(function (arg) {
-        var value = typeof arg === 'function' ? arg(t) : arg;
-        return value;
+        return typeof arg === 'function' ? arg(t) : arg;
       });
       return handle(input, t);
     };
@@ -2143,28 +2457,31 @@ var escapeSvg = function escapeSvg(string) {
   return string.startsWith('url(') ? "url(\"".concat(strReplace(string.slice(5, -2)), "\")") : strReplace(string);
 }; // Color contrast
 // A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// prettier-ignore
 
 var luminanceList = [0.0008, 0.001, 0.0011, 0.0013, 0.0015, 0.0017, 0.002, 0.0022, 0.0025, 0.0027, 0.003, 0.0033, 0.0037, 0.004, 0.0044, 0.0048, 0.0052, 0.0056, 0.006, 0.0065, 0.007, 0.0075, 0.008, 0.0086, 0.0091, 0.0097, 0.0103, 0.011, 0.0116, 0.0123, 0.013, 0.0137, 0.0144, 0.0152, 0.016, 0.0168, 0.0176, 0.0185, 0.0194, 0.0203, 0.0212, 0.0222, 0.0232, 0.0242, 0.0252, 0.0262, 0.0273, 0.0284, 0.0296, 0.0307, 0.0319, 0.0331, 0.0343, 0.0356, 0.0369, 0.0382, 0.0395, 0.0409, 0.0423, 0.0437, 0.0452, 0.0467, 0.0482, 0.0497, 0.0513, 0.0529, 0.0545, 0.0561, 0.0578, 0.0595, 0.0612, 0.063, 0.0648, 0.0666, 0.0685, 0.0704, 0.0723, 0.0742, 0.0762, 0.0782, 0.0802, 0.0823, 0.0844, 0.0865, 0.0887, 0.0908, 0.0931, 0.0953, 0.0976, 0.0999, 0.1022, 0.1046, 0.107, 0.1095, 0.1119, 0.1144, 0.117, 0.1195, 0.1221, 0.1248, 0.1274, 0.1301, 0.1329, 0.1356, 0.1384, 0.1413, 0.1441, 0.147, 0.15, 0.1529, 0.1559, 0.159, 0.162, 0.1651, 0.1683, 0.1714, 0.1746, 0.1779, 0.1812, 0.1845, 0.1878, 0.1912, 0.1946, 0.1981, 0.2016, 0.2051, 0.2086, 0.2122, 0.2159, 0.2195, 0.2232, 0.227, 0.2307, 0.2346, 0.2384, 0.2423, 0.2462, 0.2502, 0.2542, 0.2582, 0.2623, 0.2664, 0.2705, 0.2747, 0.2789, 0.2831, 0.2874, 0.2918, 0.2961, 0.3005, 0.305, 0.3095, 0.314, 0.3185, 0.3231, 0.3278, 0.3325, 0.3372, 0.3419, 0.3467, 0.3515, 0.3564, 0.3613, 0.3663, 0.3712, 0.3763, 0.3813, 0.3864, 0.3916, 0.3968, 0.402, 0.4072, 0.4125, 0.4179, 0.4233, 0.4287, 0.4342, 0.4397, 0.4452, 0.4508, 0.4564, 0.4621, 0.4678, 0.4735, 0.4793, 0.4851, 0.491, 0.4969, 0.5029, 0.5089, 0.5149, 0.521, 0.5271, 0.5333, 0.5395, 0.5457, 0.552, 0.5583, 0.5647, 0.5711, 0.5776, 0.5841, 0.5906, 0.5972, 0.6038, 0.6105, 0.6172, 0.624, 0.6308, 0.6376, 0.6445, 0.6514, 0.6584, 0.6654, 0.6724, 0.6795, 0.6867, 0.6939, 0.7011, 0.7084, 0.7157, 0.7231, 0.7305, 0.7379, 0.7454, 0.7529, 0.7605, 0.7682, 0.7758, 0.7835, 0.7913, 0.7991, 0.807, 0.8148, 0.8228, 0.8308, 0.8388, 0.8469, 0.855, 0.8632, 0.8714, 0.8796, 0.8879, 0.8963, 0.9047, 0.9131, 0.9216, 0.9301, 0.9387, 0.9473, 0.956, 0.9647, 0.9734, 0.9823, 0.9911, 1]; // Return WCAG2.0 relative luminance
 // See https://www.w3.org/WAI/GL/wiki/Relative_luminance
 // See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
 
 var luminance = function luminance(color) {
-  var rgb = polished.parseToRgb(color);
-  Object.entries(rgb).forEach(function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        name = _ref4[0],
-        value = _ref4[1];
+  var rgb = RgbaValue.parse(color).toRgb();
 
-    rgb[name] = value / 255 < 0.03928 ? value / 255 / 12.92 : luminanceList[value];
-  });
-  return rgb.red * 0.2126 + rgb.green * 0.7152 + rgb.blue * 0.0722;
+  var _rgb$map = rgb.map(function (value) {
+    return value / 255 < 0.04045 ? value / 255 / 12.92 : luminanceList[value];
+  }),
+      _rgb$map2 = _slicedToArray(_rgb$map, 3),
+      red = _rgb$map2[0],
+      green = _rgb$map2[1],
+      blue = _rgb$map2[2];
+
+  return red * 0.2126 + green * 0.7152 + blue * 0.0722;
 }; // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 
 
 var opaque = function opaque(background, foreground) {
-  var opacity = polished.parseToRgb(foreground).alpha || 1;
-  return polished.mix(opacity, polished.rgba(foreground, 1), background);
+  var foregroundRgba = RgbaValue.parse(foreground);
+  return mix(rgba$1(foregroundRgba, 1), background, opacity(foregroundRgba));
 };
 
 var contrastRatio = function contrastRatio(background, foreground) {
@@ -2173,9 +2490,9 @@ var contrastRatio = function contrastRatio(background, foreground) {
   return l1 > l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
 };
 
-var colorContrast = fn(function (_ref5, t) {
-  var _ref6 = _slicedToArray(_ref5, 1),
-      background = _ref6[0];
+var colorContrast = fn(function (_ref3, t) {
+  var _ref4 = _slicedToArray(_ref3, 1),
+      background = _ref4[0];
 
   var foregrounds = [t['color-contrast-light'], t['color-contrast-dark'], t.white, t.black];
   var maxRatio = 0;
@@ -2204,34 +2521,35 @@ var colorContrast = fn(function (_ref5, t) {
   return maxRatioColor;
 }); // Tint a color: mix a color with white
 
-var tintColor = fn(function (_ref7, t) {
-  var _ref8 = _slicedToArray(_ref7, 2),
-      weight = _ref8[0],
-      color = _ref8[1];
+var tintColor = fn(function (_ref5, t) {
+  var _ref6 = _slicedToArray(_ref5, 2),
+      color = _ref6[0],
+      weight = _ref6[1];
 
-  return polished.mix(weight, t.white, color);
+  return mix(t.white, color, weight);
 }); // Shade a color: mix a color with black
 
-var shadeColor = fn(function (_ref9, t) {
-  var _ref10 = _slicedToArray(_ref9, 2),
-      weight = _ref10[0],
-      color = _ref10[1];
+var shadeColor = fn(function (_ref7, t) {
+  var _ref8 = _slicedToArray(_ref7, 2),
+      color = _ref8[0],
+      weight = _ref8[1];
 
-  return polished.mix(weight, t.black, color);
+  return mix(t.black, color, weight);
 }); // Shade the color if the weight is positive, else tint it
 
-var shiftColor = fn(function (_ref11, t) {
-  var _ref12 = _slicedToArray(_ref11, 2),
-      weight = _ref12[0],
-      color = _ref12[1];
+var shiftColor = fn(function (_ref9, t) {
+  var _ref10 = _slicedToArray(_ref9, 2),
+      color = _ref10[0],
+      weight = _ref10[1];
 
-  var handle = weight > 0 ? shadeColor(weight, color) : tintColor(-weight, color);
+  var percentage = UnitValue.parse(weight).toPercentage();
+  var handle = percentage > 0 ? shadeColor(color, percentage) : tintColor(color, -percentage);
   return handle(t);
 });
-var add = fn(function (_ref13) {
-  var _ref14 = _slicedToArray(_ref13, 2),
-      value1 = _ref14[0],
-      value2 = _ref14[1];
+var add = fn(function (_ref11) {
+  var _ref12 = _slicedToArray(_ref11, 2),
+      value1 = _ref12[0],
+      value2 = _ref12[1];
 
   if (value1 === null) {
     return value2;
@@ -2241,12 +2559,12 @@ var add = fn(function (_ref13) {
     return value1;
   }
 
-  return calculateAdvanced(value1, '+', value2);
+  return calculate(value1, '+', value2);
 });
-var subtract = fn(function (_ref15) {
-  var _ref16 = _slicedToArray(_ref15, 2),
-      value1 = _ref16[0],
-      value2 = _ref16[1];
+var subtract = fn(function (_ref13) {
+  var _ref14 = _slicedToArray(_ref13, 2),
+      value1 = _ref14[0],
+      value2 = _ref14[1];
 
   if (value1 === null && value2 === null) {
     return null;
@@ -2260,12 +2578,12 @@ var subtract = fn(function (_ref15) {
     return value1;
   }
 
-  return calculateAdvanced(value1, '-', value2);
+  return calculate(value1, '-', value2);
 });
-var divide = fn(function (_ref17) {
-  var _ref18 = _slicedToArray(_ref17, 2),
-      dividend = _ref18[0],
-      divisor = _ref18[1];
+var divide = fn(function (_ref15) {
+  var _ref16 = _slicedToArray(_ref15, 2),
+      dividend = _ref16[0],
+      divisor = _ref16[1];
 
   if (Math.abs(parseFloat(dividend)) === 0) {
     return 0;
@@ -2275,7 +2593,7 @@ var divide = fn(function (_ref17) {
     throw new Error('Cannot divide by 0');
   }
 
-  return calculateAdvanced(dividend, '/', divisor);
+  return calculate(dividend, '/', divisor);
 });
 /* eslint-enable */
 
@@ -2289,7 +2607,7 @@ var url = function url(val) {
   };
 };
 
-var variables = css(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteral(["\n  // Color system\n\n  $white: #fff;\n  $gray-100: #f8f9fa;\n  $gray-200: #e9ecef;\n  $gray-300: #dee2e6;\n  $gray-400: #ced4da;\n  $gray-500: #adb5bd;\n  $gray-600: #6c757d;\n  $gray-700: #495057;\n  $gray-800: #343a40;\n  $gray-900: #212529;\n  $black: #000;\n\n  $grays: ", ";\n\n  $blue: #0d6efd;\n  $indigo: #6610f2;\n  $purple: #6f42c1;\n  $pink: #d63384;\n  $red: #dc3545;\n  $orange: #fd7e14;\n  $yellow: #ffc107;\n  $green: #198754;\n  $teal: #20c997;\n  $cyan: #0dcaf0;\n\n  $colors: ", ";\n\n  $primary: $blue;\n  $secondary: $gray-600;\n  $success: $green;\n  $info: $cyan;\n  $warning: $yellow;\n  $danger: $red;\n  $light: $gray-100;\n  $dark: $gray-900;\n\n  $theme-colors: ", ";\n\n  // The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n  // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n  $min-contrast-ratio: 4.5;\n\n  // Customize the light and dark text colors for use in our color contrast function.\n  $color-contrast-dark: $black;\n  $color-contrast-light: $white;\n\n  $blue-100: tint-color($blue, 80%);\n  $blue-200: tint-color($blue, 60%);\n  $blue-300: tint-color($blue, 40%);\n  $blue-400: tint-color($blue, 20%);\n  $blue-500: $blue;\n  $blue-600: shade-color($blue, 20%);\n  $blue-700: shade-color($blue, 40%);\n  $blue-800: shade-color($blue, 60%);\n  $blue-900: shade-color($blue, 80%);\n\n  $indigo-100: tint-color($indigo, 80%);\n  $indigo-200: tint-color($indigo, 60%);\n  $indigo-300: tint-color($indigo, 40%);\n  $indigo-400: tint-color($indigo, 20%);\n  $indigo-500: $indigo;\n  $indigo-600: shade-color($indigo, 20%);\n  $indigo-700: shade-color($indigo, 40%);\n  $indigo-800: shade-color($indigo, 60%);\n  $indigo-900: shade-color($indigo, 80%);\n\n  $purple-100: tint-color($purple, 80%);\n  $purple-200: tint-color($purple, 60%);\n  $purple-300: tint-color($purple, 40%);\n  $purple-400: tint-color($purple, 20%);\n  $purple-500: $purple;\n  $purple-600: shade-color($purple, 20%);\n  $purple-700: shade-color($purple, 40%);\n  $purple-800: shade-color($purple, 60%);\n  $purple-900: shade-color($purple, 80%);\n\n  $pink-100: tint-color($pink, 80%);\n  $pink-200: tint-color($pink, 60%);\n  $pink-300: tint-color($pink, 40%);\n  $pink-400: tint-color($pink, 20%);\n  $pink-500: $pink;\n  $pink-600: shade-color($pink, 20%);\n  $pink-700: shade-color($pink, 40%);\n  $pink-800: shade-color($pink, 60%);\n  $pink-900: shade-color($pink, 80%);\n\n  $red-100: tint-color($red, 80%);\n  $red-200: tint-color($red, 60%);\n  $red-300: tint-color($red, 40%);\n  $red-400: tint-color($red, 20%);\n  $red-500: $red;\n  $red-600: shade-color($red, 20%);\n  $red-700: shade-color($red, 40%);\n  $red-800: shade-color($red, 60%);\n  $red-900: shade-color($red, 80%);\n\n  $orange-100: tint-color($orange, 80%);\n  $orange-200: tint-color($orange, 60%);\n  $orange-300: tint-color($orange, 40%);\n  $orange-400: tint-color($orange, 20%);\n  $orange-500: $orange;\n  $orange-600: shade-color($orange, 20%);\n  $orange-700: shade-color($orange, 40%);\n  $orange-800: shade-color($orange, 60%);\n  $orange-900: shade-color($orange, 80%);\n\n  $yellow-100: tint-color($yellow, 80%);\n  $yellow-200: tint-color($yellow, 60%);\n  $yellow-300: tint-color($yellow, 40%);\n  $yellow-400: tint-color($yellow, 20%);\n  $yellow-500: $yellow;\n  $yellow-600: shade-color($yellow, 20%);\n  $yellow-700: shade-color($yellow, 40%);\n  $yellow-800: shade-color($yellow, 60%);\n  $yellow-900: shade-color($yellow, 80%);\n\n  $green-100: tint-color($green, 80%);\n  $green-200: tint-color($green, 60%);\n  $green-300: tint-color($green, 40%);\n  $green-400: tint-color($green, 20%);\n  $green-500: $green;\n  $green-600: shade-color($green, 20%);\n  $green-700: shade-color($green, 40%);\n  $green-800: shade-color($green, 60%);\n  $green-900: shade-color($green, 80%);\n\n  $teal-100: tint-color($teal, 80%);\n  $teal-200: tint-color($teal, 60%);\n  $teal-300: tint-color($teal, 40%);\n  $teal-400: tint-color($teal, 20%);\n  $teal-500: $teal;\n  $teal-600: shade-color($teal, 20%);\n  $teal-700: shade-color($teal, 40%);\n  $teal-800: shade-color($teal, 60%);\n  $teal-900: shade-color($teal, 80%);\n\n  $cyan-100: tint-color($cyan, 80%);\n  $cyan-200: tint-color($cyan, 60%);\n  $cyan-300: tint-color($cyan, 40%);\n  $cyan-400: tint-color($cyan, 20%);\n  $cyan-500: $cyan;\n  $cyan-600: shade-color($cyan, 20%);\n  $cyan-700: shade-color($cyan, 40%);\n  $cyan-800: shade-color($cyan, 60%);\n  $cyan-900: shade-color($cyan, 80%);\n\n  $blues: ", ";\n\n  $indigos: ", ";\n\n  $purples: ", ";\n\n  $pinks: ", ";\n\n  $reds: ", ";\n\n  $oranges: ", ";\n\n  $yellows: ", ";\n\n  $greens: ", ";\n\n  $teals: ", ";\n\n  $cyans: ", ";\n\n  // Characters which are escaped by the escape-svg function\n  // $escaped characters\n\n  // Options\n  //\n  // Quickly modify global styling by enabling or disabling optional features.\n\n  // NOTE: Handled by JavaScript.\n\n  // Gradient\n  //\n  // The gradient which is added to components if \"$enable-gradients\" is \"true\"\n  // This gradient is also added to elements with \".bg-gradient\"\n  $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));\n\n  // Spacing\n  //\n  // Control the default styling of most Bootstrap elements by modifying these\n  // variables. Mostly focused on spacing.\n  // You can add more entries to the $spacers map, should you need more variation.\n\n  $spacer: 1rem;\n  $spacers: ", ";\n\n  // Position\n  //\n  // Define the edge positioning anchors of the position utilities.\n\n  $position-values: ", ";\n\n  // Placeholder\n\n  $placeholder-opacity-max: 0.5;\n  $placeholder-opacity-min: 0.2;\n\n  // Body\n  //\n  // Settings for the \"<body>\" element.\n\n  $body-bg: $white;\n  $body-color: $gray-900;\n  $body-text-align: null;\n\n  // Links\n  //\n  // Style anchor elements.\n\n  $link-color: $primary;\n  $link-decoration: underline;\n  $link-shade-percentage: 0.2; // 20%;\n  $link-hover-color: ", ";\n  $link-hover-decoration: null;\n\n  $stretched-link-pseudo-element: after;\n  $stretched-link-z-index: 1;\n\n  // Paragraphs\n  //\n  // Style p element.\n\n  $paragraph-margin-bottom: 1rem;\n\n  // Grid breakpoints\n  //\n  // Define the minimum dimensions at which your layout will change,\n  // adapting to different screen sizes, for use in media queries.\n\n  $grid-breakpoints: ", ";\n\n  // Grid containers\n  //\n  // Define the maximum width of \".container\" for different screen sizes.\n\n  $container-max-widths: ", ";\n\n  // Grid columns\n  //\n  // Set the number of columns and specify the width of the gutters.\n\n  // $grid-columns: 12;\n  $grid-gutter-width: 1.5rem;\n  // $grid-row-columns: 6;\n\n  // Container padding\n\n  $container-padding-x: $grid-gutter-width * 0.5;\n\n  // Components\n  //\n  // Define common padding and border radius sizes and more.\n\n  $border-width: 1px;\n  $border-widths: ", ";\n\n  $border-color: $gray-300;\n\n  $border-radius: 0.25rem;\n  $border-radius-sm: 0.2rem;\n  $border-radius-lg: 0.3rem;\n  $border-radius-pill: 50rem;\n\n  $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);\n  $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);\n  $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);\n  $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);\n\n  $component-active-color: $white;\n  $component-active-bg: $primary;\n\n  $caret-width: 1rem * 0.3; // 0.3em;\n  $caret-vertical-align: $caret-width * 0.85;\n  $caret-spacing: $caret-width * 0.85;\n\n  $transition-base: all 0.2s ease-in-out;\n  $transition-fade: opacity 0.15s linear;\n  $transition-collapse: height 0.35s ease;\n  $transition-collapse-width: width 0.35s ease;\n\n  $aspect-ratios: ", ";\n\n  // Typography\n  //\n  // Font, line-height, and color for body text, headings, and more.\n\n  $font-family-sans-serif: ", ";\n  $font-family-monospace: ", ";\n  $font-family-base: $font-family-sans-serif;\n  $font-family-code: $font-family-monospace;\n\n  // $font-size-root affects the value of \"rem\", which is used for as well font sizes, paddings, and margins\n  // $font-size-base affects the font size of the body text\n  $font-size-root: null;\n  $font-size-base: 1rem; // Assumes the browser default, typically \"16px\"\n  $font-size-sm: $font-size-base * 0.875;\n  $font-size-lg: $font-size-base * 1.25;\n\n  $font-weight-lighter: 300; // lighter;\n  $font-weight-light: 300;\n  $font-weight-normal: 400;\n  $font-weight-bold: 700;\n  $font-weight-bolder: 500; // bolder;\n\n  $font-weight-base: $font-weight-normal;\n\n  $line-height-base: 1.5;\n  $line-height-sm: 1.25;\n  $line-height-lg: 2;\n\n  $h1-font-size: $font-size-base * 2.5;\n  $h2-font-size: $font-size-base * 2;\n  $h3-font-size: $font-size-base * 1.75;\n  $h4-font-size: $font-size-base * 1.5;\n  $h5-font-size: $font-size-base * 1.25;\n  $h6-font-size: $font-size-base;\n\n  $font-sizes: ", ";\n\n  $headings-margin-bottom: $spacer * 0.5;\n  $headings-font-family: null;\n  $headings-font-style: null;\n  $headings-font-weight: 500;\n  $headings-line-height: 1.2;\n  $headings-color: null;\n\n  $display-font-sizes: ", ";\n\n  $display-font-weight: 300;\n  $display-line-height: $headings-line-height;\n\n  $lead-font-size: $font-size-base * 1.25;\n  $lead-font-weight: 300;\n\n  $small-font-size: $font-size-base * 0.875; // 0.875em;\n\n  $sub-sup-font-size: $font-size-base * 0.75; // 0.75em;\n\n  $text-muted: $gray-600;\n\n  $initialism-font-size: $small-font-size;\n\n  $blockquote-margin-y: $spacer;\n  $blockquote-font-size: $font-size-base * 1.25;\n  $blockquote-footer-color: $gray-600;\n  $blockquote-footer-font-size: $small-font-size;\n\n  $hr-margin-y: $spacer;\n  $hr-color: inherit;\n  $hr-bg-color: currentColor;\n  $hr-border-width: 0;\n  $hr-height: $border-width;\n  $hr-opacity: 0.25;\n\n  $legend-margin-bottom: 0.5rem;\n  $legend-font-size: 1.5rem;\n  $legend-font-weight: null;\n\n  $mark-padding: $font-size-base * 0.2; // 0.2em;\n\n  $dt-font-weight: $font-weight-bold;\n\n  $nested-kbd-font-weight: $font-weight-bold;\n\n  $list-inline-padding: 0.5rem;\n\n  $mark-bg: #fcf8e3;\n\n  // ...\n\n  // Buttons + Forms\n  //\n  // Shared variables that are reassigned to \"$input-\" and \"$btn-\" specific variables.\n\n  $input-btn-padding-y: 0.375rem;\n  $input-btn-padding-x: 0.75rem;\n  $input-btn-font-family: null;\n  $input-btn-font-size: $font-size-base;\n  $input-btn-line-height: $line-height-base;\n\n  $input-btn-focus-width: 0.25rem;\n  $input-btn-focus-color-opacity: 0.25;\n  $input-btn-focus-color: rgba(\n    $component-active-bg,\n    $input-btn-focus-color-opacity\n  );\n  $input-btn-focus-blur: 0;\n  $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width\n    $input-btn-focus-color;\n\n  $input-btn-padding-y-sm: 0.25rem;\n  $input-btn-padding-x-sm: 0.5rem;\n  $input-btn-font-size-sm: $font-size-sm;\n\n  $input-btn-padding-y-lg: 0.5rem;\n  $input-btn-padding-x-lg: 1rem;\n  $input-btn-font-size-lg: $font-size-lg;\n\n  $input-btn-border-width: $border-width;\n\n  // Buttons\n  //\n  // For each of Bootstrap's buttons, define text, background, and border color.\n\n  $btn-padding-y: $input-btn-padding-y;\n  $btn-padding-x: $input-btn-padding-x;\n  $btn-font-family: $input-btn-font-family;\n  $btn-font-size: $input-btn-font-size;\n  $btn-line-height: $input-btn-line-height;\n  $btn-white-space: null; // Set to \"nowrap\" to prevent text wrapping\n\n  $btn-padding-y-sm: $input-btn-padding-y-sm;\n  $btn-padding-x-sm: $input-btn-padding-x-sm;\n  $btn-font-size-sm: $input-btn-font-size-sm;\n\n  $btn-padding-y-lg: $input-btn-padding-y-lg;\n  $btn-padding-x-lg: $input-btn-padding-x-lg;\n  $btn-font-size-lg: $input-btn-font-size-lg;\n\n  $btn-border-width: $input-btn-border-width;\n\n  $btn-font-weight: $font-weight-normal;\n  $btn-box-shadow: inset 0 1px 0 rgba($white, 0.15),\n    0 1px 1px rgba($black, 0.075);\n  $btn-focus-width: $input-btn-focus-width;\n  $btn-focus-box-shadow: $input-btn-focus-box-shadow;\n  $btn-disabled-opacity: 0.65;\n  $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);\n\n  $btn-link-color: $link-color;\n  $btn-link-hover-color: $link-hover-color;\n  $btn-link-disabled-color: $gray-600;\n\n  // Allows for customizing button radius independently from global border radius\n  $btn-border-radius: $border-radius;\n  $btn-border-radius-sm: $border-radius-sm;\n  $btn-border-radius-lg: $border-radius-lg;\n\n  $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n  $btn-hover-bg-shade-amount: 0.15; // 15%;\n  $btn-hover-bg-tint-amount: 0.15; // 15%;\n  $btn-hover-border-shade-amount: 0.2; // 20%;\n  $btn-hover-border-tint-amount: 0.1; // 10%;\n  $btn-active-bg-shade-amount: 0.2; // 20%;\n  $btn-active-bg-tint-amount: 0.2; // 20%;\n  $btn-active-border-shade-amount: 0.25; // 25%;\n  $btn-active-border-tint-amount: 0.1; // 10%;\n\n  // Breadcrumb\n\n  $breadcrumb-font-size: $font-size-base; // null;\n  $breadcrumb-padding-y: 0;\n  $breadcrumb-padding-x: 0;\n  $breadcrumb-item-padding-x: 0.5rem;\n  $breadcrumb-margin-bottom: 1rem;\n  $breadcrumb-bg: null;\n  $breadcrumb-divider-color: $gray-600;\n  $breadcrumb-active-color: $gray-600;\n  $breadcrumb-divider: ", "; // quote('/');\n  $breadcrumb-divider-flipped: $breadcrumb-divider;\n  $breadcrumb-border-radius: null;\n\n  // Forms\n\n  $form-text-margin-top: 0.25rem;\n  $form-text-font-size: $small-font-size;\n  $form-text-font-style: null;\n  $form-text-font-weight: null;\n  $form-text-color: $text-muted;\n\n  $form-label-margin-bottom: 0.5rem;\n  $form-label-font-size: $font-size-base; // null;\n  $form-label-font-style: null;\n  $form-label-font-weight: null;\n  $form-label-color: null;\n\n  $input-padding-y: $input-btn-padding-y;\n  $input-padding-x: $input-btn-padding-x;\n  $input-font-family: $input-btn-font-family;\n  $input-font-size: $input-btn-font-size;\n  $input-font-weight: $font-weight-base;\n  $input-line-height: $input-btn-line-height;\n\n  $input-padding-y-sm: $input-btn-padding-y-sm;\n  $input-padding-x-sm: $input-btn-padding-x-sm;\n  $input-font-size-sm: $input-btn-font-size-sm;\n\n  $input-padding-y-lg: $input-btn-padding-y-lg;\n  $input-padding-x-lg: $input-btn-padding-x-lg;\n  $input-font-size-lg: $input-btn-font-size-lg;\n\n  $input-bg: $body-bg;\n  $input-disabled-bg: $gray-200;\n  $input-disabled-border-color: null;\n\n  $input-color: $body-color;\n  $input-border-color: $gray-400;\n  $input-border-width: $input-btn-border-width;\n  $input-box-shadow: $box-shadow-inset;\n\n  $input-border-radius: $border-radius;\n  $input-border-radius-sm: $border-radius-sm;\n  $input-border-radius-lg: $border-radius-lg;\n\n  $input-focus-bg: $input-bg;\n  $input-focus-border-color: ", ";\n  $input-focus-color: $input-color;\n  $input-focus-width: $input-btn-focus-width;\n  $input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n  $input-placeholder-color: $gray-600;\n  $input-plaintext-color: $body-color;\n\n  $input-height-border: $input-border-width * 2;\n\n  $input-height-inner: ", ";\n  $input-height-inner-half: ", ";\n  $input-height-inner-quarter: ", ";\n\n  $input-height: ", ";\n  $input-height-sm: ", ";\n  $input-height-lg: ", ";\n\n  $input-transition: border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  $form-color-width: 3rem;\n\n  $form-check-input-width: $font-size-base * 1; // 1em;\n  $form-check-min-height: $font-size-base * $line-height-base;\n  $form-check-padding-start: $form-check-input-width + 0.5rem; // 0.5em;\n  $form-check-margin-bottom: 0.125rem;\n  $form-check-label-color: null;\n  $form-check-label-cursor: null;\n  $form-check-transition: null;\n\n  $form-check-input-active-filter: brightness(90%);\n\n  $form-check-input-bg: $input-bg;\n  $form-check-input-border: 1px solid rgba($black, 0.25);\n  $form-check-input-border-radius: $font-size-base * 0.25; // 0.25em;\n  $form-check-radio-border-radius: 50px; // 50%;\n  $form-check-input-focus-border: $input-focus-border-color;\n  $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n  $form-check-input-checked-color: $component-active-color;\n  $form-check-input-checked-bg-color: $component-active-bg;\n  $form-check-input-checked-border-color: $form-check-input-checked-bg-color;\n  $form-check-input-checked-bg-image: ", ";\n  $form-check-radio-checked-bg-image: ", ";\n\n  $form-check-input-indeterminate-color: $component-active-color;\n  $form-check-input-indeterminate-bg-color: $component-active-bg;\n  $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;\n  $form-check-input-indeterminate-bg-image: ", ";\n\n  $form-check-input-disabled-opacity: 0.5;\n  $form-check-label-disabled-opacity: $form-check-input-disabled-opacity;\n  $form-check-btn-check-disabled-opacity: $btn-disabled-opacity;\n\n  $form-check-inline-margin-end: 1rem;\n\n  $form-switch-color: rgba($black, 0.25);\n  $form-switch-width: 2rem;\n  $form-switch-padding-start: $form-switch-width + 0.5rem;\n  $form-switch-bg-image: ", ";\n  $form-switch-border-radius: $form-switch-width;\n  $form-switch-transition: background-position 0.15s ease-in-out;\n\n  $form-switch-focus-color: $input-focus-border-color;\n  $form-switch-focus-bg-image: ", ";\n\n  $form-switch-checked-color: $component-active-color;\n  $form-switch-checked-bg-image: ", ";\n  $form-switch-checked-bg-position: right center;\n\n  $input-group-addon-padding-y: $input-padding-y;\n  $input-group-addon-padding-x: $input-padding-x;\n  $input-group-addon-font-weight: $input-font-weight;\n  $input-group-addon-color: $input-color;\n  $input-group-addon-bg: $gray-200;\n  $input-group-addon-border-color: $input-border-color;\n\n  $form-select-padding-y: $input-padding-y;\n  $form-select-padding-x: $input-padding-x;\n  $form-select-font-family: $input-font-family;\n  $form-select-font-size: $input-font-size;\n  $form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image\n  $form-select-font-weight: $input-font-weight;\n  $form-select-line-height: $input-line-height;\n  $form-select-color: $input-color;\n  $form-select-bg: $input-bg;\n  $form-select-disabled-color: null;\n  $form-select-disabled-bg: $gray-200;\n  $form-select-disabled-border-color: $input-disabled-border-color;\n  $form-select-bg-position: right $form-select-padding-x center;\n  $form-select-bg-size: 16px 12px; // In pixels because image dimensions\n  $form-select-indicator-color: $gray-800;\n  $form-select-indicator: ", ";\n\n  $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +\n    $form-select-indicator-padding;\n  $form-select-feedback-icon-position: center right\n    $form-select-indicator-padding;\n  $form-select-feedback-icon-size: $input-height-inner-half\n    $input-height-inner-half;\n\n  $form-select-border-width: $input-border-width;\n  $form-select-border-color: $input-border-color;\n  $form-select-border-radius: $input-border-radius;\n  $form-select-box-shadow: $box-shadow-inset;\n\n  $form-select-focus-border-color: $input-focus-border-color;\n  $form-select-focus-width: $input-focus-width;\n  $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width\n    $input-btn-focus-color;\n\n  $form-select-padding-y-sm: $input-padding-y-sm;\n  $form-select-padding-x-sm: $input-padding-x-sm;\n  $form-select-font-size-sm: $input-font-size-sm;\n  $form-select-border-radius-sm: $input-border-radius-sm;\n\n  $form-select-padding-y-lg: $input-padding-y-lg;\n  $form-select-padding-x-lg: $input-padding-x-lg;\n  $form-select-font-size-lg: $input-font-size-lg;\n  $form-select-border-radius-lg: $input-border-radius-lg;\n\n  $form-select-transition: $input-transition;\n\n  $form-range-track-width: 100%;\n  $form-range-track-height: 0.5rem;\n  $form-range-track-cursor: pointer;\n  $form-range-track-bg: $gray-300;\n  $form-range-track-border-radius: 1rem;\n  $form-range-track-box-shadow: $box-shadow-inset;\n\n  $form-range-thumb-width: 1rem;\n  $form-range-thumb-height: $form-range-thumb-width;\n  $form-range-thumb-bg: $component-active-bg;\n  $form-range-thumb-border: 0;\n  $form-range-thumb-border-radius: 1rem;\n  $form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);\n  $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,\n    $input-focus-box-shadow;\n  $form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge\n  $form-range-thumb-active-bg: tint-color($component-active-bg, 70%);\n  $form-range-thumb-disabled-bg: $gray-500;\n  $form-range-thumb-transition: background-color 0.15s ease-in-out,\n    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n  $form-file-button-color: $input-color;\n  $form-file-button-bg: $input-group-addon-bg;\n  $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);\n\n  $form-floating-height: ", ";\n  $form-floating-line-height: 1.25;\n  $form-floating-padding-x: $input-padding-x;\n  $form-floating-padding-y: 1rem;\n  $form-floating-input-padding-t: 1.625rem;\n  $form-floating-input-padding-b: 0.625rem;\n  $form-floating-label-opacity: 0.65;\n  $form-floating-label-transform: scale(0.85) translateY(-0.5rem)\n    translateX(0.15rem);\n  $form-floating-transition: opacity 0.1s ease-in-out,\n    transform 0.1s ease-in-out;\n\n  // Form validation\n\n  $form-feedback-margin-top: $form-text-margin-top;\n  $form-feedback-font-size: $form-text-font-size;\n  $form-feedback-font-style: $form-text-font-style;\n  $form-feedback-valid-color: $success;\n  $form-feedback-invalid-color: $danger;\n\n  $form-feedback-icon-valid-color: $form-feedback-valid-color;\n  $form-feedback-icon-valid: ", ";\n  $form-feedback-icon-invalid-color: $form-feedback-invalid-color;\n  $form-feedback-icon-invalid: ", ";\n\n  $form-validation-states: ", ";\n\n  // Z-index master list\n  //\n  // Warning: Avoid customizing these values. They're used for a bird's eye view\n  // of components dependent on the z-axis and are designed to all work together.\n\n  $zindex-dropdown: 1000;\n  $zindex-sticky: 1020;\n  $zindex-fixed: 1030;\n  $zindex-offcanvas-backdrop: 1040;\n  $zindex-offcanvas: 1045;\n  $zindex-modal-backdrop: 1050;\n  $zindex-modal: 1055;\n  $zindex-popover: 1070;\n  $zindex-tooltip: 1080;\n\n  // Navs\n\n  $nav-link-padding-y: 0.5rem;\n  $nav-link-padding-x: 1rem;\n  $nav-link-font-size: null;\n  $nav-link-font-weight: null;\n  $nav-link-color: $link-color;\n  $nav-link-hover-color: $link-hover-color;\n  $nav-link-transition: color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n  $nav-link-disabled-color: $gray-600;\n\n  $nav-tabs-border-color: $gray-300;\n  $nav-tabs-border-width: $border-width;\n  $nav-tabs-border-radius: $border-radius;\n  $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;\n  $nav-tabs-link-active-color: $gray-700;\n  $nav-tabs-link-active-bg: $body-bg;\n  $nav-tabs-link-active-border-color: $gray-300 $gray-300\n    $nav-tabs-link-active-bg;\n\n  $nav-pills-border-radius: $border-radius;\n  $nav-pills-link-active-color: $component-active-color;\n  $nav-pills-link-active-bg: $component-active-bg;\n\n  // Navbar\n\n  $navbar-padding-y: $spacer * 0.5;\n  $navbar-padding-x: null;\n\n  $navbar-nav-link-padding-x: 0.5rem;\n\n  $navbar-brand-font-size: $font-size-lg;\n\n  $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y *\n    2;\n  $navbar-brand-height: $navbar-brand-font-size * $line-height-base;\n  $navbar-brand-padding-y-intermediate-result: $nav-link-height -\n    $navbar-brand-height;\n  $navbar-brand-padding-y: $navbar-brand-padding-y-intermediate-result * 0.5;\n  $navbar-brand-margin-end: 1rem;\n\n  $navbar-toggler-padding-y: 0.25rem;\n  $navbar-toggler-padding-x: 0.75rem;\n  $navbar-toggler-font-size: $font-size-lg;\n  $navbar-toggler-border-radius: $btn-border-radius;\n  $navbar-toggler-focus-width: $btn-focus-width;\n  $navbar-toggler-transition: box-shadow 0.15s ease-in-out;\n\n  $navbar-dark-color: rgba($white, 0.55);\n  $navbar-dark-hover-color: rgba($white, 0.75);\n  $navbar-dark-active-color: $white;\n  $navbar-dark-disabled-color: rgba($white, 0.25);\n  $navbar-dark-toggler-icon-bg: ", ";\n  $navbar-dark-toggler-border-color: rgba($white, 0.1);\n\n  $navbar-light-color: rgba($black, 0.55);\n  $navbar-light-hover-color: rgba($black, 0.7);\n  $navbar-light-active-color: rgba($black, 0.9);\n  $navbar-light-disabled-color: rgba($black, 0.3);\n  $navbar-light-toggler-icon-bg: ", ";\n  $navbar-light-toggler-border-color: rgba($black, 0.1);\n\n  $navbar-light-brand-color: $navbar-light-active-color;\n  $navbar-light-brand-hover-color: $navbar-light-active-color;\n  $navbar-dark-brand-color: $navbar-dark-active-color;\n  $navbar-dark-brand-hover-color: $navbar-dark-active-color;\n\n  // Dropdowns\n  //\n  // Dropdown menu container and contents.\n\n  $dropdown-min-width: 10rem;\n  $dropdown-padding-x: 0;\n  $dropdown-padding-y: 0.5rem;\n  $dropdown-spacer: 0.125rem;\n  $dropdown-font-size: $font-size-base;\n  $dropdown-color: $body-color;\n  $dropdown-bg: $white;\n  $dropdown-border-color: rgba($black, 0.15);\n  $dropdown-border-radius: $border-radius;\n  $dropdown-border-width: $border-width;\n  $dropdown-inner-border-radius: ", ";\n  $dropdown-divider-bg: $dropdown-border-color;\n  $dropdown-divider-margin-y: $spacer * 0.5;\n  $dropdown-box-shadow: $box-shadow;\n\n  $dropdown-link-color: $gray-900;\n\n  $dropdown-link-hover-color: ", ";\n  $dropdown-link-hover-bg: $gray-200;\n\n  $dropdown-link-active-color: $component-active-color;\n  $dropdown-link-active-bg: $component-active-bg;\n\n  $dropdown-link-disabled-color: $gray-500;\n\n  $dropdown-item-padding-y: $spacer * 0.25;\n  $dropdown-item-padding-x: $spacer;\n\n  $dropdown-header-color: $gray-600;\n  $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;\n\n  $dropdown-dark-color: $gray-300;\n  $dropdown-dark-bg: $gray-800;\n  $dropdown-dark-border-color: $dropdown-border-color;\n  $dropdown-dark-divider-bg: $dropdown-divider-bg;\n  $dropdown-dark-box-shadow: null;\n  $dropdown-dark-link-color: $dropdown-dark-color;\n  $dropdown-dark-link-hover-color: $white;\n  $dropdown-dark-link-hover-bg: rgba($white, 0.15);\n  $dropdown-dark-link-active-color: $dropdown-link-active-color;\n  $dropdown-dark-link-active-bg: $dropdown-link-active-bg;\n  $dropdown-dark-link-disabled-color: $gray-500;\n  $dropdown-dark-header-color: $gray-500;\n\n  // ...\n\n  // Cards\n\n  $card-spacer-y: $spacer;\n  $card-spacer-x: $spacer;\n  $card-title-spacer-y: $spacer * 0.5;\n  $card-border-width: $border-width;\n  $card-border-color: rgba($black, 0.125);\n  $card-border-radius: $border-radius;\n  $card-box-shadow: null;\n  $card-inner-border-radius: ", ";\n  $card-cap-padding-y: $card-spacer-y * 0.5;\n  $card-cap-padding-x: $card-spacer-x;\n  $card-cap-bg: rgba($black, 0.03);\n  $card-cap-color: null;\n  $card-height: null;\n  $card-color: null;\n  $card-bg: $white;\n  $card-img-overlay-padding: $spacer;\n  $card-group-margin: $grid-gutter-width * 0.5;\n\n  // ...\n\n  // Tooltips\n\n  $tooltip-font-size: $font-size-sm;\n  $tooltip-max-width: 200px;\n  $tooltip-color: $white;\n  $tooltip-bg: $black;\n  $tooltip-border-radius: $border-radius;\n  $tooltip-opacity: 0.9;\n  $tooltip-padding-y: $spacer * 0.25;\n  $tooltip-padding-x: $spacer * 0.5;\n  $tooltip-margin: 0;\n\n  $tooltip-arrow-width: 0.8rem;\n  $tooltip-arrow-height: 0.4rem;\n  $tooltip-arrow-color: $tooltip-bg;\n\n  // Popovers\n\n  $popover-font-size: $font-size-sm;\n  $popover-bg: $white;\n  $popover-max-width: 276px;\n  $popover-border-width: $border-width;\n  $popover-border-color: rgba($black, 0.2);\n  $popover-border-radius: $border-radius-lg;\n  $popover-inner-border-radius: ", ";\n  $popover-box-shadow: $box-shadow;\n\n  $popover-header-bg: ", ";\n  $popover-header-color: $headings-color;\n  $popover-header-padding-y: 0.5rem;\n  $popover-header-padding-x: $spacer;\n\n  $popover-body-color: $body-color;\n  $popover-body-padding-y: $spacer;\n  $popover-body-padding-x: $spacer;\n\n  $popover-arrow-width: 1rem;\n  $popover-arrow-height: 0.5rem;\n  $popover-arrow-color: $popover-bg;\n\n  $popover-arrow-outer-color: $popover-border-color;\n\n  // Toasts\n\n  $toast-max-width: 350px;\n  $toast-padding-x: 0.75rem;\n  $toast-padding-y: 0.5rem;\n  $toast-font-size: 0.875rem;\n  $toast-color: null;\n  $toast-background-color: rgba($white, 0.85);\n  $toast-border-width: 1px;\n  $toast-border-color: rgba($black, 0.1);\n  $toast-border-radius: $border-radius;\n  $toast-box-shadow: $box-shadow;\n  $toast-spacing: $container-padding-x;\n\n  $toast-header-color: $gray-600;\n  $toast-header-background-color: rgba($white, 0.85);\n  $toast-header-border-color: rgba($black, 0.05);\n\n  // Badges\n\n  $badge-font-size: $font-size-base * 0.75; // 0.75em;\n  $badge-font-weight: $font-weight-bold;\n  $badge-color: $white;\n  $badge-padding-y: $badge-font-size * 0.35; // 0.35em;\n  $badge-padding-x: $badge-font-size * 0.65; // 0.65em;\n  $badge-border-radius: $border-radius;\n\n  // Modals\n\n  $modal-inner-padding: $spacer;\n\n  $modal-footer-margin-between: 0.5rem;\n\n  $modal-dialog-margin: 0.5rem;\n  $modal-dialog-margin-y-sm-up: 1.75rem;\n\n  $modal-title-line-height: $line-height-base;\n\n  $modal-content-color: null;\n  $modal-content-bg: $white;\n  $modal-content-border-color: rgba($black, 0.65); // rgba($black, 0.2);\n  $modal-content-border-width: $border-width;\n  $modal-content-border-radius: $border-radius-lg;\n  $modal-content-inner-border-radius: ", ";\n  $modal-content-box-shadow-xs: $box-shadow-sm;\n  $modal-content-box-shadow-sm-up: $box-shadow;\n\n  $modal-backdrop-bg: $black;\n  $modal-backdrop-opacity: 0.5;\n  $modal-header-border-color: $border-color;\n  $modal-footer-border-color: $modal-header-border-color;\n  $modal-header-border-width: $modal-content-border-width;\n  $modal-footer-border-width: $modal-header-border-width;\n  $modal-header-padding-y: $modal-inner-padding;\n  $modal-header-padding-x: $modal-inner-padding;\n  $modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility\n\n  $modal-sm: 300px;\n  $modal-md: 500px;\n  $modal-lg: 800px;\n  $modal-xl: 1140px;\n\n  $modal-fade-transform: translate(0, -50px);\n  $modal-show-transform: none;\n  $modal-transition: transform 0.3s ease-out;\n  $modal-scale-transform: scale(1.02);\n\n  // ...\n\n  // Alerts\n  //\n  // Define alert colors, border radius, and padding.\n\n  $alert-padding-y: $spacer;\n  $alert-padding-x: $spacer;\n  $alert-margin-bottom: 1rem;\n  $alert-border-radius: $border-radius;\n  $alert-link-font-weight: $font-weight-bold;\n  $alert-border-width: $border-width;\n  $alert-bg-scale: -0.8; // 80%;\n  $alert-border-scale: -0.7; // 70%;\n  $alert-color-scale: 0.4; // 40%;\n  $alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side\n\n  // Pagination\n\n  $pagination-padding-y: 0.375rem;\n  $pagination-padding-x: 0.75rem;\n  $pagination-padding-y-sm: 0.25rem;\n  $pagination-padding-x-sm: 0.5rem;\n  $pagination-padding-y-lg: 0.75rem;\n  $pagination-padding-x-lg: 1.5rem;\n\n  $pagination-color: $link-color;\n  $pagination-bg: $white;\n  $pagination-border-width: $border-width;\n  $pagination-border-radius: $border-radius;\n  $pagination-margin-start: -$pagination-border-width;\n  $pagination-border-color: $gray-300;\n\n  $pagination-focus-color: $link-hover-color;\n  $pagination-focus-bg: $gray-200;\n  $pagination-focus-box-shadow: $input-btn-focus-box-shadow;\n  $pagination-focus-outline: 0;\n\n  $pagination-hover-color: $link-hover-color;\n  $pagination-hover-bg: $gray-200;\n  $pagination-hover-border-color: $gray-300;\n\n  $pagination-active-color: $component-active-color;\n  $pagination-active-bg: $component-active-bg;\n  $pagination-active-border-color: $pagination-active-bg;\n\n  $pagination-disabled-color: $gray-600;\n  $pagination-disabled-bg: $white;\n  $pagination-disabled-border-color: $gray-300;\n\n  $pagination-transition: color 0.15s ease-in-out,\n    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n\n  $pagination-border-radius-sm: $border-radius-sm;\n  $pagination-border-radius-lg: $border-radius-lg;\n\n  // Progress bars\n\n  $progress-height: 1rem;\n  $progress-font-size: $font-size-base * 0.75;\n  $progress-bg: $gray-200;\n  $progress-border-radius: $border-radius;\n  $progress-box-shadow: $box-shadow-inset;\n  $progress-bar-color: $white;\n  $progress-bar-bg: $primary;\n  $progress-bar-animation-timing: 1s linear infinite;\n  $progress-bar-transition: width 0.6s ease;\n\n  // List group\n\n  $list-group-color: $gray-900;\n  $list-group-bg: $white;\n  $list-group-border-color: rgba($black, 0.125);\n  $list-group-border-width: $border-width;\n  $list-group-border-radius: $border-radius;\n\n  $list-group-item-padding-y: $spacer * 0.5;\n  $list-group-item-padding-x: $spacer;\n  $list-group-item-bg-scale: -0.8; // 80%;\n  $list-group-item-color-scale: 0.4; // 40%;\n\n  $list-group-hover-bg: $gray-100;\n  $list-group-active-color: $component-active-color;\n  $list-group-active-bg: $component-active-bg;\n  $list-group-active-border-color: $list-group-active-bg;\n\n  $list-group-disabled-color: $gray-600;\n  $list-group-disabled-bg: $list-group-bg;\n\n  $list-group-action-color: $gray-700;\n  $list-group-action-hover-color: $list-group-action-color;\n\n  $list-group-action-active-color: $body-color;\n  $list-group-action-active-bg: $gray-200;\n\n  // ...\n\n  // Spinners\n\n  $spinner-width: 2rem;\n  $spinner-height: $spinner-width;\n  $spinner-vertical-align: $font-size-base * -0.125; // -.125em;\n  $spinner-border-width: $font-size-base * 0.25; // .25em;\n  $spinner-animation-speed: 0.75s;\n\n  $spinner-width-sm: 1rem;\n  $spinner-height-sm: $spinner-width-sm;\n  $spinner-border-width-sm: $font-size-base * 0.2; // .2em;\n\n  // Close\n\n  $btn-close-width: $font-size-base * 1; // 1em;\n  $btn-close-height: $btn-close-width;\n  $btn-close-padding-x: $font-size-base * 0.25; // .25em;\n  $btn-close-padding-y: $btn-close-padding-x;\n  $btn-close-color: $black;\n  $btn-close-bg: ", ";\n  $btn-close-focus-shadow: $input-btn-focus-box-shadow;\n  $btn-close-opacity: 0.5;\n  $btn-close-hover-opacity: 0.75;\n  $btn-close-focus-opacity: 1;\n  $btn-close-disabled-opacity: 0.25;\n  // $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);\n\n  // Offcanvas\n\n  $offcanvas-padding-y: $modal-inner-padding;\n  $offcanvas-padding-x: $modal-inner-padding;\n  $offcanvas-horizontal-width: 400px;\n  $offcanvas-vertical-height: 200px; // 30vh;\n  $offcanvas-transition-duration: 0.3s;\n  $offcanvas-border-color: $modal-content-border-color;\n  $offcanvas-border-width: $modal-content-border-width;\n  $offcanvas-title-line-height: $modal-title-line-height;\n  $offcanvas-bg-color: $modal-content-bg;\n  $offcanvas-color: $modal-content-color;\n  $offcanvas-box-shadow: $modal-content-box-shadow-xs;\n  $offcanvas-backdrop-bg: $modal-backdrop-bg;\n  $offcanvas-backdrop-opacity: $modal-backdrop-opacity;\n\n  // Code\n\n  $code-font-size: $small-font-size;\n  $code-color: $pink;\n\n  $kbd-padding-y: 0.2rem;\n  $kbd-padding-x: 0.4rem;\n  $kbd-font-size: $code-font-size;\n  $kbd-color: $white;\n  $kbd-bg: $gray-900;\n\n  $pre-color: null;\n"])), function (t) {
+var variables = css(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteral(["\n  // Color system\n\n  $white: #fff;\n  $gray-100: #f8f9fa;\n  $gray-200: #e9ecef;\n  $gray-300: #dee2e6;\n  $gray-400: #ced4da;\n  $gray-500: #adb5bd;\n  $gray-600: #6c757d;\n  $gray-700: #495057;\n  $gray-800: #343a40;\n  $gray-900: #212529;\n  $black: #000;\n\n  $grays: ", ";\n\n  $blue: #0d6efd;\n  $indigo: #6610f2;\n  $purple: #6f42c1;\n  $pink: #d63384;\n  $red: #dc3545;\n  $orange: #fd7e14;\n  $yellow: #ffc107;\n  $green: #198754;\n  $teal: #20c997;\n  $cyan: #0dcaf0;\n\n  $colors: ", ";\n\n  $primary: $blue;\n  $secondary: $gray-600;\n  $success: $green;\n  $info: $cyan;\n  $warning: $yellow;\n  $danger: $red;\n  $light: $gray-100;\n  $dark: $gray-900;\n\n  $theme-colors: ", ";\n\n  // The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n  // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n  $min-contrast-ratio: 4.5;\n\n  // Customize the light and dark text colors for use in our color contrast function.\n  $color-contrast-dark: $black;\n  $color-contrast-light: $white;\n\n  $blue-100: tint-color($blue, 80%);\n  $blue-200: tint-color($blue, 60%);\n  $blue-300: tint-color($blue, 40%);\n  $blue-400: tint-color($blue, 20%);\n  $blue-500: $blue;\n  $blue-600: shade-color($blue, 20%);\n  $blue-700: shade-color($blue, 40%);\n  $blue-800: shade-color($blue, 60%);\n  $blue-900: shade-color($blue, 80%);\n\n  $indigo-100: tint-color($indigo, 80%);\n  $indigo-200: tint-color($indigo, 60%);\n  $indigo-300: tint-color($indigo, 40%);\n  $indigo-400: tint-color($indigo, 20%);\n  $indigo-500: $indigo;\n  $indigo-600: shade-color($indigo, 20%);\n  $indigo-700: shade-color($indigo, 40%);\n  $indigo-800: shade-color($indigo, 60%);\n  $indigo-900: shade-color($indigo, 80%);\n\n  $purple-100: tint-color($purple, 80%);\n  $purple-200: tint-color($purple, 60%);\n  $purple-300: tint-color($purple, 40%);\n  $purple-400: tint-color($purple, 20%);\n  $purple-500: $purple;\n  $purple-600: shade-color($purple, 20%);\n  $purple-700: shade-color($purple, 40%);\n  $purple-800: shade-color($purple, 60%);\n  $purple-900: shade-color($purple, 80%);\n\n  $pink-100: tint-color($pink, 80%);\n  $pink-200: tint-color($pink, 60%);\n  $pink-300: tint-color($pink, 40%);\n  $pink-400: tint-color($pink, 20%);\n  $pink-500: $pink;\n  $pink-600: shade-color($pink, 20%);\n  $pink-700: shade-color($pink, 40%);\n  $pink-800: shade-color($pink, 60%);\n  $pink-900: shade-color($pink, 80%);\n\n  $red-100: tint-color($red, 80%);\n  $red-200: tint-color($red, 60%);\n  $red-300: tint-color($red, 40%);\n  $red-400: tint-color($red, 20%);\n  $red-500: $red;\n  $red-600: shade-color($red, 20%);\n  $red-700: shade-color($red, 40%);\n  $red-800: shade-color($red, 60%);\n  $red-900: shade-color($red, 80%);\n\n  $orange-100: tint-color($orange, 80%);\n  $orange-200: tint-color($orange, 60%);\n  $orange-300: tint-color($orange, 40%);\n  $orange-400: tint-color($orange, 20%);\n  $orange-500: $orange;\n  $orange-600: shade-color($orange, 20%);\n  $orange-700: shade-color($orange, 40%);\n  $orange-800: shade-color($orange, 60%);\n  $orange-900: shade-color($orange, 80%);\n\n  $yellow-100: tint-color($yellow, 80%);\n  $yellow-200: tint-color($yellow, 60%);\n  $yellow-300: tint-color($yellow, 40%);\n  $yellow-400: tint-color($yellow, 20%);\n  $yellow-500: $yellow;\n  $yellow-600: shade-color($yellow, 20%);\n  $yellow-700: shade-color($yellow, 40%);\n  $yellow-800: shade-color($yellow, 60%);\n  $yellow-900: shade-color($yellow, 80%);\n\n  $green-100: tint-color($green, 80%);\n  $green-200: tint-color($green, 60%);\n  $green-300: tint-color($green, 40%);\n  $green-400: tint-color($green, 20%);\n  $green-500: $green;\n  $green-600: shade-color($green, 20%);\n  $green-700: shade-color($green, 40%);\n  $green-800: shade-color($green, 60%);\n  $green-900: shade-color($green, 80%);\n\n  $teal-100: tint-color($teal, 80%);\n  $teal-200: tint-color($teal, 60%);\n  $teal-300: tint-color($teal, 40%);\n  $teal-400: tint-color($teal, 20%);\n  $teal-500: $teal;\n  $teal-600: shade-color($teal, 20%);\n  $teal-700: shade-color($teal, 40%);\n  $teal-800: shade-color($teal, 60%);\n  $teal-900: shade-color($teal, 80%);\n\n  $cyan-100: tint-color($cyan, 80%);\n  $cyan-200: tint-color($cyan, 60%);\n  $cyan-300: tint-color($cyan, 40%);\n  $cyan-400: tint-color($cyan, 20%);\n  $cyan-500: $cyan;\n  $cyan-600: shade-color($cyan, 20%);\n  $cyan-700: shade-color($cyan, 40%);\n  $cyan-800: shade-color($cyan, 60%);\n  $cyan-900: shade-color($cyan, 80%);\n\n  $blues: ", ";\n\n  $indigos: ", ";\n\n  $purples: ", ";\n\n  $pinks: ", ";\n\n  $reds: ", ";\n\n  $oranges: ", ";\n\n  $yellows: ", ";\n\n  $greens: ", ";\n\n  $teals: ", ";\n\n  $cyans: ", ";\n\n  // Characters which are escaped by the escape-svg function\n  // $escaped characters\n\n  // Options\n  //\n  // Quickly modify global styling by enabling or disabling optional features.\n\n  // NOTE: Handled by JavaScript.\n\n  // Gradient\n  //\n  // The gradient which is added to components if \"$enable-gradients\" is \"true\"\n  // This gradient is also added to elements with \".bg-gradient\"\n  $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));\n\n  // Spacing\n  //\n  // Control the default styling of most Bootstrap elements by modifying these\n  // variables. Mostly focused on spacing.\n  // You can add more entries to the $spacers map, should you need more variation.\n\n  $spacer: 1rem;\n  $spacers: ", ";\n\n  // Position\n  //\n  // Define the edge positioning anchors of the position utilities.\n\n  $position-values: ", ";\n\n  // Placeholder\n\n  $placeholder-opacity-max: 0.5;\n  $placeholder-opacity-min: 0.2;\n\n  // Body\n  //\n  // Settings for the \"<body>\" element.\n\n  $body-bg: $white;\n  $body-color: $gray-900;\n  $body-text-align: null;\n\n  // Links\n  //\n  // Style anchor elements.\n\n  $link-color: $primary;\n  $link-decoration: underline;\n  $link-shade-percentage: 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"])), function (t) {
   return {
     100: t['gray-100'],
     200: t['gray-200'],
@@ -2461,9 +2779,9 @@ var variables = css(_templateObject$1e || (_templateObject$1e = _taggedTemplateL
     100: '100%'
   };
 }, shiftColor(function (t) {
-  return t['link-shade-percentage'];
-}, function (t) {
   return t['link-color'];
+}, function (t) {
+  return t['link-shade-percentage'];
 }), function () {
   return {
     xs: 0,
@@ -2527,9 +2845,9 @@ var variables = css(_templateObject$1e || (_templateObject$1e = _taggedTemplateL
   };
 }, function () {
   return '/';
-}, tintColor(0.5, function (t) {
+}, tintColor(function (t) {
   return t['component-active-bg'];
-}), add(function (t) {
+}, 0.5), add(function (t) {
   return calculate(t['input-line-height'], '*', 1);
 }, function (t) {
   return calculate(t['input-padding-y'], '*', 2);
@@ -2579,9 +2897,9 @@ add(function (t) {
   return t['dropdown-border-radius'];
 }, function (t) {
   return t['dropdown-border-width'];
-}), shadeColor(0.1, function (t) {
+}), shadeColor(function (t) {
   return t['dropdown-link-color'];
-}), subtract(function (t) {
+}, 0.1), subtract(function (t) {
   return t['card-border-radius'];
 }, function (t) {
   return t['card-border-width'];
@@ -2589,9 +2907,9 @@ add(function (t) {
   return t['popover-border-radius'];
 }, function (t) {
   return t['popover-border-width'];
-}), shadeColor(0.06, function (t) {
+}), shadeColor(function (t) {
   return t['popover-bg'];
-}), subtract(function (t) {
+}, 0.06), subtract(function (t) {
   return t['modal-content-border-radius'];
 }, function (t) {
   return t['modal-content-border-width'];
@@ -2980,13 +3298,13 @@ var styles$1f = StyleSheet.create(_objectSpread2(_objectSpread2({
 }, each(THEME_COLORS, function (state, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(value, function (t) {
     return t['alert-bg-scale'];
-  }, value), shiftColor(function (t) {
+  }), shiftColor(value, function (t) {
     return t['alert-border-scale'];
-  }, value))), _defineProperty(_ref, ".alert-".concat(state, " --text"), css(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
+  }))), _defineProperty(_ref, ".alert-".concat(state, " --text"), css(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(value, function (t) {
     return t['alert-color-scale'];
-  }, value))), _ref;
+  }))), _ref;
 })), {}, {
   '.alert-dismissible': {// TODO
   }
@@ -3380,6 +3698,84 @@ function useAction(props, ref) {
   return [actionProps, concatRefs(actionRef, ref)];
 }
 
+function useInteractionState(_ref) {
+  var _ref$onFocus = _ref.onFocus,
+      _onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+      _ref$onBlur = _ref.onBlur,
+      _onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
+      _ref$onHoverIn = _ref.onHoverIn,
+      _onHoverIn = _ref$onHoverIn === void 0 ? function () {} : _ref$onHoverIn,
+      _ref$onHoverOut = _ref.onHoverOut,
+      _onHoverOut = _ref$onHoverOut === void 0 ? function () {} : _ref$onHoverOut,
+      _ref$onPressIn = _ref.onPressIn,
+      _onPressIn = _ref$onPressIn === void 0 ? function () {} : _ref$onPressIn,
+      _ref$onPressOut = _ref.onPressOut,
+      _onPressOut = _ref$onPressOut === void 0 ? function () {} : _ref$onPressOut,
+      autoFocus = _ref.autoFocus;
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hover = _useState4[0],
+      setHovered = _useState4[1];
+
+  var _useFocusRing = focus.useFocusRing({
+    autoFocus: autoFocus
+  }),
+      focus$1 = _useFocusRing.isFocused,
+      focusVisible = _useFocusRing.isFocusVisible,
+      focusProps = _useFocusRing.focusProps;
+
+  var interactionProps = React.useMemo(function () {
+    return {
+      onHoverIn: function onHoverIn(event) {
+        setHovered(true);
+
+        _onHoverIn(event);
+      },
+      onHoverOut: function onHoverOut(event) {
+        setHovered(false);
+
+        _onHoverOut(event);
+      },
+      onFocus: function onFocus(event) {
+        focusProps.onFocus(event);
+
+        _onFocus(event);
+      },
+      onBlur: function onBlur(event) {
+        focusProps.onBlur(event);
+
+        _onBlur(event);
+      },
+      onPressIn: function onPressIn(event) {
+        setActive(true);
+
+        _onPressIn(event);
+      },
+      onPressOut: function onPressOut(event) {
+        setActive(false);
+
+        _onPressOut(event);
+      }
+    };
+  }, [_onFocus, _onBlur, _onHoverIn, _onHoverOut, _onPressIn, _onPressOut]);
+  var interaction = {
+    hover: hover,
+    focus: focus$1,
+    focusVisible: focusVisible,
+    active: active
+  };
+  return {
+    interaction: interaction,
+    interactionProps: interactionProps
+  };
+}
+
 var _excluded$1o = ["color", "direction", "style"];
 
 var _templateObject$16, _templateObject2$Q, _templateObject3$q, _templateObject4$n, _templateObject5$k;
@@ -3547,34 +3943,35 @@ var Pressable = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   var resolveActiveStyle = useStyle(active && activeStyle);
   var resolveTextStyle = useStyle([context && context.style, textStyle]);
   var resolveActiveTextStyle = useStyle(active && activeTextStyle);
+
+  var _useInteractionState = useInteractionState(elementProps),
+      interaction = _useInteractionState.interaction,
+      interactionProps = _useInteractionState.interactionProps;
+
   var hasTextStyle = context && context.style || textStyle;
   var wrappedChildren = applyCaret(children, caret);
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.Pressable, _extends({}, elementProps, {
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.Pressable, _extends({}, elementProps, interactionProps, {
     ref: actionRef,
     accessibilityRole: getRole$2(actionProps),
-    style: function style(interaction) {
-      return [resolveStyle({
+    style: [resolveStyle({
+      media: media,
+      interaction: interaction
+    }), resolveActiveStyle({
+      media: media,
+      interaction: interaction
+    })]
+  }), hasTextStyle ? /*#__PURE__*/React__default["default"].createElement(TextStyleContext.Provider, {
+    value: {
+      style: [resolveTextStyle({
         media: media,
         interaction: interaction
-      }), resolveActiveStyle({
+      }), resolveActiveTextStyle({
         media: media,
         interaction: interaction
-      })];
+      })],
+      hasAncestor: context && context.hasTextAncestor
     }
-  }), hasTextStyle ? function (interaction) {
-    return /*#__PURE__*/React__default["default"].createElement(TextStyleContext.Provider, {
-      value: {
-        style: [resolveTextStyle({
-          media: media,
-          interaction: interaction
-        }), resolveActiveTextStyle({
-          media: media,
-          interaction: interaction
-        })],
-        hasAncestor: context && context.hasTextAncestor
-      }
-    }, wrappedChildren);
-  } : wrappedChildren);
+  }, wrappedChildren) : wrappedChildren);
 });
 Pressable.displayName = 'Pressable';
 Pressable.propTypes = propTypes$1q;
@@ -3622,37 +4019,37 @@ var propTypes$1p = {
   activeTextStyle: PropTypes__default["default"].any
 };
 var styles$17 = 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 {\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 {\n        // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);\n      }\n    }\n  "]))),
+  '.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  "])))
 }, each(THEME_COLORS, function (color, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n      // @include box-shadow($btn-box-shadow);\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus-visible {\n        background-color: ", ";\n        border-color: ", ";\n        /* @if $enable-shadows {\n          @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n        } @else {\n          // Avoid using mixin so we can pass custom focus shadow properly\n          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n        } */\n      }\n\n      &:active {\n        background-color: ", ";\n        // Remove CSS gradients if they're enabled\n        // background-image: if($enable-gradients, none, null);\n        border-color: ", ";\n      }\n    "])), value, value, shadeColor(value, function (t) {
     return t['btn-hover-bg-shade-amount'];
-  }, value), shadeColor(function (t) {
+  }), shadeColor(value, function (t) {
     return t['btn-hover-border-shade-amount'];
-  }, value), shadeColor(function (t) {
+  }), shadeColor(value, function (t) {
     return t['btn-hover-bg-shade-amount'];
-  }, value), shadeColor(function (t) {
+  }), shadeColor(value, function (t) {
     return t['btn-hover-border-shade-amount'];
-  }, value), shadeColor(function (t) {
+  }), shadeColor(value, function (t) {
     return t['btn-active-bg-shade-amount'];
-  }, value), shadeColor(function (t) {
+  }), shadeColor(value, function (t) {
     return t['btn-active-border-shade-amount'];
-  }, value))), _defineProperty(_ref, ".btn-".concat(color, " --text"), css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, ".active"), css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(function (t) {
+  }))), _defineProperty(_ref, ".btn-".concat(color, " --text"), css(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus-visible {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), colorContrast(value), colorContrast(value), colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, ".active"), css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteral(["\n      background-color: ", ";\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: ", ";\n    "])), shadeColor(value, function (t) {
     return t['btn-active-bg-shade-amount'];
-  }, value), shadeColor(function (t) {
+  }), shadeColor(value, function (t) {
     return t['btn-active-border-shade-amount'];
-  }, value))), _defineProperty(_ref, ".btn-".concat(color, ".active --text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, ".disabled"), css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, ".disabled --text"), css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, " --text"), css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled"), css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled --text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
+  }))), _defineProperty(_ref, ".btn-".concat(color, ".active --text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, ".disabled"), css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n      $disabled-background: ", ";\n      $disabled-border: ", ";\n\n      background-color: $disabled-background;\n      // Remove CSS gradients if they're enabled\n      // background-image: if($enable-gradients, none, null);\n      border-color: $disabled-border;\n    "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, ".disabled --text"), css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteral(["\n      $disabled-color: ", ";\n\n      color: $disabled-color;\n    "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteral(["\n      border-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n\n      &:focus-visible {\n        // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n      }\n\n      &:active {\n        background-color: ", ";\n        border-color: ", ";\n\n        /* &:focus {\n          @if $enable-shadows {\n            @include box-shadow(\n              $btn-active-box-shadow,\n              0 0 0 $btn-focus-width rgba($color, 0.5)\n            );\n          } @else {\n            // Avoid using mixin so we can pass custom focus shadow properly\n            box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n          }\n        } */\n      }\n    "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, " --text"), css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n      }\n    "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled"), css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n      background-color: transparent;\n    "])))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled --text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), value)), _ref;
 })), {}, {
-  '.btn-link --text': css(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $btn-link-color;\n    text-decoration-color: $btn-link-color; // added for bootstrap-rn\n    text-decoration-line: $link-decoration;\n\n    &:hover {\n      color: $btn-link-hover-color;\n      text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    &:focus {\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    // No need for an active state here\n  "]))),
+  '.btn-link --text': css(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteral(["\n    font-weight: $font-weight-normal;\n    color: $btn-link-color;\n    text-decoration-color: $btn-link-color; // added for bootstrap-rn\n    text-decoration-line: $link-decoration;\n\n    &:hover {\n      color: $btn-link-hover-color;\n      text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    &:focus-visible {\n      text-decoration-line: $link-hover-decoration;\n    }\n\n    // No need for an active state here\n  "]))),
   '.btn-link.disabled --text': css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteral(["\n    color: $btn-link-disabled-color;\n  "]))),
   '.btn-lg': css(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n    padding: $btn-padding-y-lg $btn-padding-x-lg;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius-lg;\n  "]))),
   '.btn-lg --text': css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-lg * $btn-line-height;\n    font-size: $btn-font-size-lg;\n  "]))),
   '.btn-sm': css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n    padding: $btn-padding-y-sm $btn-padding-x-sm;\n    // Manually declare to provide an override to the browser default\n    border-radius: $btn-border-radius-sm;\n  "]))),
   '.btn-sm --text': css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteral(["\n    line-height: $btn-font-size-sm * $btn-line-height;\n    font-size: $btn-font-size-sm;\n  "]))),
-  '.btn-group > .btn': css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    // flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
+  '.btn-group > .btn': css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteral(["\n    position: relative;\n    // flex: 1 1 auto;\n\n    &:hover {\n      z-index: 1;\n    }\n    &:focus-visible {\n      z-index: 1;\n    }\n    &:active {\n      z-index: 1;\n    }\n  "]))),
   '.btn-group > .btn.active': css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n    z-index: 2; // 1;\n  "]))),
   '.btn-group > .btn:not(:first-child)': css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n    margin-left: -$btn-border-width;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "]))),
   '.btn-group > .btn:not(:last-child)': css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])))
@@ -3763,7 +4160,7 @@ var propTypes$1n = {
   styleName: PropTypes__default["default"].any
 };
 var styles$15 = StyleSheet.create({
-  body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    height: 100%; // added for bootstrap-rn\n  "]))),
+  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  "])))
 });
 var Body = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -4217,17 +4614,11 @@ function useBackground(style, styleName) {
   return useBackgroundForPlatform(style, styleName);
 }
 
-var _excluded$1e = ["children", "onFocus", "onBlur", "onHoverIn", "onHoverOut", "onPressIn", "onPressOut", "disabled", "style", "textStyle", "styleName"];
+var _excluded$1e = ["children", "disabled", "style", "textStyle", "styleName"];
 
 var _templateObject$_, _templateObject2$J, _templateObject3$o, _templateObject4$l, _templateObject5$i;
 var propTypes$1i = {
   children: PropTypes__default["default"].node,
-  onFocus: PropTypes__default["default"].func,
-  onBlur: PropTypes__default["default"].func,
-  onHoverIn: PropTypes__default["default"].func,
-  onHoverOut: PropTypes__default["default"].func,
-  onPressIn: PropTypes__default["default"].func,
-  onPressOut: PropTypes__default["default"].func,
   disabled: PropTypes__default["default"].bool,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any,
@@ -4249,19 +4640,7 @@ var styles$_ = StyleSheet.create({
 });
 var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   props.children;
-      var _props$onFocus = props.onFocus,
-      _onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
-      _props$onBlur = props.onBlur,
-      _onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
-      _props$onHoverIn = props.onHoverIn,
-      _onHoverIn = _props$onHoverIn === void 0 ? function () {} : _props$onHoverIn,
-      _props$onHoverOut = props.onHoverOut,
-      _onHoverOut = _props$onHoverOut === void 0 ? function () {} : _props$onHoverOut,
-      _props$onPressIn = props.onPressIn,
-      _onPressIn = _props$onPressIn === void 0 ? function () {} : _props$onPressIn,
-      _props$onPressOut = props.onPressOut,
-      _onPressOut = _props$onPressOut === void 0 ? function () {} : _props$onPressOut,
-      _props$disabled = props.disabled,
+      var _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       style = props.style,
       textStyle = props.textStyle,
@@ -4269,22 +4648,6 @@ var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (pr
       elementProps = _objectWithoutProperties(props, _excluded$1e);
 
   var media = useMedia();
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      focused = _useState2[0],
-      setFocused = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hovered = _useState4[0],
-      setHovered = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      pressed = _useState6[0],
-      setPressed = _useState6[1];
-
   var modal = React.useContext(ModalContext);
   var offcanvas = React.useContext(OffcanvasContext);
   var classes = getStyles(styles$_, ['.btn-close', disabled && '.btn-close.disabled', // Modal styles
@@ -4292,47 +4655,18 @@ var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (pr
   offcanvas && '.offcanvas-header .btn-close']);
   var textClasses = getStyles(styles$_, ['.btn-close --text']);
   var resolveStyle = useStyle([classes, style], styleName);
+
+  var _useInteractionState = useInteractionState(elementProps),
+      interaction = _useInteractionState.interaction,
+      interactionProps = _useInteractionState.interactionProps;
+
   var background = useBackground(resolveStyle({
     media: media,
-    interaction: {
-      focused: focused,
-      hovered: hovered,
-      pressed: pressed
-    }
+    interaction: interaction
   }));
-  return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
+  return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, interactionProps, {
     component: Pressable,
     ref: ref,
-    onFocus: function onFocus() {
-      setFocused(true);
-
-      _onFocus();
-    },
-    onBlur: function onBlur() {
-      setFocused(false);
-
-      _onBlur();
-    },
-    onHoverIn: function onHoverIn() {
-      setHovered(true);
-
-      _onHoverIn();
-    },
-    onHoverOut: function onHoverOut() {
-      setHovered(false);
-
-      _onHoverOut();
-    },
-    onPressIn: function onPressIn() {
-      setPressed(true);
-
-      _onPressIn();
-    },
-    onPressOut: function onPressOut() {
-      setPressed(false);
-
-      _onPressOut();
-    },
     disabled: disabled,
     style: background.style,
     textStyle: [textClasses, textStyle]
@@ -4665,7 +4999,7 @@ var FormCheckInputNative = /*#__PURE__*/React__default["default"].forwardRef(fun
 FormCheckInputNative.displayName = 'FormCheckInputNative';
 FormCheckInputNative.propTypes = propTypes$1d;
 
-var _excluded$19 = ["type", "value", "onFocus", "onBlur", "disabled", "valid", "invalid", "useNativeComponent", "style"];
+var _excluded$19 = ["type", "value", "onFocus", "onBlur", "disabled", "valid", "invalid", "useNativeComponent", "autoFocus", "style"];
 
 var _templateObject$Y, _templateObject2$H, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$9, _templateObject8$9, _templateObject9$9, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
 /* eslint-disable react/no-unused-prop-types */
@@ -4736,9 +5070,9 @@ var FormCheckInput = /*#__PURE__*/React__default["default"].forwardRef(function
   var type = modifierProps.type,
       value = modifierProps.value,
       _modifierProps$onFocu = modifierProps.onFocus,
-      onFocus = _modifierProps$onFocu === void 0 ? function () {} : _modifierProps$onFocu,
+      _onFocus = _modifierProps$onFocu === void 0 ? function () {} : _modifierProps$onFocu,
       _modifierProps$onBlur = modifierProps.onBlur,
-      onBlur = _modifierProps$onBlur === void 0 ? function () {} : _modifierProps$onBlur,
+      _onBlur = _modifierProps$onBlur === void 0 ? function () {} : _modifierProps$onBlur,
       _modifierProps$disabl = modifierProps.disabled,
       disabled = _modifierProps$disabl === void 0 ? context ? context.disabled : false : _modifierProps$disabl,
       _modifierProps$valid = modifierProps.valid,
@@ -4747,12 +5081,14 @@ var FormCheckInput = /*#__PURE__*/React__default["default"].forwardRef(function
       invalid = _modifierProps$invali === void 0 ? context ? context.invalid : false : _modifierProps$invali,
       _modifierProps$useNat = modifierProps.useNativeComponent,
       useNativeComponent = _modifierProps$useNat === void 0 ? false : _modifierProps$useNat,
+      _modifierProps$autoFo = modifierProps.autoFocus,
+      autoFocus = _modifierProps$autoFo === void 0 ? false : _modifierProps$autoFo,
       style = modifierProps.style,
       elementProps = _objectWithoutProperties(modifierProps, _excluded$19);
 
   var media = useMedia();
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(autoFocus),
       _useState2 = _slicedToArray(_useState, 2),
       focused = _useState2[0],
       setFocused = _useState2[1];
@@ -4761,29 +5097,28 @@ var FormCheckInput = /*#__PURE__*/React__default["default"].forwardRef(function
   valid && '.form-check-input:valid', valid && value && '.form-check-input:valid:checked', invalid && '.form-check-input:invalid', invalid && value && '.form-check-input:invalid:checked', // switch
   context && type === 'switch' && '.form-switch.form-check .form-check-input', (context === null || context === void 0 ? void 0 : context.reverse) && type === 'switch' && '.form-switch.form-check-reverse .form-check-input', type === 'switch' && '.form-switch .form-check-input', type === 'switch' && value && '.form-switch .form-check-input:checked']);
   var resolveStyle = useStyle([classes, style]);
-
-  var handleFocus = function handleFocus() {
-    setFocused(true);
-    onFocus();
-  };
-
-  var handleBlur = function handleBlur() {
-    setFocused(false);
-    onBlur();
-  };
-
   var BaseFormCheckInput = reactNative.Platform.OS === 'web' && !useNativeComponent ? FormCheckInputWeb : FormCheckInputNative;
   return /*#__PURE__*/React__default["default"].createElement(BaseFormCheckInput, _extends({}, elementProps, {
     ref: modifierRef,
     type: type,
     value: value,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
+    onFocus: function onFocus() {
+      setFocused(true);
+
+      _onFocus();
+    },
+    onBlur: function onBlur() {
+      setFocused(false);
+
+      _onBlur();
+    },
     disabled: disabled,
+    autoFocus: autoFocus,
     style: resolveStyle({
       media: media,
       interaction: {
-        focused: focused
+        focus: focused,
+        focusVisible: focused
       }
     })
   }));
@@ -5201,7 +5536,7 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
   return /*#__PURE__*/React__default["default"].createElement(overlays.OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
     placement: transformPlacement(media, direction, center, start, end),
     targetRef: toggleRef,
-    offset: convertToNumber(StyleSheet.value('dropdown-spacer')),
+    offset: normalizeNumber(StyleSheet.value('dropdown-spacer')),
     visible: visible
   }, function (overlay, overlayRef) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
@@ -5740,10 +6075,11 @@ var FormText = /*#__PURE__*/React__default["default"].forwardRef(function (props
 FormText.displayName = 'FormText';
 FormText.propTypes = propTypes$V;
 
-var _excluded$S = ["onFocus", "onBlur", "style", "styleName"];
+var _excluded$S = ["onFocus", "onBlur", "autoFocus", "style", "styleName"];
 var propTypes$U = {
   onFocus: PropTypes__default["default"].func,
   onBlur: PropTypes__default["default"].func,
+  autoFocus: PropTypes__default["default"].bool,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any,
   // eslint-disable-next-line react/forbid-prop-types
@@ -5754,11 +6090,13 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
       _onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
       _props$onBlur = props.onBlur,
       _onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
+      _props$autoFocus = props.autoFocus,
+      autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
       style = props.style,
       styleName = props.styleName,
       elementProps = _objectWithoutProperties(props, _excluded$S);
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(autoFocus),
       _useState2 = _slicedToArray(_useState, 2),
       focused = _useState2[0],
       setFocused = _useState2[1];
@@ -5767,20 +6105,22 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   var resolveStyle = useStyle(style, styleName);
   return /*#__PURE__*/React__default["default"].createElement(reactNative.TextInput, _extends({}, elementProps, {
     ref: ref,
-    onFocus: function onFocus() {
+    onFocus: function onFocus(event) {
       setFocused(true);
 
-      _onFocus();
+      _onFocus(event);
     },
-    onBlur: function onBlur() {
+    onBlur: function onBlur(event) {
       setFocused(false);
 
-      _onBlur();
+      _onBlur(event);
     },
+    autoFocus: autoFocus,
     style: resolveStyle({
       media: media,
       interaction: {
-        focused: focused
+        focus: focused,
+        focusVisible: focused
       }
     })
   }));
@@ -6216,7 +6556,7 @@ function injectPopover(Target) {
         targetRef = _useTrigger.targetRef,
         templateProps = _useTrigger.templateProps;
 
-    var offset = convertToNumber(StyleSheet.value('popover-arrow-height'));
+    var offset = normalizeNumber(StyleSheet.value('popover-arrow-height'));
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(overlays.OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
       placement: placement,
       offset: offset,
@@ -6411,7 +6751,7 @@ function injectTooltip(Target) {
         targetRef = _useTrigger.targetRef,
         templateProps = _useTrigger.templateProps;
 
-    var offset = convertToNumber(StyleSheet.value('tooltip-arrow-height'));
+    var offset = normalizeNumber(StyleSheet.value('tooltip-arrow-height'));
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(overlays.OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
       placement: placement,
       targetRef: targetRef,
@@ -6522,11 +6862,11 @@ var styles$y = StyleSheet.create(_objectSpread2({
 }, each(THEME_COLORS, function (state, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), shiftColor(value, function (t) {
     return t['list-group-item-bg-scale'];
-  }, value))), _defineProperty(_ref, ".list-group-item-".concat(state, " --text"), css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(function (t) {
+  }))), _defineProperty(_ref, ".list-group-item-".concat(state, " --text"), css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), shiftColor(value, function (t) {
     return t['list-group-item-color-scale'];
-  }, value))), _ref;
+  }))), _ref;
 })));
 var ListGroupItem = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var children = props.children,
@@ -6582,19 +6922,19 @@ var actionStyles = StyleSheet.create(_objectSpread2({
 }, each(THEME_COLORS, function (state, value) {
   var _ref;
 
-  return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state, "-action"), css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n      }\n    "])), shadeColor(0.1, shiftColor(function (t) {
+  return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state, "-action"), css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:focus {\n        background-color: ", ";\n      }\n    "])), shadeColor(shiftColor(value, function (t) {
     return t['list-group-item-bg-scale'];
-  }, value)), shadeColor(0.1, shiftColor(function (t) {
+  }), 0.1), shadeColor(shiftColor(value, function (t) {
     return t['list-group-item-bg-scale'];
-  }, value)))), _defineProperty(_ref, ".list-group-item-".concat(state, "-action --text"), css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral(["\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n    "])), shiftColor(function (t) {
+  }), 0.1))), _defineProperty(_ref, ".list-group-item-".concat(state, "-action --text"), css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral(["\n      &:hover {\n        color: ", ";\n      }\n\n      &:focus {\n        color: ", ";\n      }\n    "])), shiftColor(value, function (t) {
     return t['list-group-item-color-scale'];
-  }, value), shiftColor(function (t) {
+  }), shiftColor(value, function (t) {
     return t['list-group-item-color-scale'];
-  }, value))), _defineProperty(_ref, ".list-group-item-".concat(state, "-action.active"), css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(function (t) {
+  }))), _defineProperty(_ref, ".list-group-item-".concat(state, "-action.active"), css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border-color: ", ";\n    "])), shiftColor(value, function (t) {
     return t['list-group-item-color-scale'];
-  }, value), shiftColor(function (t) {
+  }), shiftColor(value, function (t) {
     return t['list-group-item-color-scale'];
-  }, value))), _defineProperty(_ref, ".list-group-item-".concat(state, "-action.active --text"), css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n      color: $white;\n    "])))), _ref;
+  }))), _defineProperty(_ref, ".list-group-item-".concat(state, "-action.active --text"), css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n      color: $white;\n    "])))), _ref;
 })));
 var ListGroupItemAction = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var _useModifier = useModifier('useTabbable', props, ref),
@@ -6693,17 +7033,11 @@ ListGroup.propTypes = propTypes$F;
 ListGroup.Item = ListGroupItem;
 ListGroup.ItemAction = ListGroupItemAction;
 
-var _excluded$C = ["children", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur", "onPressIn", "onPressOut", "style"];
+var _excluded$C = ["children", "style"];
 
 var _templateObject$w;
 var propTypes$E = {
   children: PropTypes__default["default"].node.isRequired,
-  onMouseEnter: PropTypes__default["default"].func,
-  onMouseLeave: PropTypes__default["default"].func,
-  onFocus: PropTypes__default["default"].func,
-  onBlur: PropTypes__default["default"].func,
-  onPressIn: PropTypes__default["default"].func,
-  onPressOut: PropTypes__default["default"].func,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any
 };
@@ -6722,81 +7056,24 @@ var Link = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
       actionRef = _useAction2[1];
 
   var children = actionProps.children,
-      _actionProps$onMouseE = actionProps.onMouseEnter,
-      _onMouseEnter = _actionProps$onMouseE === void 0 ? function () {} : _actionProps$onMouseE,
-      _actionProps$onMouseL = actionProps.onMouseLeave,
-      _onMouseLeave = _actionProps$onMouseL === void 0 ? function () {} : _actionProps$onMouseL,
-      _actionProps$onFocus = actionProps.onFocus,
-      _onFocus = _actionProps$onFocus === void 0 ? function () {} : _actionProps$onFocus,
-      _actionProps$onBlur = actionProps.onBlur,
-      _onBlur = _actionProps$onBlur === void 0 ? function () {} : _actionProps$onBlur,
-      _actionProps$onPressI = actionProps.onPressIn,
-      _onPressIn = _actionProps$onPressI === void 0 ? function () {} : _actionProps$onPressI,
-      _actionProps$onPressO = actionProps.onPressOut,
-      _onPressOut = _actionProps$onPressO === void 0 ? function () {} : _actionProps$onPressO,
       style = actionProps.style,
       elementProps = _objectWithoutProperties(actionProps, _excluded$C);
 
   var media = useMedia();
+  var classes = getStyles(styles$w, ['link']);
+  var resolveStyle = useStyle([classes, style]);
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      focused = _useState2[0],
-      setFocused = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      hovered = _useState4[0],
-      setHovered = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      pressed = _useState6[0],
-      setPressed = _useState6[1];
+  var _useInteractionState = useInteractionState(elementProps),
+      interaction = _useInteractionState.interaction,
+      interactionProps = _useInteractionState.interactionProps;
 
-  var classes = getStyles(styles$w, ['link', hovered]);
-  var resolveStyle = useStyle([classes, style]);
-  return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
+  return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, interactionProps, {
     ref: actionRef,
     accessibilityRole: getRole$2(actionProps),
     accessible: true,
-    onFocus: function onFocus(e) {
-      setFocused(true);
-
-      _onFocus(e);
-    },
-    onBlur: function onBlur(e) {
-      setFocused(false);
-
-      _onBlur(e);
-    },
-    onMouseEnter: function onMouseEnter(e) {
-      setHovered(true);
-
-      _onMouseEnter(e);
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      setHovered(false);
-
-      _onMouseLeave(e);
-    },
-    onPressIn: function onPressIn(e) {
-      setPressed(true);
-
-      _onPressIn(e);
-    },
-    onPressOut: function onPressOut(e) {
-      setPressed(false);
-
-      _onPressOut(e);
-    },
     style: resolveStyle({
       media: media,
-      interaction: {
-        focused: focused,
-        hovered: hovered,
-        pressed: pressed
-      }
+      interaction: interaction
     })
   }), children);
 });
@@ -8062,7 +8339,7 @@ var PickerItem = /*#__PURE__*/React__default["default"].forwardRef(function (pro
 PickerItem.displayName = 'PickerItem';
 PickerItem.propTypes = propTypes$i;
 
-var _excluded$g = ["children", "onFocus", "onBlur", "placeholderTextColor", "size", "disabled", "valid", "invalid", "useNativeComponent", "style", "styleName"];
+var _excluded$g = ["children", "onFocus", "onBlur", "placeholderTextColor", "size", "disabled", "valid", "invalid", "useNativeComponent", "autoFocus", "style", "styleName"];
 
 var _templateObject$d, _templateObject2$9, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$1;
 /* eslint-disable react/no-unused-prop-types */
@@ -8077,6 +8354,7 @@ var propTypes$h = {
   valid: PropTypes__default["default"].bool,
   invalid: PropTypes__default["default"].bool,
   useNativeComponent: PropTypes__default["default"].bool,
+  autoFocus: PropTypes__default["default"].bool,
   // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes__default["default"].any,
   // eslint-disable-next-line react/forbid-prop-types
@@ -8109,9 +8387,9 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
 
   var children = modifierProps.children,
       _modifierProps$onFocu = modifierProps.onFocus,
-      onFocus = _modifierProps$onFocu === void 0 ? function () {} : _modifierProps$onFocu,
+      _onFocus = _modifierProps$onFocu === void 0 ? function () {} : _modifierProps$onFocu,
       _modifierProps$onBlur = modifierProps.onBlur,
-      onBlur = _modifierProps$onBlur === void 0 ? function () {} : _modifierProps$onBlur,
+      _onBlur = _modifierProps$onBlur === void 0 ? function () {} : _modifierProps$onBlur,
       _modifierProps$placeh = modifierProps.placeholderTextColor,
       placeholderTextColor = _modifierProps$placeh === void 0 ? StyleSheet.value('input-placeholder-color') : _modifierProps$placeh,
       size = modifierProps.size,
@@ -8123,13 +8401,15 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
       invalid = _modifierProps$invali === void 0 ? false : _modifierProps$invali,
       _modifierProps$useNat = modifierProps.useNativeComponent,
       useNativeComponent = _modifierProps$useNat === void 0 ? false : _modifierProps$useNat,
+      _modifierProps$autoFo = modifierProps.autoFocus,
+      autoFocus = _modifierProps$autoFo === void 0 ? false : _modifierProps$autoFo,
       style = modifierProps.style,
       styleName = modifierProps.styleName,
       elementProps = _objectWithoutProperties(modifierProps, _excluded$g);
 
   var media = useMedia();
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(autoFocus),
       _useState2 = _slicedToArray(_useState, 2),
       focused = _useState2[0],
       setFocused = _useState2[1];
@@ -8137,17 +8417,6 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
   var classes = getStyles(styles$d, ['select', // reboot
   '.form-select', disabled && '.form-select.disabled', size === 'sm' && '.form-select-sm', size === 'lg' && '.form-select-lg', valid && '.form-select:valid', invalid && '.form-select:invalid']);
   var resolveStyle = useStyle([classes, style], styleName);
-
-  var handleFocus = function handleFocus() {
-    setFocused(true);
-    onFocus();
-  };
-
-  var handleBlur = function handleBlur() {
-    setFocused(false);
-    onBlur();
-  };
-
   var BasePicker = reactNative.Platform.OS === 'web' && !useNativeComponent ? PickerWeb : PickerNative;
   return /*#__PURE__*/React__default["default"].createElement(PickerContext.Provider, {
     value: {
@@ -8156,13 +8425,23 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
   }, /*#__PURE__*/React__default["default"].createElement(BasePicker, _extends({}, elementProps, {
     ref: modifierRef,
     placeholderTextColor: placeholderTextColor,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
+    onFocus: function onFocus(event) {
+      setFocused(true);
+
+      _onFocus(event);
+    },
+    onBlur: function onBlur(event) {
+      setFocused(false);
+
+      _onBlur(event);
+    },
     disabled: disabled,
+    autoFocus: autoFocus,
     style: resolveStyle({
       media: media,
       interaction: {
-        focused: focused
+        focus: focused,
+        focusVisible: focused
       }
     })
   }), children));
@@ -8556,12 +8835,12 @@ var propTypes$7 = {
   style: PropTypes__default["default"].any
 };
 var styles$5 = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
-  '.spinner-border': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    width: $spinner-width;\n    height: $spinner-height;\n    // vertical-align: $spinner-vertical-align;\n    border-width: $spinner-border-width;\n    border-style: solid;\n    border-top-color: $body-color;\n    border-bottom-color: $body-color;\n    border-left-color: $body-color;\n    // workaround for issue https://github.com/facebook/react-native/issues/34722\n    border-right-color: rgba(0, 0, 0, 0.01); // transparent;\n    border-radius: $spinner-width * 0.5; // 50%;\n    // animation: $spinner-animation-speed linear infinite spinner-border;\n  "])))
+  '.spinner-border': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    width: $spinner-width;\n    height: $spinner-height;\n    // vertical-align: $spinner-vertical-align;\n    border-width: $spinner-border-width;\n    border-style: solid;\n    border-top-color: $body-color;\n    border-bottom-color: $body-color;\n    border-left-color: $body-color;\n    // workaround for issue https://github.com/facebook/react-native/issues/34722\n    border-right-color: rgba(0, 0, 0, 0.01); // transparent;\n    border-radius: $spinner-width * 50%;\n    // animation: $spinner-animation-speed linear infinite spinner-border;\n  "])))
 }, each(THEME_COLORS, function (color, value) {
   return _defineProperty({}, ".spinner-border-".concat(color), css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n      border-top-color: ", ";\n      border-bottom-color: ", ";\n      border-left-color: ", ";\n    "])), value, value, value));
 })), {}, {
   '.spinner-border-sm': css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n    width: $spinner-width-sm;\n    height: $spinner-height-sm;\n    border-width: $spinner-border-width-sm;\n  "]))),
-  '.spinner-grow': css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    width: $spinner-width;\n    height: $spinner-height;\n    // vertical-align: $spinner-vertical-align;\n    background-color: $body-color;\n    border-radius: $spinner-width * 0.5; // 50%;\n    opacity: 0;\n    // animation: $spinner-animation-speed linear infinite spinner-grow;\n  "])))
+  '.spinner-grow': css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    width: $spinner-width;\n    height: $spinner-height;\n    // vertical-align: $spinner-vertical-align;\n    background-color: $body-color;\n    border-radius: $spinner-width * 50%;\n    opacity: 0;\n    // animation: $spinner-animation-speed linear infinite spinner-grow;\n  "])))
 }, each(THEME_COLORS, function (color, value) {
   return _defineProperty({}, ".spinner-grow-".concat(color), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), value));
 })), {}, {