bootstrap-rn 0.2.10 → 0.2.11

package/dist/bootstrap-rn.umd.js

@@ -334,7 +334,7 @@
     return PARSED_PLACEMENT_CACHE[input];
   }
 
-  function _extends$2() { _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+  function _extends$1() { _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
   const PortalContext = /*#__PURE__*/React__default["default"].createContext(null);
   let globalOverlayCounter = 0;
   function PortalProvider(props) {
@@ -388,7 +388,7 @@
     style,
     ...props
   }) {
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$2({
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$1({
       pointerEvents: "box-none",
       style: [reactNative.StyleSheet.absoluteFill, style],
       collapsable: false
@@ -513,8 +513,8 @@
     return obj;
   }
 
-  function _extends$1() {
-    _extends$1 = Object.assign || function (target) {
+  function _extends() {
+    _extends = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -528,19 +528,19 @@
       return target;
     };
 
-    return _extends$1.apply(this, arguments);
+    return _extends.apply(this, arguments);
   }
 
-  function _setPrototypeOf$1(o, p) {
-    _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
 
-    return _setPrototypeOf$1(o, p);
+    return _setPrototypeOf(o, p);
   }
 
-  function _isNativeReflectConstruct$1() {
+  function _isNativeReflectConstruct() {
     if (typeof Reflect === "undefined" || !Reflect.construct) return false;
     if (Reflect.construct.sham) return false;
     if (typeof Proxy === "function") return true;
@@ -553,21 +553,21 @@
     }
   }
 
-  function _construct$1(Parent, args, Class) {
-    if (_isNativeReflectConstruct$1()) {
-      _construct$1 = Reflect.construct;
+  function _construct(Parent, args, Class) {
+    if (_isNativeReflectConstruct()) {
+      _construct = Reflect.construct;
     } else {
-      _construct$1 = function _construct(Parent, args, Class) {
+      _construct = function _construct(Parent, args, Class) {
         var a = [null];
         a.push.apply(a, args);
         var Constructor = Function.bind.apply(Parent, a);
         var instance = new Constructor();
-        if (Class) _setPrototypeOf$1(instance, Class.prototype);
+        if (Class) _setPrototypeOf(instance, Class.prototype);
         return instance;
       };
     }
 
-    return _construct$1.apply(null, arguments);
+    return _construct.apply(null, arguments);
   }
 
   function _objectWithoutPropertiesLoose(source, excluded) {
@@ -622,6 +622,10 @@
     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();
   }
@@ -931,7 +935,7 @@
     }
   };
 
-  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) === ':';
@@ -1041,7 +1045,7 @@
       args[_key] = arguments[_key];
     }
 
-    var input = _construct$1(InputStream, args);
+    var input = _construct(InputStream, args);
 
     var children = [];
 
@@ -2836,128 +2840,145 @@
 
   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;
-    }
+  var UnitValue = /*#__PURE__*/function () {
+    function UnitValue(value) {
+      var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'number';
 
-    if (typeof value === 'number') {
-      return [value, null];
-    }
+      _classCallCheck(this, UnitValue);
 
-    var matchedValue = value.match(valueRE);
+      _defineProperty(this, "value", void 0);
 
-    if (matchedValue) {
-      return [parseFloat(value), matchedValue[2]];
-    }
+      _defineProperty(this, "unit", void 0);
 
-    return [value, undefined];
-  };
-
-  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);
 
-  function calculate(left, operator, right) {
-    var _parseValue = parseValue(left),
-        _parseValue2 = _slicedToArray(_parseValue, 2),
-        leftValue = _parseValue2[0],
-        leftUnit = _parseValue2[1];
+  var fixRounding = function fixRounding(value) {
+    return Math.round(value * POWER) / POWER;
+  };
 
-    var _parseValue3 = parseValue(right),
-        _parseValue4 = _slicedToArray(_parseValue3, 2),
-        rightValue = _parseValue4[0],
-        rightUnit = _parseValue4[1];
+  var calculateValue = function calculateValue(value1, operator, value2) {
+    switch (operator) {
+      case '+':
+        return value1 + value2;
 
-    var unit = getUnit(leftUnit, rightUnit);
-    return "".concat(calculateValue(leftValue, operator, rightValue)).concat(unit);
-  }
+      case '-':
+        return 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 fixRounding(value1 / value2);
 
-  function calculateAdvanced(left, operator, right) {
-    var parsedLeft = parseValue(left);
+      case '%':
+        return value1 % value2;
 
-    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.
@@ -2965,802 +2986,316 @@
     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);
     });
   }
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
+  // 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 _extends.apply(this, arguments);
-  }
 
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
+    return [f(0), f(8), f(4)];
+  };
 
-    return self;
-  }
+  var RgbaValue = /*#__PURE__*/function () {
+    function RgbaValue(red, green, blue) {
+      var alpha = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
-  function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    };
-    return _setPrototypeOf(o, p);
-  }
+      _classCallCheck(this, RgbaValue);
 
-  function _inheritsLoose(subClass, superClass) {
-    subClass.prototype = Object.create(superClass.prototype);
-    subClass.prototype.constructor = subClass;
-    _setPrototypeOf(subClass, superClass);
-  }
+      _defineProperty(this, "red", void 0);
 
-  function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
-      return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _getPrototypeOf(o);
-  }
+      _defineProperty(this, "green", void 0);
 
-  function _isNativeFunction(fn) {
-    return Function.toString.call(fn).indexOf("[native code]") !== -1;
-  }
+      _defineProperty(this, "blue", void 0);
 
-  function _isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
-
-    try {
-      Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
+      _defineProperty(this, "alpha", void 0);
 
-  function _construct(Parent, args, Class) {
-    if (_isNativeReflectConstruct()) {
-      _construct = Reflect.construct.bind();
-    } else {
-      _construct = function _construct(Parent, args, Class) {
-        var a = [null];
-        a.push.apply(a, args);
-        var Constructor = Function.bind.apply(Parent, a);
-        var instance = new Constructor();
-        if (Class) _setPrototypeOf(instance, Class.prototype);
-        return instance;
-      };
+      this.red = red;
+      this.green = green;
+      this.blue = blue;
+      this.alpha = alpha;
     }
 
-    return _construct.apply(null, arguments);
-  }
-
-  function _wrapNativeSuper(Class) {
-    var _cache = typeof Map === "function" ? new Map() : undefined;
-
-    _wrapNativeSuper = function _wrapNativeSuper(Class) {
-      if (Class === null || !_isNativeFunction(Class)) return Class;
-
-      if (typeof Class !== "function") {
-        throw new TypeError("Super expression must either be null or a function");
+    _createClass(RgbaValue, [{
+      key: "toRgb",
+      value: function toRgb() {
+        return [this.red, this.green, this.blue];
       }
-
-      if (typeof _cache !== "undefined") {
-        if (_cache.has(Class)) return _cache.get(Class);
-
-        _cache.set(Class, Wrapper);
+    }, {
+      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);
+        }
 
-      function Wrapper() {
-        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+        return "#".concat(values.map(function (x) {
+          var hex = x.toString(16);
+          return hex.length === 1 ? "0".concat(hex) : hex;
+        }).join(''));
       }
-
-      Wrapper.prototype = Object.create(Class.prototype, {
-        constructor: {
-          value: Wrapper,
-          enumerable: false,
-          writable: true,
-          configurable: true
+    }], [{
+      key: "parse",
+      value: function parse(value) {
+        if (value instanceof RgbaValue) {
+          return value;
         }
-      });
-      return _setPrototypeOf(Wrapper, Class);
-    };
 
-    return _wrapNativeSuper(Class);
-  }
+        var color = colorNames[value] || value; // Handle hex value
 
-  // based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
+        var hexMatch = color.match(hexRE) || color.match(hexRgbaRE) || color.match(shortHexRE) || color.match(shortRgbaHexRE);
 
-  /**
-   * Parse errors.md and turn it into a simple hash of code: message
-   * @private
-   */
-  var ERRORS = {
-    "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
-    "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
-    "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
-    "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
-    "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
-    "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
-    "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
-    "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
-    "9": "Please provide a number of steps to the modularScale helper.\n\n",
-    "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-    "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
-    "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
-    "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
-    "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "16": "You must provide a template to this method.\n\n",
-    "17": "You passed an unsupported selector state to this method.\n\n",
-    "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-    "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-    "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-    "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-    "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-    "23": "fontFace expects a name of a font-family.\n\n",
-    "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-    "25": "fontFace expects localFonts to be an array.\n\n",
-    "26": "fontFace expects fileFormats to be an array.\n\n",
-    "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-    "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
-    "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-    "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-    "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
-    "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
-    "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
-    "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-    "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-    "36": "Property must be a string value.\n\n",
-    "37": "Syntax Error at %s.\n\n",
-    "38": "Formula contains a function that needs parentheses at %s.\n\n",
-    "39": "Formula is missing closing parenthesis at %s.\n\n",
-    "40": "Formula has too many closing parentheses at %s.\n\n",
-    "41": "All values in a formula must have the same unit or be unitless.\n\n",
-    "42": "Please provide a number of steps to the modularScale helper.\n\n",
-    "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-    "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
-    "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
-    "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
-    "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-    "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-    "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-    "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
-    "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
-    "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-    "53": "fontFace expects localFonts to be an array.\n\n",
-    "54": "fontFace expects fileFormats to be an array.\n\n",
-    "55": "fontFace expects a name of a font-family.\n\n",
-    "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
-    "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-    "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
-    "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-    "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-    "61": "Property must be a string value.\n\n",
-    "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-    "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-    "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
-    "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
-    "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
-    "67": "You must provide a template to this method.\n\n",
-    "68": "You passed an unsupported selector state to this method.\n\n",
-    "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
-    "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
-    "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-    "73": "Please provide a valid CSS variable.\n\n",
-    "74": "CSS variable not found and no default was provided.\n\n",
-    "75": "important requires a valid style object, got a %s instead.\n\n",
-    "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
-    "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
-    "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
-  };
-  /**
-   * super basic version of sprintf
-   * @private
-   */
-
-  function format() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+        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 a = args[0];
-    var b = [];
-    var c;
 
-    for (c = 1; c < args.length; c += 1) {
-      b.push(args[c]);
-    }
+        var rgbMatch = color.match(rgbRE) || color.match(rgbaRE);
 
-    b.forEach(function (d) {
-      a = a.replace(/%[a-z]/, d);
-    });
-    return a;
-  }
-  /**
-   * Create an error file out of errors.md for development and a simple web link to the full errors
-   * in production mode.
-   * @private
-   */
+        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 PolishedError = /*#__PURE__*/function (_Error) {
-    _inheritsLoose(PolishedError, _Error);
 
-    function PolishedError(code) {
-      var _this;
+        var hslMatch = color.match(hslRE) || color.match(hslaRE);
 
-      {
-        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-          args[_key2 - 1] = arguments[_key2];
+        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]));
         }
 
-        _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
-      }
-
-      return _assertThisInitialized(_this);
-    }
-
-    return PolishedError;
-  }( /*#__PURE__*/_wrapNativeSuper(Error));
-
-  function colorToInt(color) {
-    return Math.round(color * 255);
-  }
-
-  function convertToInt(red, green, blue) {
-    return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
-  }
-
-  function hslToRgb(hue, saturation, lightness, convert) {
-    if (convert === void 0) {
-      convert = convertToInt;
-    }
-
-    if (saturation === 0) {
-      // achromatic
-      return convert(lightness, lightness, lightness);
-    } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
-
-    var huePrime = (hue % 360 + 360) % 360 / 60;
-    var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-    var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-    var red = 0;
-    var green = 0;
-    var blue = 0;
-
-    if (huePrime >= 0 && huePrime < 1) {
-      red = chroma;
-      green = secondComponent;
-    } else if (huePrime >= 1 && huePrime < 2) {
-      red = secondComponent;
-      green = chroma;
-    } else if (huePrime >= 2 && huePrime < 3) {
-      green = chroma;
-      blue = secondComponent;
-    } else if (huePrime >= 3 && huePrime < 4) {
-      green = secondComponent;
-      blue = chroma;
-    } else if (huePrime >= 4 && huePrime < 5) {
-      red = secondComponent;
-      blue = chroma;
-    } else if (huePrime >= 5 && huePrime < 6) {
-      red = chroma;
-      blue = secondComponent;
-    }
-
-    var lightnessModification = lightness - chroma / 2;
-    var finalRed = red + lightnessModification;
-    var finalGreen = green + lightnessModification;
-    var finalBlue = blue + lightnessModification;
-    return convert(finalRed, finalGreen, finalBlue);
-  }
-
-  var namedColorMap = {
-    aliceblue: 'f0f8ff',
-    antiquewhite: 'faebd7',
-    aqua: '00ffff',
-    aquamarine: '7fffd4',
-    azure: 'f0ffff',
-    beige: 'f5f5dc',
-    bisque: 'ffe4c4',
-    black: '000',
-    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',
-    darkslategray: '2f4f4f',
-    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',
-    lightslategray: '789',
-    lightslategrey: '789',
-    lightsteelblue: 'b0c4de',
-    lightyellow: 'ffffe0',
-    lime: '0f0',
-    limegreen: '32cd32',
-    linen: 'faf0e6',
-    magenta: 'f0f',
-    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: '639',
-    red: 'f00',
-    rosybrown: 'bc8f8f',
-    royalblue: '4169e1',
-    saddlebrown: '8b4513',
-    salmon: 'fa8072',
-    sandybrown: 'f4a460',
-    seagreen: '2e8b57',
-    seashell: 'fff5ee',
-    sienna: 'a0522d',
-    silver: 'c0c0c0',
-    skyblue: '87ceeb',
-    slateblue: '6a5acd',
-    slategray: '708090',
-    slategrey: '708090',
-    snow: 'fffafa',
-    springgreen: '00ff7f',
-    steelblue: '4682b4',
-    tan: 'd2b48c',
-    teal: '008080',
-    thistle: 'd8bfd8',
-    tomato: 'ff6347',
-    turquoise: '40e0d0',
-    violet: 'ee82ee',
-    wheat: 'f5deb3',
-    white: 'fff',
-    whitesmoke: 'f5f5f5',
-    yellow: 'ff0',
-    yellowgreen: '9acd32'
-  };
-  /**
-   * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
-   * @private
-   */
-
-  function nameToHex(color) {
-    if (typeof color !== 'string') return color;
-    var normalizedColorName = color.toLowerCase();
-    return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
-  }
-
-  var hexRegex = /^#[a-fA-F0-9]{6}$/;
-  var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
-  var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
-  var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
-  var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-  var hslRegex = /^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 hslaRegex = /^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;
-  /**
-   * Returns an RgbColor or RgbaColor object. This utility function is only useful
-   * if want to extract a color component. With the color util `toColorString` you
-   * can convert a RgbColor or RgbaColor object back to a string.
-   *
-   * @example
-   * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
-   * const color1 = parseToRgb('rgb(255, 0, 0)');
-   * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
-   * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
-   */
-
-  function parseToRgb(color) {
-    if (typeof color !== 'string') {
-      throw new PolishedError(3);
-    }
-
-    var normalizedColor = nameToHex(color);
-
-    if (normalizedColor.match(hexRegex)) {
-      return {
-        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
-      };
-    }
-
-    if (normalizedColor.match(hexRgbaRegex)) {
-      var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
-      return {
-        red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-        green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-        blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
-        alpha: alpha
-      };
-    }
-
-    if (normalizedColor.match(reducedHexRegex)) {
-      return {
-        red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-        green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-        blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
-      };
-    }
-
-    if (normalizedColor.match(reducedRgbaHexRegex)) {
-      var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
-
-      return {
-        red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-        green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-        blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
-        alpha: _alpha
-      };
-    }
-
-    var rgbMatched = rgbRegex.exec(normalizedColor);
-
-    if (rgbMatched) {
-      return {
-        red: parseInt("" + rgbMatched[1], 10),
-        green: parseInt("" + rgbMatched[2], 10),
-        blue: parseInt("" + rgbMatched[3], 10)
-      };
-    }
-
-    var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-
-    if (rgbaMatched) {
-      return {
-        red: parseInt("" + rgbaMatched[1], 10),
-        green: parseInt("" + rgbaMatched[2], 10),
-        blue: parseInt("" + rgbaMatched[3], 10),
-        alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
-      };
-    }
-
-    var hslMatched = hslRegex.exec(normalizedColor);
-
-    if (hslMatched) {
-      var hue = parseInt("" + hslMatched[1], 10);
-      var saturation = parseInt("" + hslMatched[2], 10) / 100;
-      var lightness = parseInt("" + hslMatched[3], 10) / 100;
-      var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
-      var hslRgbMatched = rgbRegex.exec(rgbColorString);
-
-      if (!hslRgbMatched) {
-        throw new PolishedError(4, normalizedColor, rgbColorString);
+        throw new Error("Unknown color \"".concat(value, "\"."));
       }
+    }]);
 
-      return {
-        red: parseInt("" + hslRgbMatched[1], 10),
-        green: parseInt("" + hslRgbMatched[2], 10),
-        blue: parseInt("" + hslRgbMatched[3], 10)
-      };
-    }
-
-    var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
-
-    if (hslaMatched) {
-      var _hue = parseInt("" + hslaMatched[1], 10);
-
-      var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
-
-      var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-
-      var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-
-      var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
-
-      if (!_hslRgbMatched) {
-        throw new PolishedError(4, normalizedColor, _rgbColorString);
-      }
-
-      return {
-        red: parseInt("" + _hslRgbMatched[1], 10),
-        green: parseInt("" + _hslRgbMatched[2], 10),
-        blue: parseInt("" + _hslRgbMatched[3], 10),
-        alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
-      };
-    }
-
-    throw new PolishedError(5);
-  }
-
-  /**
-   * Reduces hex values if possible e.g. #ff8866 to #f86
-   * @private
-   */
-  var reduceHexValue = function reduceHexValue(value) {
-    if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
-      return "#" + value[1] + value[3] + value[5];
-    }
-
-    return value;
-  };
-
-  var reduceHexValue$1 = reduceHexValue;
-
-  function numberToHex(value) {
-    var hex = value.toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  }
+    return RgbaValue;
+  }();
 
-  /**
-   * Returns a string value for the color. The returned result is the smallest possible hex notation.
-   *
-   * @example
-   * // Styles as object usage
-   * const styles = {
-   *   background: rgb(255, 205, 100),
-   *   background: rgb({ red: 255, green: 205, blue: 100 }),
-   * }
-   *
-   * // styled-components usage
-   * const div = styled.div`
-   *   background: ${rgb(255, 205, 100)};
-   *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
-   * `
-   *
-   * // CSS in JS Output
-   *
-   * element {
-   *   background: "#ffcd64";
-   *   background: "#ffcd64";
-   * }
-   */
-  function rgb(value, green, blue) {
-    if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
-      return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
-    } else if (typeof value === 'object' && green === undefined && blue === undefined) {
-      return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
-    }
+  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
 
-    throw new PolishedError(6);
-  }
+  function opacity(value) {
+    return RgbaValue.parse(value).alpha;
+  } // Sass equivalent
 
-  /**
-   * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
-   *
-   * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
-   *
-   * @example
-   * // Styles as object usage
-   * const styles = {
-   *   background: rgba(255, 205, 100, 0.7),
-   *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
-   *   background: rgba(255, 205, 100, 1),
-   *   background: rgba('#ffffff', 0.4),
-   *   background: rgba('black', 0.7),
-   * }
-   *
-   * // styled-components usage
-   * const div = styled.div`
-   *   background: ${rgba(255, 205, 100, 0.7)};
-   *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
-   *   background: ${rgba(255, 205, 100, 1)};
-   *   background: ${rgba('#ffffff', 0.4)};
-   *   background: ${rgba('black', 0.7)};
-   * `
-   *
-   * // CSS in JS Output
-   *
-   * element {
-   *   background: "rgba(255,205,100,0.7)";
-   *   background: "rgba(255,205,100,0.7)";
-   *   background: "#ffcd64";
-   *   background: "rgba(255,255,255,0.4)";
-   *   background: "rgba(0,0,0,0.7)";
-   * }
-   */
-  function rgba$1(firstValue, secondValue, thirdValue, fourthValue) {
-    if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-      var rgbValue = parseToRgb(firstValue);
-      return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-    } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-      return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-    } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
-      return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
-    }
-
-    throw new PolishedError(7);
-  }
-
-  // Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
-  // eslint-disable-next-line no-unused-vars
-  // eslint-disable-next-line no-unused-vars
-  // eslint-disable-next-line no-redeclare
-  function curried(f, length, acc) {
-    return function fn() {
-      // eslint-disable-next-line prefer-rest-params
-      var combined = acc.concat(Array.prototype.slice.call(arguments));
-      return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
-    };
-  } // eslint-disable-next-line no-redeclare
+  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];
 
-  function curry(f) {
-    // eslint-disable-line no-redeclare
-    return curried(f, f.length, []);
+    return new RgbaValue(r, g, b).toHex();
   }
 
-  /**
-   * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
-   *
-   * @example
-   * // Styles as object usage
-   * const styles = {
-   *   background: mix(0.5, '#f00', '#00f')
-   *   background: mix(0.25, '#f00', '#00f')
-   *   background: mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')
-   * }
-   *
-   * // styled-components usage
-   * const div = styled.div`
-   *   background: ${mix(0.5, '#f00', '#00f')};
-   *   background: ${mix(0.25, '#f00', '#00f')};
-   *   background: ${mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')};
-   * `
-   *
-   * // CSS in JS Output
-   *
-   * element {
-   *   background: "#7f007f";
-   *   background: "#3f00bf";
-   *   background: "rgba(63, 0, 191, 0.75)";
-   * }
-   */
-
-  function mix(weight, color, otherColor) {
-    if (color === 'transparent') return otherColor;
-    if (otherColor === 'transparent') return color;
-    if (weight === 0) return otherColor;
-    var parsedColor1 = parseToRgb(color);
-
-    var color1 = _extends({}, parsedColor1, {
-      alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
-    });
-
-    var parsedColor2 = parseToRgb(otherColor);
-
-    var color2 = _extends({}, parsedColor2, {
-      alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
-    }); // The formula is copied from the original Sass implementation:
-    // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
-
-
-    var alphaDelta = color1.alpha - color2.alpha;
-    var x = parseFloat(weight) * 2 - 1;
-    var y = x * alphaDelta === -1 ? x : x + alphaDelta;
-    var z = 1 + x * alphaDelta;
-    var weight1 = (y / z + 1) / 2.0;
-    var weight2 = 1 - weight1;
-    var mixedColor = {
-      red: Math.floor(color1.red * weight1 + color2.red * weight2),
-      green: Math.floor(color1.green * weight1 + color2.green * weight2),
-      blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),
-      alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
-    };
-    return rgba$1(mixedColor);
-  } // prettier-ignore
-
-
-  var curriedMix = /*#__PURE__*/curry
-  /* ::<number | string, string, string, string> */
-  (mix);
-  var mix$1 = curriedMix;
-
   var transformRgbaRE = /rgba\(\s*([#0-9a-z]+)\s*,\s*([\d.Ee]+)\s*\)/g;
 
   function rgba(value) {
-    return value.replace(transformRgbaRE, function (_, color, alpha) {
-      return rgba$1(color, Number(alpha));
+    return value.replace(transformRgbaRE, function (_, hex, alpha) {
+      return rgba$1(hex, alpha);
     });
   }
 
@@ -4088,15 +3623,19 @@
         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;
             }
           }
 
@@ -4199,20 +3738,16 @@
     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
@@ -5088,8 +4623,7 @@
 
       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);
       };
@@ -5118,28 +4652,31 @@
     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 = 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 = parseToRgb(foreground).alpha || 1;
-    return mix$1(opacity, rgba$1(foreground, 1), background);
+    var foregroundRgba = RgbaValue.parse(foreground);
+    return mix(rgba$1(foregroundRgba, 1), background, opacity(foregroundRgba));
   };
 
   var contrastRatio = function contrastRatio(background, foreground) {
@@ -5148,9 +4685,9 @@
     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;
@@ -5179,34 +4716,35 @@
     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 mix$1(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 mix$1(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;
@@ -5216,12 +4754,12 @@
       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;
@@ -5235,12 +4773,12 @@
       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;
@@ -5250,7 +4788,7 @@
       throw new Error('Cannot divide by 0');
     }
 
-    return calculateAdvanced(dividend, '/', divisor);
+    return calculate(dividend, '/', divisor);
   });
   /* eslint-enable */
 
@@ -5264,7 +4802,7 @@
     };
   };
 
-  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'],
@@ -5436,9 +4974,9 @@
       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,
@@ -5502,9 +5040,9 @@
     };
   }, 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);
@@ -5554,9 +5092,9 @@
     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'];
@@ -5564,9 +5102,9 @@
     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'];
@@ -6951,7 +6489,7 @@
     var resolveStyle = useStyle(style, styleName);
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.View, _extends({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -6985,13 +6523,13 @@
   }, 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
     }
@@ -7008,7 +6546,7 @@
 
     var classes = getStyles(styles$1f, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
     var textClasses = getStyles(styles$1f, [".alert-".concat(color, " --text")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: "alert",
       style: [classes, style],
@@ -7068,7 +6606,7 @@
     var resolveStyle = useStyle([// eslint-disable-next-line react/destructuring-assignment
     (!context || !context.hasTextAncestor) && styles$1e.text, // eslint-disable-next-line react/destructuring-assignment
     context && context.style, classes, style], getStyleName(styleName, color));
-    var element = /*#__PURE__*/React__default["default"].createElement(reactNative.Text, _extends$1({}, elementProps, {
+    var element = /*#__PURE__*/React__default["default"].createElement(reactNative.Text, _extends({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -7115,7 +6653,7 @@
     var classes = getStyles(styles$1d, ['.badge']);
     var textClasses = getStyles(styles$1d, ['.badge --text']); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -7183,7 +6721,7 @@
           return;
       }
       var provided = typeof message === 'function' ? message() : message;
-      var value = provided ? prefix + ": " + provided : prefix;
+      var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
       throw new Error(value);
   }
 
@@ -7227,7 +6765,7 @@
     var textClasses = getStyles(styles$1c, [active && '.breadcrumb-item.active --text']);
     var dividerClasses = getStyles(styles$1c, ['.breadcrumb-item + .breadcrumb-item::before']);
     var role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role
     }, optional(active, {
@@ -7267,7 +6805,7 @@
     var classes = getStyles(styles$1b, ['.breadcrumb']);
     var textClasses = getStyles(styles$1b, ['.breadcrumb --text']);
     var role = reactNative.Platform.OS === 'web' ? 'list' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -7303,7 +6841,7 @@
     var classes = getStyles(styles$1a, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'group' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -7333,7 +6871,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$1r);
 
     var classes = getStyles(styles$19, ['.btn-toolbar']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: "toolbar",
       style: [classes, style]
@@ -7395,6 +6933,89 @@
     return [actionProps, concatRefs(actionRef, ref)];
   }
 
+  const useFocusRing = () => {
+    return {
+      focusProps: {},
+      isFocusVisible: false
+    };
+  };
+
+  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;
+        _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 = useFocusRing(),
+        focus = _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,
+      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;
@@ -7465,7 +7086,7 @@
 
     var context = React.useContext(TextStyleContext);
     var classes = getStyles(styles$18, ['caret', "caret-".concat(direction)]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, getBorderColorStyle(color || getColor(context), direction), style]
     }));
@@ -7562,34 +7183,35 @@
     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$1({}, 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
-        })];
-      }
-    }), 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);
+        })],
+        hasAncestor: context && context.hasTextAncestor
+      }
+    }, wrappedChildren) : wrappedChildren);
   });
   Pressable.displayName = 'Pressable';
   Pressable.propTypes = propTypes$1q;
@@ -7637,37 +7259,37 @@
     activeTextStyle: PropTypes.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  "])))
@@ -7717,7 +7339,7 @@
     var activeClasses = getStyles(styles$17, ["".concat(getVariant(color, outline), ".active")]);
     var textClasses = getStyles(styles$17, ['.btn --text', "".concat(getVariant(color, outline), " --text"), color === 'link' && '.btn-link --text', disabled && "".concat(getVariant(color, outline), ".disabled --text"), disabled && color === 'link' && '.btn-link.disabled --text', hasSize(size, group, 'lg') && '.btn-lg --text', hasSize(size, group, 'sm') && '.btn-sm --text']);
     var activeTextClasses = getStyles(styles$17, ["".concat(getVariant(color, outline), ".active --text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: ref,
       active: active,
       disabled: disabled,
@@ -7755,7 +7377,7 @@
     var textClasses = getStyles(styles$16, ['blockquote --text']); // Accessiblity role blockquote is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'blockquote' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -7778,7 +7400,7 @@
     styleName: PropTypes.any
   };
   var styles$15 = StyleSheet.create({
-    body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n    background-color: $body-bg;\n    flex-grow: 1; // 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) {
@@ -7793,7 +7415,7 @@
     var media = useMedia();
     var resolveStyle = useStyle([classes, style], styleName);
     var resolveTextStyle = useStyle([textClasses, textStyle]);
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, _extends({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -7831,7 +7453,7 @@
 
     var classes = getStyles(styles$14, ['.card-body']);
     var textClasses = getStyles(styles$14, [".card-body --text"]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -7862,7 +7484,7 @@
 
     var classes = getStyles(styles$13, ['.card-header']);
     var textClasses = getStyles(styles$13, ['.card-header --text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -7893,7 +7515,7 @@
 
     var classes = getStyles(styles$12, ['.card-footer']);
     var textClasses = getStyles(styles$12, ['.card-footer --text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -7919,7 +7541,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$1f);
 
     var classes = getStyles(styles$11, ['.card']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -8232,17 +7854,11 @@
     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.node,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onHoverIn: PropTypes.func,
-    onHoverOut: PropTypes.func,
-    onPressIn: PropTypes.func,
-    onPressOut: PropTypes.func,
     disabled: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
@@ -8264,19 +7880,7 @@
   });
   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,
@@ -8284,22 +7888,6 @@
         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
@@ -8307,47 +7895,18 @@
     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$1({}, 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]
@@ -8472,7 +8031,7 @@
       return null;
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       nativeID: identifier
     }), children);
@@ -8564,7 +8123,7 @@
     var classes = getStyles(styles$Z, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
     fluid !== true && ".container-".concat(fluid), // Navbar styles
     navbar && '.navbar .container', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .container")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }));
@@ -8680,7 +8239,7 @@
   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 */
@@ -8751,9 +8310,9 @@
     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,
@@ -8762,12 +8321,14 @@
         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];
@@ -8776,29 +8337,28 @@
     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$1({}, elementProps, {
+    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
         }
       })
     }));
@@ -8807,9 +8367,9 @@
   FormCheckInput.propTypes = propTypes$1c;
 
   var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends$1({}, props);
+    var elementProps = _extends({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(FormCheckInput, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(FormCheckInput, _extends({}, elementProps, {
       ref: ref,
       type: "checkbox"
     }));
@@ -8854,7 +8414,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$18);
 
     var classes = getStyles(styles$W, ['*', ".col-".concat(size.toString()), sizeSm && ".col-sm-".concat(sizeSm.toString()), sizeMd && ".col-md-".concat(sizeMd.toString()), sizeLg && ".col-lg-".concat(sizeLg.toString()), sizeXl && ".col-xl-".concat(sizeXl.toString())]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -8881,7 +8441,7 @@
     var classes = getStyles(styles$V, ['code']); // Accessiblity role code is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'code' : null;
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -9205,7 +8765,7 @@
           setVisible(false);
         },
         autoClose: autoClose
-      }), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+      }), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
         ref: concatRefs(dialogRef, ref),
         accessibilityLabelledBy: identifier,
         style: [classes, style],
@@ -9216,7 +8776,7 @@
     return /*#__PURE__*/React__default["default"].createElement(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, {
@@ -9226,7 +8786,7 @@
           setVisible(false);
         },
         autoClose: autoClose
-      }), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+      }), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
         ref: concatRefs(overlayRef, ref),
         accessibilityLabelledBy: identifier,
         style: [classes, overlay.overlayProps.style, {
@@ -9265,7 +8825,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$14);
 
     var classes = getStyles(styles$S, ['heading', ".h".concat(size)]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: "header",
       accessibilityLevel: size,
@@ -9298,7 +8858,7 @@
     var classes = getStyles(styles$R, ['.dropdown-header']);
     var textClasses = getStyles(styles$R, ['.dropdown-header --text']); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(Heading$1, {
@@ -9345,7 +8905,7 @@
     var dropdown = useForcedContext(DropdownContext);
     var classes = getStyles(styles$Q, ['.dropdown-item', active && '.dropdown-item.active', disabled && '.dropdown-item.disabled']);
     var textClasses = getStyles(styles$Q, ['.dropdown-item --text', active && '.dropdown-item.active --text', disabled && '.dropdown-item.disabled --text']);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       onPress: function onPress(event) {
         if (handlePress) handlePress(event);
 
@@ -9387,7 +8947,7 @@
     var classes = getStyles(styles$P, ['.dropdown-item-text']);
     var textClasses = getStyles(styles$P, ['.dropdown-item-text --text']); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -9412,7 +8972,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$10);
 
     var classes = getStyles(styles$O, ['.dropdown-divider']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }));
@@ -9496,7 +9056,7 @@
 
     var dropdown = useDropdown(defaultVisible, visible, onToggle, direction, center, display, autoClose);
     var classes = getStyles(styles$N, ['.dropdown']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(DropdownContext.Provider, {
@@ -9536,7 +9096,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$Z);
 
     var classes = getStyles(styles$M, [".display-".concat(size)]);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
       ref: ref,
       size: 1,
       style: [classes, style]
@@ -9566,7 +9126,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$Y);
 
     var classes = getStyles(styles$L, [".".concat(type, "-feedback")]);
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -9593,7 +9153,7 @@
       node.setAttribute('for', htmlFor);
     }, []);
     var role = reactNative.Platform.OS === 'web' ? 'label' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: concatRefs(forRef, ref),
       accessibilityRole: role
     }), children);
@@ -9634,7 +9194,7 @@
     var classes = getStyles(styles$K, [disabled && '.form-check-input:disabled ~ .form-check-label', '.form-check-label']);
     var textClasses = getStyles(styles$K, ['.form-check-label --text', // validation
     valid && '.form-check-input:valid ~ .form-check-label --text', invalid && '.form-check-input:invalid ~ .form-check-label --text']);
-    return /*#__PURE__*/React__default["default"].createElement(Label, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Label, _extends({}, elementProps, {
       ref: ref,
       disabled: disabled,
       style: [classes, style],
@@ -9675,7 +9235,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$V);
 
     var classes = getStyles(styles$J, ['.form-check', reverse && '.form-check-reverse']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(FormCheckContext.Provider, {
@@ -9713,7 +9273,7 @@
 
     var classes = getStyles(styles$I, ['.form-label']);
     var textClasses = getStyles(styles$I, ['.form-label --text']);
-    return /*#__PURE__*/React__default["default"].createElement(Label, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Label, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -9745,7 +9305,7 @@
     var classes = getStyles(styles$H, ['.form-text']);
     var textClasses = getStyles(styles$H, ['.form-text --text']); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -9755,10 +9315,11 @@
   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.func,
     onBlur: PropTypes.func,
+    autoFocus: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
@@ -9769,33 +9330,37 @@
         _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];
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.TextInput, _extends$1({}, elementProps, {
+    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
         }
       })
     }));
@@ -9879,7 +9444,7 @@
         elementProps = _objectWithoutProperties(modifierProps, _excluded$R);
 
     var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control.disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', !multiline && '.form-control:not(textarea)', !multiline && size === 'sm' && '.form-control-sm:not(textarea)', !multiline && size === 'lg' && '.form-control-lg:not(textarea)', multiline && 'textarea.form-control', multiline && size === 'sm' && 'textarea.form-control-sm', multiline && size === 'lg' && 'textarea.form-control-lg', valid && '.form-control:valid', invalid && '.form-control:invalid']);
-    return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends({}, elementProps, {
       ref: modifierRef,
       placeholderTextColor: placeholderTextColor,
       multiline: multiline,
@@ -10069,7 +9634,7 @@
     var classes = getStyles(styles$F, ['.popover-arrow', popper && ".bs-popover-".concat(placement, " .popover-arrow")]);
     var beforeClasses = getStyles(styles$F, ['.popover-arrow::before', popper && ".bs-popover-".concat(placement, " .popover-arrow::before")]);
     var afterClasses = getStyles(styles$F, ['.popover-arrow::after', popper && ".bs-popover-".concat(placement, " .popover-arrow::after")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, arrowStyle, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
@@ -10104,7 +9669,7 @@
     var classes = getStyles(styles$E, ['.popover-header']);
     var textClasses = getStyles(styles$E, ['.popover-header --text']); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(Heading$1, {
@@ -10137,7 +9702,7 @@
 
     var classes = getStyles(styles$D, ['.popover-body']);
     var textClasses = getStyles(styles$D, ['.popover-body --text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -10183,7 +9748,7 @@
     var textClasses = getStyles(styles$C, ['.popover --text']); // Accessiblity role tooltip is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'tooltip' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -10231,8 +9796,8 @@
           targetRef = _useTrigger.targetRef,
           templateProps = _useTrigger.templateProps;
 
-      var offset = convertToNumber(StyleSheet.value('popover-arrow-height'));
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends$1({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      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(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
         placement: placement,
         offset: offset,
         arrowOffset: offset,
@@ -10246,7 +9811,7 @@
             setVisible(false);
           },
           autoClose: autoClose
-        }), /*#__PURE__*/React__default["default"].createElement(Popover, _extends$1({}, templateProps, {
+        }), /*#__PURE__*/React__default["default"].createElement(Popover, _extends({}, templateProps, {
           ref: overlayRef,
           placement: overlay.placement,
           popper: overlay.rendered,
@@ -10296,7 +9861,7 @@
 
     var classes = getStyles(styles$B, ['.tooltip-arrow', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow")]);
     var beforeClasses = getStyles(styles$B, ['.tooltip-arrow::before', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow::before")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, arrowStyle, style]
     }), /*#__PURE__*/React__default["default"].createElement(View, {
@@ -10329,7 +9894,7 @@
     var classes = getStyles(styles$A, ['.tooltip-inner']);
     var textClasses = getStyles(styles$A, ['.tooltip-inner --text']); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -10381,7 +9946,7 @@
     var textClasses = getStyles(styles$z, ['.tooltip --text']); // Accessiblity role tooltip is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'tooltip' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -10426,8 +9991,8 @@
           targetRef = _useTrigger.targetRef,
           templateProps = _useTrigger.templateProps;
 
-      var offset = convertToNumber(StyleSheet.value('tooltip-arrow-height'));
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends$1({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
+      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(OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
         placement: placement,
         targetRef: targetRef,
         arrowOffset: offset,
@@ -10440,7 +10005,7 @@
             setVisible(false);
           },
           autoClose: autoClose
-        }), /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends$1({}, templateProps, {
+        }), /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends({}, templateProps, {
           ref: overlayRef,
           placement: overlay.placement,
           popper: overlay.rendered,
@@ -10471,7 +10036,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -10495,7 +10060,7 @@
 
     var media = useMedia();
     var resolveStyle = useStyle(style, styleName);
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.ImageBackground, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.ImageBackground, _extends({}, elementProps, {
       ref: ref,
       style: resolveStyle({
         media: media
@@ -10537,11 +10102,11 @@
   }, 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,
@@ -10564,7 +10129,7 @@
     var classes = getStyles(styles$y, ['.list-group-item', first && '.list-group-item:first-child', last && '.list-group-item:last-child', active && '.list-group-item.active', disabled && '.list-group-item.disabled', !first && '.list-group-item + .list-group-item', !first && active && '.list-group-item + .list-group-item.active', flush && '.list-group-item-flush', flush && last && '.list-group-item-flush:last-child', color && ".list-group-item-".concat(color)]);
     var textClasses = getStyles(styles$y, ['.list-group-item --text', active && '.list-group-item.active --text', disabled && '.list-group-item.disabled --text', color && ".list-group-item-".concat(color, " --text")]);
     var role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -10597,19 +10162,19 @@
   }, 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),
@@ -10643,7 +10208,7 @@
     var textClasses = getStyles(styles, ['.list-group-item --text', '.list-group-item-action --text', disabled && '.list-group-item.disabled --text', color && ".list-group-item-".concat(color, " --text"), color && ".list-group-item-".concat(color, "-action --text")]);
     var activeTextClasses = getStyles(styles, ['.list-group-item.active --text', color && ".list-group-item-".concat(color, "-action.active --text")]);
     var role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: modifierRef,
       accessibilityRole: role,
       active: active,
@@ -10693,7 +10258,7 @@
     var classes = getStyles(styles$x, ['.list-group', flush && '.list-group-flush']); // TODO: Implement TabContext
 
     var tabbable = false;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: getRole$1(tabbable),
       style: [classes, style]
@@ -10708,17 +10273,11 @@
   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.node.isRequired,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onPressIn: PropTypes.func,
-    onPressOut: PropTypes.func,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
@@ -10737,81 +10296,24 @@
         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$1({}, 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);
   });
@@ -10844,7 +10346,7 @@
     var resolveStyle = useStyle(style, styleName);
     var resolveTextStyle = useStyle([context && context.style, textStyle]);
     var hasTextStyle = context && context.style || textStyle;
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.ScrollView, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.ScrollView, _extends({}, elementProps, {
       ref: ref,
       contentContainerStyle: resolveContentContainerStyle({
         media: media
@@ -10948,7 +10450,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$A);
 
     var classes = getStyles(styles$v, ['.modal-header']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -10973,7 +10475,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$z);
 
     var classes = getStyles(styles$u, ['.modal-title']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
       size: 5
     }, elementProps, {
       ref: ref,
@@ -11007,7 +10509,7 @@
 
     var classes = getStyles(styles$t, ['.modal-body']);
     var FlexView = scrollable ? ScrollView : View;
-    return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends({}, elementProps, {
       ref: ref,
       style: scrollable ? style : [classes, style],
       contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
@@ -11033,7 +10535,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$x);
 
     var classes = getStyles(styles$s, ['.modal-footer']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -11123,7 +10625,7 @@
       onRequestClose: handleToggle
     }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
       style: backdropClasses
-    }), /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
+    }), /*#__PURE__*/React__default["default"].createElement(FlexView, _extends({}, elementProps, {
       ref: ref,
       style: [classes, scrollable && centeredStyle, style],
       textStyle: textStyle,
@@ -11228,7 +10730,7 @@
     navbar && '.navbar-nav .nav-link --text', navbar && navbar.expand && ".navbar-expand".concat(infix(navbar.expand), " .navbar-nav .nav-link --text"), navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link --text"), navbar && disabled && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link.disabled --text")]);
     var activeTextClasses = getStyles(styles$q, [variant && ".nav-".concat(variant, " .nav-link.active --text"), // Navbar styles
     navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link.active --text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: modifierRef,
       active: active,
       disabled: disabled,
@@ -11284,7 +10786,7 @@
     var tabbable = React.useContext(TabContext);
     var classes = getStyles(styles$p, [!navbar && '.nav', variant === 'tabs' && '.nav-tabs', // Navbar styles
     navbar && '.navbar-nav', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: getRole(tabbable, navbar),
       style: [classes, style]
@@ -11326,7 +10828,7 @@
     var classes = getStyles(styles$o, ['.navbar-text']);
     var textClasses = getStyles(styles$o, [".navbar-".concat(variant, " .navbar-text --text")]); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -11363,7 +10865,7 @@
 
     var classes = getStyles(styles$n, ['.navbar-brand']);
     var textClasses = getStyles(styles$n, ['.navbar-brand --text', ".navbar-".concat(variant, " .navbar-brand --text")]);
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -11402,7 +10904,7 @@
       return null;
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -11479,7 +10981,7 @@
     var background = useBackground(resolveIconStyle({
       media: media
     }));
-    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: ref,
       toggle: useToggleNavbar,
       style: [classes, style],
@@ -11558,7 +11060,7 @@
 
     var navbar = useNavbar(variant, defaultExpanded, expanded, onToggle, expand);
     var classes = getStyles(styles$k, ['.navbar', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand))]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(NavbarContext.Provider, {
@@ -11600,7 +11102,7 @@
 
     var navbar = React.useContext(NavbarContext);
     var classes = getStyles(styles$j, ['.offcanvas-header', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-header")]);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -11625,7 +11127,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$l);
 
     var classes = getStyles(styles$i, ['.offcanvas-title']);
-    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
       size: 5
     }, elementProps, {
       ref: ref,
@@ -11658,7 +11160,7 @@
 
     var navbar = React.useContext(NavbarContext);
     var contentContainerClasses = getStyles(styles$h, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
-    return /*#__PURE__*/React__default["default"].createElement(ScrollView, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(ScrollView, _extends({}, elementProps, {
       ref: ref,
       style: style,
       contentContainerStyle: [contentContainerClasses, contentContainerStyle]
@@ -11738,7 +11240,7 @@
     var textClasses = getStyles(styles$g, ['.offcanvas-content --text']); // Render children without modal for navbar.
 
     if (navbar && navbar.expand && (navbar.expand === true || media.up(navbar.expand))) {
-      return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+      return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
         ref: ref,
         style: [classes, style],
         textStyle: [textClasses, textStyle]
@@ -11755,7 +11257,7 @@
       dialogRef: offcanvasRef,
       onClose: handleToggle,
       backdrop: backdrop
-    })), /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    })), /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: concatRefs(offcanvasRef, ref),
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -11821,7 +11323,7 @@
 
     var background = useBackground(style);
     var showPlaceholder = selectedValue === undefined || selectedValue === null;
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.Picker, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.Picker, _extends({}, elementProps, {
       ref: ref,
       selectedValue: showPlaceholder ? PLACEHOLDER : selectedValue,
       onValueChange: onValueChange,
@@ -11957,7 +11459,7 @@
       setVisible(false);
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: "combobox",
       onPress: function onPress() {
@@ -12077,7 +11579,7 @@
   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 */
@@ -12092,6 +11594,7 @@
     valid: PropTypes.bool,
     invalid: PropTypes.bool,
     useNativeComponent: PropTypes.bool,
+    autoFocus: PropTypes.bool,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any,
     // eslint-disable-next-line react/forbid-prop-types
@@ -12124,9 +11627,9 @@
 
     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,
@@ -12138,13 +11641,15 @@
         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];
@@ -12152,32 +11657,31 @@
     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: {
         useNativeComponent: useNativeComponent
       }
-    }, /*#__PURE__*/React__default["default"].createElement(BasePicker, _extends$1({}, elementProps, {
+    }, /*#__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));
@@ -12203,7 +11707,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$f);
 
     var classes = getStyles(styles$c, ['.placeholders']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -12254,7 +11758,7 @@
     var classes = getStyles(styles$b, ['.progress-bar']);
     var textClasses = getStyles(styles$b, ['.progress-bar --text']); // composite component
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: "progressbar",
       accessibilityValueNow: value,
@@ -12308,7 +11812,7 @@
     var progress = useProgress(min, max);
     var classes = getStyles(styles$a, ['.progress']);
     var textClasses = getStyles(styles$a, ['.progress --text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -12342,7 +11846,7 @@
     var classes = getStyles(styles$9, ['paragraph', lead && '.lead']); // Accessiblity role paragraph is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'paragraph' : null;
-    return /*#__PURE__*/React__default["default"].createElement(Text, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -12387,7 +11891,7 @@
     var classes = getStyles(styles$8, ['.pagination-item', first && '.pagination-item:first-child', last && '.pagination-item:last-child', active && '.pagination-item.active', disabled && '.pagination-item.disabled']);
     var textClasses = getStyles(styles$8, [active && '.pagination-item.active', disabled && '.pagination-item.disabled']);
     var role = reactNative.Platform.OS === 'web' ? 'listitem' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style],
@@ -12454,7 +11958,7 @@
     var list = useList(children);
     var classes = getStyles(styles$7, ['.pagination']);
     var role = reactNative.Platform.OS === 'web' ? 'list' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       style: [classes, style]
@@ -12483,7 +11987,7 @@
         disabled = _props$disabled === void 0 ? false : _props$disabled,
         elementProps = _objectWithoutProperties(props, _excluded$9);
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: "radiogroup"
     }), /*#__PURE__*/React__default["default"].createElement(RadioContext.Provider, {
@@ -12510,7 +12014,7 @@
         _onValueChange = _useForcedContext.onValueChange,
         disabled = _useForcedContext.disabled;
 
-    return /*#__PURE__*/React__default["default"].createElement(FormCheckInput, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(FormCheckInput, _extends({}, elementProps, {
       ref: ref,
       type: "radio",
       value: value === selectedValue,
@@ -12542,7 +12046,7 @@
         elementProps = _objectWithoutProperties(props, _excluded$7);
 
     var classes = getStyles(styles$6, ['.row']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), children);
@@ -12551,9 +12055,9 @@
   Row.propTypes = propTypes$8;
 
   var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends$1({}, props);
+    var elementProps = _extends({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(FormCheckInput, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(FormCheckInput, _extends({}, elementProps, {
       ref: ref,
       type: "switch"
     }));
@@ -12571,12 +12075,12 @@
     style: PropTypes.any
   };
   var styles$5 = StyleSheet.create(_objectSpread2(_objectSpread2(_objectSpread2({
-    '.spinner-border': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n    // display: inline-block;\n    width: $spinner-width;\n    height: $spinner-height;\n    // vertical-align: $spinner-vertical-align;\n    border-width: $spinner-border-width;\n    border-style: solid;\n    border-top-color: $body-color;\n    border-bottom-color: $body-color;\n    border-left-color: $body-color;\n    // 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));
   })), {}, {
@@ -12637,7 +12141,7 @@
         useNativeDriver: reactNative.Platform.OS !== 'web'
       })).start();
     }, []);
-    return /*#__PURE__*/React__default["default"].createElement(AnimatedView, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(AnimatedView, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: role,
       accessibilityHidden: true,
@@ -12689,9 +12193,9 @@
     children: PropTypes.node.isRequired
   };
   var TabContent = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-    var elementProps = _extends$1({}, props);
+    var elementProps = _extends({}, props);
 
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref
     }));
   });
@@ -12721,7 +12225,7 @@
     var id = getElementId(tabbable.identifier, target); // Accessiblity role tabpanel is only supported on web.
 
     var role = reactNative.Platform.OS === 'web' ? 'tabpanel' : null;
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       nativeID: id,
       accessibilityRole: role,
@@ -12794,7 +12298,7 @@
 
     var classes = getStyles(styles$3, ['.toast-header']);
     var textClasses = getStyles(styles$3, ['.toast-header --text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -12825,7 +12329,7 @@
 
     var classes = getStyles(styles$2, ['.toast-body']);
     var textClasses = getStyles(styles$2, ['.toast-body --text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style],
       textStyle: [textClasses, textStyle]
@@ -12862,7 +12366,7 @@
     var container = React.useContext(ToastContainerContext);
     var classes = getStyles(styles$1, ['.toast', container && !listItem.last && '.toast-container > :not(:last-child)']);
     var textClasses = getStyles(styles$1, ['.toast --text']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       accessibilityRole: "alert",
       accessibilityLive: "assertive",
@@ -12894,7 +12398,7 @@
 
     var list = useList(children);
     var classes = getStyles(styles, ['.toast-container']);
-    return /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
+    return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
       ref: ref,
       style: [classes, style]
     }), /*#__PURE__*/React__default["default"].createElement(ToastContainerContext.Provider, {