quicksnack 3.34.4 → 3.35.1

package/dist/bundle.js

@@ -1,4730 +0,0 @@
-'use strict';
-
-var React = require('react');
-var styledComponents = require('styled-components');
-var immer = require('immer');
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _isNativeFunction(fn) {
-  return Function.toString.call(fn).indexOf("[native code]") !== -1;
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _construct(Parent, args, Class) {
-  if (_isNativeReflectConstruct()) {
-    _construct = Reflect.construct;
-  } else {
-    _construct = function _construct(Parent, args, Class) {
-      var a = [null];
-      a.push.apply(a, args);
-      var Constructor = Function.bind.apply(Parent, a);
-      var instance = new Constructor();
-      if (Class) _setPrototypeOf(instance, Class.prototype);
-      return instance;
-    };
-  }
-
-  return _construct.apply(null, arguments);
-}
-
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
-
-  _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !_isNativeFunction(Class)) return Class;
-
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
-    }
-
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
-
-      _cache.set(Class, Wrapper);
-    }
-
-    function Wrapper() {
-      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
-    }
-
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-    return _setPrototypeOf(Wrapper, Class);
-  };
-
-  return _wrapNativeSuper(Class);
-}
-
-// based on https://github.com/styled-components/styled-components/blob/fcf6f3804c57a14dd7984dfab7bc06ee2edca044/src/utils/error.js
-
-/**
- * Parse errors.md and turn it into a simple hash of code: message
- * @private
- */
-var ERRORS = {
-  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
-  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
-  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
-  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
-  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
-  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
-  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
-  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
-  "9": "Please provide a number of steps to the modularScale helper.\n\n",
-  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "11": "Invalid value passed as base to modularScale, expected number or em string but got \"%s\"\n\n",
-  "12": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got \"%s\" instead.\n\n",
-  "13": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got \"%s\" instead.\n\n",
-  "14": "Passed invalid pixel value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "15": "Passed invalid base value (\"%s\") to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "16": "You must provide a template to this method.\n\n",
-  "17": "You passed an unsupported selector state to this method.\n\n",
-  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
-  "23": "fontFace expects a name of a font-family.\n\n",
-  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "25": "fontFace expects localFonts to be an array.\n\n",
-  "26": "fontFace expects fileFormats to be an array.\n\n",
-  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
-  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
-  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
-  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "35": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-  "36": "Property must be a string value.\n\n",
-  "37": "Syntax Error at %s.\n\n",
-  "38": "Formula contains a function that needs parentheses at %s.\n\n",
-  "39": "Formula is missing closing parenthesis at %s.\n\n",
-  "40": "Formula has too many closing parentheses at %s.\n\n",
-  "41": "All values in a formula must have the same unit or be unitless.\n\n",
-  "42": "Please provide a number of steps to the modularScale helper.\n\n",
-  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
-  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
-  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
-  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
-  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
-  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
-  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
-  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
-  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
-  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
-  "53": "fontFace expects localFonts to be an array.\n\n",
-  "54": "fontFace expects fileFormats to be an array.\n\n",
-  "55": "fontFace expects a name of a font-family.\n\n",
-  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
-  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
-  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
-  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
-  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
-  "61": "Property must be a string value.\n\n",
-  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
-  "63": "borderRadius expects one of \"top\", \"bottom\", \"left\" or \"right\" as the first argument.\n\n",
-  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
-  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
-  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
-  "67": "You must provide a template to this method.\n\n",
-  "68": "You passed an unsupported selector state to this method.\n\n",
-  "69": "Expected a string ending in \"px\" or a number passed as the first argument to %s(), got %s instead.\n\n",
-  "70": "Expected a string ending in \"px\" or a number passed as the second argument to %s(), got %s instead.\n\n",
-  "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
-  "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found and no default was provided.\n\n",
-  "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n\n",
-  "77": "remToPx expects a value in \"rem\" but you provided it in \"%s\".\n\n",
-  "78": "base must be set in \"px\" or \"%\" but you set it in \"%s\".\n"
-};
-/**
- * super basic version of sprintf
- * @private
- */
-
-function format() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  var a = args[0];
-  var b = [];
-  var c;
-
-  for (c = 1; c < args.length; c += 1) {
-    b.push(args[c]);
-  }
-
-  b.forEach(function (d) {
-    a = a.replace(/%[a-z]/, d);
-  });
-  return a;
-}
-/**
- * Create an error file out of errors.md for development and a simple web link to the full errors
- * in production mode.
- * @private
- */
-
-
-var PolishedError = /*#__PURE__*/function (_Error) {
-  _inheritsLoose(PolishedError, _Error);
-
-  function PolishedError(code) {
-    var _this;
-
-    if (process.env.NODE_ENV === 'production') {
-      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
-    } else {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
-    }
-
-    return _assertThisInitialized(_this);
-  }
-
-  return PolishedError;
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-function colorToInt(color) {
-  return Math.round(color * 255);
-}
-
-function convertToInt(red, green, blue) {
-  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
-}
-
-function hslToRgb(hue, saturation, lightness, convert) {
-  if (convert === void 0) {
-    convert = convertToInt;
-  }
-
-  if (saturation === 0) {
-    // achromatic
-    return convert(lightness, lightness, lightness);
-  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
-
-
-  var huePrime = (hue % 360 + 360) % 360 / 60;
-  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
-  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
-  var red = 0;
-  var green = 0;
-  var blue = 0;
-
-  if (huePrime >= 0 && huePrime < 1) {
-    red = chroma;
-    green = secondComponent;
-  } else if (huePrime >= 1 && huePrime < 2) {
-    red = secondComponent;
-    green = chroma;
-  } else if (huePrime >= 2 && huePrime < 3) {
-    green = chroma;
-    blue = secondComponent;
-  } else if (huePrime >= 3 && huePrime < 4) {
-    green = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 4 && huePrime < 5) {
-    red = secondComponent;
-    blue = chroma;
-  } else if (huePrime >= 5 && huePrime < 6) {
-    red = chroma;
-    blue = secondComponent;
-  }
-
-  var lightnessModification = lightness - chroma / 2;
-  var finalRed = red + lightnessModification;
-  var finalGreen = green + lightnessModification;
-  var finalBlue = blue + lightnessModification;
-  return convert(finalRed, finalGreen, finalBlue);
-}
-
-var namedColorMap = {
-  aliceblue: 'f0f8ff',
-  antiquewhite: 'faebd7',
-  aqua: '00ffff',
-  aquamarine: '7fffd4',
-  azure: 'f0ffff',
-  beige: 'f5f5dc',
-  bisque: 'ffe4c4',
-  black: '000',
-  blanchedalmond: 'ffebcd',
-  blue: '0000ff',
-  blueviolet: '8a2be2',
-  brown: 'a52a2a',
-  burlywood: 'deb887',
-  cadetblue: '5f9ea0',
-  chartreuse: '7fff00',
-  chocolate: 'd2691e',
-  coral: 'ff7f50',
-  cornflowerblue: '6495ed',
-  cornsilk: 'fff8dc',
-  crimson: 'dc143c',
-  cyan: '00ffff',
-  darkblue: '00008b',
-  darkcyan: '008b8b',
-  darkgoldenrod: 'b8860b',
-  darkgray: 'a9a9a9',
-  darkgreen: '006400',
-  darkgrey: 'a9a9a9',
-  darkkhaki: 'bdb76b',
-  darkmagenta: '8b008b',
-  darkolivegreen: '556b2f',
-  darkorange: 'ff8c00',
-  darkorchid: '9932cc',
-  darkred: '8b0000',
-  darksalmon: 'e9967a',
-  darkseagreen: '8fbc8f',
-  darkslateblue: '483d8b',
-  darkslategray: '2f4f4f',
-  darkslategrey: '2f4f4f',
-  darkturquoise: '00ced1',
-  darkviolet: '9400d3',
-  deeppink: 'ff1493',
-  deepskyblue: '00bfff',
-  dimgray: '696969',
-  dimgrey: '696969',
-  dodgerblue: '1e90ff',
-  firebrick: 'b22222',
-  floralwhite: 'fffaf0',
-  forestgreen: '228b22',
-  fuchsia: 'ff00ff',
-  gainsboro: 'dcdcdc',
-  ghostwhite: 'f8f8ff',
-  gold: 'ffd700',
-  goldenrod: 'daa520',
-  gray: '808080',
-  green: '008000',
-  greenyellow: 'adff2f',
-  grey: '808080',
-  honeydew: 'f0fff0',
-  hotpink: 'ff69b4',
-  indianred: 'cd5c5c',
-  indigo: '4b0082',
-  ivory: 'fffff0',
-  khaki: 'f0e68c',
-  lavender: 'e6e6fa',
-  lavenderblush: 'fff0f5',
-  lawngreen: '7cfc00',
-  lemonchiffon: 'fffacd',
-  lightblue: 'add8e6',
-  lightcoral: 'f08080',
-  lightcyan: 'e0ffff',
-  lightgoldenrodyellow: 'fafad2',
-  lightgray: 'd3d3d3',
-  lightgreen: '90ee90',
-  lightgrey: 'd3d3d3',
-  lightpink: 'ffb6c1',
-  lightsalmon: 'ffa07a',
-  lightseagreen: '20b2aa',
-  lightskyblue: '87cefa',
-  lightslategray: '789',
-  lightslategrey: '789',
-  lightsteelblue: 'b0c4de',
-  lightyellow: 'ffffe0',
-  lime: '0f0',
-  limegreen: '32cd32',
-  linen: 'faf0e6',
-  magenta: 'f0f',
-  maroon: '800000',
-  mediumaquamarine: '66cdaa',
-  mediumblue: '0000cd',
-  mediumorchid: 'ba55d3',
-  mediumpurple: '9370db',
-  mediumseagreen: '3cb371',
-  mediumslateblue: '7b68ee',
-  mediumspringgreen: '00fa9a',
-  mediumturquoise: '48d1cc',
-  mediumvioletred: 'c71585',
-  midnightblue: '191970',
-  mintcream: 'f5fffa',
-  mistyrose: 'ffe4e1',
-  moccasin: 'ffe4b5',
-  navajowhite: 'ffdead',
-  navy: '000080',
-  oldlace: 'fdf5e6',
-  olive: '808000',
-  olivedrab: '6b8e23',
-  orange: 'ffa500',
-  orangered: 'ff4500',
-  orchid: 'da70d6',
-  palegoldenrod: 'eee8aa',
-  palegreen: '98fb98',
-  paleturquoise: 'afeeee',
-  palevioletred: 'db7093',
-  papayawhip: 'ffefd5',
-  peachpuff: 'ffdab9',
-  peru: 'cd853f',
-  pink: 'ffc0cb',
-  plum: 'dda0dd',
-  powderblue: 'b0e0e6',
-  purple: '800080',
-  rebeccapurple: '639',
-  red: 'f00',
-  rosybrown: 'bc8f8f',
-  royalblue: '4169e1',
-  saddlebrown: '8b4513',
-  salmon: 'fa8072',
-  sandybrown: 'f4a460',
-  seagreen: '2e8b57',
-  seashell: 'fff5ee',
-  sienna: 'a0522d',
-  silver: 'c0c0c0',
-  skyblue: '87ceeb',
-  slateblue: '6a5acd',
-  slategray: '708090',
-  slategrey: '708090',
-  snow: 'fffafa',
-  springgreen: '00ff7f',
-  steelblue: '4682b4',
-  tan: 'd2b48c',
-  teal: '008080',
-  thistle: 'd8bfd8',
-  tomato: 'ff6347',
-  turquoise: '40e0d0',
-  violet: 'ee82ee',
-  wheat: 'f5deb3',
-  white: 'fff',
-  whitesmoke: 'f5f5f5',
-  yellow: 'ff0',
-  yellowgreen: '9acd32'
-};
-/**
- * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
- * @private
- */
-
-function nameToHex(color) {
-  if (typeof color !== 'string') return color;
-  var normalizedColorName = color.toLowerCase();
-  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
-}
-
-var hexRegex = /^#[a-fA-F0-9]{6}$/;
-var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
-var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
-var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
-var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
-/**
- * Returns an RgbColor or RgbaColor object. This utility function is only useful
- * if want to extract a color component. With the color util `toColorString` you
- * can convert a RgbColor or RgbaColor object back to a string.
- *
- * @example
- * // Assigns `{ red: 255, green: 0, blue: 0 }` to color1
- * const color1 = parseToRgb('rgb(255, 0, 0)');
- * // Assigns `{ red: 92, green: 102, blue: 112, alpha: 0.75 }` to color2
- * const color2 = parseToRgb('hsla(210, 10%, 40%, 0.75)');
- */
-
-function parseToRgb(color) {
-  if (typeof color !== 'string') {
-    throw new PolishedError(3);
-  }
-
-  var normalizedColor = nameToHex(color);
-
-  if (normalizedColor.match(hexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
-    };
-  }
-
-  if (normalizedColor.match(hexRgbaRegex)) {
-    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
-      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
-      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
-      alpha: alpha
-    };
-  }
-
-  if (normalizedColor.match(reducedHexRegex)) {
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
-    };
-  }
-
-  if (normalizedColor.match(reducedRgbaHexRegex)) {
-    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
-
-    return {
-      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
-      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
-      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
-      alpha: _alpha
-    };
-  }
-
-  var rgbMatched = rgbRegex.exec(normalizedColor);
-
-  if (rgbMatched) {
-    return {
-      red: parseInt("" + rgbMatched[1], 10),
-      green: parseInt("" + rgbMatched[2], 10),
-      blue: parseInt("" + rgbMatched[3], 10)
-    };
-  }
-
-  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
-
-  if (rgbaMatched) {
-    return {
-      red: parseInt("" + rgbaMatched[1], 10),
-      green: parseInt("" + rgbaMatched[2], 10),
-      blue: parseInt("" + rgbaMatched[3], 10),
-      alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
-    };
-  }
-
-  var hslMatched = hslRegex.exec(normalizedColor);
-
-  if (hslMatched) {
-    var hue = parseInt("" + hslMatched[1], 10);
-    var saturation = parseInt("" + hslMatched[2], 10) / 100;
-    var lightness = parseInt("" + hslMatched[3], 10) / 100;
-    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
-    var hslRgbMatched = rgbRegex.exec(rgbColorString);
-
-    if (!hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, rgbColorString);
-    }
-
-    return {
-      red: parseInt("" + hslRgbMatched[1], 10),
-      green: parseInt("" + hslRgbMatched[2], 10),
-      blue: parseInt("" + hslRgbMatched[3], 10)
-    };
-  }
-
-  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
-
-  if (hslaMatched) {
-    var _hue = parseInt("" + hslaMatched[1], 10);
-
-    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
-
-    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
-
-    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
-
-    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
-
-    if (!_hslRgbMatched) {
-      throw new PolishedError(4, normalizedColor, _rgbColorString);
-    }
-
-    return {
-      red: parseInt("" + _hslRgbMatched[1], 10),
-      green: parseInt("" + _hslRgbMatched[2], 10),
-      blue: parseInt("" + _hslRgbMatched[3], 10),
-      alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
-    };
-  }
-
-  throw new PolishedError(5);
-}
-
-/**
- * Reduces hex values if possible e.g. #ff8866 to #f86
- * @private
- */
-var reduceHexValue = function reduceHexValue(value) {
-  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
-    return "#" + value[1] + value[3] + value[5];
-  }
-
-  return value;
-};
-
-var reduceHexValue$1 = reduceHexValue;
-
-function numberToHex(value) {
-  var hex = value.toString(16);
-  return hex.length === 1 ? "0" + hex : hex;
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible hex notation.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: rgb(255, 205, 100),
- *   background: rgb({ red: 255, green: 205, blue: 100 }),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${rgb(255, 205, 100)};
- *   background: ${rgb({ red: 255, green: 205, blue: 100 })};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#ffcd64";
- *   background: "#ffcd64";
- * }
- */
-function rgb(value, green, blue) {
-  if (typeof value === 'number' && typeof green === 'number' && typeof blue === 'number') {
-    return reduceHexValue$1("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
-  } else if (typeof value === 'object' && green === undefined && blue === undefined) {
-    return reduceHexValue$1("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
-  }
-
-  throw new PolishedError(6);
-}
-
-/**
- * Returns a string value for the color. The returned result is the smallest possible rgba or hex notation.
- *
- * Can also be used to fade a color by passing a hex value or named CSS color along with an alpha value.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: rgba(255, 205, 100, 0.7),
- *   background: rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 }),
- *   background: rgba(255, 205, 100, 1),
- *   background: rgba('#ffffff', 0.4),
- *   background: rgba('black', 0.7),
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${rgba(255, 205, 100, 0.7)};
- *   background: ${rgba({ red: 255, green: 205, blue: 100, alpha: 0.7 })};
- *   background: ${rgba(255, 205, 100, 1)};
- *   background: ${rgba('#ffffff', 0.4)};
- *   background: ${rgba('black', 0.7)};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "rgba(255,205,100,0.7)";
- *   background: "rgba(255,205,100,0.7)";
- *   background: "#ffcd64";
- *   background: "rgba(255,255,255,0.4)";
- *   background: "rgba(0,0,0,0.7)";
- * }
- */
-function rgba(firstValue, secondValue, thirdValue, fourthValue) {
-  if (typeof firstValue === 'string' && typeof secondValue === 'number') {
-    var rgbValue = parseToRgb(firstValue);
-    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
-  } else if (typeof firstValue === 'number' && typeof secondValue === 'number' && typeof thirdValue === 'number' && typeof fourthValue === 'number') {
-    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
-  } else if (typeof firstValue === 'object' && secondValue === undefined && thirdValue === undefined && fourthValue === undefined) {
-    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
-  }
-
-  throw new PolishedError(7);
-}
-
-// Type definitions taken from https://github.com/gcanti/flow-static-land/blob/master/src/Fun.js
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-unused-vars
-// eslint-disable-next-line no-redeclare
-function curried(f, length, acc) {
-  return function fn() {
-    // eslint-disable-next-line prefer-rest-params
-    var combined = acc.concat(Array.prototype.slice.call(arguments));
-    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
-  };
-} // eslint-disable-next-line no-redeclare
-
-
-function curry(f) {
-  // eslint-disable-line no-redeclare
-  return curried(f, f.length, []);
-}
-
-/**
- * Mixes the two provided colors together by calculating the average of each of the RGB components weighted to the first color by the provided weight.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: mix(0.5, '#f00', '#00f')
- *   background: mix(0.25, '#f00', '#00f')
- *   background: mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${mix(0.5, '#f00', '#00f')};
- *   background: ${mix(0.25, '#f00', '#00f')};
- *   background: ${mix('0.5', 'rgba(255, 0, 0, 0.5)', '#00f')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#7f007f";
- *   background: "#3f00bf";
- *   background: "rgba(63, 0, 191, 0.75)";
- * }
- */
-
-function mix(weight, color, otherColor) {
-  if (color === 'transparent') return otherColor;
-  if (otherColor === 'transparent') return color;
-  if (weight === 0) return otherColor;
-  var parsedColor1 = parseToRgb(color);
-
-  var color1 = _extends({}, parsedColor1, {
-    alpha: typeof parsedColor1.alpha === 'number' ? parsedColor1.alpha : 1
-  });
-
-  var parsedColor2 = parseToRgb(otherColor);
-
-  var color2 = _extends({}, parsedColor2, {
-    alpha: typeof parsedColor2.alpha === 'number' ? parsedColor2.alpha : 1
-  }); // The formula is copied from the original Sass implementation:
-  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
-
-
-  var alphaDelta = color1.alpha - color2.alpha;
-  var x = parseFloat(weight) * 2 - 1;
-  var y = x * alphaDelta === -1 ? x : x + alphaDelta;
-  var z = 1 + x * alphaDelta;
-  var weight1 = (y / z + 1) / 2.0;
-  var weight2 = 1 - weight1;
-  var mixedColor = {
-    red: Math.floor(color1.red * weight1 + color2.red * weight2),
-    green: Math.floor(color1.green * weight1 + color2.green * weight2),
-    blue: Math.floor(color1.blue * weight1 + color2.blue * weight2),
-    alpha: color1.alpha * parseFloat(weight) + color2.alpha * (1 - parseFloat(weight))
-  };
-  return rgba(mixedColor);
-} // prettier-ignore
-
-
-var curriedMix = /*#__PURE__*/curry
-/* ::<number | string, string, string, string> */
-(mix);
-var mix$1 = curriedMix;
-
-/**
- * Shades a color by mixing it with black. `shade` can produce
- * hue shifts, where as `darken` manipulates the luminance channel and therefore
- * doesn't produce hue shifts.
- *
- * @example
- * // Styles as object usage
- * const styles = {
- *   background: shade(0.25, '#00f')
- * }
- *
- * // styled-components usage
- * const div = styled.div`
- *   background: ${shade(0.25, '#00f')};
- * `
- *
- * // CSS in JS Output
- *
- * element {
- *   background: "#00003f";
- * }
- */
-
-function shade(percentage, color) {
-  if (color === 'transparent') return color;
-  return mix$1(parseFloat(percentage), 'rgb(0, 0, 0)', color);
-} // prettier-ignore
-
-
-var curriedShade = /*#__PURE__*/curry
-/* ::<number | string, string, string> */
-(shade);
-var curriedShade$1 = curriedShade;
-
-const SPACING = 4;
-const BLACK = 'rgba(0,0,0,.87)';
-const WHITE = '#fff';
-const darkenPalette = (amount, palette, colorsToDarken) => Object
-    .entries(palette)
-    .reduce((acc, [key, val]) => (Object.assign(Object.assign({}, acc), { [key]: colorsToDarken.includes(key)
-        ? curriedShade$1(amount, val)
-        : val })), palette);
-const createButtonPalette = (_a) => {
-    var { colorsToDarken } = _a, palette = __rest(_a, ["colorsToDarken"]);
-    return ({
-        idle: palette,
-        hover: darkenPalette(.1, palette, colorsToDarken),
-        active: darkenPalette(.2, palette, colorsToDarken),
-    });
-};
-const createPanePalette = (palette) => ({
-    main: {
-        idle: palette,
-        hover: darkenPalette(.05, palette, ['background'])
-    },
-    alternate: {
-        idle: darkenPalette(.02, palette, ['background']),
-        hover: darkenPalette(.05, palette, ['background']),
-    }
-});
-const theme = {
-    spacing: (...args) => args.map(arg => `${arg * SPACING}px`).join(' '),
-    palette: {
-        common: {
-            black: BLACK,
-            white: WHITE,
-        },
-        colors: {
-            blue: '#007bff',
-            indigo: '#6610f2',
-            purple: '#6f42c1',
-            pink: '#e83e8c',
-            red: '#e83e3e',
-            orange: '#fd7e14',
-            yellow: '#ffc107',
-            green: '#23B294',
-            teal: '#20c997',
-            cyan: '#17a2b8',
-            gray: '#6c757d',
-            grayDark: '#343a40',
-            light: '#f8f9fa',
-            dark: '#343a40',
-        },
-        form: {
-            hint: '#C7C7C7',
-            error: '#9f3a38',
-        },
-        button: {
-            basic: createButtonPalette({
-                colorsToDarken: ['background', 'text'],
-                background: WHITE,
-                text: BLACK,
-            }),
-            default: createButtonPalette({
-                colorsToDarken: ['background', 'text'],
-                background: '#e0e1e2',
-                text: BLACK,
-            }),
-            text: {
-                idle: {
-                    text: '#999c9e',
-                    background: 'transparent'
-                },
-                active: {
-                    text: BLACK,
-                    background: 'transparent'
-                },
-                hover: {
-                    text: BLACK,
-                    background: 'transparent'
-                }
-            },
-            danger: createButtonPalette({
-                colorsToDarken: ['background'],
-                background: '#EC5969',
-                text: WHITE,
-            }),
-            primary: createButtonPalette({
-                colorsToDarken: ['background'],
-                background: '#2284C4',
-                text: WHITE,
-            }),
-            secondary: createButtonPalette({
-                colorsToDarken: ['background'],
-                background: '#23B294',
-                text: WHITE
-            }),
-        },
-        pane: {
-            basic: createPanePalette({
-                text: BLACK,
-                background: WHITE,
-                border: '#ddd'
-            }),
-            emphasized: createPanePalette({
-                text: BLACK,
-                background: '#f3f3f3',
-                border: '#ddd'
-            }),
-            info: createPanePalette({
-                text: '#0c5460',
-                background: '#d1ecf1',
-                border: '#bee5eb'
-            }),
-            negative: createPanePalette({
-                text: '#721c24',
-                background: '#f8d7da',
-                border: '#f5c6cb'
-            }),
-            positive: createPanePalette({
-                text: '#155724',
-                background: '#d4edda',
-                border: '#c3e6cb',
-            }),
-            warning: createPanePalette({
-                text: '#856404',
-                background: '#fff3cd',
-                border: '#ffeeba'
-            })
-        }
-    }
-};
-
-// Fix for styled-components with react-18.
-// Can be removed once this issue is resolved.
-// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/59765#issuecomment-1092938253
-const ThemeProviderFixed = styledComponents.ThemeProvider;
-const UiProvider = ({ children, theme: themeOverride }) => (React.createElement(ThemeProviderFixed, { theme: themeOverride || theme }, children));
-
-const noop$1 = () => { };
-const UiState = React.createContext({
-    isSideMenuOpen: false,
-    closeSideMenu: noop$1,
-    openSideMenu: noop$1,
-});
-const useUiStateContext = () => React.useContext(UiState);
-const UiStateProvider = ({ children }) => {
-    const [isSideMenuOpen, setIsSideMenuOpen] = React.useState(false);
-    const handleCloseSideMenu = React.useCallback(() => setIsSideMenuOpen(false), []);
-    const handleOpenSideMenu = React.useCallback(() => setIsSideMenuOpen(true), []);
-    return (React.createElement(UiState.Provider, { value: {
-            isSideMenuOpen,
-            closeSideMenu: handleCloseSideMenu,
-            openSideMenu: handleOpenSideMenu,
-        } }, children));
-};
-
-const Wrapper$d = styledComponents.styled.div `
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  color: ${props => props.theme.palette.common.black};
-  font-size: 14px;
-`;
-const UiWrapper = ({ theme, children }) => (React.createElement(UiProvider, { theme: theme },
-    React.createElement(UiStateProvider, null,
-        React.createElement(Wrapper$d, null, children))));
-
-function memoize(fn) {
-  var cache = Object.create(null);
-  return function (arg) {
-    if (cache[arg] === undefined) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-
-var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
-
-var isPropValid = /* #__PURE__ */memoize(function (prop) {
-  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
-  /* o */
-  && prop.charCodeAt(1) === 110
-  /* n */
-  && prop.charCodeAt(2) < 91;
-}
-/* Z+1 */
-);
-
-const slideInFromTop = styledComponents.keyframes `
-  0% {
-    opacity: 0;
-    transform: translateY(-5px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const SlideInFromTop = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  animation: ${slideInFromTop} ${props => props.speed || '.3s'} ease-in 0s 1;
-`;
-
-const sharedStyles$1 = styledComponents.css `
-  margin: 0 0;  
-  padding: 0 0;
-  font-weight: 700;
-  line-height: 1.28571429em;    
-`;
-const H1 = styledComponents.styled.h1.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 2rem;
-  min-height: 1rem;
-  ${sharedStyles$1}
-`;
-const H2 = styledComponents.styled.h2.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1.71428571rem;
-  ${sharedStyles$1}
-`;
-const H3 = styledComponents.styled.h3.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1.28571429rem;
-  ${sharedStyles$1}
-`;
-const H4 = styledComponents.styled.h4.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1.07142857rem;
-  ${sharedStyles$1}
-`;
-const H5 = styledComponents.styled.h5.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 1rem;
-  ${sharedStyles$1}
-`;
-const mapping = {
-    1: H1,
-    2: H2,
-    3: H3,
-    4: H4,
-    5: H5,
-};
-const Header = (_a) => {
-    var { level = 1 } = _a, restProps = __rest(_a, ["level"]);
-    const Component = mapping[level];
-    // @ts-ignore
-    return React.createElement(Component, Object.assign({}, restProps));
-};
-
-const Paragraph = styledComponents.styled.p `
-    font-size: 14px;
-    line-height: 20px;
-    // margin: 0 0 1em;
-    margin: 0;
-`;
-
-const breakPoints = [
-    "mobile",
-    "tablet",
-    "laptop",
-    "desktop",
-];
-const BreakPointValues = {
-    mobile: 0,
-    tablet: 768,
-    laptop: 1024,
-    desktop: 1430,
-};
-/**
- * Wraps given cssRules in the corresponding media-query:
- */
-const mq = (bk, cssRules) => styledComponents.css `
-  @media screen and (min-width: ${BreakPointValues[bk]}px) {
-    ${cssRules}        
-  }        
-`;
-const isResponsiveObject = (obj) => {
-    if (typeof obj !== "object") {
-        return false;
-    }
-    const keys = Object.keys(obj);
-    for (const breakPoint of breakPoints) {
-        if (keys.includes(breakPoint)) {
-            return true;
-        }
-    }
-    return false;
-};
-/**
- * Wraps 'responsive-props' in media-queries if necessary.
- */
-const responsiveProps = (props, map) => {
-    const nonResponsiveRules = Object
-        .entries(map)
-        .filter(([key]) => props[key] !== undefined && !isResponsiveObject(props[key]))
-        .map(([key, fun]) => fun(props[key]));
-    const mediaQueries = breakPoints
-        .map(bp => {
-        // See if we can make css-rules for this breakpoint:
-        const responsiveCssRules = Object
-            .entries(map)
-            .filter(([key]) => { var _a; return ((_a = props === null || props === void 0 ? void 0 : props[key]) === null || _a === void 0 ? void 0 : _a[bp]) !== undefined; })
-            .map(([key, fun]) => fun(props[key][bp]));
-        return (responsiveCssRules.length > 0)
-            ? mq(bp, responsiveCssRules) // Wrap css-rules in a mediaQuery
-            : undefined; // Undefined -> filter out later
-    })
-        .filter(_ => _ !== undefined);
-    return [
-        mediaQueries, ...nonResponsiveRules
-    ];
-};
-
-const Box = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  box-sizing: border-box;
-  
-  ${(props) => responsiveProps(props, {
-    "p": unit => styledComponents.css `padding: ${props.theme.spacing(unit)};`,
-    "pt": unit => styledComponents.css `padding-top: ${props.theme.spacing(unit)};`,
-    "pr": unit => styledComponents.css `padding-right: ${props.theme.spacing(unit)};`,
-    "pb": unit => styledComponents.css `padding-bottom: ${props.theme.spacing(unit)};`,
-    "pl": unit => styledComponents.css `padding-left: ${props.theme.spacing(unit)};`,
-    "m": unit => styledComponents.css `margin: ${props.theme.spacing(unit)};`,
-    "mt": unit => styledComponents.css `margin-top: ${props.theme.spacing(unit)};`,
-    "mr": unit => styledComponents.css `margin-right: ${props.theme.spacing(unit)};`,
-    "mb": unit => styledComponents.css `margin-bottom: ${props.theme.spacing(unit)};`,
-    "ml": unit => styledComponents.css `margin-left: ${props.theme.spacing(unit)};`,
-    "display": unit => styledComponents.css `display: ${unit};`,
-    "flexGrow": unit => styledComponents.css `flex-grow: ${unit};`,
-    "flexShrink": unit => styledComponents.css `flex-shrink: ${unit};`,
-    "flexDirection": unit => styledComponents.css `flex-direction: ${unit};`,
-    "alignItems": unit => styledComponents.css `align-items: ${unit};`,
-    "textAlign": unit => styledComponents.css `text-align: ${unit};`,
-    "justifyContent": unit => styledComponents.css `justify-content: ${unit};`,
-    "width": unit => styledComponents.css `width: ${typeof unit === 'number' ? props.theme.spacing(unit) : unit};`,
-})}
-`;
-
-const Wrapper$c = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  border-radius: 4px;     
-  border: 1px solid ${props => props.theme.palette.pane[props.variant].main.idle.border};
-  background-color: ${props => props.theme.palette.pane[props.variant].main.idle.background};      
-  color: ${props => props.theme.palette.pane[props.variant].main.idle.text};      
-`;
-const Alert = ({ children, title, variant = "basic" }) => (React.createElement(Wrapper$c, { variant: variant },
-    React.createElement(Box, { p: 3 },
-        title && (React.createElement(Box, { pb: children ? 1 : 0 },
-            React.createElement(Header, { level: 4 }, title))),
-        children && React.createElement(Paragraph, null, children))));
-
-const green = '#20c997';
-const Mask = styledComponents.styled.g `
-    fill: none; 
-    stroke: ${green};    
-    stroke-width: 10;
-`;
-const polyLineAnimation = styledComponents.keyframes `    
-    0% {
-        stroke-dashoffset: 100px
-    }
-    100% {
-        stroke-dashoffset: 0px
-    }
-`;
-const Polyline = styledComponents.styled.polyline `
-    stroke-dasharray: 100px, 100px;
-    stroke-dashoffset: 200px;
-    animation: ${polyLineAnimation} 0.42s ease-in-out 0.8s backwards;
-    stroke: ${green};
-    stroke-width: 10;     
-`;
-const circleAnimation = styledComponents.keyframes `
-    0% {
-        stroke-dashoffset: 480px 
-    }
-    100% {
-        stroke-dashoffset: 960px
-    }
-`;
-const Circle$1 = styledComponents.styled.circle `
-    stroke-dasharray: 480px, 480px; 
-    stroke-dashoffset: 960px;
-    animation: ${circleAnimation} 0.6s ease-in-out backwards;
-    stroke: ${green};
-    stroke-width: 10;    
-`;
-const circleColoredAnimation = styledComponents.keyframes `
-    0% { 
-        opacity:0; 
-    }
-    100% { 
-        opacity:100; 
-    }
-`;
-const CircleColored = styledComponents.styled.circle `
-    stroke-dasharray: 480px, 480px; 
-    stroke-dashoffset: 960px;
-    animation: ${circleColoredAnimation} 1.2s ease-in-out 1.4s backwards;
-    fill: #effaf8;    
-`;
-const AnimatedCheckmark = () => (React.createElement("svg", { viewBox: "0 0 154 154" },
-    React.createElement(Mask, null,
-        React.createElement(Circle$1, { cx: '77', cy: '77', r: '72' }),
-        React.createElement(CircleColored, { cx: '77', cy: '77', r: '72' }),
-        React.createElement(Polyline, { points: "43.5,77.8 63.7,97.9 112.2,49.4" }))));
-
-const BreadCrumbs = styledComponents.styled.ul `
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display:flex;
-`;
-const Crumb = styledComponents.styled.li `
-  display: flex;  
- 
-  &:not(:last-of-type):after {    
-    content: "/";
-    color: ${props => props.theme.palette.colors.gray};
-    line-height: 1em;
-    content: "/";
-    margin: auto auto;
-    padding: ${props => props.theme.spacing(0, 2, 0, 0)};
-  }
-`;
-
-const Wrapper$b = styledComponents.styled.div `       
-  background-color: ${props => props.theme.palette.common.white};
-  border-radius: 4px;
-  border: 1px solid #DEDEDF;
-  box-shadow: 0px 2px 3px rgb(0 0 0 / 6%);      
-`;
-const Meta = styledComponents.styled(Box) `       
-  font-size: 12px;
-  font-style: italic;              
-`;
-const Title = styledComponents.styled(Box) `
-  ${(props) => props.panelHasChildren && styledComponents.css `
-    border-radius: 4px;   
-    border-bottom: 1px solid rgba(34,36,38,.15);
-  `}
-  
-  ${(props) => !!props.onClick && styledComponents.css `
-    cursor: pointer;
-    user-select: none;
-  `}        
-`;
-const Footer$1 = styledComponents.styled(Box) `  
-  border-radius: 4px;   
-  background-color: #FFF;
-  border-top: 1px solid rgba(34,36,38,.15);
-`;
-const Panel = ({ children, className, title, titleAction, titleMeta, onClickTitle, footer, p = 3, titleLevel = 5 }) => (React.createElement(Wrapper$b, { className: className },
-    title && (React.createElement(Title, { p: 3, panelHasChildren: !!children, display: "flex", alignItems: "center", onClick: onClickTitle },
-        React.createElement(Box, { flexGrow: 1 },
-            React.createElement(Header, { level: titleLevel }, title)),
-        titleMeta && React.createElement(Meta, null, titleMeta),
-        titleAction && React.createElement(Box, { pl: 5 }, titleAction))),
-    children && (React.createElement(Box, { p: p }, children)),
-    footer && (React.createElement(Footer$1, { p: 3 }, footer))));
-
-const Animation = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `                
-  transform: ${props => props.isOpen ? `translate(0)` : `translateY(-101%)`};  
-  transition-duration: ${props => props.duration || 0.25}s;  
-  transition-property: transform;     
-}
-`;
-const Wrapper$a = styledComponents.styled.div `
-  overflow: hidden;
-`;
-const Hider = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-   display: ${props => props.isHidden ? 'none' : 'block'};
-`;
-// Returns the boolean value in the next tick.
-// Allows for transition to start when DOM is updated, it prevents a flickers.
-const useOnNextTick = (val) => {
-    const [delayedVal, setDelayedVal] = React.useState(val);
-    React.useEffect(() => {
-        const timeout = setTimeout(() => setDelayedVal(val), 0);
-        return () => clearTimeout(timeout);
-    }, [val, setDelayedVal]);
-    return delayedVal;
-};
-const SlideOpen = ({ isOpen, children, duration, onChange }) => {
-    const isDelayedOpen = useOnNextTick(isOpen);
-    const [isHidden, setIsHidden] = React.useState(!isOpen);
-    const handleTransitionEnd = React.useCallback(() => {
-        if (!isOpen) {
-            setIsHidden(true);
-            onChange === null || onChange === void 0 ? void 0 : onChange(false);
-        }
-    }, [isOpen, onChange]);
-    React.useEffect(() => {
-        if (isOpen) {
-            setIsHidden(false);
-            onChange === null || onChange === void 0 ? void 0 : onChange(true);
-        }
-    }, [isOpen, onChange]);
-    return (React.createElement(Wrapper$a, null,
-        React.createElement(Animation, { isOpen: isDelayedOpen, onTransitionEndCapture: handleTransitionEnd, duration: duration },
-            React.createElement(Hider, { isHidden: isHidden }, children))));
-};
-
-const TitleActionWrapper = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  transform: scaleY( ${props => props.isOpen ? '-1' : '1'} );
-`;
-const StyledPanel$2 = styledComponents.styled(Panel) `
-   ${props => !props.isOpen && styledComponents.css `border-bottom: 0;`}
-`;
-const CollapsiblePanel = (_a) => {
-    var { isInitiallyOpen, children, titleAction } = _a, rest = __rest(_a, ["isInitiallyOpen", "children", "titleAction"]);
-    const [isOpen, setIsOpen] = React.useState(isInitiallyOpen);
-    const toggleOpen = React.useCallback(() => setIsOpen(!isOpen), [setIsOpen, isOpen]);
-    return (React.createElement(StyledPanel$2, Object.assign({}, rest, { isOpen: isOpen, onClickTitle: toggleOpen, p: 0, titleAction: React.createElement(TitleActionWrapper, { isOpen: isOpen }, titleAction) }),
-        React.createElement(SlideOpen, { isOpen: isOpen },
-            React.createElement(Box, { p: 3 }, children))));
-};
-
-const useConfirmModal = ({ onConfirm }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const onCancel = () => setIsOpen(false);
-    const handleOpen = () => setIsOpen(true);
-    const handleConfirm = () => {
-        onConfirm();
-        setIsOpen(false);
-    };
-    return [
-        {
-            onCancel,
-            onConfirm: handleConfirm,
-            isOpen,
-        },
-        handleOpen,
-    ];
-};
-
-const delay = styledComponents.keyframes `
-  0% {
-    opacity: 0;
-  }    
-  100% {
-    opacity: 1;
-  }
-`;
-const Overlay = styledComponents.styled.div `
-  position: fixed;  
-  top: 0;
-  left: 0; 
-  right: 0;
-  bottom: 0;
-  z-index: 10;
-  opacity: 0;
-  background-color: rgba(0,0,0,0.6);
-  animation: ${delay} 0.2s forwards;
-`;
-
-const Wrapper$9 = styledComponents.styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  z-index: 50;
-`;
-const StyledPanel$1 = styledComponents.styled(Panel) `
-  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);
-`;
-const Content = styledComponents.styled.div `
-  line-height: ${props => props.theme.spacing(6)};
-  font-size: 15px;
-`;
-const Modal = (_a) => {
-    var { children, handleClickOverlay, buttons } = _a, panelProps = __rest(_a, ["children", "handleClickOverlay", "buttons"]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Overlay, { onClick: handleClickOverlay }),
-        React.createElement(Wrapper$9, null,
-            React.createElement(SlideInFromTop, null,
-                React.createElement(StyledPanel$1, Object.assign({ footer: buttons ? (React.createElement(Box, { display: "flex", justifyContent: "flex-end" }, buttons)) : undefined }, panelProps), children && (React.createElement(Content, null, children)))))));
-};
-
-const Wrapper$8 = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.stretch && `width: 100%;`}
-  ${props => props.actionButton || props.stretch
-    ? styledComponents.css `margin: 0;`
-    : styledComponents.css `margin: ${props => props.theme.spacing(0, 2, 0, 0)};`}      
-`;
-const StyledButton$1 = styledComponents.styled.button.withConfig({ shouldForwardProp: isPropValid }) `
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 1px;    
-  line-height: 1em;  
-  outline: 0;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  text-decoration: none;
-  font-family: "Open Sans", Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;   
-  transition: background-color .1s ease, color .1s ease;      
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  user-select: none;
-  min-height: ${props => props.inline ? 'auto' : '38px'};   
-  
-  ${props => props.stretch && styledComponents.css `
-      width: 100%;
-      display: block;
-  `}
-  
-  ${props => props.actionButton && styledComponents.css `
-      width: 100%;      
-      ${mq('laptop', `width: auto`)}
-  `}
-  
-   
-  ${props => props.variant !== 'text'
-    ? !props.icon
-        ? styledComponents.css `padding: ${props.theme.spacing(3, 5)}; min-width: ${props => props.theme.spacing(10)};`
-        : props.hasChildren && styledComponents.css `position: relative; padding: ${props.theme.spacing(3, 5, 3, 13)};`
-    : styledComponents.css `font-weight: 700; padding: 0;`} 
-    
-  &:disabled {
-    opacity: .5;
-    cursor: default;
-  }  
-                   
-  &:focus {
-    background-blend-mode: darken;
-  }        
-  
-  ${(props) => {
-    if (props.variant === "basic") {
-        return `
-        border: 1px solid rgba(34,36,38,.15);
-      `;
-    }
-}}
-          
-  ${(props) => {
-    var _a;
-    const { idle, hover, active } = theme.palette.button[(_a = props.variant) !== null && _a !== void 0 ? _a : 'default'];
-    return `
-        color: ${idle.text};
-        background-color: ${idle.background};        
-        
-        &:not(:disabled) {
-          &:hover, &:focus {
-            color: ${hover.text};
-            background-color: ${hover.background};        
-          }        
-  
-          &:active {
-            color: ${active.text};
-            background-color: ${active.background};        
-          } 
-        }
-                      
-    `;
-}}        
-`;
-const IconWrapper$1 = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.variant !== "text" && styledComponents.css `
-     min-width: ${props.theme.spacing(10)};
-  `}
- 
-  ${props => props.variant === "text"
-    ? props.hasChildren && styledComponents.css `
-      padding-right: ${props.theme.spacing(2)};
-    `
-    : props.hasChildren && styledComponents.css `
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: ${props => props.theme.spacing(10)};
-      height: 100%;
-      background-color: rgba(0,0,0,.05);
-      
-      & > svg {
-        transform: translate(-50%, -50%);
-        position: absolute;
-        top: 50%;
-        left: 50%;
-      }
-  `}          
-`;
-const Button$1 = React.forwardRef((_a, ref) => {
-    var { children, icon, stretch } = _a, props = __rest(_a, ["children", "icon", "stretch"]);
-    return (React.createElement(Wrapper$8, { actionButton: props.actionButton, stretch: stretch },
-        React.createElement(StyledButton$1, Object.assign({ ref: ref, icon: icon, hasChildren: !!children, stretch: stretch }, props),
-            icon && (React.createElement(IconWrapper$1, { variant: props.variant, hasChildren: !!children }, icon)),
-            children)));
-});
-
-const ConfirmModal = ({ title, children, cancelLabel = "Nee, annuleren", confirmLabel = "Ja", confirmVariant = 'secondary', confirmIcon, cancelIcon, isOpen, onCancel, onConfirm, }) => {
-    return isOpen ? (React.createElement(Modal, { title: title, handleClickOverlay: onCancel, buttons: React.createElement(React.Fragment, null,
-            React.createElement(Button$1, { "data-testid": "btn-cancel", onClick: onCancel, variant: "basic", icon: cancelIcon }, cancelLabel),
-            React.createElement(Button$1, { "data-testid": "btn-confirm", onClick: onConfirm, variant: confirmVariant, icon: confirmIcon }, confirmLabel)) }, children)) : null;
-};
-
-const noop = () => { };
-const ConfirmButton = (_a) => {
-    var _b;
-    var { modalProps } = _a, buttonProps = __rest(_a, ["modalProps"]);
-    const [modalHandlerProps, openModal] = useConfirmModal({
-        onConfirm: (_b = modalProps.onConfirm) !== null && _b !== void 0 ? _b : noop
-    });
-    return React.createElement(React.Fragment, null,
-        React.createElement(Button$1, Object.assign({}, buttonProps, { onClick: openModal })),
-        React.createElement(ConfirmModal, Object.assign({ title: "Are you sure?" }, modalProps, modalHandlerProps)));
-};
-
-const StyledTable = styledComponents.styled.table.withConfig({ shouldForwardProp: isPropValid }) `
-  border-radius: 4px;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  
-  ${(props) => responsiveProps(props, {
-    "tableLayout": unit => styledComponents.css `table-layout: ${unit};`,
-})}      
-`;
-const StyledTableRow = styledComponents.styled.tr.withConfig({ shouldForwardProp: isPropValid }) `
-  & > td {
-    transition: background-color .1s ease, color .1s ease;
-  }
-  
-  ${props => Object.entries(props.theme.palette.pane).map(([variant, value]) => `
-    &:nth-child(odd) > td.${variant} {    
-      color: ${value.main.idle.text};
-      background-color: ${value.main.idle.background};        
-    }                  
-    &:nth-child(even) > td.${variant} {    
-      color: ${value.alternate.idle.text};
-      background-color: ${value.alternate.idle.background};        
-    }            
-    
-    
-    ${!props.disableHover && `
-      &:nth-child(odd):hover > td.${variant} {
-        color: ${value.main.hover.text};
-        background-color: ${value.main.hover.background};          
-      }
-      &:nth-child(even):hover > td.${variant} {
-        color: ${value.alternate.hover.text};
-        background-color: ${value.alternate.hover.background};          
-      }
-    `} 
-  `)}    
-`;
-const StyledTableCell = styledComponents.styled.td.withConfig({ shouldForwardProp: isPropValid }) `
-  border-top: 1px solid rgba(34,36,38,.1);
-  border-right: 1px solid rgba(34,36,38,.1);    
-  padding: ${props => props.theme.spacing(2, 3)};
-  
-  &:last-of-type {
-    border-right: 0;
-  }
-        
-  ${(props) => responsiveProps(props, {
-    width: unit => styledComponents.css `width: ${unit};`,
-})}
-`;
-const StyledTableHeadCell = styledComponents.styled.th.withConfig({ shouldForwardProp: isPropValid }) `  
-  border-right: 1px solid rgba(34,36,38,.1); 
-  text-align: left;
-  padding: ${props => props.theme.spacing(2, 3)};  
-  font-weight: 700;
-  transition: background-color .1s ease, color .1s ease;
-
-  &:last-of-type {
-    border-right: 0;
-  }
-  
-  ${props => !!props.variant && styledComponents.css `
-    color: ${props.theme.palette.pane[props.variant].main.idle.text};
-    background-color: ${props.theme.palette.pane[props.variant].main.idle.background};
-    
-    &:hover {
-      color: ${props.theme.palette.pane[props.variant].main.hover.text};
-      background-color: ${props.theme.palette.pane[props.variant].main.hover.background};
-    }    
-  `}
-  
-  ${props => props.width ? `width: ${props.width};` : ''}
- 
-  ${props => props.sortable && `
-    cursor: pointer;
-    user-select: none;
-    
-    &:hover {      
-      background-color: ${props.theme.palette.pane.basic.main.hover.background};   
-    }       
-  `} 
-  
-  ${props => props.sortDirection && `         
-    position:relative;
-         
-    &:after {
-      content: " ";
-      position: absolute; 
-      right: 15px;
-      top: 50%;
-                     
-      height: 0;
-      width: 0;
-      border: 5px solid transparent;
-      
-      ${props.sortDirection === 'asc' ? `
-        border-top-color: #000;
-        transform: translateY(-25%);
-      ` : `
-        border-bottom-color: #000;
-        transform: translateY(-75%);
-      `}                            
-    }       
-  `}
-`;
-// Wrapper to allow for dot notated components:
-const Table = (props) => (React.createElement(StyledTable, Object.assign({}, props)));
-const TableCell = (_a) => {
-    var { variant, className } = _a, rest = __rest(_a, ["variant", "className"]);
-    return (React.createElement(StyledTableCell, Object.assign({ className: `${className || ''} ${variant || 'basic'}` }, rest)));
-};
-Table.Row = StyledTableRow;
-Table.HeadCell = StyledTableHeadCell;
-Table.Cell = TableCell;
-
-const StyledCell = styledComponents.styled(Table.Cell) `
-  ${(props) => props.firstRow && styledComponents.css ` border-top: 0px !important;`}
-  ${(props) => props.width && styledComponents.css ` width: ${props.width};`}
-  vertical-align: top;
-`;
-const Details = ({ details, firstColumnWidth }) => (React.createElement(Table, null,
-    React.createElement("tbody", null, Object.entries(details).map(([key, val], index) => (React.createElement(Table.Row, { key: key, disableHover: true },
-        React.createElement(StyledCell, { width: firstColumnWidth, firstRow: index === 0 }, key),
-        React.createElement(StyledCell, { firstRow: index === 0 }, val)))))));
-
-const Wrapper$7 = styledComponents.styled.div `
-  position: relative;
-`;
-const Dropper = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);
-  position: absolute;
-  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  
-  background-color: ${props => props.theme.palette.common.white};
-  z-index: 100;
-  
-  ${props => props.align === 'right' ? styledComponents.css `right: 0;` : styledComponents.css `left: 0;`}  
-`;
-const DropdownMenu = styledComponents.styled.ul `
-  list-style: none;
-  margin: 0;
-  padding: ${props => props.theme.spacing(2, 0)};  
-`;
-const DropdownMenuItem = styledComponents.styled.li `
-  cursor: pointer;
-  padding: ${props => props.theme.spacing(0, 3)};
-  &:hover {
-    background-color: #ddd;
-  }
-`;
-const Dropdown = ({ buttonProps, align, children, stayOpenOnClick }) => {
-    const dropper = React.useRef(null);
-    const [isOpen, setIsOpen] = React.useState(false);
-    const handleOpen = React.useCallback(() => setIsOpen(true), [setIsOpen]);
-    const handleClose = React.useCallback((e) => {
-        var _a;
-        if (stayOpenOnClick && ((_a = dropper.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
-            return;
-        setIsOpen(false);
-    }, [setIsOpen, stayOpenOnClick]);
-    React.useEffect(() => {
-        if (isOpen) {
-            setTimeout(() => document.addEventListener('click', handleClose), 1);
-        }
-        return () => {
-            document.removeEventListener('click', handleClose);
-        };
-    }, [isOpen, handleClose]);
-    return (React.createElement(Wrapper$7, null,
-        React.createElement(Button$1, Object.assign({}, buttonProps, { onClick: handleOpen })),
-        isOpen && (React.createElement(SlideInFromTop, { speed: '.1s' },
-            React.createElement(Dropper, { ref: dropper, align: align || 'left' }, children)))));
-};
-
-const HiddenInput$1 = styledComponents.styled.input `
-  display: none;
-`;
-const StyledDropZone = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  height: ${props => props.theme.spacing(25)};
-  
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);
-  
-  & > * {
-    pointerEvents: none;
-  }
-  
-  ${props => props.isReadyToDrop && styledComponents.css `
-    background-color: #FAFAFA;    
-  `}
-`;
-const Dropzone = (_a) => {
-    var { onChange, icon, label } = _a, rest = __rest(_a, ["onChange", "icon", "label"]);
-    const fileInput = React.useRef(null);
-    const dropzone = React.useRef(null);
-    const [isReadyToDrop, setIsReadyToDrop] = React.useState(false);
-    const handleChange = React.useCallback((fileList) => {
-        if (fileList && onChange) {
-            onChange(Array.from(fileList));
-        }
-    }, [onChange]);
-    const handleDragOver = React.useCallback((e) => {
-        e.preventDefault();
-        setIsReadyToDrop(true);
-    }, []);
-    const handleDragLeave = React.useCallback((e) => {
-        e.preventDefault();
-        setIsReadyToDrop(false);
-    }, []);
-    const handleDrop = React.useCallback((e) => {
-        var _a;
-        e.preventDefault();
-        setIsReadyToDrop(false);
-        handleChange((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
-    }, [handleChange]);
-    const handleClick = React.useCallback(() => {
-        var _a;
-        // We trigger the 'file pick' dialog by delegating the click to a hidden file-input.
-        (_a = fileInput.current) === null || _a === void 0 ? void 0 : _a.click();
-    }, [fileInput]);
-    const handleInputChange = React.useCallback(() => {
-        var _a;
-        handleChange((_a = fileInput === null || fileInput === void 0 ? void 0 : fileInput.current) === null || _a === void 0 ? void 0 : _a.files);
-    }, [fileInput, handleChange]);
-    return (React.createElement(StyledDropZone, Object.assign({ ref: dropzone, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, isReadyToDrop: isReadyToDrop }, rest),
-        React.createElement(HiddenInput$1, { "data-testid": "dropzone-file-input", type: "file", ref: fileInput, onChange: handleInputChange, multiple: true }),
-        React.createElement(Box, null,
-            React.createElement(Button$1, { variant: "text", color: "secondary", type: "button", icon: icon }, label))));
-};
-
-const StyledBox$6 = styledComponents.styled(Box) `
-  width: 300px;  
-`;
-const Feedback = ({ onConfirm, buttonLabel, buttonIcon, title, subtitle }) => (React.createElement(Modal, { handleClickOverlay: onConfirm, buttons: React.createElement(Button$1, { "data-testid": 'confirm', stretch: true, icon: buttonIcon, variant: 'secondary', onClick: onConfirm }, buttonLabel) },
-    React.createElement(StyledBox$6, { pt: 3, pb: 3 },
-        React.createElement(Box, { pb: 5, textAlign: "center" },
-            React.createElement(Header, null, title),
-            subtitle && React.createElement(Box, { pt: 5 },
-                React.createElement(Header, { level: 5 }, subtitle))),
-        React.createElement(Box, { pt: 5, pb: 5, pl: 7, pr: 7 },
-            React.createElement(AnimatedCheckmark, null)))));
-
-const horizontalPadding = { laptop: 1 };
-const verticalPadding = { mobile: 1, laptop: 0 };
-const flexGrow = { laptop: 1 };
-const FloaterItem = (_a) => {
-    var { stretch, laptopWidth } = _a, props = __rest(_a, ["stretch", "laptopWidth"]);
-    const width = React.useMemo(() => ({ laptop: laptopWidth }), [laptopWidth]);
-    return React.createElement(Box, Object.assign({ flexGrow: stretch ? flexGrow : undefined, width: width, pt: verticalPadding, pb: verticalPadding, pl: horizontalPadding, pr: horizontalPadding }, props));
-};
-
-const horizontalMargin = { laptop: -1 };
-const verticalMargin = { mobile: -1, laptop: 0 };
-const display = { mobile: "block", laptop: "flex" };
-const hasElement = (item) => !!item.element;
-const Floater = (_a) => {
-    var { items, forceEqualWidth = false, stretch = false } = _a, props = __rest(_a, ["items", "forceEqualWidth", "stretch"]);
-    return React.createElement(Box, Object.assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display }, props), items
-        .filter(Boolean)
-        .map((item, i) => hasElement(item)
-        ? (React.createElement(FloaterItem, { key: i, laptopWidth: item.forceEqualWidth ? `${100 / items.length}%` : undefined, stretch: item.stretch || false }, item.element))
-        : React.createElement(FloaterItem, { key: i, laptopWidth: forceEqualWidth ? `${100 / items.length}%` : undefined, stretch: stretch }, item)));
-};
-
-const SIDEBAR_COLLAPSED_WIDTH = 15;
-const StyledSidebar = styledComponents.styled(Box) `
-  float: left;
-    
-  height: 100%;
-  width: 100%;  
-    
-  background-color: #243646;
-    
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  
-  z-index: 900;
-       
-  display: ${props => props.isMobileMenuOpen ? 'block' : 'none'};     
-  pointer-events: auto;
-     
-  ${mq("laptop", styledComponents.css `
-    position: static;    
-    display: block;
-    width: auto;
-    min-width: ${props => { var _a; return props.theme.spacing((_a = props.minWidth) !== null && _a !== void 0 ? _a : 75); }};
-    box-shadow: 2px 0px 6px -1px rgba(0,0,0,0.74);
-        
-    transition: transform .1s ease-out;
-    transform: ${props => props.isDesktopMenuOpen
-    ? 'transform: translateX(0);'
-    : styledComponents.css `translateX(calc(-100% + ${props => props.theme.spacing(SIDEBAR_COLLAPSED_WIDTH)}));`}; 
-             
-    & ul {
-      opacity: ${props => props.isDesktopMenuOpen ? '1' : '0'};
-    }                              
-  `)}  
-`;
-const SideBar = (props) => {
-    const { closeSideMenu, openSideMenu, isSideMenuOpen } = useUiStateContext();
-    return React.createElement(StyledSidebar, Object.assign({ isDesktopMenuOpen: isSideMenuOpen }, props, { onMouseEnter: openSideMenu, onMouseLeave: closeSideMenu }));
-};
-
-const StyledBox$5 = styledComponents.styled(Box) `
-  background-color: ${props => props.theme.palette.common.white};
-  border-top: 1px solid #DDDDDD;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);  
-  box-sizing: border-box;
-`;
-const Footer = ({ children }) => (React.createElement(StyledBox$5, { pt: 2, pb: 2, pr: 5, pl: { mobile: 5, laptop: SIDEBAR_COLLAPSED_WIDTH + 5 } }, children));
-
-const Scroller = styledComponents.styled(Box) `
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-const HorizontalScroller = ({ children }) => (React.createElement(Scroller, null, children));
-
-const HamburgerButton = styledComponents.styled(Button$1) `
-  margin-right: ${props => props.theme.spacing(3)};    
-  ${mq("laptop", `display: none;`)} 
-`;
-
-const Menu = styledComponents.styled.ul `
-  padding: 0;
-  margin: 0;
-  list-style: none;
-`;
-const StyledMenuItem = styledComponents.styled.li.withConfig({ shouldForwardProp: isPropValid }) `
-  padding: ${props => props.theme.spacing(.5, 5)};
-    
-  ${props => props.isOpen && styledComponents.css `  
-      border-left: ${props.theme.spacing(1)} solid ${props.theme.palette.colors.blue};      
-      background: #293846;
-      
-      & > * {
-        margin-left: ${props.theme.spacing(-1)};
-      }
-  `}
-           
-  & button:hover, & button:active, & button:focus {
-     color: ${props => props.theme.palette.common.white} !important;
-  }
-  
-  & button {
-    width: 100%;
-  }
-  
-  ${props => props.isActive && styledComponents.css `
-    & button { 
-      color: ${props.theme.palette.common.white};
-    }
-  `}  
-`;
-const MenuItem = ({ item, isOpen, isActive, children }) => {
-    const [isDelayedOpen, setDelayedOpen] = React.useState(!!isOpen);
-    return (React.createElement(StyledMenuItem, { isOpen: isDelayedOpen, isActive: !!isActive },
-        item,
-        children && (React.createElement(SlideOpen, { onChange: setDelayedOpen, isOpen: !!isOpen, duration: .25 }, children))));
-};
-
-const MenuCloseButton = styledComponents.styled(Button$1) `      
-  ${mq("laptop", `display: none;`)} 
-`;
-
-const StyledBox$4 = styledComponents.styled(Box) `
-    display: none;
-    ${mq("laptop", `display: flex;`)}
-    
-    height: 100%;
-    flex-direction: row;
-    align-items: center;
-    
-    width: ${props => props.theme.spacing(SIDEBAR_COLLAPSED_WIDTH)};    
-    
-    & > svg {
-       margin: 0 auto; 
-    }
-    
-    ${StyledSidebar}:hover & {
-        display:none;
-    }
-`;
-const MenuSlideOpenIndicator = ({ children }) => (React.createElement(StyledBox$4, null, children));
-
-const VerticalRhythmLaptop = 7;
-const VerticalRhythmMobile = 4;
-
-const StyledBox$3 = styledComponents.styled(Box) `
-  box-sizing: border-box; 
-  color: ${props => props.theme.palette.button.text.idle.text};
-  font-weight: bold;  
-  
-  display: flex;    
-  text-align: center;
-  
-  font-size: 14px;
-  font-weight: bold;
-  letter-spacing: 1px;    
-  line-height: 1em;
-  
-  background-color: rgba(0,0,0,.2);
-  
-  ${mq('laptop', styledComponents.css `
-      min-height: ${props => props.theme.spacing(12)};
-  `)}  
-`;
-const SideBarHeader = ({ children, right }) => (React.createElement(StyledBox$3, { mb: VerticalRhythmLaptop },
-    React.createElement(Box, { flexGrow: 1, display: "flex" },
-        React.createElement(Box, { flexGrow: 1, display: "flex", flexDirection: "column", justifyContent: "center" }, children)),
-    right && React.createElement(Box, null, right)));
-
-const useCloseSidebarOnNavigate = (pathName) => {
-    const { closeSideMenu } = useUiStateContext();
-    React.useEffect(() => {
-        closeSideMenu();
-    }, [pathName, closeSideMenu]);
-};
-
-const useToggleMobileMenu = ({ currentRoute }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const toggle = React.useCallback(() => {
-        setIsOpen((val) => !val);
-    }, []);
-    const open = React.useCallback(() => {
-        setIsOpen(true);
-    }, []);
-    const close = React.useCallback(() => {
-        setIsOpen(false);
-    }, []);
-    React.useEffect(() => {
-        close();
-    }, [currentRoute, close]);
-    return {
-        isOpen,
-        open,
-        close,
-        toggle
-    };
-};
-
-const useResponsiveBreakpoints = () => {
-    const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
-    React.useEffect(() => {
-        const onResize = () => setWindowWidth(window.innerWidth);
-        window.addEventListener('resize', onResize);
-        return () => window.removeEventListener('resize', onResize);
-    }, []);
-    const responsiveMap = React.useMemo(() => ({
-        isMobile: windowWidth >= BreakPointValues.mobile,
-        isTablet: windowWidth >= BreakPointValues.tablet,
-        isLaptop: windowWidth >= BreakPointValues.laptop,
-        isDesktop: windowWidth >= BreakPointValues.desktop
-    }), [windowWidth]);
-    return responsiveMap;
-};
-
-const Wrapper$6 = styledComponents.styled.div `
-  display: flex;
-`;
-const Button = styledComponents.styled.button.withConfig({ shouldForwardProp: isPropValid }) `
-  user-select:none;
-  cursor: pointer;
-
-  min-height: ${props => props.theme.spacing(8)};
-  padding: .2em 1.3em .2em;
-  margin: 0;
-  line-height: 1em;  
-  outline: 0;
-  border: 1px solid rgba(34,36,38,.15);
-  
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;   
-  background-color: ${props => props.active ? '#F2F2F2' : '#fff'};
- 
-  &:not(:first-of-type) {
-    border-left: 0;
-  }
- 
-  ${props => !props.disabled && (`
-    &:hover {    
-      background-color: #E9E9E9;        
-    }
-  `)}      
-`;
-const range = (start, end) => {
-    let nums = [];
-    for (let i = start; i < end; i++) {
-        nums.push(i);
-    }
-    return nums;
-};
-const Paginator = (props) => {
-    const { isTablet } = useResponsiveBreakpoints();
-    const { pageCount, onChange } = props;
-    const currentPage = Math.min(Math.max(props.currentPage, 0), pageCount);
-    const clamSize = isTablet ? 2 : 0;
-    const clamLower = Math.max(1, currentPage - clamSize);
-    const clamUpper = Math.min(pageCount, currentPage + clamSize);
-    return (React.createElement(Wrapper$6, null,
-        React.createElement(Button, { "data-testid": "paginate-prev", disabled: currentPage === 1, onClick: () => onChange(currentPage - 1) }, "\u27E8"),
-        clamLower > 1 && (React.createElement(Button, { "data-testid": "paginate-page-1", active: currentPage === 1, onClick: () => onChange(1) }, "1")),
-        clamLower > 2 && (React.createElement(Button, { disabled: true }, "...")),
-        range(clamLower, clamUpper + 1).map((pageNumber) => (React.createElement(Button, { "data-testid": `paginate-page-${pageNumber}`, key: pageNumber, active: currentPage === pageNumber, onClick: () => onChange(pageNumber) }, pageNumber))),
-        clamUpper < pageCount - 1 && (React.createElement(Button, { disabled: true }, "...")),
-        clamUpper < pageCount && (React.createElement(Button, { "data-testid": `paginate-page-${pageCount}`, active: currentPage === pageCount, onClick: () => onChange(pageCount) }, pageCount)),
-        React.createElement(Button, { "data-testid": "paginate-next", disabled: currentPage === pageCount, onClick: () => onChange(currentPage + 1) }, "\u27E9")));
-};
-
-const Section = (props) => (React.createElement(Box, Object.assign({ pb: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile } }, props)));
-
-const Wrapper$5 = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  display: flex;
-  border-radius: ${props => props.theme.spacing(1)};
-  padding: ${props => props.theme.spacing(4)};
-  background-color: ${props => props.theme.palette.colors[props.backgroundColor]};  
-  box-sizing: border-box;
-  height: 100%;
-`;
-const Label$2 = styledComponents.styled.div `
-  text-transform: uppercase;
-  color: ${props => props.theme.palette.common.white};
-  font-size: ${props => props.theme.spacing(3)};  
-`;
-const Value = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  color: ${props => props.theme.palette.common.white};  
-  font-weight: bold;  
-  font-size: ${props => props.theme.spacing(props.smallerValue ? 5.5 : 7.5)};     
-`;
-const IconWrapper = styledComponents.styled.div `
-  margin: ${props => props.theme.spacing(1)} 0 auto 0; 
-  & svg {
-    height: 100%;
-    width: ${props => props.theme.spacing(10)};
-    color: white;
-  }
-`;
-const Statistic = ({ icon, value, label, backgroundColor, smallerValue }) => (React.createElement(Wrapper$5, { backgroundColor: backgroundColor },
-    React.createElement(IconWrapper, null, icon),
-    React.createElement(Box, { flexGrow: 1, textAlign: "right" },
-        React.createElement(Label$2, null, label),
-        React.createElement(Value, { smallerValue: smallerValue }, value))));
-
-const StyledBox$2 = styledComponents.styled(Box) `
-    
-    padding: ${props => props.theme.spacing(2.5, 5)};
-    
-    ${props => !props.isActive && styledComponents.css `
-        cursor: pointer;               
-        color: #337ab7;                
-        &:hover,
-        &:focus {
-          color: #23527c;
-          text-decoration: underline;
-        }
-    `}
-           
-    ${props => props.isActive && styledComponents.css `
-        font-weight: bold;
-        border: 1px solid rgba(34,36,38,.15);
-        border-bottom: 0px;
-        margin-bottom: -1px;
-        border-top-left-radius: 4px;  
-        border-top-right-radius: 4px;  
-        background-color: ${props => props.theme.palette.common.white};            
-    `}       
-    
-    ${props => props.variant && `
-        font-weight: bold;
-        color: ${props.theme.palette.form[props.variant]};
-        &:hover {
-            color: ${props.theme.palette.form[props.variant]};
-        }
-    `}
-    
-`;
-const Tab = (_a) => {
-    var { id, isActive, onClick } = _a, restProps = __rest(_a, ["id", "isActive", "onClick"]);
-    const handleClick = React.useCallback(() => {
-        if (!isActive) {
-            onClick === null || onClick === void 0 ? void 0 : onClick(id);
-        }
-    }, [id, isActive, onClick]);
-    return React.createElement(StyledBox$2, Object.assign({}, restProps, { onClick: handleClick, isActive: isActive }));
-};
-
-const StyledBox$1 = styledComponents.styled(Box) `
-    background-color: ${props => props.theme.palette.common.white};
-    border: 1px solid rgba(34,36,38,.15);
-    border-top: 0px;
-`;
-const TabContent = (props) => React.createElement(StyledBox$1, Object.assign({ p: 3 }, props));
-
-const Tabs = styledComponents.styled(Box) `
-    display: flex;
-    border-bottom: 1px solid rgba(34,36,38,.15);     
-`;
-
-const FlatPanel = styledComponents.styled(Panel) `
-  box-shadow: none;
-`;
-const Wrapper$4 = styledComponents.styled(Box) `
-  display: flex;
-  
-  &:last-of-type .line:before {
-    background: none;
-  }
-`;
-const Line = styledComponents.styled(Box) `
-  position: relative;
-  margin-right: ${props => props.theme.spacing(4)};
-  top: 4px;
-  
-  &:before {
-    background: #e7eaec;
-    content: '';
-    position: absolute;
-    top: 0;
-    left: ${props => props.theme.spacing(4.5)};
-    height: 100%;
-    width: ${props => props.theme.spacing(1)};
-  }
-    
-`;
-const Circle = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  position: relative;
-  background-color: ${props => props.color};
-  color: #fff; 
-  
-  left: 0;
-  width: ${props => props.theme.spacing(10)};
-  height: ${props => props.theme.spacing(10)};
-  border-radius: 50%;
-  font-size: ${props => props.theme.spacing(4)};
-  
-  & > * {
-     position: absolute;
-     top: 50%;
-     left: 50%;
-     transform: translate(-50%, -50%);
-  }
-`;
-const Timeline = ({ title, icon, color, isInitiallyOpen, titleMeta, chevron, children }) => (React.createElement(Wrapper$4, null,
-    React.createElement(Line, null,
-        React.createElement(Circle, { color: color }, icon)),
-    React.createElement(Box, { pb: 4, flexGrow: 1 },
-        React.createElement(CollapsiblePanel, { isInitiallyOpen: isInitiallyOpen, titleMeta: titleMeta, title: title, titleAction: chevron }, children))));
-const SimpleTimeline = ({ color, icon, title, titleMeta }) => (React.createElement(Wrapper$4, null,
-    React.createElement(Line, { className: 'line' },
-        React.createElement(Circle, { color: color }, icon)),
-    React.createElement(Box, { pb: 4, flexGrow: 1 },
-        React.createElement(FlatPanel, { titleMeta: titleMeta, title: title }))));
-
-const StyledBox = styledComponents.styled(Box) `
-  background-color: #FFFFFF;
-  border-bottom: 1px solid #DDDDDD;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);   
-  box-sizing: border-box;
-`;
-const TopBar = ({ left, right }) => (React.createElement(StyledBox, null,
-    React.createElement(Box, { display: "flex", alignItems: "center", pb: 1, pt: 1, pr: 5, pl: { mobile: 5, laptop: 5 + SIDEBAR_COLLAPSED_WIDTH } },
-        React.createElement(Box, { flexGrow: 1, display: "flex", pl: 2 }, left),
-        React.createElement(Box, { flexGrow: 1, display: "flex", justifyContent: 'flex-end' }, right))));
-
-const Label$1 = styledComponents.styled.label `
-  position: relative;  
-`;
-const Input$1 = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) ` 
-  position: absolute;
-  top: 0;
-  left: 0;
-  
-  width: 17px;
-  height: 17px;  
-  
-  z-index: 99;
-  opacity: 0;  
-  margin-right: ${props => props.theme.spacing(2)};
-  transform: translateY(1px);
-  
-  &~span {
-    user-select: none;
-    padding-left: 1.85714em;
-    cursor: pointer;
-    font-size: .92857143em;
-  }
-  
-  &~span:before, &~span:after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 17px;
-    height: 17px;
-    line-height: 17px;
-    content: '';    
-    border-radius: 4px;
-    border: 1px solid rgba(34,36,38,.15);
-    z-index:0;
-  }
-  
-  &:checked~span {
-    font-style: italic;
-  }
-  
-  &:checked~span:before {
-    background: #fff;
-    border-color: rgba(34,36,38,.35); 
-  }
-  
-  &:checked~span:after {    
-    font-style: normal; 
-    text-align: center;
-    content: '\\2714';
-    opacity: 1;
-    color: ${props => props.theme.palette.common.black}
-  }  
-  
-  &:focus~span:before, &:focus~span:after {
-    border-color: #85b7d9;
-    border-radius: 4px;
-    background: #fff;
-    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;
-  } 
-  
-  &.error~span {
-    color: ${props => props.theme.palette.form.error}; 
-  }
-  
-  &.error~span:before, &.error~span:after {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }  
-`;
-const Span = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-  ${props => props.dimmed ? styledComponents.css `color: #999c9e;` : ''}
-`;
-const Checkbox = React.forwardRef((_a, ref) => {
-    var { options, spacing = 1, name, dimmed } = _a, restProps = __rest(_a, ["options", "spacing", "name", "dimmed"]);
-    return (React.createElement(React.Fragment, null, Object.entries(options).map(([value, label]) => (React.createElement(Box, { key: value, mt: spacing, mb: spacing },
-        React.createElement(Label$1, { key: value },
-            React.createElement(Input$1, Object.assign({ type: "checkbox", value: value, name: name, ref: ref }, restProps)),
-            React.createElement(Span, { dimmed: dimmed }, label)))))));
-});
-
-const sharedStyles = styledComponents.css `
-  padding: .67857143em 1em;
-  line-height: 1.21428571em;
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);  
-  
-  color: ${props => props.theme.palette.common.black};
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  
-  font-size: 1em;
-  outline: none;
-  
-  &:disabled, &:read-only {
-    background-color: #FAFAFA;
-  }
-  
-  &:focus {
-    color: rgba(0,0,0,.95);
-    border-color: #85b7d9;    
-    background: #fff;
-    box-shadow: 0 0 0 0 rgba(34,36,38,.35) inset;
-  }
-    
-  &.error {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }  
-  
-  &.error:focus {
-    background: #fff6f6;
-  }
-     
-  &:focus::placeholder {
-    color:rgba(115,115,115,.87) 
-  }
-  
-  &::placeholder {
-    color:rgba(191,191,191,.87); 
-  }
-  
-  &.error::placeholder {
-    color: #e7bdbc;
-  }
-  
-  &.error:focus::placeholder {
-    color: #da9796;
-  }        
-`;
-const Input = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) `
-  ${sharedStyles}
-`;
-const Textarea = styledComponents.styled.textarea.withConfig({ shouldForwardProp: isPropValid }) `
-  ${sharedStyles}
-  height: 100%;
-`;
-const TextField = React.forwardRef((_a, ref) => {
-    var { multiline = false } = _a, restProps = __rest(_a, ["multiline"]);
-    return multiline
-        ? React.createElement(Textarea, Object.assign({ ref: ref }, restProps))
-        : React.createElement(Input, Object.assign({ ref: ref, type: "text" }, restProps));
-});
-
-const Wrapper$3 = styledComponents.styled.div `
-  position: relative;
-  display: flex;    
-`;
-const HiddenInput = styledComponents.styled.input.withConfig({ shouldForwardProp: isPropValid }) `
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;    
-  width: 100%;
-  opacity:0;
-`;
-const StyledButton = styledComponents.styled(Button$1) `    
-  height: 40px;
-  
-  .has-error & {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }  
-`;
-const StyledTextField = styledComponents.styled(TextField) `
-  flex: 1;  
-  padding-right: ${props => props.theme.spacing(8)}
-`;
-const DeleteButton = styledComponents.styled.button `    
-    background-color: transparent;
-    border: 0;
-    outline: 0;    
-    padding: 0;
-   
-    position: absolute;    
-    right: 0;
-    height: 100%;
-   
-   cursor: pointer;
-                   
-    &:after {
-        box-sizing: border-box;
-        
-        color: rgba(0, 0, 0, .3);
-        content: "×";
-        
-        text-align: center;
-        vertical-align: middle;
-        display: table-cell;
-        
-        font-size: 20px;
-        height: 38px;
-        width: 38px;
-        line-height: 38px;
-        padding: 0 8px;
-    }
-`;
-const FileField = React.forwardRef((_a, ref) => {
-    var { className, placeholder, chooseFileLabel = "Choose file", changeFileLabel = "Change file", onClear } = _a, props = __rest(_a, ["className", "placeholder", "chooseFileLabel", "changeFileLabel", "onClear"]);
-    const [originalRef, setOriginalRef] = React.useState();
-    const [fileName, setFilename] = React.useState("");
-    const handleChange = React.useCallback((e) => {
-        var _a;
-        const files = (e === null || e === void 0 ? void 0 : e.target).files;
-        setFilename(((_a = files === null || files === void 0 ? void 0 : files[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
-    }, []);
-    const handleRemove = React.useCallback(() => {
-        if (originalRef) {
-            originalRef.value = '';
-            originalRef.files = null;
-            originalRef.dispatchEvent(new Event('change', { bubbles: true }));
-            if (onClear) {
-                onClear();
-            }
-        }
-    }, [originalRef, onClear]);
-    const extendedRef = React.useMemo(() => (el) => {
-        el === null || el === void 0 ? void 0 : el.addEventListener('change', handleChange);
-        setOriginalRef(el);
-        if (typeof ref === 'function') {
-            ref === null || ref === void 0 ? void 0 : ref(el);
-        }
-    }, [ref, handleChange]);
-    return (React.createElement(Wrapper$3, null,
-        React.createElement(HiddenInput, Object.assign({ type: 'file', ref: extendedRef }, props)),
-        React.createElement(StyledButton, { variant: 'basic' }, !!fileName ? changeFileLabel : chooseFileLabel),
-        React.createElement(StyledTextField, { placeholder: placeholder, className: className, disabled: true, value: fileName }),
-        !!fileName && onClear && React.createElement(DeleteButton, { "data-testid": 'file-clear', onClick: handleRemove })));
-});
-
-const Wrapper$2 = styledComponents.styled.div `
-  position: relative;
-`;
-const StyledSelect = styledComponents.styled.select.withConfig({ shouldForwardProp: isPropValid }) `
-  width: 100%;
-
-  padding: .67857143em 1em;
-  line-height: 1.21428571em;
-  border-radius: 4px;
-  border: 1px solid rgba(34,36,38,.15);  
-  
-  color: ${props => props.theme.palette.common.black};
-  font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  
-  font-size: 1em;
-  outline: none; 
-  
-  appearance: none;
-  
-  &.error {
-    background: #fff6f6;
-    border-color: #e0b4b4;
-    color: #9f3a38;
-  }
-  
-  &.error~div {
-    color: #9f3a38;
-  }    
-`;
-const PaddingOverlay = styledComponents.styled.div `
-  pointer-events: none;
-  padding: 0 1em;
-  position:absolute;  
-  height: 100%;
-  top: 0;
-  right: 0; 
-  font-size: 17px;
-  line-height: 40px;
-`;
-const Select = React.forwardRef((_a, ref) => {
-    var { options } = _a, props = __rest(_a, ["options"]);
-    const optionsArray = Array.isArray(options)
-        ? options
-        : Object.entries(options);
-    return (React.createElement(Wrapper$2, null,
-        React.createElement(StyledSelect, Object.assign({ ref: ref }, props), optionsArray.map(([value, label]) => (React.createElement("option", { key: value, value: value }, label)))),
-        React.createElement(PaddingOverlay, null, "\u25BE")));
-});
-
-const passwordMinLength = (val) => val.length >= 8;
-const passwordHasNumbers = (val) => /\d/.test(val);
-const passwordHasLowerAndUppercase = (val) => /[a-z]/.test(val) && /[A-Z]/.test(val);
-const passwordHasSpecialChars = (val) => /[-’/`~!#*$@_%+=.,^&(){}[\]|;:”<>?\\]/.test(val);
-const checks = [passwordMinLength, passwordHasNumbers, passwordHasLowerAndUppercase, passwordHasSpecialChars];
-const maxScore = checks.length + 1;
-const calculatePasswordScore = (val) => checks
-    .map((check) => check(val))
-    .reduce((acc, value) => value
-    ? acc + 1
-    : acc, 1);
-const Progress = styledComponents.styled.div `
-    margin-top: ${props => props.theme.spacing(1)};
-    height: 3px;
-    background-color: #f5f5f5;
-    border-radius: 4px;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
-`;
-const ProgressBar = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-    width: ${props => props.score ? (props.score / maxScore) * 100 : 0}%;
-    height: 100%;
-    background-color: ${props => props.score <= 2 ? '#e90f10' : props.score <= 3 ? '#ffad00' : '#02b502'} ;
-    transition: width .6s ease, background-color .6s ease;
-`;
-const PasswordStrengthField = React.forwardRef((props, ref) => {
-    const [score, setScore] = React.useState(0);
-    const handleChange = React.useCallback((e) => {
-        const target = e.target;
-        setScore(target.value ? calculatePasswordScore(target.value) : 0);
-    }, []);
-    const extendedRef = React.useMemo(() => (el) => {
-        el === null || el === void 0 ? void 0 : el.addEventListener('keyup', handleChange);
-        if (typeof ref === 'function') {
-            ref === null || ref === void 0 ? void 0 : ref(el);
-        }
-    }, [ref, handleChange]);
-    return React.createElement(React.Fragment, null,
-        React.createElement(TextField, Object.assign({}, props, { type: "password", ref: extendedRef })),
-        React.createElement(Progress, null,
-            React.createElement(ProgressBar, { score: score })));
-});
-
-function toVal(mix) {
-	var k, y, str='';
-
-	if (typeof mix === 'string' || typeof mix === 'number') {
-		str += mix;
-	} else if (typeof mix === 'object') {
-		if (Array.isArray(mix)) {
-			for (k=0; k < mix.length; k++) {
-				if (mix[k]) {
-					if (y = toVal(mix[k])) {
-						str && (str += ' ');
-						str += y;
-					}
-				}
-			}
-		} else {
-			for (k in mix) {
-				if (mix[k]) {
-					str && (str += ' ');
-					str += k;
-				}
-			}
-		}
-	}
-
-	return str;
-}
-
-function clsx () {
-	var i=0, tmp, x, str='';
-	while (i < arguments.length) {
-		if (tmp = arguments[i++]) {
-			if (x = toVal(tmp)) {
-				str && (str += ' ');
-				str += x;
-			}
-		}
-	}
-	return str;
-}
-
-const NUM_ROWS_PER_FIELD = 2;
-// NOTE:
-//
-// We have to implement our own version of -ms-grid.
-// Styled-components does not automatically prefix it, as the specs do not completely overlap.
-// https://github.com/thysultan/stylis.js/issues/51
-//
-// We can achieve our goals using both specs though.
-const generateDimensionsCss = (position, rowOffset) => {
-    const parts = [];
-    if (position === undefined) {
-        return parts;
-    }
-    if (position.row !== undefined) {
-        parts.push(styledComponents.css `
-      grid-row-start: ${(position.row * NUM_ROWS_PER_FIELD) + 1 + rowOffset};
-      -ms-grid-row: ${(position.row * NUM_ROWS_PER_FIELD) + 1 + rowOffset};
-    `);
-    }
-    if (position.rowSpan && rowOffset) {
-        parts.push(styledComponents.css `
-      grid-row-end: span ${(position.rowSpan * NUM_ROWS_PER_FIELD) - 1};
-      -ms-grid-row-span: ${(position.rowSpan * NUM_ROWS_PER_FIELD) - 1};
-    `);
-    }
-    if (position.column !== undefined) {
-        parts.push(styledComponents.css `
-      grid-column-start: ${position.column + 1};
-      -ms-grid-column: ${position.column + 1};
-    `);
-    }
-    if (position.columnSpan !== undefined) {
-        parts.push(styledComponents.css `
-      grid-column-end: span ${position.columnSpan};
-      -ms-grid-column-span: ${position.columnSpan};
-    `);
-    }
-    return parts;
-};
-const FormGridCell = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) ` 
-  margin: 0px 8px;
-  
-  ${props => props.rowOffset !== undefined && styledComponents.css `
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 16px;`}
-       
-  align-self: ${props => props.rowOffset === undefined ? "end" : "initial"};
-  -ms-grid-row-align: ${props => props.rowOffset === undefined ? "end" : "initial"};
-  
-  ${(props) => responsiveProps(props, {
-    "align": unit => styledComponents.css `text-align: ${unit};`,
-    "position": unit => { var _a; return generateDimensionsCss(unit, (_a = props.rowOffset) !== null && _a !== void 0 ? _a : 0); }
-})} 
-`;
-FormGridCell.displayName = "FormGridCell";
-
-const Label = styledComponents.styled.label.withConfig({ shouldForwardProp: isPropValid }) `
-    display: block;
-    color: ${(props => !!props.error ? props.theme.palette.form.error : props.theme.palette.common.black)} ;    
-    font-weight: bold;
-    margin: ${props => props.theme.spacing(0, 0, 1, 0)};
-    line-height: 1.4em; 
-    font-size: .92857143em;
-`;
-const Hint = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-    color: ${(props => !!props.error ? "#da9796;" : props.theme.palette.form.hint)};
-    margin: ${props => props.theme.spacing(-1, 0, 1, 0)};
-    line-height: 1.4em;
-    font-size: .92857143em;        
-`;
-const RequiredAsterisk = styledComponents.styled.span.withConfig({ shouldForwardProp: isPropValid }) `
-    color: ${props => props.theme.palette.form.hint};
-`;
-const Error$1 = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `    
-    color: ${props => props.theme.palette.form.error};    
-    margin: ${props => props.theme.spacing(1, 0, 0, 0)};
-    font-weight: bold;       
-    font-style: italic;       
-    line-height: 1.4em;
-    font-size: .92857143em;    
-`;
-const getFormGridWrapperProps = ({ position, align, label, hint, error, isRequired }) => ({ position, align, label, hint, error, isRequired });
-const FormGridWrapper = ({ position, align, label, hint, error, isRequired, children }) => (React.createElement(React.Fragment, null,
-    React.createElement(FormGridCell, { position: position, align: align, className: 'form-grid-cell__label-hint' },
-        label && (React.createElement(Label, { error: error },
-            label,
-            isRequired && React.createElement(RequiredAsterisk, null, " *"))),
-        hint && (React.createElement(Hint, { error: error }, hint))),
-    React.createElement(FormGridCell, { position: position, align: align, rowOffset: 1, className: clsx({ 'form-grid-cell__field-error': true, 'has-error': !!error }) },
-        children,
-        error && (React.createElement(Error$1, null, error)))));
-
-const FormGrid = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  margin: 0 -8px -16px -8px;
-
-  display: -ms-grid;
-  display: grid;
-
-  -ms-grid-columns: 1fr;   
-  
-  ${(props) => responsiveProps(props, {
-    columns: (string) => styledComponents.css `
-        -ms-grid-columns: ${string};           
-        grid-template-columns: ${string};
-      `
-})}
-`;
-FormGrid.displayName = "FormGrid";
-
-const Wrapper$1 = styledComponents.styled(Box) ` 
-  background-color: #F3F3F4;
-`;
-const WrapperInner = styledComponents.styled(Box) ` 
-  position: relative;
-`;
-const SidebarWrapper = styledComponents.styled(Box) ` 
-  position: absolute;
-  height: 100%;
-  z-index: 50;
-  pointer-events: none;
-`;
-const ContentBox = styledComponents.styled(Box) `
-  height: 100%;
-`;
-const BasicLayout = ({ sideBarProps, topBarProps, footerProps, isLoading, loader, children }) => {
-    return (React.createElement(Wrapper$1, { flexGrow: 1, display: "flex", flexDirection: "column" },
-        React.createElement(WrapperInner, { flexGrow: 1, flexShrink: 0 },
-            sideBarProps && (React.createElement(SidebarWrapper, null,
-                React.createElement(SideBar, Object.assign({}, sideBarProps)))),
-            React.createElement(ContentBox, { display: "flex", flexDirection: "column" },
-                React.createElement(TopBar, Object.assign({}, topBarProps)),
-                React.createElement(Box, { p: { laptop: VerticalRhythmLaptop, mobile: VerticalRhythmMobile }, pl: { laptop: VerticalRhythmLaptop + SIDEBAR_COLLAPSED_WIDTH }, flexGrow: 1 }, isLoading && loader
-                    ? loader
-                    : children),
-                React.createElement(Footer, Object.assign({}, footerProps))))));
-};
-
-const Wrapper = styledComponents.styled(Box) `
-  background-color:  ${props => props.baseColor || 'white'};
-  position: absolute;
-  min-width: 100%;
-  min-height: 100%;  
-`;
-const Background = styledComponents.styled.div.withConfig({ shouldForwardProp: isPropValid }) `
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-       
-  opacity: ${props => { var _a; return (_a = props.opacity) !== null && _a !== void 0 ? _a : 1; }} ;
-  background: url("${props => props.imageUrl}");
-  background-size: cover;
-`;
-const StyledAnimation = styledComponents.styled(SlideInFromTop) `
-  z-index: 10;
-  margin: auto auto;
-`;
-const StyledPanel = styledComponents.styled(Panel) `
-  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);  
-  min-width: 280px;   
-`;
-const Logo = styledComponents.styled.img `
-  display:none;
-  position: absolute;
-  left: 0;
-  top: ${props => props.theme.spacing(8)};
-  ${mq("tablet", `display: block;`)}
-`;
-const FloatingPanelLayout = ({ panelProps, imageUrl, alert, logoUrl, backgroundBaseColor, backgroundOpacity }) => (React.createElement(Wrapper, { display: "flex", alignItems: "center", baseColor: backgroundBaseColor },
-    React.createElement(Background, { imageUrl: imageUrl, opacity: backgroundOpacity }),
-    logoUrl && (React.createElement(Logo, { src: logoUrl, alt: "Logo" })),
-    React.createElement(StyledAnimation, null,
-        alert && (React.createElement(Box, { pb: VerticalRhythmLaptop }, alert)),
-        React.createElement(StyledPanel, Object.assign({}, panelProps)))));
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as references for various `Number` constants. */
-var INFINITY = 1 / 0,
-    MAX_SAFE_INTEGER$1 = 9007199254740991,
-    MAX_INTEGER = 1.7976931348623157e+308,
-    NAN = 0 / 0;
-
-/** `Object#toString` result references. */
-var funcTag$1 = '[object Function]',
-    genTag$1 = '[object GeneratorFunction]',
-    symbolTag = '[object Symbol]';
-
-/** Used to match leading and trailing whitespace. */
-var reTrim = /^\s+|\s+$/g;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
-
-/** Used to detect unsigned integer values. */
-var reIsUint = /^(?:0|[1-9]\d*)$/;
-
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
-
-/** Used for built-in method references. */
-var objectProto$1 = Object.prototype;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString$1 = objectProto$1.toString;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeCeil = Math.ceil,
-    nativeMax$1 = Math.max;
-
-/**
- * The base implementation of `_.slice` without an iteratee call guard.
- *
- * @private
- * @param {Array} array The array to slice.
- * @param {number} [start=0] The start position.
- * @param {number} [end=array.length] The end position.
- * @returns {Array} Returns the slice of `array`.
- */
-function baseSlice(array, start, end) {
-  var index = -1,
-      length = array.length;
-
-  if (start < 0) {
-    start = -start > length ? 0 : (length + start);
-  }
-  end = end > length ? length : end;
-  if (end < 0) {
-    end += length;
-  }
-  length = start > end ? 0 : ((end - start) >>> 0);
-  start >>>= 0;
-
-  var result = Array(length);
-  while (++index < length) {
-    result[index] = array[index + start];
-  }
-  return result;
-}
-
-/**
- * Checks if `value` is a valid array-like index.
- *
- * @private
- * @param {*} value The value to check.
- * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
- * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
- */
-function isIndex(value, length) {
-  length = length == null ? MAX_SAFE_INTEGER$1 : length;
-  return !!length &&
-    (typeof value == 'number' || reIsUint.test(value)) &&
-    (value > -1 && value % 1 == 0 && value < length);
-}
-
-/**
- * Checks if the given arguments are from an iteratee call.
- *
- * @private
- * @param {*} value The potential iteratee value argument.
- * @param {*} index The potential iteratee index or key argument.
- * @param {*} object The potential iteratee object argument.
- * @returns {boolean} Returns `true` if the arguments are from an iteratee call,
- *  else `false`.
- */
-function isIterateeCall(value, index, object) {
-  if (!isObject$1(object)) {
-    return false;
-  }
-  var type = typeof index;
-  if (type == 'number'
-        ? (isArrayLike$1(object) && isIndex(index, object.length))
-        : (type == 'string' && index in object)
-      ) {
-    return eq$1(object[index], value);
-  }
-  return false;
-}
-
-/**
- * Creates an array of elements split into groups the length of `size`.
- * If `array` can't be split evenly, the final chunk will be the remaining
- * elements.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Array
- * @param {Array} array The array to process.
- * @param {number} [size=1] The length of each chunk
- * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
- * @returns {Array} Returns the new array of chunks.
- * @example
- *
- * _.chunk(['a', 'b', 'c', 'd'], 2);
- * // => [['a', 'b'], ['c', 'd']]
- *
- * _.chunk(['a', 'b', 'c', 'd'], 3);
- * // => [['a', 'b', 'c'], ['d']]
- */
-function chunk(array, size, guard) {
-  if ((guard ? isIterateeCall(array, size, guard) : size === undefined)) {
-    size = 1;
-  } else {
-    size = nativeMax$1(toInteger(size), 0);
-  }
-  var length = array ? array.length : 0;
-  if (!length || size < 1) {
-    return [];
-  }
-  var index = 0,
-      resIndex = 0,
-      result = Array(nativeCeil(length / size));
-
-  while (index < length) {
-    result[resIndex++] = baseSlice(array, index, (index += size));
-  }
-  return result;
-}
-
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq$1(value, other) {
-  return value === other || (value !== value && other !== other);
-}
-
-/**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
-function isArrayLike$1(value) {
-  return value != null && isLength$1(value.length) && !isFunction$1(value);
-}
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction$1(value) {
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 8-9 which returns 'object' for typed array and other constructors.
-  var tag = isObject$1(value) ? objectToString$1.call(value) : '';
-  return tag == funcTag$1 || tag == genTag$1;
-}
-
-/**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This method is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
-function isLength$1(value) {
-  return typeof value == 'number' &&
-    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER$1;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject$1(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike$1(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
- *
- * _.isSymbol('abc');
- * // => false
- */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike$1(value) && objectToString$1.call(value) == symbolTag);
-}
-
-/**
- * Converts `value` to a finite number.
- *
- * @static
- * @memberOf _
- * @since 4.12.0
- * @category Lang
- * @param {*} value The value to convert.
- * @returns {number} Returns the converted number.
- * @example
- *
- * _.toFinite(3.2);
- * // => 3.2
- *
- * _.toFinite(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toFinite(Infinity);
- * // => 1.7976931348623157e+308
- *
- * _.toFinite('3.2');
- * // => 3.2
- */
-function toFinite(value) {
-  if (!value) {
-    return value === 0 ? value : 0;
-  }
-  value = toNumber(value);
-  if (value === INFINITY || value === -INFINITY) {
-    var sign = (value < 0 ? -1 : 1);
-    return sign * MAX_INTEGER;
-  }
-  return value === value ? value : 0;
-}
-
-/**
- * Converts `value` to an integer.
- *
- * **Note:** This method is loosely based on
- * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to convert.
- * @returns {number} Returns the converted integer.
- * @example
- *
- * _.toInteger(3.2);
- * // => 3
- *
- * _.toInteger(Number.MIN_VALUE);
- * // => 0
- *
- * _.toInteger(Infinity);
- * // => 1.7976931348623157e+308
- *
- * _.toInteger('3.2');
- * // => 3
- */
-function toInteger(value) {
-  var result = toFinite(value),
-      remainder = result % 1;
-
-  return result === result ? (remainder ? result - remainder : result) : 0;
-}
-
-/**
- * Converts `value` to a number.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
- *
- * _.toNumber(3.2);
- * // => 3.2
- *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
- *
- * _.toNumber(Infinity);
- * // => Infinity
- *
- * _.toNumber('3.2');
- * // => 3.2
- */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject$1(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject$1(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
-  }
-  value = value.replace(reTrim, '');
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
-}
-
-var lodash_chunk = chunk;
-
-var _chunk = /*@__PURE__*/getDefaultExportFromCjs(lodash_chunk);
-
-/**
- * Two dimensional array grid.
- * Useful to position elements with.
- *
- * Example:
- *
- * new Grid([
- *  [1,2,3],
- *  [4,5,6],
- *  [7,8,9]
- * ])
- *
- */
-class Grid {
-    constructor(grid) {
-        this.grid = grid;
-    }
-    getValues() {
-        return this.grid;
-    }
-    /**
-     * Returns an array of distinct values in this grid
-     */
-    getDistinctValues() {
-        const values = [];
-        this.grid.forEach((row) => {
-            row.forEach((item) => {
-                if (!values.includes(item)) {
-                    values.push(item);
-                }
-            });
-        });
-        return values;
-    }
-    sliceArea(topLeft, bottomRight) {
-        if (topLeft.x > bottomRight.x || topLeft.y > bottomRight.y) {
-            throw new Error("Coordinates are mixed up. Please ensure topLeft is actually in the top-left corner. And bottomRight is actually in the bottom-right corner");
-        }
-        return new Grid(this.grid
-            .slice(topLeft.y, bottomRight.y + 1)
-            .map(row => row.slice(topLeft.x, bottomRight.x + 1)));
-    }
-    getCoordinatesForValue(value) {
-        const x = [];
-        const y = [];
-        this.grid.forEach((row, yIndex) => {
-            row.forEach((item, xIndex) => {
-                if (item === value) {
-                    x.push(xIndex);
-                    y.push(yIndex);
-                }
-            });
-        });
-        return {
-            topLeft: { x: Math.min(...x), y: Math.min(...y) },
-            bottomRight: { x: Math.max(...x), y: Math.max(...y) }
-        };
-    }
-}
-
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as the size to enable large array optimizations. */
-var LARGE_ARRAY_SIZE = 200;
-
-/** Used to stand-in for `undefined` hash values. */
-var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
-/** Used as references for various `Number` constants. */
-var MAX_SAFE_INTEGER = 9007199254740991;
-
-/** `Object#toString` result references. */
-var argsTag = '[object Arguments]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]';
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/**
- * A faster alternative to `Function#apply`, this function invokes `func`
- * with the `this` binding of `thisArg` and the arguments of `args`.
- *
- * @private
- * @param {Function} func The function to invoke.
- * @param {*} thisArg The `this` binding of `func`.
- * @param {Array} args The arguments to invoke `func` with.
- * @returns {*} Returns the result of `func`.
- */
-function apply(func, thisArg, args) {
-  switch (args.length) {
-    case 0: return func.call(thisArg);
-    case 1: return func.call(thisArg, args[0]);
-    case 2: return func.call(thisArg, args[0], args[1]);
-    case 3: return func.call(thisArg, args[0], args[1], args[2]);
-  }
-  return func.apply(thisArg, args);
-}
-
-/**
- * A specialized version of `_.includes` for arrays without support for
- * specifying an index to search from.
- *
- * @private
- * @param {Array} [array] The array to inspect.
- * @param {*} target The value to search for.
- * @returns {boolean} Returns `true` if `target` is found, else `false`.
- */
-function arrayIncludes(array, value) {
-  var length = array ? array.length : 0;
-  return !!length && baseIndexOf(array, value, 0) > -1;
-}
-
-/**
- * This function is like `arrayIncludes` except that it accepts a comparator.
- *
- * @private
- * @param {Array} [array] The array to inspect.
- * @param {*} target The value to search for.
- * @param {Function} comparator The comparator invoked per element.
- * @returns {boolean} Returns `true` if `target` is found, else `false`.
- */
-function arrayIncludesWith(array, value, comparator) {
-  var index = -1,
-      length = array ? array.length : 0;
-
-  while (++index < length) {
-    if (comparator(value, array[index])) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * A specialized version of `_.map` for arrays without support for iteratee
- * shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the new mapped array.
- */
-function arrayMap(array, iteratee) {
-  var index = -1,
-      length = array ? array.length : 0,
-      result = Array(length);
-
-  while (++index < length) {
-    result[index] = iteratee(array[index], index, array);
-  }
-  return result;
-}
-
-/**
- * Appends the elements of `values` to `array`.
- *
- * @private
- * @param {Array} array The array to modify.
- * @param {Array} values The values to append.
- * @returns {Array} Returns `array`.
- */
-function arrayPush(array, values) {
-  var index = -1,
-      length = values.length,
-      offset = array.length;
-
-  while (++index < length) {
-    array[offset + index] = values[index];
-  }
-  return array;
-}
-
-/**
- * The base implementation of `_.findIndex` and `_.findLastIndex` without
- * support for iteratee shorthands.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {Function} predicate The function invoked per iteration.
- * @param {number} fromIndex The index to search from.
- * @param {boolean} [fromRight] Specify iterating from right to left.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
-function baseFindIndex(array, predicate, fromIndex, fromRight) {
-  var length = array.length,
-      index = fromIndex + (fromRight ? 1 : -1);
-
-  while ((fromRight ? index-- : ++index < length)) {
-    if (predicate(array[index], index, array)) {
-      return index;
-    }
-  }
-  return -1;
-}
-
-/**
- * The base implementation of `_.indexOf` without `fromIndex` bounds checks.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {*} value The value to search for.
- * @param {number} fromIndex The index to search from.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
-function baseIndexOf(array, value, fromIndex) {
-  if (value !== value) {
-    return baseFindIndex(array, baseIsNaN, fromIndex);
-  }
-  var index = fromIndex - 1,
-      length = array.length;
-
-  while (++index < length) {
-    if (array[index] === value) {
-      return index;
-    }
-  }
-  return -1;
-}
-
-/**
- * The base implementation of `_.isNaN` without support for number objects.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
- */
-function baseIsNaN(value) {
-  return value !== value;
-}
-
-/**
- * The base implementation of `_.unary` without support for storing metadata.
- *
- * @private
- * @param {Function} func The function to cap arguments for.
- * @returns {Function} Returns the new capped function.
- */
-function baseUnary(func) {
-  return function(value) {
-    return func(value);
-  };
-}
-
-/**
- * Checks if a cache value for `key` exists.
- *
- * @private
- * @param {Object} cache The cache to query.
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function cacheHas(cache, key) {
-  return cache.has(key);
-}
-
-/**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
-function getValue(object, key) {
-  return object == null ? undefined : object[key];
-}
-
-/**
- * Checks if `value` is a host object in IE < 9.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
- */
-function isHostObject(value) {
-  // Many host objects are `Object` objects that can coerce to strings
-  // despite having improperly defined `toString` methods.
-  var result = false;
-  if (value != null && typeof value.toString != 'function') {
-    try {
-      result = !!(value + '');
-    } catch (e) {}
-  }
-  return result;
-}
-
-/** Used for built-in method references. */
-var arrayProto = Array.prototype,
-    funcProto = Function.prototype,
-    objectProto = Object.prototype;
-
-/** Used to detect overreaching core-js shims. */
-var coreJsData = root['__core-js_shared__'];
-
-/** Used to detect methods masquerading as native. */
-var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
-  return uid ? ('Symbol(src)_1.' + uid) : '';
-}());
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
-
-/** Built-in value references. */
-var Symbol = root.Symbol,
-    propertyIsEnumerable = objectProto.propertyIsEnumerable,
-    splice = arrayProto.splice,
-    spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max;
-
-/* Built-in method references that are verified to be native. */
-var Map$1 = getNative(root, 'Map'),
-    nativeCreate = getNative(Object, 'create');
-
-/**
- * Creates a hash object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Hash(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the hash.
- *
- * @private
- * @name clear
- * @memberOf Hash
- */
-function hashClear() {
-  this.__data__ = nativeCreate ? nativeCreate(null) : {};
-}
-
-/**
- * Removes `key` and its value from the hash.
- *
- * @private
- * @name delete
- * @memberOf Hash
- * @param {Object} hash The hash to modify.
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function hashDelete(key) {
-  return this.has(key) && delete this.__data__[key];
-}
-
-/**
- * Gets the hash value for `key`.
- *
- * @private
- * @name get
- * @memberOf Hash
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function hashGet(key) {
-  var data = this.__data__;
-  if (nativeCreate) {
-    var result = data[key];
-    return result === HASH_UNDEFINED ? undefined : result;
-  }
-  return hasOwnProperty.call(data, key) ? data[key] : undefined;
-}
-
-/**
- * Checks if a hash value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Hash
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function hashHas(key) {
-  var data = this.__data__;
-  return nativeCreate ? data[key] !== undefined : hasOwnProperty.call(data, key);
-}
-
-/**
- * Sets the hash `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Hash
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the hash instance.
- */
-function hashSet(key, value) {
-  var data = this.__data__;
-  data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
-  return this;
-}
-
-// Add methods to `Hash`.
-Hash.prototype.clear = hashClear;
-Hash.prototype['delete'] = hashDelete;
-Hash.prototype.get = hashGet;
-Hash.prototype.has = hashHas;
-Hash.prototype.set = hashSet;
-
-/**
- * Creates an list cache object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function ListCache(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the list cache.
- *
- * @private
- * @name clear
- * @memberOf ListCache
- */
-function listCacheClear() {
-  this.__data__ = [];
-}
-
-/**
- * Removes `key` and its value from the list cache.
- *
- * @private
- * @name delete
- * @memberOf ListCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function listCacheDelete(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    return false;
-  }
-  var lastIndex = data.length - 1;
-  if (index == lastIndex) {
-    data.pop();
-  } else {
-    splice.call(data, index, 1);
-  }
-  return true;
-}
-
-/**
- * Gets the list cache value for `key`.
- *
- * @private
- * @name get
- * @memberOf ListCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function listCacheGet(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  return index < 0 ? undefined : data[index][1];
-}
-
-/**
- * Checks if a list cache value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf ListCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function listCacheHas(key) {
-  return assocIndexOf(this.__data__, key) > -1;
-}
-
-/**
- * Sets the list cache `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf ListCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the list cache instance.
- */
-function listCacheSet(key, value) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    data.push([key, value]);
-  } else {
-    data[index][1] = value;
-  }
-  return this;
-}
-
-// Add methods to `ListCache`.
-ListCache.prototype.clear = listCacheClear;
-ListCache.prototype['delete'] = listCacheDelete;
-ListCache.prototype.get = listCacheGet;
-ListCache.prototype.has = listCacheHas;
-ListCache.prototype.set = listCacheSet;
-
-/**
- * Creates a map cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function MapCache(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the map.
- *
- * @private
- * @name clear
- * @memberOf MapCache
- */
-function mapCacheClear() {
-  this.__data__ = {
-    'hash': new Hash,
-    'map': new (Map$1 || ListCache),
-    'string': new Hash
-  };
-}
-
-/**
- * Removes `key` and its value from the map.
- *
- * @private
- * @name delete
- * @memberOf MapCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function mapCacheDelete(key) {
-  return getMapData(this, key)['delete'](key);
-}
-
-/**
- * Gets the map value for `key`.
- *
- * @private
- * @name get
- * @memberOf MapCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function mapCacheGet(key) {
-  return getMapData(this, key).get(key);
-}
-
-/**
- * Checks if a map value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf MapCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function mapCacheHas(key) {
-  return getMapData(this, key).has(key);
-}
-
-/**
- * Sets the map `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf MapCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the map cache instance.
- */
-function mapCacheSet(key, value) {
-  getMapData(this, key).set(key, value);
-  return this;
-}
-
-// Add methods to `MapCache`.
-MapCache.prototype.clear = mapCacheClear;
-MapCache.prototype['delete'] = mapCacheDelete;
-MapCache.prototype.get = mapCacheGet;
-MapCache.prototype.has = mapCacheHas;
-MapCache.prototype.set = mapCacheSet;
-
-/**
- *
- * Creates an array cache object to store unique values.
- *
- * @private
- * @constructor
- * @param {Array} [values] The values to cache.
- */
-function SetCache(values) {
-  var index = -1,
-      length = values ? values.length : 0;
-
-  this.__data__ = new MapCache;
-  while (++index < length) {
-    this.add(values[index]);
-  }
-}
-
-/**
- * Adds `value` to the array cache.
- *
- * @private
- * @name add
- * @memberOf SetCache
- * @alias push
- * @param {*} value The value to cache.
- * @returns {Object} Returns the cache instance.
- */
-function setCacheAdd(value) {
-  this.__data__.set(value, HASH_UNDEFINED);
-  return this;
-}
-
-/**
- * Checks if `value` is in the array cache.
- *
- * @private
- * @name has
- * @memberOf SetCache
- * @param {*} value The value to search for.
- * @returns {number} Returns `true` if `value` is found, else `false`.
- */
-function setCacheHas(value) {
-  return this.__data__.has(value);
-}
-
-// Add methods to `SetCache`.
-SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
-SetCache.prototype.has = setCacheHas;
-
-/**
- * Gets the index at which the `key` is found in `array` of key-value pairs.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {*} key The key to search for.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
-function assocIndexOf(array, key) {
-  var length = array.length;
-  while (length--) {
-    if (eq(array[length][0], key)) {
-      return length;
-    }
-  }
-  return -1;
-}
-
-/**
- * The base implementation of methods like `_.difference` without support
- * for excluding multiple arrays or iteratee shorthands.
- *
- * @private
- * @param {Array} array The array to inspect.
- * @param {Array} values The values to exclude.
- * @param {Function} [iteratee] The iteratee invoked per element.
- * @param {Function} [comparator] The comparator invoked per element.
- * @returns {Array} Returns the new array of filtered values.
- */
-function baseDifference(array, values, iteratee, comparator) {
-  var index = -1,
-      includes = arrayIncludes,
-      isCommon = true,
-      length = array.length,
-      result = [],
-      valuesLength = values.length;
-
-  if (!length) {
-    return result;
-  }
-  if (iteratee) {
-    values = arrayMap(values, baseUnary(iteratee));
-  }
-  if (comparator) {
-    includes = arrayIncludesWith;
-    isCommon = false;
-  }
-  else if (values.length >= LARGE_ARRAY_SIZE) {
-    includes = cacheHas;
-    isCommon = false;
-    values = new SetCache(values);
-  }
-  outer:
-  while (++index < length) {
-    var value = array[index],
-        computed = iteratee ? iteratee(value) : value;
-
-    value = (comparator || value !== 0) ? value : 0;
-    if (isCommon && computed === computed) {
-      var valuesIndex = valuesLength;
-      while (valuesIndex--) {
-        if (values[valuesIndex] === computed) {
-          continue outer;
-        }
-      }
-      result.push(value);
-    }
-    else if (!includes(values, computed, comparator)) {
-      result.push(value);
-    }
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.flatten` with support for restricting flattening.
- *
- * @private
- * @param {Array} array The array to flatten.
- * @param {number} depth The maximum recursion depth.
- * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
- * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
- * @param {Array} [result=[]] The initial result value.
- * @returns {Array} Returns the new flattened array.
- */
-function baseFlatten(array, depth, predicate, isStrict, result) {
-  var index = -1,
-      length = array.length;
-
-  predicate || (predicate = isFlattenable);
-  result || (result = []);
-
-  while (++index < length) {
-    var value = array[index];
-    if (depth > 0 && predicate(value)) {
-      if (depth > 1) {
-        // Recursively flatten arrays (susceptible to call stack limits).
-        baseFlatten(value, depth - 1, predicate, isStrict, result);
-      } else {
-        arrayPush(result, value);
-      }
-    } else if (!isStrict) {
-      result[result.length] = value;
-    }
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- */
-function baseIsNative(value) {
-  if (!isObject(value) || isMasked(value)) {
-    return false;
-  }
-  var pattern = (isFunction(value) || isHostObject(value)) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource(value));
-}
-
-/**
- * The base implementation of `_.rest` which doesn't validate or coerce arguments.
- *
- * @private
- * @param {Function} func The function to apply a rest parameter to.
- * @param {number} [start=func.length-1] The start position of the rest parameter.
- * @returns {Function} Returns the new function.
- */
-function baseRest(func, start) {
-  start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
-  return function() {
-    var args = arguments,
-        index = -1,
-        length = nativeMax(args.length - start, 0),
-        array = Array(length);
-
-    while (++index < length) {
-      array[index] = args[start + index];
-    }
-    index = -1;
-    var otherArgs = Array(start + 1);
-    while (++index < start) {
-      otherArgs[index] = args[index];
-    }
-    otherArgs[start] = array;
-    return apply(func, this, otherArgs);
-  };
-}
-
-/**
- * Gets the data for `map`.
- *
- * @private
- * @param {Object} map The map to query.
- * @param {string} key The reference key.
- * @returns {*} Returns the map data.
- */
-function getMapData(map, key) {
-  var data = map.__data__;
-  return isKeyable(key)
-    ? data[typeof key == 'string' ? 'string' : 'hash']
-    : data.map;
-}
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = getValue(object, key);
-  return baseIsNative(value) ? value : undefined;
-}
-
-/**
- * Checks if `value` is a flattenable `arguments` object or array.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
- */
-function isFlattenable(value) {
-  return isArray(value) || isArguments(value) ||
-    !!(spreadableSymbol && value && value[spreadableSymbol]);
-}
-
-/**
- * Checks if `value` is suitable for use as unique object key.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
- */
-function isKeyable(value) {
-  var type = typeof value;
-  return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
-    ? (value !== '__proto__')
-    : (value === null);
-}
-
-/**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
-function isMasked(func) {
-  return !!maskSrcKey && (maskSrcKey in func);
-}
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to process.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
-}
-
-/**
- * Creates an array of `array` values not included in the other given arrays
- * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * for equality comparisons. The order of result values is determined by the
- * order they occur in the first array.
- *
- * **Note:** Unlike `_.pullAll`, this method returns a new array.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Array
- * @param {Array} array The array to inspect.
- * @param {...Array} [values] The values to exclude.
- * @returns {Array} Returns the new array of filtered values.
- * @see _.without, _.xor
- * @example
- *
- * _.difference([2, 1], [2, 3]);
- * // => [1]
- */
-var difference = baseRest(function(array, values) {
-  return isArrayLikeObject(array)
-    ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true))
-    : [];
-});
-
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq(value, other) {
-  return value === other || (value !== value && other !== other);
-}
-
-/**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- *  else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
-function isArguments(value) {
-  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
-  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
-    (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
-}
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-var isArray = Array.isArray;
-
-/**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
-function isArrayLike(value) {
-  return value != null && isLength(value.length) && !isFunction(value);
-}
-
-/**
- * This method is like `_.isArrayLike` except that it also checks if `value`
- * is an object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array-like object,
- *  else `false`.
- * @example
- *
- * _.isArrayLikeObject([1, 2, 3]);
- * // => true
- *
- * _.isArrayLikeObject(document.body.children);
- * // => true
- *
- * _.isArrayLikeObject('abc');
- * // => false
- *
- * _.isArrayLikeObject(_.noop);
- * // => false
- */
-function isArrayLikeObject(value) {
-  return isObjectLike(value) && isArrayLike(value);
-}
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 8-9 which returns 'object' for typed array and other constructors.
-  var tag = isObject(value) ? objectToString.call(value) : '';
-  return tag == funcTag || tag == genTag;
-}
-
-/**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This method is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
-function isLength(value) {
-  return typeof value == 'number' &&
-    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-var lodash_difference = difference;
-
-var _difference = /*@__PURE__*/getDefaultExportFromCjs(lodash_difference);
-
-/**
- * Makes sure all values in the grid have a rectangular shape.
- * We don't support Tetris types.
- */
-const assertGridIsValid = (availableKeys, grid) => {
-    const distinctValues = grid.getDistinctValues();
-    // Check if all `availableKeys` have a place in the given grid
-    if (distinctValues.length < availableKeys.length) {
-        throw new Error(`Not all given fields are present in the grid. Please add these fields ${_difference(distinctValues, availableKeys).map(_ => `"${_}"`).join(", ")}`);
-    }
-    // We don't support tetris-shaped values:
-    // E.g:
-    // [
-    //  [1,1,1],
-    //  [0,1,0]
-    // ]
-    distinctValues.forEach((value) => {
-        if (!availableKeys.includes(value)) {
-            throw new Error(`${value} is not an existing field. Existing fields are ${availableKeys.map(_ => `"${_}"`).join(", ")}.`);
-        }
-        const coordinates = grid.getCoordinatesForValue(value);
-        const subGrid = grid.sliceArea(coordinates.topLeft, coordinates.bottomRight);
-        const subGridDistinctValues = subGrid.getDistinctValues();
-        if (subGridDistinctValues.length !== 1 || subGridDistinctValues[0] !== value) {
-            throw new Error(`Grid contains an unsupported shape. Please make sure "${value}" has a rectangular shape.`);
-        }
-    });
-    return true;
-};
-
-const equalColumns = (num, buttonGutter) => {
-    const fractions = [...Array(num)].map(_ => "1fr");
-    if (buttonGutter) {
-        fractions.push("auto");
-    }
-    return fractions.join(" ");
-};
-
-class FormPositioner {
-    constructor(fields, columns = {} // -> ignore property, its used to pass along internally.
-    ) {
-        this.fields = fields;
-        this.columns = columns;
-    }
-    /**
-     * Position form elements responsively in a grid.
-     * Example usage:
-     *
-     *
-     * .setGrid("laptop", [                               // Breakpoint from laptop to bigger
-     *    ["title",   "title",        "title"],           // NOTE: title has a colspan of 3
-     *    ["street",  "number",       "city"],
-     *    ["code",    "description",  "description"],     // NOTE: description has a colspan of 2, and a rowspan of 2
-     *    ["status",  "description",  "description"]
-     * ])
-     * .setVertical("mobileS", 1)                         // NOTE: align everything in a single column for mobileS until laptop
-     *
-     */
-    setGrid(breakPoint, columns, arrayGrid) {
-        // We save the columns setting in a different prop.
-        if (typeof this.columns === "object") {
-            this.columns[breakPoint] = columns;
-        }
-        // Wrap array grid in a Grid object.
-        // It has some nice utility functions to work with.
-        const grid = new Grid(arrayGrid);
-        // Make sure the given grid is a valid grid:
-        assertGridIsValid(Object.keys(this.fields), grid);
-        // Update position attributes for the given fields:
-        const fields = immer.produce(this.fields, draftState => {
-            Object
-                .keys(this.fields)
-                .forEach(key => {
-                const fieldProps = draftState[key].props;
-                const { topLeft, bottomRight } = grid.getCoordinatesForValue(key);
-                if (fieldProps.position === undefined) {
-                    fieldProps.position = {};
-                }
-                if (!isResponsiveObject(fieldProps.position)) {
-                    // When there already was a position set, but it wasn't marked responsive,
-                    // We set that value to the lowest breakpoint:
-                    fieldProps.position = { mobile: fieldProps.position };
-                }
-                // Set values to breakpoint.
-                // @ts-ignore
-                fieldProps.position[breakPoint] = {
-                    column: topLeft.x,
-                    columnSpan: bottomRight.x - topLeft.x + 1,
-                    row: topLeft.y,
-                    rowSpan: bottomRight.y - topLeft.y + 1
-                };
-            });
-        });
-        // Return a new formPositioner.
-        // It allows us to chain, while still being immutable.
-        return new FormPositioner(fields, this.columns);
-    }
-    /**
-     * Aligns all input-fields vertically.
-     */
-    setVertical(breakPoint, numColumns = 1, columns) {
-        return this.setGrid(breakPoint, columns !== null && columns !== void 0 ? columns : equalColumns(numColumns, false), _chunk(Object.keys(this.fields), numColumns));
-    }
-    /**
-     * Aligns all input-fields horizontally.
-     */
-    setHorizontal(breakPoint, columns) {
-        const keys = Object.keys(this.fields);
-        return this.setGrid(breakPoint, columns !== null && columns !== void 0 ? columns : equalColumns(keys.length, false), [keys]);
-    }
-    getColumns() {
-        return this.columns;
-    }
-    getFields() {
-        return this.fields;
-    }
-    getScaffoldProps() {
-        return {
-            fields: this.fields,
-            columns: this.columns
-        };
-    }
-}
-
-const ScaffoldFormContext = React.createContext({ factory: undefined });
-const ScaffoldFormProvider = ({ factory, children }) => (React.createElement(ScaffoldFormContext.Provider, { value: { factory: factory } }, children));
-
-const useScaffoldFormContext = () => React.useContext(ScaffoldFormContext);
-
-const getComponent = (field) => {
-    switch (field.type) {
-        case "Button":
-            return Button$1;
-        case "Checkbox":
-            return Checkbox;
-        case "Select":
-            return Select;
-        case "FileField":
-            return FileField;
-        case "PasswordStrengthField":
-            return PasswordStrengthField;
-        case "TextField":
-        default:
-            return TextField;
-    }
-};
-const ScaffoldField = React.forwardRef((_a, ref) => {
-    var { name, field } = _a, restProps = __rest(_a, ["name", "field"]);
-    const { factory } = useScaffoldFormContext();
-    const formGridWrapperProps = getFormGridWrapperProps(field.props);
-    const Component = (factory === null || factory === void 0 ? void 0 : factory(field)) || getComponent(field);
-    // @ts-ignore
-    if (field.type === "TextField" && field.props.type === "hidden") {
-        return React.createElement(Component, Object.assign({ ref: ref, name: name }, restProps, field.props));
-    }
-    return (React.createElement(FormGridWrapper, Object.assign({}, formGridWrapperProps),
-        React.createElement(Component, Object.assign({ ref: ref, name: name, placeholder: field.props.placeholder || formGridWrapperProps.label, className: clsx(!!formGridWrapperProps.error && 'error', field.props.className) }, restProps, field.props))));
-});
-
-const ScaffoldForm = React.forwardRef((_a, ref) => {
-    var { children, columns, fields, prefixFieldNames } = _a, restProps = __rest(_a, ["children", "columns", "fields", "prefixFieldNames"]);
-    return (React.createElement(FormGrid, { columns: columns },
-        Object
-            .entries(fields)
-            .map(([key, fieldProps]) => (
-        // @ts-ignore
-        React.createElement(ScaffoldField, Object.assign({ name: `${prefixFieldNames !== null && prefixFieldNames !== void 0 ? prefixFieldNames : ''}${key}`, key: key, field: fieldProps, ref: ref }, restProps)))),
-        children));
-});
-
-exports.Alert = Alert;
-exports.AnimatedCheckmark = AnimatedCheckmark;
-exports.BasicLayout = BasicLayout;
-exports.Box = Box;
-exports.BreadCrumbs = BreadCrumbs;
-exports.BreakPointValues = BreakPointValues;
-exports.Button = Button$1;
-exports.Checkbox = Checkbox;
-exports.CollapsiblePanel = CollapsiblePanel;
-exports.ConfirmButton = ConfirmButton;
-exports.ConfirmModal = ConfirmModal;
-exports.Crumb = Crumb;
-exports.Details = Details;
-exports.Dropdown = Dropdown;
-exports.DropdownMenu = DropdownMenu;
-exports.DropdownMenuItem = DropdownMenuItem;
-exports.Dropzone = Dropzone;
-exports.Feedback = Feedback;
-exports.FileField = FileField;
-exports.Floater = Floater;
-exports.FloatingPanelLayout = FloatingPanelLayout;
-exports.Footer = Footer;
-exports.FormGrid = FormGrid;
-exports.FormGridWrapper = FormGridWrapper;
-exports.FormPositioner = FormPositioner;
-exports.HamburgerButton = HamburgerButton;
-exports.Header = Header;
-exports.HorizontalScroller = HorizontalScroller;
-exports.Menu = Menu;
-exports.MenuCloseButton = MenuCloseButton;
-exports.MenuItem = MenuItem;
-exports.MenuSlideOpenIndicator = MenuSlideOpenIndicator;
-exports.Modal = Modal;
-exports.Overlay = Overlay;
-exports.Paginator = Paginator;
-exports.Panel = Panel;
-exports.Paragraph = Paragraph;
-exports.PasswordStrengthField = PasswordStrengthField;
-exports.ScaffoldForm = ScaffoldForm;
-exports.ScaffoldFormContext = ScaffoldFormContext;
-exports.ScaffoldFormProvider = ScaffoldFormProvider;
-exports.Section = Section;
-exports.Select = Select;
-exports.SideBarHeader = SideBarHeader;
-exports.SimpleTimeline = SimpleTimeline;
-exports.SlideInFromTop = SlideInFromTop;
-exports.Statistic = Statistic;
-exports.StyledTable = StyledTable;
-exports.Tab = Tab;
-exports.TabContent = TabContent;
-exports.Table = Table;
-exports.Tabs = Tabs;
-exports.TextField = TextField;
-exports.Timeline = Timeline;
-exports.TopBar = TopBar;
-exports.UiProvider = UiProvider;
-exports.UiWrapper = UiWrapper;
-exports.VerticalRhythmLaptop = VerticalRhythmLaptop;
-exports.VerticalRhythmMobile = VerticalRhythmMobile;
-exports.calculatePasswordScore = calculatePasswordScore;
-exports.getFormGridWrapperProps = getFormGridWrapperProps;
-exports.isResponsiveObject = isResponsiveObject;
-exports.mq = mq;
-exports.passwordHasLowerAndUppercase = passwordHasLowerAndUppercase;
-exports.passwordHasNumbers = passwordHasNumbers;
-exports.passwordHasSpecialChars = passwordHasSpecialChars;
-exports.passwordMinLength = passwordMinLength;
-exports.responsiveProps = responsiveProps;
-exports.theme = theme;
-exports.useCloseSidebarOnNavigate = useCloseSidebarOnNavigate;
-exports.useResponsiveBreakpoints = useResponsiveBreakpoints;
-exports.useToggleMobileMenu = useToggleMobileMenu;