quicksnack 3.35.1 → 3.35.2

package/dist/bundle.js

@@ -0,0 +1,4751 @@
+'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, SuppressedError, Symbol */
+
+
+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;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  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 ? Object.setPrototypeOf.bind() : 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.bind() : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _isNativeFunction(fn) {
+  try {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+  } catch (e) {
+    return typeof fn === "function";
+  }
+}
+
+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.bind();
+  } else {
+    _construct = function _construct(Parent, args, Class) {
+      var a = [null];
+      a.push.apply(a, args);
+      var Constructor = Function.bind.apply(Parent, a);
+      var instance = new Constructor();
+      if (Class) _setPrototypeOf(instance, Class.prototype);
+      return instance;
+    };
+  }
+  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" }))));
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".BreadCrumbs-module_breadcrumbs__-UMJj {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display:flex;\n}\n\n.BreadCrumbs-module_crumb__SSW-t {\n    display: flex;\n\n    &:not(:last-of-type):after {\n        content: \"/\";\n        color: var(--colors-gray);\n        line-height: 1em;\n        margin: auto auto;\n        padding: 0 var(--spacing-2) 0 0;\n    }\n}";
+var classes = {"breadcrumbs":"BreadCrumbs-module_breadcrumbs__-UMJj","crumb":"BreadCrumbs-module_crumb__SSW-t"};
+styleInject(css_248z);
+
+const BreadCrumbs = (props) => React.createElement("ul", Object.assign({ className: classes.breadcrumbs }, props));
+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;