@hero-design/rn 7.7.0 → 7.9.0

package/es/index.js

@@ -1607,124 +1607,1029 @@ var scale$1 = {
   radius: BASE_RADIUS
 };
 
-var palette = {
-  black: '#000000',
+var hexCharacters = 'a-f\\d';
+var match3or4Hex = "#?[".concat(hexCharacters, "]{3}[").concat(hexCharacters, "]?");
+var match6or8Hex = "#?[".concat(hexCharacters, "]{6}([").concat(hexCharacters, "]{2})?");
+var nonHexChars = new RegExp("[^#".concat(hexCharacters, "]"), 'gi');
+var validHexSize = new RegExp("^".concat(match3or4Hex, "$|^").concat(match6or8Hex, "$"), 'i');
+
+var hexRgb = function hexRgb(hex) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (typeof hex !== 'string' || nonHexChars.test(hex) || !validHexSize.test(hex)) {
+    throw new TypeError('Expected a valid hex string');
+  }
+
+  hex = hex.replace(/^#/, '');
+  var alphaFromHex = 1;
+
+  if (hex.length === 8) {
+    alphaFromHex = Number.parseInt(hex.slice(6, 8), 16) / 255;
+    hex = hex.slice(0, 6);
+  }
+
+  if (hex.length === 4) {
+    alphaFromHex = Number.parseInt(hex.slice(3, 4).repeat(2), 16) / 255;
+    hex = hex.slice(0, 3);
+  }
+
+  if (hex.length === 3) {
+    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+  }
+
+  var number = Number.parseInt(hex, 16);
+  var red = number >> 16;
+  var green = number >> 8 & 255;
+  var blue = number & 255;
+  var alpha = typeof options.alpha === 'number' ? options.alpha : alphaFromHex;
+
+  if (options.format === 'array') {
+    return [red, green, blue, alpha];
+  }
+
+  if (options.format === 'css') {
+    var alphaString = alpha === 1 ? '' : " / ".concat(Number((alpha * 100).toFixed(2)), "%");
+    return "rgb(".concat(red, " ").concat(green, " ").concat(blue).concat(alphaString, ")");
+  }
+
+  return {
+    red: red,
+    green: green,
+    blue: blue,
+    alpha: alpha
+  };
+};
+
+var colorName = {
+  "aliceblue": [240, 248, 255],
+  "antiquewhite": [250, 235, 215],
+  "aqua": [0, 255, 255],
+  "aquamarine": [127, 255, 212],
+  "azure": [240, 255, 255],
+  "beige": [245, 245, 220],
+  "bisque": [255, 228, 196],
+  "black": [0, 0, 0],
+  "blanchedalmond": [255, 235, 205],
+  "blue": [0, 0, 255],
+  "blueviolet": [138, 43, 226],
+  "brown": [165, 42, 42],
+  "burlywood": [222, 184, 135],
+  "cadetblue": [95, 158, 160],
+  "chartreuse": [127, 255, 0],
+  "chocolate": [210, 105, 30],
+  "coral": [255, 127, 80],
+  "cornflowerblue": [100, 149, 237],
+  "cornsilk": [255, 248, 220],
+  "crimson": [220, 20, 60],
+  "cyan": [0, 255, 255],
+  "darkblue": [0, 0, 139],
+  "darkcyan": [0, 139, 139],
+  "darkgoldenrod": [184, 134, 11],
+  "darkgray": [169, 169, 169],
+  "darkgreen": [0, 100, 0],
+  "darkgrey": [169, 169, 169],
+  "darkkhaki": [189, 183, 107],
+  "darkmagenta": [139, 0, 139],
+  "darkolivegreen": [85, 107, 47],
+  "darkorange": [255, 140, 0],
+  "darkorchid": [153, 50, 204],
+  "darkred": [139, 0, 0],
+  "darksalmon": [233, 150, 122],
+  "darkseagreen": [143, 188, 143],
+  "darkslateblue": [72, 61, 139],
+  "darkslategray": [47, 79, 79],
+  "darkslategrey": [47, 79, 79],
+  "darkturquoise": [0, 206, 209],
+  "darkviolet": [148, 0, 211],
+  "deeppink": [255, 20, 147],
+  "deepskyblue": [0, 191, 255],
+  "dimgray": [105, 105, 105],
+  "dimgrey": [105, 105, 105],
+  "dodgerblue": [30, 144, 255],
+  "firebrick": [178, 34, 34],
+  "floralwhite": [255, 250, 240],
+  "forestgreen": [34, 139, 34],
+  "fuchsia": [255, 0, 255],
+  "gainsboro": [220, 220, 220],
+  "ghostwhite": [248, 248, 255],
+  "gold": [255, 215, 0],
+  "goldenrod": [218, 165, 32],
+  "gray": [128, 128, 128],
+  "green": [0, 128, 0],
+  "greenyellow": [173, 255, 47],
+  "grey": [128, 128, 128],
+  "honeydew": [240, 255, 240],
+  "hotpink": [255, 105, 180],
+  "indianred": [205, 92, 92],
+  "indigo": [75, 0, 130],
+  "ivory": [255, 255, 240],
+  "khaki": [240, 230, 140],
+  "lavender": [230, 230, 250],
+  "lavenderblush": [255, 240, 245],
+  "lawngreen": [124, 252, 0],
+  "lemonchiffon": [255, 250, 205],
+  "lightblue": [173, 216, 230],
+  "lightcoral": [240, 128, 128],
+  "lightcyan": [224, 255, 255],
+  "lightgoldenrodyellow": [250, 250, 210],
+  "lightgray": [211, 211, 211],
+  "lightgreen": [144, 238, 144],
+  "lightgrey": [211, 211, 211],
+  "lightpink": [255, 182, 193],
+  "lightsalmon": [255, 160, 122],
+  "lightseagreen": [32, 178, 170],
+  "lightskyblue": [135, 206, 250],
+  "lightslategray": [119, 136, 153],
+  "lightslategrey": [119, 136, 153],
+  "lightsteelblue": [176, 196, 222],
+  "lightyellow": [255, 255, 224],
+  "lime": [0, 255, 0],
+  "limegreen": [50, 205, 50],
+  "linen": [250, 240, 230],
+  "magenta": [255, 0, 255],
+  "maroon": [128, 0, 0],
+  "mediumaquamarine": [102, 205, 170],
+  "mediumblue": [0, 0, 205],
+  "mediumorchid": [186, 85, 211],
+  "mediumpurple": [147, 112, 219],
+  "mediumseagreen": [60, 179, 113],
+  "mediumslateblue": [123, 104, 238],
+  "mediumspringgreen": [0, 250, 154],
+  "mediumturquoise": [72, 209, 204],
+  "mediumvioletred": [199, 21, 133],
+  "midnightblue": [25, 25, 112],
+  "mintcream": [245, 255, 250],
+  "mistyrose": [255, 228, 225],
+  "moccasin": [255, 228, 181],
+  "navajowhite": [255, 222, 173],
+  "navy": [0, 0, 128],
+  "oldlace": [253, 245, 230],
+  "olive": [128, 128, 0],
+  "olivedrab": [107, 142, 35],
+  "orange": [255, 165, 0],
+  "orangered": [255, 69, 0],
+  "orchid": [218, 112, 214],
+  "palegoldenrod": [238, 232, 170],
+  "palegreen": [152, 251, 152],
+  "paleturquoise": [175, 238, 238],
+  "palevioletred": [219, 112, 147],
+  "papayawhip": [255, 239, 213],
+  "peachpuff": [255, 218, 185],
+  "peru": [205, 133, 63],
+  "pink": [255, 192, 203],
+  "plum": [221, 160, 221],
+  "powderblue": [176, 224, 230],
+  "purple": [128, 0, 128],
+  "rebeccapurple": [102, 51, 153],
+  "red": [255, 0, 0],
+  "rosybrown": [188, 143, 143],
+  "royalblue": [65, 105, 225],
+  "saddlebrown": [139, 69, 19],
+  "salmon": [250, 128, 114],
+  "sandybrown": [244, 164, 96],
+  "seagreen": [46, 139, 87],
+  "seashell": [255, 245, 238],
+  "sienna": [160, 82, 45],
+  "silver": [192, 192, 192],
+  "skyblue": [135, 206, 235],
+  "slateblue": [106, 90, 205],
+  "slategray": [112, 128, 144],
+  "slategrey": [112, 128, 144],
+  "snow": [255, 250, 250],
+  "springgreen": [0, 255, 127],
+  "steelblue": [70, 130, 180],
+  "tan": [210, 180, 140],
+  "teal": [0, 128, 128],
+  "thistle": [216, 191, 216],
+  "tomato": [255, 99, 71],
+  "turquoise": [64, 224, 208],
+  "violet": [238, 130, 238],
+  "wheat": [245, 222, 179],
+  "white": [255, 255, 255],
+  "whitesmoke": [245, 245, 245],
+  "yellow": [255, 255, 0],
+  "yellowgreen": [154, 205, 50]
+};
+var pattern$8 = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/;
+var hexRe$1 = new RegExp(pattern$8, 'i');
+var float$1 = '-?\\d*(?:\\.\\d+)';
+var number$1 = "(".concat(float$1, "?)");
+var percentage$1 = "(".concat(float$1, "?%)");
+var numberOrPercentage$1 = "(".concat(float$1, "?%?)");
+var pattern$1$1 = "^\n  hsla?\\(\n    \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*,\n    \\s*".concat(percentage$1, "\\s*,\n    \\s*").concat(percentage$1, "\\s*\n    (?:,\\s*").concat(numberOrPercentage$1, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var hsl3Re$1 = new RegExp(pattern$1$1);
+var pattern$2$1 = "^\n  hsla?\\(\n    \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*\n    \\s+".concat(percentage$1, "\n    \\s+").concat(percentage$1, "\n    \\s*(?:\\s*\\/\\s*").concat(numberOrPercentage$1, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var hsl4Re$1 = new RegExp(pattern$2$1);
+var pattern$3$1 = "^\n  rgba?\\(\n    \\s*".concat(number$1, "\\s*,\n    \\s*").concat(number$1, "\\s*,\n    \\s*").concat(number$1, "\\s*\n    (?:,\\s*").concat(numberOrPercentage$1, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var rgb3NumberRe$1 = new RegExp(pattern$3$1);
+var pattern$4$1 = "^\n  rgba?\\(\n    \\s*".concat(percentage$1, "\\s*,\n    \\s*").concat(percentage$1, "\\s*,\n    \\s*").concat(percentage$1, "\\s*\n    (?:,\\s*").concat(numberOrPercentage$1, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var rgb3PercentageRe$1 = new RegExp(pattern$4$1);
+var pattern$5$1 = "^\n  rgba?\\(\n    \\s*".concat(number$1, "\n    \\s+").concat(number$1, "\n    \\s+").concat(number$1, "\n    \\s*(?:\\s*\\/\\s*").concat(numberOrPercentage$1, "\\s*)?\n  \\)\n$\n").replace(/\n|\s/g, '');
+var rgb4NumberRe$1 = new RegExp(pattern$5$1);
+var pattern$6$1 = "^\n  rgba?\\(\n    \\s*".concat(percentage$1, "\n    \\s+").concat(percentage$1, "\n    \\s+").concat(percentage$1, "\n    \\s*(?:\\s*\\/\\s*").concat(numberOrPercentage$1, "\\s*)?\n  \\)\n$\n").replace(/\n|\s/g, '');
+var rgb4PercentageRe$1 = new RegExp(pattern$6$1);
+var pattern$7$1 = /^transparent$/;
+var transparentRe$1 = new RegExp(pattern$7$1, 'i');
+
+var clamp$3 = function clamp$3(num, min, max) {
+  return Math.min(Math.max(min, num), max);
+};
+/* 500 => 255, -10 => 0, 128 => 128 */
+
+
+var parseRGB$1 = function parseRGB$1(num) {
+  var n = num;
+  if (typeof n !== 'number') n = n.endsWith('%') ? parseFloat(n) * 255 / 100 : parseFloat(n);
+  return clamp$3(Math.round(n), 0, 255);
+};
+/* 200 => 100, -100 => 0, 50 => 50 */
+
+
+var parsePercentage$1 = function parsePercentage$1(percentage) {
+  return clamp$3(parseFloat(percentage), 0, 100);
+};
+/* '50%' => 5.0, 200 => 1, -10 => 0 */
+
+
+function parseAlpha$1(alpha) {
+  var a = alpha;
+  if (typeof a !== 'number') a = a.endsWith('%') ? parseFloat(a) / 100 : parseFloat(a);
+  return clamp$3(a, 0, 1);
+}
+
+function getHEX$1(hex) {
+  var _hex2Rgb = hexRgb(hex, {
+    format: 'array'
+  }),
+      _hex2Rgb2 = _slicedToArray(_hex2Rgb, 4),
+      r = _hex2Rgb2[0],
+      g = _hex2Rgb2[1],
+      b = _hex2Rgb2[2],
+      a = _hex2Rgb2[3];
+
+  return getRGB$1([null].concat([r, g, b, a]));
+}
+
+function getHSL$1(_ref) {
+  var _ref2 = _slicedToArray(_ref, 5),
+      h = _ref2[1],
+      s = _ref2[2],
+      l = _ref2[3],
+      _ref2$ = _ref2[4],
+      a = _ref2$ === void 0 ? 1 : _ref2$;
+
+  var hh = h;
+
+  if (hh.endsWith('turn')) {
+    hh = parseFloat(hh) * 360 / 1;
+  } else if (hh.endsWith('rad')) {
+    hh = Math.round(parseFloat(hh) * 180 / Math.PI);
+  } else {
+    hh = parseFloat(hh);
+  }
+
+  return {
+    type: 'hsl',
+    values: [hh, parsePercentage$1(s), parsePercentage$1(l)],
+    alpha: parseAlpha$1(a === null ? 1 : a)
+  };
+}
+
+function getRGB$1(_ref3) {
+  var _ref4 = _slicedToArray(_ref3, 5),
+      r = _ref4[1],
+      g = _ref4[2],
+      b = _ref4[3],
+      _ref4$ = _ref4[4],
+      a = _ref4$ === void 0 ? 1 : _ref4$;
+
+  return {
+    type: 'rgb',
+    values: [r, g, b].map(parseRGB$1),
+    alpha: parseAlpha$1(a === null ? 1 : a)
+  };
+}
+/**
+ * parse-css-color
+ * @version v0.1.2
+ * @link http://github.com/noeldelgado/parse-css-color/
+ * @license MIT
+ */
+
+
+var parseCSSColor$1 = function parseCSSColor$1(str) {
+  if (typeof str !== 'string') return null;
+  var hex = hexRe$1.exec(str);
+  if (hex) return getHEX$1(hex[0]);
+  var hsl = hsl4Re$1.exec(str) || hsl3Re$1.exec(str);
+  if (hsl) return getHSL$1(hsl);
+  var rgb = rgb4NumberRe$1.exec(str) || rgb4PercentageRe$1.exec(str) || rgb3NumberRe$1.exec(str) || rgb3PercentageRe$1.exec(str);
+  if (rgb) return getRGB$1(rgb);
+  if (transparentRe$1.exec(str)) return getRGB$1([null, 0, 0, 0, 0]);
+  var cn = colorName[str.toLowerCase()];
+  if (cn) return getRGB$1([null, cn[0], cn[1], cn[2], 1]);
+  return null;
+};
+
+function hsl2rgb(hsl) {
+  var h = hsl[0] / 360,
+      s = hsl[1] / 100,
+      l = hsl[2] / 100,
+      t1,
+      t2,
+      t3,
+      rgb,
+      val;
+
+  if (s == 0) {
+    val = l * 255;
+    return [val, val, val];
+  }
+
+  if (l < 0.5) t2 = l * (1 + s);else t2 = l + s - l * s;
+  t1 = 2 * l - t2;
+  rgb = [0, 0, 0];
+
+  for (var i = 0; i < 3; i++) {
+    t3 = h + 1 / 3 * -(i - 1);
+    t3 < 0 && t3++;
+    t3 > 1 && t3--;
+    if (6 * t3 < 1) val = t1 + (t2 - t1) * 6 * t3;else if (2 * t3 < 1) val = t2;else if (3 * t3 < 2) val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;else val = t1;
+    rgb[i] = val * 255;
+  }
+
+  return rgb;
+}
+
+var hsl2rgb_1 = hsl2rgb;
+
+function clamp$2(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+
+var clamp_1 = clamp$2;
+var clamp$1 = clamp_1;
+
+function componentToHex(c) {
+  var value = Math.round(clamp$1(c, 0, 255));
+  var hex = value.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+
+function rgb2hex(rgb) {
+  var alpha = rgb.length === 4 ? componentToHex(rgb[3] * 255) : "";
+  return "#" + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]) + alpha;
+}
+
+var rgb2hex_1 = rgb2hex;
+
+function rgb2hsl(rgb) {
+  var r = rgb[0] / 255,
+      g = rgb[1] / 255,
+      b = rgb[2] / 255,
+      min = Math.min(r, g, b),
+      max = Math.max(r, g, b),
+      delta = max - min,
+      h,
+      s,
+      l;
+  if (max == min) h = 0;else if (r == max) h = (g - b) / delta;else if (g == max) h = 2 + (b - r) / delta;else if (b == max) h = 4 + (r - g) / delta;
+  h = Math.min(h * 60, 360);
+  if (h < 0) h += 360;
+  l = (min + max) / 2;
+  if (max == min) s = 0;else if (l <= 0.5) s = delta / (max + min);else s = delta / (2 - max - min);
+  return [h, s * 100, l * 100];
+}
+
+var rgb2hsl_1 = rgb2hsl;
+/**
+ * mix-css-color
+ * @version v0.2.0
+ * @link http://github.com/noeldelgado/mix-css-color/
+ * @license MIT
+ */
+
+function parseColor(color) {
+  var res = parseCSSColor$1(color);
+  if (res === null) return null;
+  if (res.type === 'hsl') res.values = hsl2rgb_1(res.values);
+  return res;
+}
+/**
+ * Mix two colors together in variable proportion. Opacity is included in the calculations.
+ * Copyright (c) 2006-2009 Hampton Catlin, Natalie Weizenbaum, and Chris Eppstein
+ * http://sass-lang.com
+ * @see https://github.com/less/less.js/blob/cae5021358a5fca932c32ed071f652403d07def8/lib/less/functions/color.js#L302
+ */
+
+
+function mix(color1, color2) {
+  var percentage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
+  var c1 = parseColor(color1);
+  var c2 = parseColor(color2);
+  if (!c1 || !c2) return null;
+  var p = Math.min(Math.max(0, percentage), 100) / 100.0;
+  var w = p * 2 - 1;
+  var a = c1.alpha - c2.alpha;
+  var w1 = ((w * a === -1 ? w : (w + a) / (1 + w * a)) + 1) / 2.0;
+  var w2 = 1 - w1;
+
+  var _c1$values$map = c1.values.map(function (c, i) {
+    return Math.round(c1.values[i] * w1 + c2.values[i] * w2);
+  }),
+      _c1$values$map2 = _slicedToArray(_c1$values$map, 3),
+      r = _c1$values$map2[0],
+      g = _c1$values$map2[1],
+      b = _c1$values$map2[2];
+
+  var alpha = parseFloat((c1.alpha * p + c2.alpha * (1 - p)).toFixed(8));
+  return {
+    hex: rgb2hex_1([r, g, b]),
+    hexa: rgb2hex_1([r, g, b, alpha]),
+    rgba: [r, g, b, alpha],
+    hsla: [].concat(_toConsumableArray$1(rgb2hsl_1([r, g, b]).map(Math.round)), [alpha])
+  };
+}
+
+var pattern = /^#([a-f0-9]{3,4}|[a-f0-9]{4}(?:[a-f0-9]{2}){1,2})\b$/;
+var hexRe = new RegExp(pattern, 'i');
+var _float = '-?\\d*(?:\\.\\d+)';
+var number = "(".concat(_float, "?)");
+var percentage = "(".concat(_float, "?%)");
+var numberOrPercentage = "(".concat(_float, "?%?)");
+var pattern$1 = "^\n  hsla?\\(\n    \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*,\n    \\s*".concat(percentage, "\\s*,\n    \\s*").concat(percentage, "\\s*\n    (?:,\\s*").concat(numberOrPercentage, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var hsl3Re = new RegExp(pattern$1);
+var pattern$2 = "^\n  hsla?\\(\n    \\s*(-?\\d*(?:\\.\\d+)?(?:deg|rad|turn)?)\\s*\n    \\s+".concat(percentage, "\n    \\s+").concat(percentage, "\n    \\s*(?:\\s*\\/\\s*").concat(numberOrPercentage, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var hsl4Re = new RegExp(pattern$2);
+var pattern$3 = "^\n  rgba?\\(\n    \\s*".concat(number, "\\s*,\n    \\s*").concat(number, "\\s*,\n    \\s*").concat(number, "\\s*\n    (?:,\\s*").concat(numberOrPercentage, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var rgb3NumberRe = new RegExp(pattern$3);
+var pattern$4 = "^\n  rgba?\\(\n    \\s*".concat(percentage, "\\s*,\n    \\s*").concat(percentage, "\\s*,\n    \\s*").concat(percentage, "\\s*\n    (?:,\\s*").concat(numberOrPercentage, "\\s*)?\n  \\)\n  $\n").replace(/\n|\s/g, '');
+var rgb3PercentageRe = new RegExp(pattern$4);
+var pattern$5 = "^\n  rgba?\\(\n    \\s*".concat(number, "\n    \\s+").concat(number, "\n    \\s+").concat(number, "\n    \\s*(?:\\s*\\/\\s*").concat(numberOrPercentage, "\\s*)?\n  \\)\n$\n").replace(/\n|\s/g, '');
+var rgb4NumberRe = new RegExp(pattern$5);
+var pattern$6 = "^\n  rgba?\\(\n    \\s*".concat(percentage, "\n    \\s+").concat(percentage, "\n    \\s+").concat(percentage, "\n    \\s*(?:\\s*\\/\\s*").concat(numberOrPercentage, "\\s*)?\n  \\)\n$\n").replace(/\n|\s/g, '');
+var rgb4PercentageRe = new RegExp(pattern$6);
+var pattern$7 = /^transparent$/;
+var transparentRe = new RegExp(pattern$7, 'i');
+
+var clamp = function clamp(num, min, max) {
+  return Math.min(Math.max(min, num), max);
+};
+/* 500 => 255, -10 => 0, 128 => 128 */
+
+
+var parseRGB = function parseRGB(num) {
+  var n = num;
+  if (typeof n !== 'number') n = n.endsWith('%') ? parseFloat(n) * 255 / 100 : parseFloat(n);
+  return clamp(Math.round(n), 0, 255);
+};
+/* 200 => 100, -100 => 0, 50 => 50 */
+
+
+var parsePercentage = function parsePercentage(percentage) {
+  return clamp(parseFloat(percentage), 0, 100);
+};
+/* '50%' => 5.0, 200 => 1, -10 => 0 */
+
+
+function parseAlpha(alpha) {
+  var a = alpha;
+  if (typeof a !== 'number') a = a.endsWith('%') ? parseFloat(a) / 100 : parseFloat(a);
+  return clamp(a, 0, 1);
+}
+
+function getHEX(hex) {
+  var _hex2Rgb3 = hexRgb(hex, {
+    format: 'array'
+  }),
+      _hex2Rgb4 = _slicedToArray(_hex2Rgb3, 4),
+      r = _hex2Rgb4[0],
+      g = _hex2Rgb4[1],
+      b = _hex2Rgb4[2],
+      a = _hex2Rgb4[3];
+
+  return getRGB([null].concat([r, g, b, a]));
+}
+
+function getHSL(_ref5) {
+  var _ref6 = _slicedToArray(_ref5, 5),
+      h = _ref6[1],
+      s = _ref6[2],
+      l = _ref6[3],
+      _ref6$ = _ref6[4],
+      a = _ref6$ === void 0 ? 1 : _ref6$;
+
+  var hh = h;
+
+  if (hh.endsWith('turn')) {
+    hh = parseFloat(hh) * 360 / 1;
+  } else if (hh.endsWith('rad')) {
+    hh = Math.round(parseFloat(hh) * 180 / Math.PI);
+  } else {
+    hh = parseFloat(hh);
+  }
+
+  return {
+    type: 'hsl',
+    values: [hh, parsePercentage(s), parsePercentage(l)],
+    alpha: parseAlpha(a === null ? 1 : a)
+  };
+}
+
+function getRGB(_ref7) {
+  var _ref8 = _slicedToArray(_ref7, 5),
+      r = _ref8[1],
+      g = _ref8[2],
+      b = _ref8[3],
+      _ref8$ = _ref8[4],
+      a = _ref8$ === void 0 ? 1 : _ref8$;
+
+  return {
+    type: 'rgb',
+    values: [r, g, b].map(parseRGB),
+    alpha: parseAlpha(a === null ? 1 : a)
+  };
+}
+/**
+ * parse-css-color
+ * @version v0.2.0
+ * @link http://github.com/noeldelgado/parse-css-color/
+ * @license MIT
+ */
+
+
+var parseCSSColor = function parseCSSColor(str) {
+  if (typeof str !== 'string') return null;
+  var hex = hexRe.exec(str);
+  if (hex) return getHEX(hex[0]);
+  var hsl = hsl4Re.exec(str) || hsl3Re.exec(str);
+  if (hsl) return getHSL(hsl);
+  var rgb = rgb4NumberRe.exec(str) || rgb4PercentageRe.exec(str) || rgb3NumberRe.exec(str) || rgb3PercentageRe.exec(str);
+  if (rgb) return getRGB(rgb);
+  if (transparentRe.exec(str)) return getRGB([null, 0, 0, 0, 0]);
+  var cn = colorName[str.toLowerCase()];
+  if (cn) return getRGB([null, cn[0], cn[1], cn[2], 1]);
+  return null;
+};
+/**
+ * values.js - Get the tints and shades of a color
+ * @version v2.1.1
+ * @link http://noeldelgado.github.io/values.js/
+ * @license MIT
+ */
+
+
+var defaultNumberParam = function defaultNumberParam(v, d) {
+  return v === null || isNaN(v) || typeof v === 'string' ? d : v;
+};
+
+var Values = /*#__PURE__*/function () {
+  function Values() {
+    var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000';
+    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
+    var weight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+
+    _classCallCheck$1(this, Values);
+
+    var _ref9 = [[0, 0, 0], 1, type, weight];
+    this.rgb = _ref9[0];
+    this.alpha = _ref9[1];
+    this.type = _ref9[2];
+    this.weight = _ref9[3];
+    var c = color === null ? '#000' : color;
+    if (typeof c !== 'string') throw new TypeError("Input should be a string: ".concat(c));
+    var parsed = parseCSSColor(c);
+    if (!parsed) throw new Error("Unable to parse color from string: ".concat(c));
+    return this["_setFrom".concat(parsed.type.toUpperCase())]([].concat(_toConsumableArray$1(parsed.values), [parsed.alpha]));
+  }
+
+  _createClass$1(Values, [{
+    key: "hex",
+    get: function get() {
+      return this.hexString().replace(/^#/, '');
+    }
+  }, {
+    key: "setColor",
+    value: function setColor(color) {
+      var parsed = parseCSSColor(color);
+      if (!parsed) return null;
+      return this["_setFrom".concat(parsed.type.toUpperCase())]([].concat(_toConsumableArray$1(parsed.values), [parsed.alpha]));
+    }
+  }, {
+    key: "tint",
+    value: function tint(weight) {
+      var w = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultNumberParam(weight, 50);
+      return new Values("rgb(".concat(mix('#fff', this.rgbString(), w).rgba, ")"), 'tint', w);
+    }
+  }, {
+    key: "shade",
+    value: function shade(weight) {
+      var w = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultNumberParam(weight, 50);
+      return new Values("rgb(".concat(mix('#000', this.rgbString(), w).rgba, ")"), 'shade', w);
+    }
+  }, {
+    key: "tints",
+    value: function tints(weight) {
+      var _this = this;
+
+      var w = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultNumberParam(weight, 10);
+      return Array.from({
+        length: 100 / w
+      }, function (_, i) {
+        return _this.tint((i + 1) * w);
+      });
+    }
+  }, {
+    key: "shades",
+    value: function shades(weight) {
+      var _this2 = this;
+
+      var w = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultNumberParam(weight, 10);
+      return Array.from({
+        length: 100 / w
+      }, function (_, i) {
+        return _this2.shade((i + 1) * w);
+      });
+    }
+  }, {
+    key: "all",
+    value: function all() {
+      var weight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+      return [].concat(_toConsumableArray$1(this.tints(weight).reverse()), [Object.assign(this)], _toConsumableArray$1(this.shades(weight)));
+    }
+  }, {
+    key: "hexString",
+    value: function hexString() {
+      return rgb2hex_1(this.alpha >= 1 ? this.rgb : [].concat(_toConsumableArray$1(this.rgb), [this.alpha]));
+    }
+  }, {
+    key: "rgbString",
+    value: function rgbString() {
+      var channels = (this.alpha >= 1 ? this.rgb : [].concat(_toConsumableArray$1(this.rgb), [this.alpha])).join(', ');
+      return "".concat(this.alpha >= 1 ? 'rgb' : 'rgba', "(").concat(channels, ")");
+    }
+  }, {
+    key: "getBrightness",
+    value: function getBrightness() {
+      return Math.round(this.rgb.reduce(function (a, b) {
+        return a + b;
+      }) / (255 * 3) * 100);
+    }
+  }, {
+    key: "_setFromRGB",
+    value: function _setFromRGB(_ref10) {
+      var _ref11 = _slicedToArray(_ref10, 4),
+          r = _ref11[0],
+          g = _ref11[1],
+          b = _ref11[2],
+          a = _ref11[3];
+
+      var _ref12 = [[r, g, b], a];
+      this.rgb = _ref12[0];
+      this.alpha = _ref12[1];
+      return this;
+    }
+  }, {
+    key: "_setFromHSL",
+    value: function _setFromHSL(_ref13) {
+      var _ref14 = _slicedToArray(_ref13, 4),
+          h = _ref14[0],
+          s = _ref14[1],
+          l = _ref14[2],
+          a = _ref14[3];
+
+      var _ref15 = [hsl2rgb_1([h, s, l]).map(Math.round), a];
+      this.rgb = _ref15[0];
+      this.alpha = _ref15[1];
+      return this;
+    }
+  }]);
+
+  return Values;
+}();
+
+Values.VERSION = 'v2.1.1';
+var Values$1 = Values;
+var STEPS = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95];
+
+var createColorScales = function createColorScales(base) {
+  var colorValues = new Values$1(base);
+  return _objectSpread2(_objectSpread2({}, STEPS.reduce(function (acc, step) {
+    var _objectSpread2$1;
+
+    return _objectSpread2(_objectSpread2({}, acc), {}, (_objectSpread2$1 = {}, _defineProperty$2(_objectSpread2$1, "lighten".concat(step), colorValues.tint(step).hexString()), _defineProperty$2(_objectSpread2$1, "darken".concat(step), colorValues.shade(step).hexString()), _objectSpread2$1));
+  }, {})), {}, {
+    base: colorValues.hexString()
+  });
+};
+
+var BASE_COLORS = {
+  antiFlashWhite: '#f1f2f3',
   blue: '#1dbeee',
-  blueDark30: '#1485a7',
-  blueDark75: '#07303c',
-  blueLight30: '#61d2f3',
-  blueLight75: '#c7effb',
-  blueLight90: '#e8f9fd',
-  dodgerBlue: '#4568fb',
-  dodgerBlueDark30: '#3049b0',
-  dodgerBlueLight30: '#7d95fc',
-  dodgerBlueLight75: '#d1d9fe',
-  dodgerBlueLight90: '#ecf0ff',
+  blue1: '#5a68e2',
+  nightBlue: '#353957',
+  darkBlue: '#25006e',
+  maasstrichtBlue: '#001f23',
+  ultramarineBlue: '#4568fb',
+  aliceBlue: '#ecf0ff',
+  jordyBlue: '#92abfc',
+  cornflowerBlue: '#5d80f0',
+  paua: '#130066',
   green: '#01b39c',
-  greenDark15: '#019885',
-  greenDark30: '#017d6d',
-  greenDark75: '#002d27',
-  greenLight30: '#4dcaba',
-  greenLight75: '#c0ece6',
-  greenLight90: '#e6f7f5',
+  emerald: '#5ace7d',
+  pineGreen: '#017d6d',
+  honeydew: '#f0fef4',
   grey: '#a3a6ac',
-  greyDark15: '#8b8d92',
-  greyDark30: '#727478',
-  greyDark45: '#5a5b5f',
-  greyDark60: '#414245',
-  greyDark75: '#292a2b',
-  greyLight45: '#ccced1',
-  greyLight60: '#dadbde',
-  greyLight75: '#e8e9ea',
-  greyLight85: '#f1f2f3',
-  greyLight90: '#f6f6f7',
-  greyLight95: '#fafbfb',
+  currant: '#48000a',
+  sonicSilver: '#737479',
   grotesqueGreen: '#6af293',
-  grotesqueGreenDark45: '#3a8551',
-  grotesqueGreenLight60: '#c3fad4',
-  grotesqueGreenLight75: '#dafce4',
-  grotesqueGreenLight90: '#f0fef4',
-  orange: '#ffa234',
-  orangeDark15: '#d98a2c',
-  orangeDark30: '#b37124',
-  orangeDark75: '#40290d',
-  orangeLight30: '#ffbe71',
-  orangeLight75: '#ffe8cc',
-  orangeLight90: '#fff6eb',
+  mellowApricot: '#ffbe71',
+  deepSaffron: '#ffa234',
   pink: '#fe56aa',
-  pinkDark15: '#cf4991',
-  pinkDark30: '#b23c77',
-  pinkDark45: '#8c2f5e',
-  pinkDark75: '#40162b',
-  pinkLight30: '#fe89c4',
-  pinkLight45: '#fea2d0',
-  pinkLight75: '#fcd5ea',
-  pinkLight90: '#ffeef7',
+  hitPink: '#ffad79',
+  apple: '#e3602a',
   purple: '#be83cf',
-  purpleDark15: '#a26fb0',
-  red: '#de350b',
-  redDark15: '#bd2d09',
-  redDark30: '#9b2508',
-  redDark75: '#380d03',
-  redLight15: '#e35330',
-  redLight30: '#e87254',
-  redLight60: '#f2ae9d',
-  redLight75: '#f7cdc2',
-  redLight90: '#fcebe7',
+  scarletGum: '#401960',
+  vodka: '#b5c3fd',
+  peach: '#f8ac7d',
+  pastelRed: '#f46363',
+  vermilion: '#de350b',
+  linen: '#fcebe7',
   smalt: '#003580',
-  smaltDark75: '#000d20',
-  smaltLight30: '#4d72a6',
-  smaltLight45: '#7390b9',
-  smaltLight75: '#bfcddf',
-  smaltLight90: '#e6ebf2',
   violet: '#7622d7',
-  violetDark15: '#641db7',
-  violetDark30: '#531897',
-  violetDark45: '#411376',
-  violetDark75: '#1e0936',
-  violetLight30: '#9f64e3',
-  violetLight60: '#c8a7ef',
-  violetLight75: '#ddc8f5',
-  violetLight90: '#f1e9fb',
-  white: '#ffffff',
+  violet1: '#8505a2',
+  mauve: '#c38cee',
   yellow: '#fadb14',
-  yellowDark15: '#d5ba11',
-  yellowDark75: '#3f3705',
-  yellowLight60: '#fdf1a1',
-  yellowLight90: '#fffbe8'
+  seashell: '#ebf4ff',
+  gold: '#ffd500'
 };
+var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
+  var _ref17 = _slicedToArray(_ref16, 2),
+      key = _ref17[0],
+      value = _ref17[1];
+
+  return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty$2({}, key, createColorScales(value)));
+}, {});
+var blue$1 = colorScales.blue,
+    ultramarineBlue$1 = colorScales.ultramarineBlue,
+    green$1 = colorScales.green,
+    grey$2 = colorScales.grey,
+    grotesqueGreen = colorScales.grotesqueGreen,
+    deepSaffron$2 = colorScales.deepSaffron,
+    pink$1 = colorScales.pink,
+    purple$1 = colorScales.purple,
+    vermilion$2 = colorScales.vermilion,
+    smalt = colorScales.smalt,
+    violet$1 = colorScales.violet,
+    yellow$1 = colorScales.yellow;
+var palette$6 = {
+  black: '#000000',
+  white: '#ffffff',
+  blue: blue$1.base,
+  blueDark30: blue$1.darken30,
+  blueDark75: blue$1.darken75,
+  blueLight30: blue$1.lighten30,
+  blueLight75: blue$1.lighten75,
+  blueLight90: blue$1.lighten90,
+  dodgerBlue: ultramarineBlue$1.base,
+  dodgerBlueDark30: ultramarineBlue$1.darken30,
+  dodgerBlueLight30: ultramarineBlue$1.lighten30,
+  dodgerBlueLight75: ultramarineBlue$1.lighten75,
+  dodgerBlueLight90: ultramarineBlue$1.lighten90,
+  green: green$1.base,
+  greenDark15: green$1.darken15,
+  greenDark30: green$1.darken30,
+  greenDark75: green$1.darken75,
+  greenLight30: green$1.lighten30,
+  greenLight75: green$1.lighten75,
+  greenLight90: green$1.lighten90,
+  grey: grey$2.base,
+  greyDark15: grey$2.darken15,
+  greyDark30: grey$2.darken30,
+  greyDark45: grey$2.darken45,
+  greyDark60: grey$2.darken60,
+  greyDark75: grey$2.darken75,
+  greyLight45: grey$2.lighten45,
+  greyLight60: grey$2.lighten60,
+  greyLight75: grey$2.lighten75,
+  greyLight85: grey$2.lighten85,
+  greyLight90: grey$2.lighten90,
+  greyLight95: grey$2.lighten95,
+  grotesqueGreen: grotesqueGreen.base,
+  grotesqueGreenDark45: grotesqueGreen.darken45,
+  grotesqueGreenLight60: grotesqueGreen.lighten60,
+  grotesqueGreenLight75: grotesqueGreen.lighten75,
+  grotesqueGreenLight90: grotesqueGreen.lighten90,
+  orange: deepSaffron$2.base,
+  orangeDark15: deepSaffron$2.darken15,
+  orangeDark30: deepSaffron$2.darken30,
+  orangeDark75: deepSaffron$2.darken75,
+  orangeLight30: deepSaffron$2.lighten30,
+  orangeLight75: deepSaffron$2.lighten75,
+  orangeLight90: deepSaffron$2.lighten90,
+  pink: pink$1.base,
+  pinkDark15: pink$1.darken15,
+  pinkDark30: pink$1.darken30,
+  pinkDark45: pink$1.darken45,
+  pinkDark75: pink$1.darken75,
+  pinkLight30: pink$1.lighten30,
+  pinkLight45: pink$1.lighten45,
+  pinkLight75: pink$1.lighten75,
+  pinkLight90: pink$1.lighten90,
+  purple: purple$1.base,
+  purpleDark15: purple$1.darken15,
+  red: vermilion$2.base,
+  redDark15: vermilion$2.darken15,
+  redDark30: vermilion$2.darken30,
+  redDark75: vermilion$2.darken75,
+  redLight15: vermilion$2.lighten15,
+  redLight30: vermilion$2.lighten30,
+  redLight60: vermilion$2.lighten60,
+  redLight75: vermilion$2.lighten75,
+  redLight90: vermilion$2.lighten90,
+  smalt: smalt.base,
+  smaltDark75: smalt.darken75,
+  smaltLight30: smalt.lighten30,
+  smaltLight45: smalt.lighten45,
+  smaltLight75: smalt.lighten75,
+  smaltLight90: smalt.lighten90,
+  violet: violet$1.base,
+  violetDark15: violet$1.darken15,
+  violetDark30: violet$1.darken30,
+  violetDark45: violet$1.darken45,
+  violetDark75: violet$1.darken75,
+  violetLight30: violet$1.lighten30,
+  violetLight60: violet$1.lighten60,
+  violetLight75: violet$1.lighten75,
+  violetLight90: violet$1.lighten90,
+  yellow: yellow$1.base,
+  yellowDark15: yellow$1.darken15,
+  yellowDark75: yellow$1.darken75,
+  yellowLight60: yellow$1.lighten60,
+  yellowLight90: yellow$1.lighten90
+};
+var maasstrichtBlue = colorScales.maasstrichtBlue,
+    grey$1 = colorScales.grey,
+    pastelRed$1 = colorScales.pastelRed,
+    mellowApricot = colorScales.mellowApricot,
+    emerald$1 = colorScales.emerald,
+    vodka = colorScales.vodka,
+    vermilion$1 = colorScales.vermilion,
+    deepSaffron$1 = colorScales.deepSaffron,
+    pineGreen = colorScales.pineGreen,
+    ultramarineBlue = colorScales.ultramarineBlue,
+    sonicSilver = colorScales.sonicSilver,
+    linen$1 = colorScales.linen,
+    seashell$1 = colorScales.seashell,
+    honeydew$1 = colorScales.honeydew,
+    aliceBlue = colorScales.aliceBlue,
+    antiFlashWhite = colorScales.antiFlashWhite,
+    apple$1 = colorScales.apple;
+var palette$5 = {
+  black: '#000000',
+  white: '#ffffff',
+  greyLight95: grey$1.lighten95,
+  greyLight90: grey$1.lighten90,
+  greyLight75: grey$1.lighten75,
+  greyLight45: grey$1.lighten45,
+  greyLight30: grey$1.lighten30,
+  grey: grey$1.base,
+  maasstrichtBlueLight90: maasstrichtBlue.lighten90,
+  maasstrichtBlueLight80: maasstrichtBlue.lighten80,
+  maasstrichtBlueLight50: maasstrichtBlue.lighten50,
+  maasstrichtBlueLight30: maasstrichtBlue.lighten30,
+  maasstrichtBlue: maasstrichtBlue.base,
+  pastelRed: pastelRed$1.base,
+  mellowApricot: mellowApricot.base,
+  emerald: emerald$1.base,
+  vodka: vodka.base,
+  vermilion: vermilion$1.base,
+  deepSaffron: deepSaffron$1.base,
+  pineGreen: pineGreen.base,
+  ultramarineBlue: ultramarineBlue.base,
+  sonicSilver: sonicSilver.base,
+  linen: linen$1.base,
+  seashell: seashell$1.base,
+  honeydew: honeydew$1.base,
+  aliceBlue: aliceBlue.base,
+  antiFlashWhite: antiFlashWhite.base,
+  apple: apple$1.base
+};
+var emerald = colorScales.emerald,
+    blue1 = colorScales.blue1,
+    nightBlue = colorScales.nightBlue,
+    darkBlue = colorScales.darkBlue,
+    grey$3 = colorScales.grey,
+    deepSaffron = colorScales.deepSaffron,
+    peach = colorScales.peach,
+    vermilion = colorScales.vermilion,
+    pastelRed = colorScales.pastelRed,
+    mauve = colorScales.mauve;
+
+_objectSpread2(_objectSpread2({}, palette$5), {}, {
+  nightBlue: nightBlue.base,
+  blueLight60: blue1.lighten60,
+  blue: blue1.base,
+  darkBlue: darkBlue.base,
+  darkBlueDark15: darkBlue.darken15,
+  green: emerald.base,
+  greyDark45: grey$3.darken45,
+  greyDark75: grey$3.darken75,
+  greyLight30: grey$3.lighten30,
+  greyLight45: grey$3.lighten45,
+  greyLight90: grey$3.lighten90,
+  orangeLight30: deepSaffron.lighten30,
+  peach: peach.base,
+  peachLight75: peach.lighten75,
+  red: vermilion.base,
+  pastelRed: pastelRed.base,
+  mauve: mauve.base
+});
+
+var apple = colorScales.apple,
+    currant = colorScales.currant;
+
+_objectSpread2(_objectSpread2({}, palette$5), {}, {
+  apple: apple.base,
+  currant: currant.base
+});
+
+var scarletGum = colorScales.scarletGum,
+    violet1 = colorScales.violet1;
+
+_objectSpread2(_objectSpread2({}, palette$5), {}, {
+  scarletGumLight30: scarletGum.lighten30,
+  scarletGumLight50: scarletGum.lighten50,
+  scarletGumLight80: scarletGum.lighten80,
+  scarletGumLight90: scarletGum.lighten90,
+  scarletGum: scarletGum.base,
+  violetLight30: violet1.lighten30,
+  violetLight50: violet1.lighten50,
+  violetLight80: violet1.lighten80,
+  violetLight90: violet1.lighten90,
+  violet: violet1.base
+});
+
+var jordyBlue = colorScales.jordyBlue,
+    cornflowerBlue = colorScales.cornflowerBlue,
+    paua = colorScales.paua;
+
+_objectSpread2(_objectSpread2({}, palette$5), {}, {
+  jordyBlueLight30: jordyBlue.lighten30,
+  jordyBlueLight50: jordyBlue.lighten50,
+  jordyBlueLight70: jordyBlue.lighten70,
+  jordyBlueLight90: jordyBlue.lighten90,
+  jordyBlue: jordyBlue.base,
+  cornflowerBlue: cornflowerBlue.base,
+  paua: paua.base
+});
+
+var gold$1 = colorScales.gold;
+
+_objectSpread2(_objectSpread2({}, palette$5), {}, {
+  goldLight20: gold$1.lighten20,
+  goldLight50: gold$1.lighten50,
+  goldLight70: gold$1.lighten70,
+  goldLight90: gold$1.lighten90,
+  gold: gold$1.base
+});
 
 var systemPalette = {
-  primary: palette.violet,
-  primaryLight: palette.violetLight60,
-  primaryDark: palette.purpleDark15,
-  primaryBackground: palette.violetLight90,
-  secondary: palette.dodgerBlue,
-  secondaryLight: palette.dodgerBlueLight75,
-  info: palette.dodgerBlue,
-  infoMediumLight: palette.blue,
-  infoLight: palette.dodgerBlueLight75,
-  infoBackground: palette.dodgerBlueLight90,
-  success: palette.green,
-  successDark: palette.greenDark30,
-  successBackground: palette.grotesqueGreenLight90,
-  danger: palette.red,
-  dangerLight: palette.redLight60,
-  dangerBackground: palette.redLight90,
-  warning: palette.orange,
-  warningDark: palette.orangeDark15,
-  warningBackground: palette.orangeLight90,
-  platformBackground: palette.white,
-  backgroundLight: palette.greyLight95,
-  backgroundDark: palette.greyDark75,
-  text: palette.greyDark75,
-  disabledText: palette.greyDark15,
-  disabledLightText: palette.greyLight45,
-  invertedText: palette.white,
-  outline: palette.greyLight60,
-  archived: palette.greyLight45,
-  black: palette.black,
-  inactiveBackground: palette.greyDark30
+  primary: palette$6.violet,
+  primaryLight: palette$6.violetLight60,
+  primaryDark: palette$6.purpleDark15,
+  primaryBackground: palette$6.violetLight90,
+  secondary: palette$6.dodgerBlue,
+  secondaryLight: palette$6.dodgerBlueLight75,
+  info: palette$6.dodgerBlue,
+  infoMediumLight: palette$5.vodka,
+  infoLight: palette$6.dodgerBlueLight75,
+  infoBackground: palette$6.dodgerBlueLight90,
+  success: palette$6.green,
+  successLight: palette$5.emerald,
+  successDark: palette$6.greenDark30,
+  successBackground: palette$6.grotesqueGreenLight90,
+  danger: palette$6.red,
+  dangerMediumLight: palette$5.apple,
+  dangerLight: palette$6.redLight60,
+  dangerBackground: palette$6.redLight90,
+  warning: palette$6.orange,
+  warningLight: palette$5.mellowApricot,
+  warningDark: palette$6.orangeDark15,
+  warningBackground: palette$6.orangeLight90,
+  platformBackground: palette$6.white,
+  backgroundLight: palette$6.greyLight95,
+  backgroundDark: palette$6.greyDark75,
+  text: palette$6.greyDark75,
+  disabledText: palette$6.greyDark15,
+  disabledLightText: palette$6.greyLight45,
+  invertedText: palette$6.white,
+  outline: palette$6.greyLight60,
+  archivedDark: palette$5.greyLight30,
+  archived: palette$6.greyLight45,
+  black: palette$6.black,
+  inactiveBackground: palette$6.greyDark30,
+  shadow: palette$6.greyLight60
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -1801,6 +2706,7 @@ var getSpace = function getSpace(baseSpace) {
     xxsmall: scale(baseSpace * 0.25),
     xsmall: scale(baseSpace * 0.5),
     small: scale(baseSpace),
+    smallMedium: scale(baseSpace) * 1.5,
     medium: scale(baseSpace * 2),
     large: scale(baseSpace * 3),
     xlarge: scale(baseSpace * 4),
@@ -2038,6 +2944,8 @@ var getButtonTheme = function getButtonTheme(theme) {
     pressedPrimary: theme.colors.primaryLight,
     secondary: theme.colors.secondary,
     pressedSecondary: theme.colors.secondaryLight,
+    danger: theme.colors.danger,
+    pressedDanger: theme.colors.dangerLight,
     defaultText: theme.colors.text,
     disabledText: theme.colors.disabledLightText,
     disabledBorder: theme.colors.disabledLightText,
@@ -2058,13 +2966,24 @@ var getButtonTheme = function getButtonTheme(theme) {
 
 var getCardTheme = function getCardTheme(theme) {
   var colors = {
-    dataCardIndicator: theme.colors.primaryDark
+    dataCardIndicator: theme.colors.primaryDark,
+    indicator: {
+      archived: theme.colors.archivedDark,
+      info: theme.colors.infoMediumLight,
+      success: theme.colors.successLight,
+      warning: theme.colors.warningLight,
+      danger: theme.colors.dangerMediumLight
+    }
+  };
+  var sizes = {
+    indicatorWidth: theme.space.medium
   };
   var radii = {
-    "default": 12
+    "default": theme.radii.large
   };
   return {
     colors: colors,
+    sizes: sizes,
     radii: radii
   };
 };
@@ -2220,7 +3139,8 @@ var getIconTheme = function getIconTheme(theme) {
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    disabledText: theme.colors.disabledText
+    disabledText: theme.colors.disabledText,
+    invertedText: theme.colors.invertedText
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -2517,11 +3437,40 @@ var getToastTheme = function getToastTheme(theme) {
   };
 };
 
+var getToolbarTheme = function getToolbarTheme(theme) {
+  var colors = {
+    background: theme.colors.platformBackground,
+    border: theme.colors.outline,
+    primary: theme.colors.primary,
+    info: theme.colors.info,
+    success: theme.colors.success,
+    danger: theme.colors.warning,
+    error: theme.colors.danger,
+    disabled: theme.colors.disabledText
+  };
+  var space = {
+    verticalPadding: theme.space.small,
+    horizontalPadding: theme.space.smallMedium
+  };
+  var borderWidths = {
+    "default": theme.borderWidths.base
+  };
+  return {
+    colors: colors,
+    space: space,
+    borderWidths: borderWidths
+  };
+};
+
 var getTypographyTheme = function getTypographyTheme(theme) {
   var colors = {
     body: theme.colors.text,
     subdued: theme.colors.disabledText,
-    primary: theme.colors.primary
+    primary: theme.colors.primary,
+    info: theme.colors.info,
+    danger: theme.colors.danger,
+    warning: theme.colors.warning,
+    success: theme.colors.success
   };
   var fonts = {
     light: theme.fonts.light,
@@ -2548,6 +3497,53 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
 };
 
+var getListTheme = function getListTheme(theme) {
+  var colors = {
+    checkedListItemContainerBackground: theme.colors.primaryBackground,
+    listItemContainerBackground: theme.colors.platformBackground,
+    leadingStatus: {
+      danger: theme.colors.danger,
+      info: theme.colors.infoLight,
+      success: theme.colors.successDark,
+      warning: theme.colors.warningLight,
+      archived: theme.colors.archived
+    }
+  };
+  var space = {
+    listItemContainerPadding: theme.space.medium,
+    leadingStatusMarginRight: theme.space.small,
+    prefixContainerMarginRight: theme.space.small,
+    suffixContainerMarginLeft: theme.space.small
+  };
+  var radii = {
+    card: theme.radii.medium,
+    cardShadow: theme.radii.base,
+    leadingStatus: theme.radii.rounded
+  };
+  var offsets = {
+    cardShadow: {
+      width: 0,
+      height: 2
+    }
+  };
+  var widths = {
+    leadingStatus: 8
+  };
+  var opacity = {
+    disabled: 0.38,
+    enabled: 1,
+    cardShadow: 1
+  };
+  return {
+    colors: colors,
+    space: space,
+    radii: radii,
+    offsets: offsets,
+    widths: widths,
+    opacity: opacity
+  };
+};
+
 var getTheme = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
@@ -2577,7 +3573,9 @@ var getTheme = function getTheme() {
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
       toast: getToastTheme(globalTheme),
-      typography: getTypographyTheme(globalTheme)
+      toolbar: getToolbarTheme(globalTheme),
+      typography: getTypographyTheme(globalTheme),
+      list: getListTheme(globalTheme)
     }
   });
 };
@@ -6469,7 +7467,7 @@ var getDisplayName = function getDisplayName(primitive) {
 
 var styled = createStyled(StyleSheet$1);
 var components = ['ActivityIndicator', 'Button', 'DatePickerIOS', 'DrawerLayoutAndroid', 'FlatList', 'Image', 'ImageBackground', 'KeyboardAvoidingView', 'ListView', 'Modal', 'NavigatorIOS', 'Picker', 'PickerIOS', 'Pressable', 'ProgressBarAndroid', 'ProgressViewIOS', 'RecyclerViewBackedScrollView', 'RefreshControl', 'SafeAreaView', 'ScrollView', 'SectionList', 'SegmentedControlIOS', 'Slider', 'SnapshotViewIOS', 'StatusBar', 'SwipeableListView', 'Switch', 'SwitchIOS', 'TabBarIOS', 'Text', 'TextInput', 'ToolbarAndroid', 'TouchableHighlight', 'TouchableNativeFeedback', 'TouchableOpacity', 'TouchableWithoutFeedback', 'View', 'ViewPagerAndroid'];
-var index$2 = components.reduce(function (acc, comp) {
+var index$5 = components.reduce(function (acc, comp) {
   return Object.defineProperty(acc, comp, {
     enumerable: true,
     configurable: false,
@@ -14406,9 +15404,10 @@ var COLOR_INTENTS = {
   danger: 'danger',
   success: 'success',
   warning: 'warning',
-  'disabled-text': 'disabledText'
+  'disabled-text': 'disabledText',
+  'text-inverted': 'invertedText'
 };
-var StyledHeroIcon = index$2(HeroIcon)(function (_ref) {
+var StyledHeroIcon = index$5(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       themeSize = _ref.themeSize,
       theme = _ref.theme;
@@ -14440,7 +15439,7 @@ var FONTWEIGHT_MAP = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText$3 = index$2(Text$1)(function (_ref) {
+var StyledText$3 = index$5(Text$1)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       themeFontWeight = _ref.themeFontWeight,
       themeIntent = _ref.themeIntent,
@@ -14456,7 +15455,7 @@ var StyledText$3 = index$2(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$c = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$d = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -14466,7 +15465,7 @@ var Text = function Text(_ref) {
       fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'body' : _ref$intent,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$c);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$d);
 
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$3({}, nativeProps, {
     themeFontSize: fontSize,
@@ -14479,7 +15478,7 @@ var Typography = {
   Text: Text
 };
 
-var Container$2 = index$2(View)(function (_ref) {
+var Container$2 = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       _ref$themeVariant = _ref.themeVariant,
       themeVariant = _ref$themeVariant === void 0 ? 'default' : _ref$themeVariant,
@@ -14491,21 +15490,21 @@ var Container$2 = index$2(View)(function (_ref) {
     flexDirection: 'row'
   };
 });
-var IconContainer$1 = index$2(View)(function (_ref2) {
+var IconContainer$1 = index$5(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     alignItems: 'center',
     paddingLeft: theme.__hd__.alert.space.padding
   };
 });
-var TextContainer$1 = index$2(View)(function (_ref3) {
+var TextContainer$1 = index$5(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     paddingHorizontal: theme.__hd__.alert.space.padding,
     flex: 1
   };
 });
-var ContentContainer$1 = index$2(View)(function (_ref4) {
+var ContentContainer$1 = index$5(View)(function (_ref4) {
   var theme = _ref4.theme,
       showDivider = _ref4.showDivider;
   return {
@@ -14516,7 +15515,7 @@ var ContentContainer$1 = index$2(View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var CTAWrapper$1 = index$2(TouchableOpacity)(function (_ref5) {
+var CTAWrapper$1 = index$5(TouchableOpacity)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     paddingHorizontal: theme.__hd__.alert.space.padding,
@@ -14574,7 +15573,7 @@ var Alert = function Alert(_ref) {
   })) : null);
 };
 
-var StyledPressable = index$2(TouchableOpacity)(function (_ref) {
+var StyledPressable = index$5(TouchableOpacity)(function (_ref) {
   var themeSize = _ref.themeSize,
       themeIntent = _ref.themeIntent,
       theme = _ref.theme;
@@ -14587,7 +15586,7 @@ var StyledPressable = index$2(TouchableOpacity)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var StyledView$3 = index$2(View)(function (_ref2) {
+var StyledView$3 = index$5(View)(function (_ref2) {
   var themeSize = _ref2.themeSize,
       themeIntent = _ref2.themeIntent,
       theme = _ref2.theme;
@@ -14600,7 +15599,7 @@ var StyledView$3 = index$2(View)(function (_ref2) {
     overflow: 'hidden'
   };
 });
-var StyledTextWrapper = index$2(View)(function () {
+var StyledTextWrapper = index$5(View)(function () {
   return {
     alignItems: 'center',
     justifyContent: 'center',
@@ -14609,7 +15608,7 @@ var StyledTextWrapper = index$2(View)(function () {
     height: '100%'
   };
 });
-var StyledText$2 = index$2(Text$1)(function (_ref3) {
+var StyledText$2 = index$5(Text$1)(function (_ref3) {
   var themeSize = _ref3.themeSize,
       themeIntent = _ref3.themeIntent,
       theme = _ref3.theme;
@@ -14619,7 +15618,7 @@ var StyledText$2 = index$2(Text$1)(function (_ref3) {
     overflow: 'hidden'
   };
 });
-var StyledImage = index$2(Image)(function (_ref4) {
+var StyledImage = index$5(Image)(function (_ref4) {
   var themeSize = _ref4.themeSize,
       theme = _ref4.theme;
   return {
@@ -14655,7 +15654,7 @@ var Avatar = function Avatar(_ref) {
   })) : null;
 };
 
-var StyledView$2 = index$2(Animated.View)(function (_ref) {
+var StyledView$2 = index$5(Animated.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       themePadding = _ref.themePadding,
       theme = _ref.theme;
@@ -14669,7 +15668,7 @@ var StyledView$2 = index$2(Animated.View)(function (_ref) {
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space.horizontalPadding : undefined
   };
 });
-var StyledText$1 = index$2(Text$1)(function (_ref2) {
+var StyledText$1 = index$5(Text$1)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     fontFamily: theme.__hd__.badge.fonts["default"],
@@ -14680,7 +15679,7 @@ var StyledText$1 = index$2(Text$1)(function (_ref2) {
     textAlign: 'center'
   };
 });
-var StyledStatus = index$2(Animated.View)(function (_ref3) {
+var StyledStatus = index$5(Animated.View)(function (_ref3) {
   var themeIntent = _ref3.themeIntent,
       theme = _ref3.theme;
   return {
@@ -14694,7 +15693,7 @@ var StyledStatus = index$2(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$b = ["children", "visible", "intent", "style", "testID"];
+var _excluded$c = ["children", "visible", "intent", "style", "testID"];
 
 var Status = function Status(_ref) {
   var children = _ref.children,
@@ -14704,7 +15703,7 @@ var Status = function Status(_ref) {
       intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$b);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$c);
 
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -14740,7 +15739,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$a = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$b = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 
 var getPaddingState = function getPaddingState(content) {
@@ -14757,7 +15756,7 @@ var Badge = function Badge(_ref) {
       intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$a);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$b);
 
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -14803,21 +15802,21 @@ var isHeroIcon = function isHeroIcon(x) {
   return IconList.includes(x);
 };
 
-var BottomNavigationTab = index$2(View)(function (_ref) {
+var BottomNavigationTab = index$5(View)(function (_ref) {
   var themeVisibility = _ref.themeVisibility;
   return {
     flex: 1,
     display: themeVisibility === false ? 'none' : 'flex'
   };
 });
-var BottomNavigationContainer = index$2(View)({
+var BottomNavigationContainer = index$5(View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper$2 = index$2(View)({
+var ContentWrapper$2 = index$5(View)({
   flex: 1
 });
-var BottomBarWrapper = index$2(View)(function (_ref2) {
+var BottomBarWrapper = index$5(View)(function (_ref2) {
   var themeInsets = _ref2.themeInsets,
       theme = _ref2.theme;
   return {
@@ -14833,17 +15832,17 @@ var BottomBarWrapper = index$2(View)(function (_ref2) {
     elevation: theme.__hd__.bottomNavigation.shadows.elevation
   };
 });
-var BottomBar = index$2(View)({
+var BottomBar = index$5(View)({
   flex: 1,
   flexDirection: 'row',
   overflow: 'hidden',
   alignItems: 'center'
 });
-var BottomBarItem = index$2(View)({
+var BottomBarItem = index$5(View)({
   flex: 1,
   alignItems: 'center'
 });
-var StyledBottomBarText = index$2(Typography.Text)(function (_ref3) {
+var StyledBottomBarText = index$5(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
@@ -14853,7 +15852,7 @@ var StyledBottomBarText = index$2(Typography.Text)(function (_ref3) {
 var isIOS = Platform.OS === 'ios';
 Platform.OS === 'android';
 
-var _excluded$9 = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$a = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -14866,7 +15865,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
       tabs = _ref.tabs,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$9);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$a);
 
   var insets = useSafeAreaInsets();
   /**
@@ -14940,7 +15939,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
-var StyledDivider = index$2(View)(function (_ref) {
+var StyledDivider = index$5(View)(function (_ref) {
   var themeMarginHorizontal = _ref.themeMarginHorizontal,
       themeMarginVertical = _ref.themeMarginVertical,
       theme = _ref.theme;
@@ -14957,14 +15956,14 @@ var StyledDivider = index$2(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$8 = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$9 = ["marginHorizontal", "marginVertical", "style", "testID"];
 
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
       marginVertical = _ref.marginVertical,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$8);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$9);
 
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$3({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
@@ -14975,10 +15974,10 @@ var Divider = function Divider(_ref) {
 };
 
 var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
-var StyledWrapper$5 = index$2(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+var StyledWrapper$5 = index$5(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
-var StyledBottomSheet = index$2(Animated.View)(function (_ref) {
+var StyledBottomSheet = index$5(Animated.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
@@ -14993,21 +15992,21 @@ var StyledBottomSheet = index$2(Animated.View)(function (_ref) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$2(AnimatedPressable$1)(function (_ref2) {
+var StyledBackdrop$2 = index$5(AnimatedPressable$1)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
     opacity: 0.48
   });
 });
-var StyledHeaderWrapper = index$2(View)(function (_ref3) {
+var StyledHeaderWrapper = index$5(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
     flexDirection: 'row'
   };
 });
-var StyledHeader = index$2(View)(function (_ref4) {
+var StyledHeader = index$5(View)(function (_ref4) {
   var theme = _ref4.theme,
       adjacentIcon = _ref4.adjacentIcon;
   return {
@@ -15018,7 +16017,7 @@ var StyledHeader = index$2(View)(function (_ref4) {
     justifyContent: 'center'
   };
 });
-var StyledFooter = index$2(View)(function (_ref5) {
+var StyledFooter = index$5(View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     paddingHorizontal: theme.__hd__.bottomSheet.space.horizontalPadding,
@@ -15029,7 +16028,7 @@ var StyledFooter = index$2(View)(function (_ref5) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$1 = index$2(View)(function (_ref6) {
+var StyledIconWrapper$1 = index$5(View)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     alignItems: 'center',
@@ -15050,7 +16049,7 @@ var genLoadingIndicatorStyles = function genLoadingIndicatorStyles(theme, intent
   };
 };
 
-var StyledLoadingIndicatorWrapper = index$2(View)(function (_ref) {
+var StyledLoadingIndicatorWrapper = index$5(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -15059,7 +16058,7 @@ var StyledLoadingIndicatorWrapper = index$2(View)(function (_ref) {
     paddingVertical: theme.space.xxsmall
   };
 });
-var StyledLoadingDot = index$2(View)(function (_ref2) {
+var StyledLoadingDot = index$5(View)(function (_ref2) {
   var _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 12 : _ref2$size,
       themeVariant = _ref2.themeVariant,
@@ -15070,6 +16069,7 @@ var StyledLoadingDot = index$2(View)(function (_ref2) {
       case 'basic-transparent':
       case 'filled-primary':
       case 'filled-secondary':
+      case 'filled-danger':
         return {
           backgroundColor: theme.__hd__.button.colors.invertedText
         };
@@ -15079,6 +16079,9 @@ var StyledLoadingDot = index$2(View)(function (_ref2) {
 
       case 'outlined-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
+
+      case 'outlined-danger':
+        return genLoadingIndicatorStyles(theme, 'danger');
     }
   };
 
@@ -15092,7 +16095,7 @@ var StyledLoadingDot = index$2(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$7 = ["count", "size", "testID", "themeVariant"];
+var _excluded$8 = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 
@@ -15126,7 +16129,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
       size = _ref2$size === void 0 ? 12 : _ref2$size,
       testID = _ref2.testID,
       themeVariant = _ref2.themeVariant,
-      nativeProps = _objectWithoutProperties$1(_ref2, _excluded$7);
+      nativeProps = _objectWithoutProperties$1(_ref2, _excluded$8);
 
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
@@ -15163,7 +16166,8 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
 
 var PRESSED_COLORS = {
   primary: 'pressedPrimary',
-  secondary: 'pressedSecondary'
+  secondary: 'pressedSecondary',
+  danger: 'pressedDanger'
 };
 
 var genBasicTransparentContainerStyles = function genBasicTransparentContainerStyles(theme, pressed, disabled) {
@@ -15277,7 +16281,7 @@ var genOutlineTextStyles = function genOutlineTextStyles(theme, intent, pressed,
   }, textColorStyling());
 };
 
-var StyledButtonContainer = index$2(View)(function (_ref) {
+var StyledButtonContainer = index$5(View)(function (_ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$pressed = _ref.pressed,
@@ -15295,14 +16299,20 @@ var StyledButtonContainer = index$2(View)(function (_ref) {
     case 'filled-secondary':
       return genFilledContainerStyles(theme, 'secondary', pressed, disabled);
 
+    case 'filled-danger':
+      return genFilledContainerStyles(theme, 'danger', pressed, disabled);
+
     case 'outlined-primary':
       return genOutlineContainerStyles(theme, 'primary', pressed, disabled);
 
     case 'outlined-secondary':
       return genOutlineContainerStyles(theme, 'secondary', pressed, disabled);
+
+    case 'outlined-danger':
+      return genOutlineContainerStyles(theme, 'danger', pressed, disabled);
   }
 });
-var StyledButtonText = index$2(Typography.Text)(function (_ref2) {
+var StyledButtonText = index$5(Typography.Text)(function (_ref2) {
   var disabled = _ref2.disabled,
       pressed = _ref2.pressed,
       themeVariant = _ref2.themeVariant,
@@ -15319,6 +16329,7 @@ var StyledButtonText = index$2(Typography.Text)(function (_ref2) {
 
       case 'filled-primary':
       case 'filled-secondary':
+      case 'filled-danger':
         return {
           fontSize: theme.__hd__.button.fontSize["default"],
           lineHeight: theme.__hd__.button.lineHeight["default"],
@@ -15330,6 +16341,9 @@ var StyledButtonText = index$2(Typography.Text)(function (_ref2) {
 
       case 'outlined-secondary':
         return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+
+      case 'outlined-danger':
+        return genOutlineTextStyles(theme, 'danger', pressed, disabled);
     }
   };
 
@@ -15339,7 +16353,7 @@ var StyledButtonText = index$2(Typography.Text)(function (_ref2) {
     fontFamily: theme.__hd__.button.fonts["default"]
   }, themeStyling());
 });
-var StyledButtonIconWrapper = index$2(View)(function (_ref3) {
+var StyledButtonIconWrapper = index$5(View)(function (_ref3) {
   var themePosition = _ref3.themePosition,
       theme = _ref3.theme;
 
@@ -15355,7 +16369,7 @@ var StyledButtonIconWrapper = index$2(View)(function (_ref3) {
       };
   }
 });
-var StyledButtonIcon = index$2(Icon)(function (_ref4) {
+var StyledButtonIcon = index$5(Icon)(function (_ref4) {
   var disabled = _ref4.disabled,
       pressed = _ref4.pressed,
       themeVariant = _ref4.themeVariant,
@@ -15370,6 +16384,7 @@ var StyledButtonIcon = index$2(Icon)(function (_ref4) {
 
       case 'filled-primary':
       case 'filled-secondary':
+      case 'filled-danger':
         return {
           color: theme.__hd__.button.colors.invertedText
         };
@@ -15379,6 +16394,9 @@ var StyledButtonIcon = index$2(Icon)(function (_ref4) {
 
       case 'outlined-secondary':
         return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+
+      case 'outlined-danger':
+        return genOutlineTextStyles(theme, 'danger', pressed, disabled);
     }
   };
 
@@ -15389,11 +16407,13 @@ var StyledButtonIcon = index$2(Icon)(function (_ref4) {
 
 var FILLED_VARIANTS = {
   primary: 'filled-primary',
-  secondary: 'filled-secondary'
+  secondary: 'filled-secondary',
+  danger: 'filled-danger'
 };
 var OUTLINED_VARIANTS = {
   primary: 'outlined-primary',
-  secondary: 'outlined-secondary'
+  secondary: 'outlined-secondary',
+  danger: 'outlined-danger'
 };
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
@@ -15621,15 +16641,46 @@ var BottomSheet = function BottomSheet(_ref) {
   }, footer) : null)));
 };
 
-var StyledCard = index$2(View)(function (_ref) {
-  var themeVariant = _ref.themeVariant,
-      theme = _ref.theme;
-  var sharedStyles = {
+var StyledDataCard = index$5(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
     borderRadius: theme.__hd__.card.radii["default"],
-    overflow: 'hidden'
+    overflow: 'hidden',
+    flexDirection: 'row'
+  };
+});
+var Indicator = index$5(View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeIntent = _ref2.themeIntent;
+  return {
+    backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
+    width: theme.__hd__.card.sizes.indicatorWidth,
+    height: '100%'
+  };
+});
+
+var _excluded$7 = ["intent", "children"];
+
+var DataCard = function DataCard(_ref) {
+  var _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'info' : _ref$intent,
+      children = _ref.children,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$7);
+
+  return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
+    themeIntent: intent,
+    testID: "data-card-indicator"
+  }), children);
+};
+
+var StyledCard = index$5(View)(function (_ref) {
+  var themeVariant = _ref.themeVariant,
+      theme = _ref.theme;
+  var sharedStyles = {
+    borderRadius: theme.__hd__.card.radii["default"],
+    overflow: 'hidden'
   };
   var dataStyles = {
-    flex: 1,
     flexDirection: 'row'
   };
 
@@ -15641,11 +16692,11 @@ var StyledCard = index$2(View)(function (_ref) {
       return _objectSpread2(_objectSpread2({}, sharedStyles), dataStyles);
   }
 });
-var LeftDataCard = index$2(View)(function (_ref2) {
+var LeftDataCard = index$5(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
-    width: scale(16),
+    width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
 });
@@ -15665,7 +16716,11 @@ var Card = function Card(_ref) {
   }), children);
 };
 
-var StyledWrapper$4 = index$2(Animated.View)(function () {
+var index$4 = Object.assign(Card, {
+  Data: DataCard
+});
+
+var StyledWrapper$4 = index$5(Animated.View)(function () {
   return {
     margin: 0,
     padding: 0,
@@ -15678,12 +16733,12 @@ var StyledWrapper$4 = index$2(Animated.View)(function () {
  * to use with Animated.timing
  */
 
-var StyledHiddenWrapper = index$2(View)(function () {
+var StyledHiddenWrapper = index$5(View)(function () {
   return {
     height: Dimensions.get('window').height
   };
 });
-var StyledChildWrapper = index$2(View)(function () {
+var StyledChildWrapper = index$5(View)(function () {
   return {
     margin: 0,
     padding: 0
@@ -15737,7 +16792,7 @@ var Collapse = function Collapse(_ref) {
   }, children)));
 };
 
-var StyledWrapper$3 = index$2(TouchableOpacity)(function (_ref) {
+var StyledWrapper$3 = index$5(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled;
   return {
@@ -15777,14 +16832,14 @@ var CheckBox = function CheckBox(_ref) {
   }));
 };
 
-var Wrapper$1 = index$2(View)(function () {
+var Wrapper$1 = index$5(View)(function () {
   return {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between'
   };
 });
-var Value = index$2(Typography.Text)(function (_ref) {
+var Value = index$5(Typography.Text)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingHorizontal: theme.__hd__.contentNavigator.space.valueHorizontalPadding
@@ -15820,7 +16875,7 @@ function ContentNavigator(_ref) {
 }
 
 var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledContainer$1 = index$2(View)(function (_ref) {
+var StyledContainer$1 = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -15833,13 +16888,13 @@ var StyledContainer$1 = index$2(View)(function (_ref) {
     elevation: 9999
   });
 });
-var StyledBackdrop$1 = index$2(AnimatedPressable)(function (_ref2) {
+var StyledBackdrop$1 = index$5(AnimatedPressable)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
   });
 });
-var StyledDrawerContainer = index$2(Animated.View)(function (_ref3) {
+var StyledDrawerContainer = index$5(Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
       enableShadow = _ref3.enableShadow;
   return {
@@ -15909,7 +16964,7 @@ var Drawer = function Drawer(_ref) {
   }, children));
 };
 
-var StyledFABContainer = index$2(TouchableHighlight)(function (_ref) {
+var StyledFABContainer = index$5(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.fab.colors.buttonBackground,
@@ -15923,7 +16978,7 @@ var StyledFABContainer = index$2(TouchableHighlight)(function (_ref) {
     flexDirection: 'row'
   };
 });
-var StyledFABIcon = index$2(Icon)(function (_ref2) {
+var StyledFABIcon = index$5(Icon)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     color: theme.__hd__.fab.colors.icon,
@@ -15932,7 +16987,7 @@ var StyledFABIcon = index$2(Icon)(function (_ref2) {
     textAlign: 'center'
   };
 });
-var StyledFABText = index$2(Text$1)(function (_ref3) {
+var StyledFABText = index$5(Text$1)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     fontFamily: theme.__hd__.fab.fonts.title,
@@ -16029,7 +17084,7 @@ var FAB = function FAB(_ref3) {
   }));
 };
 
-var StyledActionItem = index$2(TouchableOpacity)(function (_ref) {
+var StyledActionItem = index$5(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
@@ -16046,7 +17101,7 @@ var StyledActionItem = index$2(TouchableOpacity)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var StyledActionItemText = index$2(Typography.Text)(function (_ref2) {
+var StyledActionItemText = index$5(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     paddingLeft: theme.__hd__.fab.space.actionItemTextPaddingLeft,
@@ -16071,7 +17126,7 @@ var ActionItem = function ActionItem(_ref) {
   }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title));
 };
 
-var StyledContainer = index$2(View)({
+var StyledContainer = index$5(View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -16080,12 +17135,12 @@ var StyledContainer = index$2(View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end'
 });
-var StyledActionGroupContainer = index$2(Animated.View)({
+var StyledActionGroupContainer = index$5(Animated.View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end',
   width: '70%'
 });
-var StyledFAB = index$2(FAB)(function (_ref) {
+var StyledFAB = index$5(FAB)(function (_ref) {
   var theme = _ref.theme;
   return {
     marginRight: theme.__hd__.fab.space.buttonMarginRight,
@@ -16093,7 +17148,7 @@ var StyledFAB = index$2(FAB)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdrop = index$2(Animated.View)(function (_ref2) {
+var StyledBackdrop = index$5(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16104,7 +17159,7 @@ var StyledBackdrop = index$2(Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
-var StyledHeaderText = index$2(Typography.Text)(function (_ref3) {
+var StyledHeaderText = index$5(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     fontSize: theme.__hd__.fab.fontSizes.header,
@@ -16183,11 +17238,200 @@ var ActionGroup = function ActionGroup(_ref2) {
   }));
 };
 
-var index$1 = Object.assign(FAB, {
+var index$3 = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
-var HalfCircleWrapper = index$2(View)(function (_ref) {
+var StyledListItemContainer$1 = index$5(TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme,
+      _ref$themeSelected = _ref.themeSelected,
+      themeSelected = _ref$themeSelected === void 0 ? false : _ref$themeSelected,
+      _ref$themeVariant = _ref.themeVariant,
+      themeVariant = _ref$themeVariant === void 0 ? 'basic' : _ref$themeVariant;
+  var sharedStyles = {
+    flexDirection: 'row',
+    backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
+    padding: theme.__hd__.list.space.listItemContainerPadding
+  };
+
+  switch (themeVariant) {
+    case 'basic':
+      return sharedStyles;
+
+    case 'card':
+      return _objectSpread2(_objectSpread2({}, sharedStyles), {}, {
+        alignItems: 'center',
+        borderRadius: theme.__hd__.list.radii.card,
+        shadowColor: theme.colors.shadow,
+        shadowRadius: theme.__hd__.list.radii.cardShadow,
+        shadowOffset: theme.__hd__.list.offsets.cardShadow,
+        shadowOpacity: theme.__hd__.list.opacity.cardShadow
+      });
+
+    default:
+      return sharedStyles;
+  }
+});
+var StyledContentContainer = index$5(View)(function () {
+  return {
+    flexDirection: 'column',
+    flex: 1,
+    flexGrow: 2
+  };
+});
+var StyledChildrenContainer = index$5(View)(function () {
+  return {
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  };
+});
+var StyledLeadingStatus = index$5(View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeLeadingStatusIntent = _ref2.themeLeadingStatusIntent;
+  return {
+    width: theme.__hd__.list.widths.leadingStatus,
+    marginRight: theme.__hd__.list.space.leadingStatusMarginRight,
+    borderRadius: theme.__hd__.list.radii.leadingStatus,
+    backgroundColor: theme.__hd__.list.colors.leadingStatus[themeLeadingStatusIntent]
+  };
+});
+var StyledPrefixContainer$1 = index$5(View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginRight: theme.__hd__.list.space.prefixContainerMarginRight
+  };
+});
+var StyledSuffixContainer$1 = index$5(View)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
+  };
+});
+var StyledTitleContainer$1 = index$5(View)(function () {
+  return {
+    flex: 1
+  };
+});
+
+var ListItem = function ListItem(_ref) {
+  var prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      style = _ref.style,
+      testID = _ref.testID,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected,
+      children = _ref.children,
+      leadingStatus = _ref.leadingStatus,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'full-width' : _ref$variant,
+      onPress = _ref.onPress,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/React.createElement(StyledListItemContainer$1, {
+    style: style,
+    testID: testID,
+    themeSelected: selected,
+    themeVariant: variant,
+    onPress: onPress,
+    disabled: disabled
+  }, leadingStatus && /*#__PURE__*/React.createElement(StyledLeadingStatus, {
+    themeLeadingStatusIntent: leadingStatus,
+    testID: "leadingStatus"
+  }), /*#__PURE__*/React.createElement(StyledContentContainer, null, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer$1, null, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    icon: prefix
+  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer$1, null, /*#__PURE__*/React.createElement(Typography.Text, {
+    intent: "body",
+    fontSize: "large",
+    fontWeight: "semi-bold"
+  }, title), subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
+    intent: "subdued",
+    fontSize: "small"
+  }, subtitle)), suffix && /*#__PURE__*/React.createElement(StyledSuffixContainer$1, null, typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    icon: suffix,
+    intent: disabled ? 'disabled-text' : 'primary',
+    size: "small"
+  }) : suffix)), children && /*#__PURE__*/React.createElement(StyledChildrenContainer, null, children)));
+};
+
+var StyledPrefixContainer = index$5(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    marginRight: theme.__hd__.list.space.prefixContainerMarginRight
+  };
+});
+var StyledSuffixContainer = index$5(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
+  };
+});
+var StyledTitleContainer = index$5(View)(function () {
+  return {
+    flex: 1
+  };
+});
+var StyledListItemContainer = index$5(TouchableOpacity)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeSelected = _ref3.themeSelected,
+      themeDisabled = _ref3.themeDisabled;
+  return {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option,
+    padding: theme.__hd__.list.space.listItemContainerPadding,
+    opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled
+  };
+});
+
+var BasicListItem = function BasicListItem(_ref) {
+  var prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      style = _ref.style,
+      testID = _ref.testID,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/React.createElement(StyledListItemContainer, {
+    style: style,
+    testID: testID,
+    themeSelected: selected,
+    themeDisabled: disabled,
+    onPress: onPress,
+    disabled: disabled
+  }, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer, null, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    icon: prefix
+  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer, null, /*#__PURE__*/React.createElement(Typography.Text, {
+    intent: "body",
+    fontSize: "large"
+  }, title), subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
+    intent: "subdued",
+    fontSize: "small"
+  }, subtitle)), suffix && /*#__PURE__*/React.createElement(StyledSuffixContainer, null, typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    icon: suffix,
+    intent: "text",
+    size: "small"
+  }) : suffix));
+};
+
+var List = {
+  Item: ListItem,
+  BasicItem: BasicListItem
+};
+
+var HalfCircleWrapper = index$5(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: theme.__hd__.progress.sizes.radius,
@@ -16195,7 +17439,7 @@ var HalfCircleWrapper = index$2(View)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var HalfCircleInnerFG = index$2(View)(function (_ref2) {
+var HalfCircleInnerFG = index$5(View)(function (_ref2) {
   var theme = _ref2.theme,
       themeIntent = _ref2.themeIntent;
   return {
@@ -16205,7 +17449,7 @@ var HalfCircleInnerFG = index$2(View)(function (_ref2) {
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var HalfCircleInnerBG = index$2(View)(function (_ref3) {
+var HalfCircleInnerBG = index$5(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     width: theme.__hd__.progress.sizes.radius * 2,
@@ -16214,7 +17458,7 @@ var HalfCircleInnerBG = index$2(View)(function (_ref3) {
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var DonutCircle = index$2(View)(function (_ref4) {
+var DonutCircle = index$5(View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     position: 'absolute',
@@ -16229,7 +17473,7 @@ var DonutCircle = index$2(View)(function (_ref4) {
     justifyContent: 'center'
   };
 });
-var StrokeEnd = index$2(View)(function (_ref5) {
+var StrokeEnd = index$5(View)(function (_ref5) {
   var theme = _ref5.theme,
       themeIntent = _ref5.themeIntent;
   return {
@@ -16360,7 +17604,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   }, "".concat(value, "%")))));
 };
 
-var StyledWrapper$2 = index$2(View)(function (_ref) {
+var StyledWrapper$2 = index$5(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     height: theme.__hd__.progress.sizes.barHeight,
@@ -16369,7 +17613,7 @@ var StyledWrapper$2 = index$2(View)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var StyledInner = index$2(Animated.View)(function (_ref2) {
+var StyledInner = index$5(Animated.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeIntent = _ref2.themeIntent;
   return {
@@ -16439,13 +17683,13 @@ var Progress = {
   Bar: ProgressBar
 };
 
-var StyledView$1 = index$2(View)();
-var StyledSpinnerContainer = index$2(View)({
+var StyledView$1 = index$5(View)();
+var StyledSpinnerContainer = index$5(View)({
   height: '100%',
   justifyContent: 'center',
   alignItems: 'center'
 });
-var StyledSpinnerRow = index$2(View)(function (_ref) {
+var StyledSpinnerRow = index$5(View)(function (_ref) {
   var themePosition = _ref.themePosition,
       theme = _ref.theme;
   return {
@@ -16453,7 +17697,7 @@ var StyledSpinnerRow = index$2(View)(function (_ref) {
     marginBottom: themePosition === 'top' ? theme.__hd__.spinner.space.spinnerDotPadding : 0
   };
 });
-var StyledSpinnerDot = index$2(View)(function (_ref2) {
+var StyledSpinnerDot = index$5(View)(function (_ref2) {
   var themePosition = _ref2.themePosition,
       theme = _ref2.theme;
 
@@ -16544,7 +17788,7 @@ var Spinner = function Spinner(_ref) {
   }, /*#__PURE__*/React.createElement(AnimatedSpinner, null)));
 };
 
-var Wrapper = index$2(TouchableOpacity)(function (_ref) {
+var Wrapper = index$5(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
       themeChecked = _ref.themeChecked;
   return {
@@ -16556,7 +17800,7 @@ var Wrapper = index$2(TouchableOpacity)(function (_ref) {
     backgroundColor: themeChecked ? theme.__hd__.radio.colors.checkedWrapper : theme.__hd__.radio.colors.wrapper
   };
 });
-var Circle = index$2(View)(function (_ref2) {
+var Circle = index$5(View)(function (_ref2) {
   var theme = _ref2.theme,
       themeChecked = _ref2.themeChecked;
   return {
@@ -16569,7 +17813,7 @@ var Circle = index$2(View)(function (_ref2) {
     justifyContent: 'center'
   };
 });
-var InnerCircle = index$2(View)(function (_ref3) {
+var InnerCircle = index$5(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     height: theme.__hd__.radio.sizes.innerCircle,
@@ -16578,7 +17822,7 @@ var InnerCircle = index$2(View)(function (_ref3) {
     backgroundColor: theme.__hd__.radio.colors.checkedCircle
   };
 });
-var Spacer$1 = index$2(View)(function (_ref4) {
+var Spacer$1 = index$5(View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     marginTop: theme.__hd__.radio.space.groupTopMargin
@@ -16651,7 +17895,7 @@ var CompoundRadio = {
   Group: RadioGroup
 };
 
-var StyledHeading = index$2(View)(function (_ref) {
+var StyledHeading = index$5(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
@@ -16664,13 +17908,13 @@ var StyledHeading = index$2(View)(function (_ref) {
     justifyContent: 'space-between'
   };
 });
-var StyledIconWrapper = index$2(View)(function (_ref2) {
+var StyledIconWrapper = index$5(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     marginRight: theme.__hd__.sectionHeading.space.iconMarginRight
   };
 });
-var StyledWrapper$1 = index$2(View)(function () {
+var StyledWrapper$1 = index$5(View)(function () {
   return {
     display: 'flex',
     flexDirection: 'row'
@@ -16715,7 +17959,106 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var Container$1 = index$2(View)(function (_ref) {
+var OptionWrapper = index$5(TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme,
+      themeSelected = _ref.themeSelected;
+  return {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: theme.__hd__.select.radii.option,
+    padding: theme.__hd__.select.space.optionPadding,
+    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option
+  };
+});
+var OptionListWrapper = index$5(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    padding: theme.__hd__.select.space.optionListPadding
+  };
+});
+var Spacer = index$5(View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginTop: theme.__hd__.select.space.optionListSpacing
+  };
+});
+var FooterText = index$5(Typography.Text)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    color: theme.__hd__.select.colors.footerText
+  };
+});
+
+var Footer = function Footer(_ref) {
+  var label = _ref.label,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(FooterText, {
+    fontSize: "large",
+    fontWeight: "semi-bold"
+  }, label));
+};
+
+var getKey = function getKey(option, index, keyExtractor) {
+  var key = '';
+
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+};
+
+var Option$1 = function Option(_ref) {
+  var text = _ref.text,
+      selected = _ref.selected,
+      onPress = _ref.onPress;
+  return /*#__PURE__*/React.createElement(OptionWrapper, {
+    themeSelected: selected,
+    onPress: onPress
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Typography.Text, {
+    fontSize: "large"
+  }, text)), selected && /*#__PURE__*/React.createElement(Icon, {
+    icon: "checkmark",
+    size: "small"
+  }));
+};
+
+var OptionList$1 = function OptionList(_ref) {
+  var value = _ref.value,
+      options = _ref.options,
+      _onPress = _ref.onPress,
+      keyExtractor = _ref.keyExtractor;
+  return /*#__PURE__*/React.createElement(OptionListWrapper, null, options.map(function (opt, index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: getKey(opt, index, keyExtractor)
+    }, index !== 0 && /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(Option$1, {
+      text: opt.text,
+      selected: value.includes(opt.value),
+      onPress: function onPress() {
+        if (value.includes(opt.value)) {
+          _onPress(value.filter(function (val) {
+            return val !== opt.value;
+          }));
+        } else {
+          _onPress([].concat(_toConsumableArray$1(value), [opt.value]));
+        }
+      }
+    }));
+  }));
+};
+
+var Container$1 = index$5(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     position: 'relative',
@@ -16727,7 +18070,7 @@ var Container$1 = index$2(View)(function (_ref) {
     alignItems: 'center'
   };
 });
-var Label = index$2(Typography.Text)(function (_ref2) {
+var Label = index$5(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16738,7 +18081,7 @@ var Label = index$2(Typography.Text)(function (_ref2) {
     paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
   };
 });
-var StyledTextInput = index$2(TextInput$1)(function (_ref3) {
+var StyledTextInput = index$5(TextInput$1)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     flex: 1,
@@ -16782,49 +18125,75 @@ var TextInput = function TextInput(_ref) {
   }));
 };
 
-var OptionWrapper = index$2(TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme,
-      themeSelected = _ref.themeSelected;
-  return {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderRadius: theme.__hd__.select.radii.option,
-    padding: theme.__hd__.select.space.optionPadding,
-    backgroundColor: themeSelected ? theme.__hd__.select.colors.checkedOption : theme.__hd__.select.colors.option
-  };
-});
-var OptionListWrapper = index$2(View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    padding: theme.__hd__.select.space.optionListPadding
-  };
-});
-var Spacer = index$2(View)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    marginTop: theme.__hd__.select.space.optionListSpacing
-  };
-});
-var FooterText = index$2(Typography.Text)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    color: theme.__hd__.select.colors.footerText
-  };
-});
+function MultiSelect(_ref) {
+  var options = _ref.options,
+      value = _ref.value,
+      testID = _ref.testID,
+      style = _ref.style,
+      label = _ref.label,
+      footerLabel = _ref.footerLabel,
+      onConfirm = _ref.onConfirm;
+  var theme = useTheme$1();
 
-function Footer(_ref) {
-  var label = _ref.label,
-      onPress = _ref.onPress;
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectingValue = _useState4[0],
+      setSelectingValue = _useState4[1];
+
+  var displayedValue = options.filter(function (opt) {
+    return value.includes(opt.value);
+  }).map(function (opt) {
+    return opt.text;
+  }).join(', ');
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: onPress
-  }, /*#__PURE__*/React.createElement(FooterText, {
-    fontSize: "large",
-    fontWeight: "semi-bold"
-  }, label));
+    onPress: function onPress() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    label: label,
+    value: displayedValue,
+    onPressIn: function onPressIn() {
+      return setOpen(true);
+    },
+    editable: false // when input is not editable on Android, the text color is gray
+    // hence, adding this to make the text color the same as iOS
+    ,
+    textStyle: {
+      color: theme.colors.text
+    },
+    suffix: "arrow-down",
+    multiline: true,
+    style: style,
+    testID: testID
+  }), /*#__PURE__*/React.createElement(BottomSheet, {
+    open: open,
+    onRequestClose: function onRequestClose() {
+      return setOpen(false);
+    },
+    onDismiss: function onDismiss() {
+      return setSelectingValue(value);
+    },
+    header: label,
+    footer: /*#__PURE__*/React.createElement(Footer, {
+      label: footerLabel,
+      onPress: function onPress() {
+        setOpen(false);
+        onConfirm(selectingValue);
+      }
+    })
+  }, /*#__PURE__*/React.createElement(OptionList$1, {
+    options: options,
+    value: selectingValue,
+    onPress: setSelectingValue
+  })));
 }
 
-function Option(_ref) {
+var Option = function Option(_ref) {
   var text = _ref.text,
       selected = _ref.selected,
       onPress = _ref.onPress;
@@ -16837,58 +18206,40 @@ function Option(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Typography.Text, {
     fontSize: "large"
-  }, text)), selected && /*#__PURE__*/React.createElement(Icon, {
-    icon: "checkmark",
-    size: "small"
-  }));
-}
-
-function getKey(option, index, keyExtractor) {
-  var key = '';
-
-  if (keyExtractor !== undefined) {
-    key = keyExtractor(option, index);
-  } else if (option.key !== undefined) {
-    key = option.key;
-  } else {
-    key = index;
-  }
-
-  return key;
-}
+  }, text)));
+};
 
-function OptionList(_ref2) {
-  var value = _ref2.value,
-      options = _ref2.options,
-      _onPress = _ref2.onPress,
-      keyExtractor = _ref2.keyExtractor;
+var OptionList = function OptionList(_ref) {
+  var value = _ref.value,
+      options = _ref.options,
+      _onPress = _ref.onPress,
+      keyExtractor = _ref.keyExtractor;
   return /*#__PURE__*/React.createElement(OptionListWrapper, null, options.map(function (opt, index) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: getKey(opt, index, keyExtractor)
     }, index !== 0 && /*#__PURE__*/React.createElement(Spacer, null), /*#__PURE__*/React.createElement(Option, {
       text: opt.text,
-      selected: value.includes(opt.value),
+      selected: value === opt.value,
       onPress: function onPress() {
-        if (value.includes(opt.value)) {
-          _onPress(value.filter(function (val) {
-            return val !== opt.value;
-          }));
+        if (value === opt.value) {
+          _onPress(null);
         } else {
-          _onPress([].concat(_toConsumableArray$1(value), [opt.value]));
+          _onPress(opt.value);
         }
       }
     }));
   }));
-}
+};
+
+var SingleSelect = function SingleSelect(_ref) {
+  var _options$find;
 
-function MultiSelect(_ref) {
   var options = _ref.options,
       value = _ref.value,
       testID = _ref.testID,
       style = _ref.style,
       label = _ref.label,
-      footerLabel = _ref.footerLabel,
-      _onPress = _ref.onPress;
+      onConfirm = _ref.onConfirm;
   var theme = useTheme$1();
 
   var _useState = useState(false),
@@ -16901,11 +18252,9 @@ function MultiSelect(_ref) {
       selectingValue = _useState4[0],
       setSelectingValue = _useState4[1];
 
-  var displayedValue = options.filter(function (opt) {
-    return value.includes(opt.value);
-  }).map(function (opt) {
-    return opt.text;
-  }).join(', ');
+  var displayedValue = (_options$find = options.find(function (opt) {
+    return value === opt.value;
+  })) === null || _options$find === void 0 ? void 0 : _options$find.text;
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
     onPress: function onPress() {
       return setOpen(true);
@@ -16934,27 +18283,22 @@ function MultiSelect(_ref) {
     onDismiss: function onDismiss() {
       return setSelectingValue(value);
     },
-    header: label,
-    footer: /*#__PURE__*/React.createElement(Footer, {
-      label: footerLabel,
-      onPress: function onPress() {
-        setOpen(false);
-
-        _onPress(selectingValue);
-      }
-    })
+    header: label
   }, /*#__PURE__*/React.createElement(OptionList, {
     options: options,
     value: selectingValue,
-    onPress: setSelectingValue
+    onPress: function onPress(selectedValue) {
+      setOpen(false);
+      onConfirm(selectedValue);
+    }
   })));
-}
+};
 
-var CompoundSelect = {
+var index$2 = Object.assign(SingleSelect, {
   Multi: MultiSelect
-};
+});
 
-var StyledWrapper = index$2(View)(function (_ref) {
+var StyledWrapper = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       themeChecked = _ref.themeChecked,
       themeSize = _ref.themeSize;
@@ -16966,7 +18310,7 @@ var StyledWrapper = index$2(View)(function (_ref) {
     backgroundColor: themeChecked ? theme.__hd__["switch"].colors.active : theme.__hd__["switch"].colors.inactive
   };
 });
-var StyledDisabledWrapper = index$2(View)(function (_ref2) {
+var StyledDisabledWrapper = index$5(View)(function (_ref2) {
   var theme = _ref2.theme,
       themeSize = _ref2.themeSize;
   return {
@@ -16979,7 +18323,7 @@ var StyledDisabledWrapper = index$2(View)(function (_ref2) {
     opacity: 0.8
   };
 });
-var StyledThumbWrapper = index$2(View)(function (_ref3) {
+var StyledThumbWrapper = index$5(View)(function (_ref3) {
   var theme = _ref3.theme,
       themeSize = _ref3.themeSize;
   return {
@@ -16990,7 +18334,7 @@ var StyledThumbWrapper = index$2(View)(function (_ref3) {
     justifyContent: 'center'
   };
 });
-var StyledKnot = index$2(Animated.View)(function (_ref4) {
+var StyledKnot = index$5(Animated.View)(function (_ref4) {
   var theme = _ref4.theme,
       themeSize = _ref4.themeSize;
   return {
@@ -17247,11 +18591,11 @@ var PagerView = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 var AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
-var TabContainer$1 = index$2(View)({
+var TabContainer$1 = index$5(View)({
   flex: 1,
   overflow: 'hidden'
 });
-var HeaderTabWrapper$1 = index$2(View)(function (_ref) {
+var HeaderTabWrapper$1 = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       themeInsets = _ref.themeInsets;
   return {
@@ -17260,10 +18604,10 @@ var HeaderTabWrapper$1 = index$2(View)(function (_ref) {
     borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom
   };
 });
-var HeaderTab = index$2(View)({
+var HeaderTab = index$5(View)({
   flexDirection: 'row'
 });
-var HeaderTabItem$1 = index$2(View)(function (_ref2) {
+var HeaderTabItem$1 = index$5(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     flex: 1,
@@ -17271,13 +18615,13 @@ var HeaderTabItem$1 = index$2(View)(function (_ref2) {
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var ContentWrapper$1 = index$2(AnimatedPagerView)({
+var ContentWrapper$1 = index$5(AnimatedPagerView)({
   flex: 1
 });
-var TabScreen$1 = index$2(View)({
+var TabScreen$1 = index$5(View)({
   flex: 1
 });
-var StyledIndicator = index$2(Animated.View)(function (_ref3) {
+var StyledIndicator = index$5(Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
       themeWidth = _ref3.themeWidth;
   return {
@@ -17310,17 +18654,17 @@ var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
   });
 };
 
-var TabScreen = index$2(View)({
+var TabScreen = index$5(View)({
   flex: 1
 });
-var TabContainer = index$2(View)({
+var TabContainer = index$5(View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper = index$2(PagerView)({
+var ContentWrapper = index$5(PagerView)({
   flex: 1
 });
-var HeaderTabWrapper = index$2(View)(function (_ref) {
+var HeaderTabWrapper = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       themeInsets = _ref.themeInsets;
   return {
@@ -17329,21 +18673,21 @@ var HeaderTabWrapper = index$2(View)(function (_ref) {
     borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom
   };
 });
-var HeaderTabItem = index$2(Animated.View)(function (_ref2) {
+var HeaderTabItem = index$5(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var HeaderTabItemOutlineWrapper = index$2(View)(function (_ref3) {
+var HeaderTabItemOutlineWrapper = index$5(View)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2({
     paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   }, StyleSheet$1.absoluteFillObject);
 });
-var HeaderTabItemOutline = index$2(Animated.View)(function (_ref4) {
+var HeaderTabItemOutline = index$5(Animated.View)(function (_ref4) {
   var theme = _ref4.theme,
       themeActive = _ref4.themeActive;
   return {
@@ -17351,7 +18695,7 @@ var HeaderTabItemOutline = index$2(Animated.View)(function (_ref4) {
     backgroundColor: themeActive ? theme.__hd__.tabs.colors.activeBackground : undefined
   };
 });
-var HeaderTabItemWrapper = index$2(View)(function (_ref5) {
+var HeaderTabItemWrapper = index$5(View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
@@ -17662,7 +19006,7 @@ var Tabs = function Tabs(_ref2) {
   })));
 };
 
-var index = Object.assign(Tabs, {
+var index$1 = Object.assign(Tabs, {
   Scroll: ScrollableTab
 });
 
@@ -17672,7 +19016,7 @@ var BACKGROUND_INTENTS = {
   danger: 'dangerBackground',
   info: 'infoBackground'
 };
-var StyledView = index$2(View)(function (_ref) {
+var StyledView = index$5(View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       theme = _ref.theme;
   return {
@@ -17684,7 +19028,7 @@ var StyledView = index$2(View)(function (_ref) {
     backgroundColor: theme.__hd__.tag.colors[BACKGROUND_INTENTS[themeIntent]]
   };
 });
-var StyledText = index$2(Text$1)(function (_ref2) {
+var StyledText = index$5(Text$1)(function (_ref2) {
   var themeIntent = _ref2.themeIntent,
       theme = _ref2.theme;
   return {
@@ -17716,7 +19060,7 @@ var Tag = function Tag(_ref) {
   }, content));
 };
 
-var ToastContainerWrapper = index$2(View)(function (_ref) {
+var ToastContainerWrapper = index$5(View)(function (_ref) {
   var theme = _ref.theme,
       position = _ref.position;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -17726,7 +19070,7 @@ var ToastContainerWrapper = index$2(View)(function (_ref) {
     elevation: 9999
   });
 });
-var Container = index$2(Animated.View)(function (_ref2) {
+var Container = index$5(Animated.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeVariant = _ref2.themeVariant,
       themeIntent = _ref2.themeIntent;
@@ -17737,21 +19081,21 @@ var Container = index$2(Animated.View)(function (_ref2) {
     flexDirection: 'row'
   };
 });
-var IconContainer = index$2(View)(function (_ref3) {
+var IconContainer = index$5(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     alignItems: 'center',
     paddingLeft: theme.__hd__.toast.space.mediumPadding
   };
 });
-var TextContainer = index$2(View)(function (_ref4) {
+var TextContainer = index$5(View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     paddingHorizontal: theme.__hd__.toast.space.mediumPadding,
     flex: 1
   };
 });
-var ContentContainer = index$2(View)(function (_ref5) {
+var ContentContainer = index$5(View)(function (_ref5) {
   var theme = _ref5.theme,
       showDivider = _ref5.showDivider;
   return {
@@ -17762,7 +19106,7 @@ var ContentContainer = index$2(View)(function (_ref5) {
     flexDirection: 'row'
   };
 });
-var CTAWrapper = index$2(TouchableOpacity)(function (_ref6) {
+var CTAWrapper = index$5(TouchableOpacity)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     paddingHorizontal: theme.__hd__.alert.space.padding,
@@ -18003,4 +19347,102 @@ var Toast = {
   useToast: useToast
 };
 
-export { Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, Card, CheckBox as Checkbox, Collapse, ContentNavigator, Divider, Drawer, index$1 as FAB, Icon, Progress, CompoundRadio as Radio, SectionHeading, CompoundSelect as Select, Spinner, Switch, index as Tabs, Tag, TextInput, ThemeProvider, Toast, Typography, getTheme, scale, theme, useTheme };
+var ToolbarWrapper = index$5(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 9999,
+    elevation: 9999,
+    width: '100%',
+    paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
+    paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
+    borderTopWidth: theme.__hd__.toolbar.borderWidths["default"],
+    borderColor: theme.__hd__.toolbar.colors.border,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: theme.__hd__.toolbar.colors.background
+  };
+});
+var alignment = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end'
+};
+var ToolbarGroupWrapper = index$5(View)(function (_ref2) {
+  var align = _ref2.align;
+  return {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: alignment[align],
+    alignItems: 'center'
+  };
+});
+var ToolbarItemWrapper = index$5(TouchableOpacity)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
+    paddingHorizontal: theme.__hd__.toolbar.space.horizontalPadding,
+    alignItems: 'center'
+  };
+});
+
+var ToolbarItem = function ToolbarItem(_ref) {
+  var icon = _ref.icon,
+      label = _ref.label,
+      onPress = _ref.onPress,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  return /*#__PURE__*/React.createElement(ToolbarItemWrapper, {
+    onPress: onPress,
+    disabled: disabled
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    size: label ? 'medium' : 'large',
+    intent: disabled ? 'disabled-text' : intent,
+    testID: "toolbar-item-icon-".concat(icon)
+  }) : null, label ? /*#__PURE__*/React.createElement(Typography.Text, {
+    fontSize: icon ? 'small' : 'large',
+    fontWeight: "semi-bold",
+    intent: disabled ? 'subdued' : intent
+  }, label) : null);
+};
+
+var ToolbarGroup = function ToolbarGroup(_ref) {
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'right' : _ref$align,
+      _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items;
+  return /*#__PURE__*/React.createElement(ToolbarGroupWrapper, {
+    align: align
+  }, items.map(function (_ref2) {
+    var label = _ref2.label,
+        icon = _ref2.icon,
+        onPress = _ref2.onPress,
+        disabled = _ref2.disabled,
+        intent = _ref2.intent;
+    return /*#__PURE__*/React.createElement(ToolbarItem, {
+      key: "".concat(label, "-").concat(icon),
+      label: label,
+      icon: icon,
+      intent: intent,
+      onPress: onPress,
+      disabled: disabled
+    });
+  }));
+};
+
+var Toolbar = function Toolbar(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(ToolbarWrapper, null, children);
+};
+
+var index = Object.assign(Toolbar, {
+  Group: ToolbarGroup
+});
+
+export { Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, index$4 as Card, CheckBox as Checkbox, Collapse, ContentNavigator, Divider, Drawer, index$3 as FAB, Icon, List, Progress, CompoundRadio as Radio, SectionHeading, index$2 as Select, Spinner, Switch, index$1 as Tabs, Tag, TextInput, ThemeProvider, Toast, index as Toolbar, Typography, getTheme, scale, theme, useTheme };