wex-ui-lib 1.0.2 → 1.0.4

package/dist/index.cjs.js

@@ -0,0 +1,2296 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/******************************************************************************
+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, Iterator */
+
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+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() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+/*
+
+Based off glamor's StyleSheet, thanks Sunil ❤️
+
+high performance StyleSheet for css-in-js systems
+
+- uses multiple style tags behind the scenes for millions of rules
+- uses `insertRule` for appending in production for *much* faster performance
+
+// usage
+
+import { StyleSheet } from '@emotion/sheet'
+
+let styleSheet = new StyleSheet({ key: '', container: document.head })
+
+styleSheet.insert('#box { border: 1px solid red; }')
+- appends a css rule into the stylesheet
+
+styleSheet.flush()
+- empties the stylesheet of all its contents
+
+*/
+
+function sheetForTag(tag) {
+  if (tag.sheet) {
+    return tag.sheet;
+  } // this weirdness brought to you by firefox
+
+  /* istanbul ignore next */
+
+
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    if (document.styleSheets[i].ownerNode === tag) {
+      return document.styleSheets[i];
+    }
+  } // this function should always return with a value
+  // TS can't understand it though so we make it stop complaining here
+
+
+  return undefined;
+}
+
+function createStyleElement(options) {
+  var tag = document.createElement('style');
+  tag.setAttribute('data-emotion', options.key);
+
+  if (options.nonce !== undefined) {
+    tag.setAttribute('nonce', options.nonce);
+  }
+
+  tag.appendChild(document.createTextNode(''));
+  tag.setAttribute('data-s', '');
+  return tag;
+}
+
+var StyleSheet = /*#__PURE__*/function () {
+  // Using Node instead of HTMLElement since container may be a ShadowRoot
+  function StyleSheet(options) {
+    var _this = this;
+
+    this._insertTag = function (tag) {
+      var before;
+
+      if (_this.tags.length === 0) {
+        if (_this.insertionPoint) {
+          before = _this.insertionPoint.nextSibling;
+        } else if (_this.prepend) {
+          before = _this.container.firstChild;
+        } else {
+          before = _this.before;
+        }
+      } else {
+        before = _this.tags[_this.tags.length - 1].nextSibling;
+      }
+
+      _this.container.insertBefore(tag, before);
+
+      _this.tags.push(tag);
+    };
+
+    this.isSpeedy = options.speedy === undefined ? true : options.speedy;
+    this.tags = [];
+    this.ctr = 0;
+    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
+
+    this.key = options.key;
+    this.container = options.container;
+    this.prepend = options.prepend;
+    this.insertionPoint = options.insertionPoint;
+    this.before = null;
+  }
+
+  var _proto = StyleSheet.prototype;
+
+  _proto.hydrate = function hydrate(nodes) {
+    nodes.forEach(this._insertTag);
+  };
+
+  _proto.insert = function insert(rule) {
+    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
+    // it's 1 in dev because we insert source maps that map a single rule to a location
+    // and you can only have one source map per style tag
+    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
+      this._insertTag(createStyleElement(this));
+    }
+
+    var tag = this.tags[this.tags.length - 1];
+
+    if (this.isSpeedy) {
+      var sheet = sheetForTag(tag);
+
+      try {
+        // this is the ultrafast version, works across browsers
+        // the big drawback is that the css won't be editable in devtools
+        sheet.insertRule(rule, sheet.cssRules.length);
+      } catch (e) {
+      }
+    } else {
+      tag.appendChild(document.createTextNode(rule));
+    }
+
+    this.ctr++;
+  };
+
+  _proto.flush = function flush() {
+    this.tags.forEach(function (tag) {
+      var _tag$parentNode;
+
+      return (_tag$parentNode = tag.parentNode) == null ? undefined : _tag$parentNode.removeChild(tag);
+    });
+    this.tags = [];
+    this.ctr = 0;
+  };
+
+  return StyleSheet;
+}();
+
+var MS = '-ms-';
+var MOZ = '-moz-';
+var WEBKIT = '-webkit-';
+
+var COMMENT = 'comm';
+var RULESET = 'rule';
+var DECLARATION = 'decl';
+var IMPORT = '@import';
+var KEYFRAMES = '@keyframes';
+var LAYER = '@layer';
+
+/**
+ * @param {number}
+ * @return {number}
+ */
+var abs = Math.abs;
+
+/**
+ * @param {number}
+ * @return {string}
+ */
+var from = String.fromCharCode;
+
+/**
+ * @param {object}
+ * @return {object}
+ */
+var assign = Object.assign;
+
+/**
+ * @param {string} value
+ * @param {number} length
+ * @return {number}
+ */
+function hash (value, length) {
+	return charat(value, 0) ^ 45 ? (((((((length << 2) ^ charat(value, 0)) << 2) ^ charat(value, 1)) << 2) ^ charat(value, 2)) << 2) ^ charat(value, 3) : 0
+}
+
+/**
+ * @param {string} value
+ * @return {string}
+ */
+function trim (value) {
+	return value.trim()
+}
+
+/**
+ * @param {string} value
+ * @param {RegExp} pattern
+ * @return {string?}
+ */
+function match (value, pattern) {
+	return (value = pattern.exec(value)) ? value[0] : value
+}
+
+/**
+ * @param {string} value
+ * @param {(string|RegExp)} pattern
+ * @param {string} replacement
+ * @return {string}
+ */
+function replace (value, pattern, replacement) {
+	return value.replace(pattern, replacement)
+}
+
+/**
+ * @param {string} value
+ * @param {string} search
+ * @return {number}
+ */
+function indexof (value, search) {
+	return value.indexOf(search)
+}
+
+/**
+ * @param {string} value
+ * @param {number} index
+ * @return {number}
+ */
+function charat (value, index) {
+	return value.charCodeAt(index) | 0
+}
+
+/**
+ * @param {string} value
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function substr (value, begin, end) {
+	return value.slice(begin, end)
+}
+
+/**
+ * @param {string} value
+ * @return {number}
+ */
+function strlen (value) {
+	return value.length
+}
+
+/**
+ * @param {any[]} value
+ * @return {number}
+ */
+function sizeof (value) {
+	return value.length
+}
+
+/**
+ * @param {any} value
+ * @param {any[]} array
+ * @return {any}
+ */
+function append (value, array) {
+	return array.push(value), value
+}
+
+/**
+ * @param {string[]} array
+ * @param {function} callback
+ * @return {string}
+ */
+function combine (array, callback) {
+	return array.map(callback).join('')
+}
+
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = '';
+
+/**
+ * @param {string} value
+ * @param {object | null} root
+ * @param {object | null} parent
+ * @param {string} type
+ * @param {string[] | string} props
+ * @param {object[] | string} children
+ * @param {number} length
+ */
+function node (value, root, parent, type, props, children, length) {
+	return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''}
+}
+
+/**
+ * @param {object} root
+ * @param {object} props
+ * @return {object}
+ */
+function copy (root, props) {
+	return assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props)
+}
+
+/**
+ * @return {number}
+ */
+function char () {
+	return character
+}
+
+/**
+ * @return {number}
+ */
+function prev () {
+	character = position > 0 ? charat(characters, --position) : 0;
+
+	if (column--, character === 10)
+		column = 1, line--;
+
+	return character
+}
+
+/**
+ * @return {number}
+ */
+function next () {
+	character = position < length ? charat(characters, position++) : 0;
+
+	if (column++, character === 10)
+		column = 1, line++;
+
+	return character
+}
+
+/**
+ * @return {number}
+ */
+function peek () {
+	return charat(characters, position)
+}
+
+/**
+ * @return {number}
+ */
+function caret () {
+	return position
+}
+
+/**
+ * @param {number} begin
+ * @param {number} end
+ * @return {string}
+ */
+function slice (begin, end) {
+	return substr(characters, begin, end)
+}
+
+/**
+ * @param {number} type
+ * @return {number}
+ */
+function token (type) {
+	switch (type) {
+		// \0 \t \n \r \s whitespace token
+		case 0: case 9: case 10: case 13: case 32:
+			return 5
+		// ! + , / > @ ~ isolate token
+		case 33: case 43: case 44: case 47: case 62: case 64: case 126:
+		// ; { } breakpoint token
+		case 59: case 123: case 125:
+			return 4
+		// : accompanied token
+		case 58:
+			return 3
+		// " ' ( [ opening delimit token
+		case 34: case 39: case 40: case 91:
+			return 2
+		// ) ] closing delimit token
+		case 41: case 93:
+			return 1
+	}
+
+	return 0
+}
+
+/**
+ * @param {string} value
+ * @return {any[]}
+ */
+function alloc (value) {
+	return line = column = 1, length = strlen(characters = value), position = 0, []
+}
+
+/**
+ * @param {any} value
+ * @return {any}
+ */
+function dealloc (value) {
+	return characters = '', value
+}
+
+/**
+ * @param {number} type
+ * @return {string}
+ */
+function delimit (type) {
+	return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)))
+}
+
+/**
+ * @param {number} type
+ * @return {string}
+ */
+function whitespace (type) {
+	while (character = peek())
+		if (character < 33)
+			next();
+		else
+			break
+
+	return token(type) > 2 || token(character) > 3 ? '' : ' '
+}
+
+/**
+ * @param {number} index
+ * @param {number} count
+ * @return {string}
+ */
+function escaping (index, count) {
+	while (--count && next())
+		// not 0-9 A-F a-f
+		if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97))
+			break
+
+	return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32))
+}
+
+/**
+ * @param {number} type
+ * @return {number}
+ */
+function delimiter (type) {
+	while (next())
+		switch (character) {
+			// ] ) " '
+			case type:
+				return position
+			// " '
+			case 34: case 39:
+				if (type !== 34 && type !== 39)
+					delimiter(character);
+				break
+			// (
+			case 40:
+				if (type === 41)
+					delimiter(type);
+				break
+			// \
+			case 92:
+				next();
+				break
+		}
+
+	return position
+}
+
+/**
+ * @param {number} type
+ * @param {number} index
+ * @return {number}
+ */
+function commenter (type, index) {
+	while (next())
+		// //
+		if (type + character === 47 + 10)
+			break
+		// /*
+		else if (type + character === 42 + 42 && peek() === 47)
+			break
+
+	return '/*' + slice(index, position - 1) + '*' + from(type === 47 ? type : next())
+}
+
+/**
+ * @param {number} index
+ * @return {string}
+ */
+function identifier (index) {
+	while (!token(peek()))
+		next();
+
+	return slice(index, position)
+}
+
+/**
+ * @param {string} value
+ * @return {object[]}
+ */
+function compile (value) {
+	return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value))
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {string[]} rule
+ * @param {string[]} rules
+ * @param {string[]} rulesets
+ * @param {number[]} pseudo
+ * @param {number[]} points
+ * @param {string[]} declarations
+ * @return {object}
+ */
+function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
+	var index = 0;
+	var offset = 0;
+	var length = pseudo;
+	var atrule = 0;
+	var property = 0;
+	var previous = 0;
+	var variable = 1;
+	var scanning = 1;
+	var ampersand = 1;
+	var character = 0;
+	var type = '';
+	var props = rules;
+	var children = rulesets;
+	var reference = rule;
+	var characters = type;
+
+	while (scanning)
+		switch (previous = character, character = next()) {
+			// (
+			case 40:
+				if (previous != 108 && charat(characters, length - 1) == 58) {
+					if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -1)
+						ampersand = -1;
+					break
+				}
+			// " ' [
+			case 34: case 39: case 91:
+				characters += delimit(character);
+				break
+			// \t \n \r \s
+			case 9: case 10: case 13: case 32:
+				characters += whitespace(previous);
+				break
+			// \
+			case 92:
+				characters += escaping(caret() - 1, 7);
+				continue
+			// /
+			case 47:
+				switch (peek()) {
+					case 42: case 47:
+						append(comment(commenter(next(), caret()), root, parent), declarations);
+						break
+					default:
+						characters += '/';
+				}
+				break
+			// {
+			case 123 * variable:
+				points[index++] = strlen(characters) * ampersand;
+			// } ; \0
+			case 125 * variable: case 59: case 0:
+				switch (character) {
+					// \0 }
+					case 0: case 125: scanning = 0;
+					// ;
+					case 59 + offset: if (ampersand == -1) characters = replace(characters, /\f/g, '');
+						if (property > 0 && (strlen(characters) - length))
+							append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations);
+						break
+					// @ ;
+					case 59: characters += ';';
+					// { rule/at-rule
+					default:
+						append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets);
+
+						if (character === 123)
+							if (offset === 0)
+								parse(characters, root, reference, reference, props, rulesets, length, points, children);
+							else
+								switch (atrule === 99 && charat(characters, 3) === 110 ? 100 : atrule) {
+									// d l m s
+									case 100: case 108: case 109: case 115:
+										parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children);
+										break
+									default:
+										parse(characters, reference, reference, reference, [''], children, 0, points, children);
+								}
+				}
+
+				index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo;
+				break
+			// :
+			case 58:
+				length = 1 + strlen(characters), property = previous;
+			default:
+				if (variable < 1)
+					if (character == 123)
+						--variable;
+					else if (character == 125 && variable++ == 0 && prev() == 125)
+						continue
+
+				switch (characters += from(character), character * variable) {
+					// &
+					case 38:
+						ampersand = offset > 0 ? 1 : (characters += '\f', -1);
+						break
+					// ,
+					case 44:
+						points[index++] = (strlen(characters) - 1) * ampersand, ampersand = 1;
+						break
+					// @
+					case 64:
+						// -
+						if (peek() === 45)
+							characters += delimit(next());
+
+						atrule = peek(), offset = length = strlen(type = characters += identifier(caret())), character++;
+						break
+					// -
+					case 45:
+						if (previous === 45 && strlen(characters) == 2)
+							variable = 0;
+				}
+		}
+
+	return rulesets
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {number} index
+ * @param {number} offset
+ * @param {string[]} rules
+ * @param {number[]} points
+ * @param {string} type
+ * @param {string[]} props
+ * @param {string[]} children
+ * @param {number} length
+ * @return {object}
+ */
+function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) {
+	var post = offset - 1;
+	var rule = offset === 0 ? rules : [''];
+	var size = sizeof(rule);
+
+	for (var i = 0, j = 0, k = 0; i < index; ++i)
+		for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x)
+			if (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\f/g, rule[x])))
+				props[k++] = z;
+
+	return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length)
+}
+
+/**
+ * @param {number} value
+ * @param {object} root
+ * @param {object?} parent
+ * @return {object}
+ */
+function comment (value, root, parent) {
+	return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0)
+}
+
+/**
+ * @param {string} value
+ * @param {object} root
+ * @param {object?} parent
+ * @param {number} length
+ * @return {object}
+ */
+function declaration (value, root, parent, length) {
+	return node(value, root, parent, DECLARATION, substr(value, 0, length), substr(value, length + 1, -1), length)
+}
+
+/**
+ * @param {object[]} children
+ * @param {function} callback
+ * @return {string}
+ */
+function serialize (children, callback) {
+	var output = '';
+	var length = sizeof(children);
+
+	for (var i = 0; i < length; i++)
+		output += callback(children[i], i, children, callback) || '';
+
+	return output
+}
+
+/**
+ * @param {object} element
+ * @param {number} index
+ * @param {object[]} children
+ * @param {function} callback
+ * @return {string}
+ */
+function stringify (element, index, children, callback) {
+	switch (element.type) {
+		case LAYER: if (element.children.length) break
+		case IMPORT: case DECLARATION: return element.return = element.return || element.value
+		case COMMENT: return ''
+		case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}'
+		case RULESET: element.value = element.props.join(',');
+	}
+
+	return strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : ''
+}
+
+/**
+ * @param {function[]} collection
+ * @return {function}
+ */
+function middleware (collection) {
+	var length = sizeof(collection);
+
+	return function (element, index, children, callback) {
+		var output = '';
+
+		for (var i = 0; i < length; i++)
+			output += collection[i](element, index, children, callback) || '';
+
+		return output
+	}
+}
+
+/**
+ * @param {function} callback
+ * @return {function}
+ */
+function rulesheet (callback) {
+	return function (element) {
+		if (!element.root)
+			if (element = element.return)
+				callback(element);
+	}
+}
+
+var weakMemoize = function weakMemoize(func) {
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // Use non-null assertion because we just checked that the cache `has` it
+      // This allows us to remove `undefined` from the return value
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
+function memoize(fn) {
+  var cache = Object.create(null);
+  return function (arg) {
+    if (cache[arg] === undefined) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+var isBrowser$4 = typeof document !== 'undefined';
+
+var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
+  var previous = 0;
+  var character = 0;
+
+  while (true) {
+    previous = character;
+    character = peek(); // &\f
+
+    if (previous === 38 && character === 12) {
+      points[index] = 1;
+    }
+
+    if (token(character)) {
+      break;
+    }
+
+    next();
+  }
+
+  return slice(begin, position);
+};
+
+var toRules = function toRules(parsed, points) {
+  // pretend we've started with a comma
+  var index = -1;
+  var character = 44;
+
+  do {
+    switch (token(character)) {
+      case 0:
+        // &\f
+        if (character === 38 && peek() === 12) {
+          // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings
+          // stylis inserts \f after & to know when & where it should replace this sequence with the context selector
+          // and when it should just concatenate the outer and inner selectors
+          // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here
+          points[index] = 1;
+        }
+
+        parsed[index] += identifierWithPointTracking(position - 1, points, index);
+        break;
+
+      case 2:
+        parsed[index] += delimit(character);
+        break;
+
+      case 4:
+        // comma
+        if (character === 44) {
+          // colon
+          parsed[++index] = peek() === 58 ? '&\f' : '';
+          points[index] = parsed[index].length;
+          break;
+        }
+
+      // fallthrough
+
+      default:
+        parsed[index] += from(character);
+    }
+  } while (character = next());
+
+  return parsed;
+};
+
+var getRules = function getRules(value, points) {
+  return dealloc(toRules(alloc(value), points));
+}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11
+
+
+var fixedElements = /* #__PURE__ */new WeakMap();
+var compat = function compat(element) {
+  if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo
+  // negative .length indicates that this rule has been already prefixed
+  element.length < 1) {
+    return;
+  }
+
+  var value = element.value;
+  var parent = element.parent;
+  var isImplicitRule = element.column === parent.column && element.line === parent.line;
+
+  while (parent.type !== 'rule') {
+    parent = parent.parent;
+    if (!parent) return;
+  } // short-circuit for the simplest case
+
+
+  if (element.props.length === 1 && value.charCodeAt(0) !== 58
+  /* colon */
+  && !fixedElements.get(parent)) {
+    return;
+  } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level)
+  // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent"
+
+
+  if (isImplicitRule) {
+    return;
+  }
+
+  fixedElements.set(element, true);
+  var points = [];
+  var rules = getRules(value, points);
+  var parentRules = parent.props;
+
+  for (var i = 0, k = 0; i < rules.length; i++) {
+    for (var j = 0; j < parentRules.length; j++, k++) {
+      element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i];
+    }
+  }
+};
+var removeLabel = function removeLabel(element) {
+  if (element.type === 'decl') {
+    var value = element.value;
+
+    if ( // charcode for l
+    value.charCodeAt(0) === 108 && // charcode for b
+    value.charCodeAt(2) === 98) {
+      // this ignores label
+      element["return"] = '';
+      element.value = '';
+    }
+  }
+};
+
+/* eslint-disable no-fallthrough */
+
+function prefix(value, length) {
+  switch (hash(value, length)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + 'print-' + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921: // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005: // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite,
+
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855: // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+      return WEBKIT + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    // flex, flex-direction
+
+    case 6828:
+    case 4268:
+      return WEBKIT + value + MS + value + value;
+    // order
+
+    case 6165:
+      return WEBKIT + value + MS + 'flex-' + value + value;
+    // align-items
+
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value;
+    // align-self
+
+    case 5443:
+      return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value;
+    // align-content
+
+    case 4675:
+      return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value;
+    // flex-shrink
+
+    case 5548:
+      return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value;
+    // flex-basis
+
+    case 5292:
+      return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value;
+    // flex-grow
+
+    case 6060:
+      return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value;
+    // transition
+
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value;
+    // cursor
+
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value;
+    // background, background-image
+
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1');
+    // justify-content
+
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value;
+    // (margin|padding)-inline-(start|end)
+
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value;
+    // (min|max)?(width|height|inline-size|block-size)
+
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6) switch (charat(value, length + 1)) {
+        // (m)ax-content, (m)in-content
+        case 109:
+          // -
+          if (charat(value, length + 4) !== 45) break;
+        // (f)ill-available, (f)it-content
+
+        case 102:
+          return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value;
+        // (s)tretch
+
+        case 115:
+          return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value;
+      }
+      break;
+    // position: sticky
+
+    case 4949:
+      // (s)ticky?
+      if (charat(value, length + 1) !== 115) break;
+    // display: (flex|inline-flex)
+
+    case 6444:
+      switch (charat(value, strlen(value) - 3 - (~indexof(value, '!important') && 10))) {
+        // stic(k)y
+        case 107:
+          return replace(value, ':', ':' + WEBKIT) + value;
+        // (inline-)?fl(e)x
+
+        case 101:
+          return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value;
+      }
+
+      break;
+    // writing-mode
+
+    case 5936:
+      switch (charat(value, length + 11)) {
+        // vertical-l(r)
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value;
+        // vertical-r(l)
+
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value;
+        // horizontal(-)tb
+
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value;
+      }
+
+      return WEBKIT + value + MS + value + value;
+  }
+
+  return value;
+}
+
+var prefixer = function prefixer(element, index, children, callback) {
+  if (element.length > -1) if (!element["return"]) switch (element.type) {
+    case DECLARATION:
+      element["return"] = prefix(element.value, element.length);
+      break;
+
+    case KEYFRAMES:
+      return serialize([copy(element, {
+        value: replace(element.value, '@', '@' + WEBKIT)
+      })], callback);
+
+    case RULESET:
+      if (element.length) return combine(element.props, function (value) {
+        switch (match(value, /(::plac\w+|:read-\w+)/)) {
+          // :read-(only|write)
+          case ':read-only':
+          case ':read-write':
+            return serialize([copy(element, {
+              props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]
+            })], callback);
+          // :placeholder
+
+          case '::placeholder':
+            return serialize([copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]
+            }), copy(element, {
+              props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]
+            })], callback);
+        }
+
+        return '';
+      });
+  }
+};
+
+var getServerStylisCache = isBrowser$4 ? undefined : weakMemoize(function () {
+  return memoize(function () {
+    return {};
+  });
+});
+var defaultStylisPlugins = [prefixer];
+
+var createCache = function createCache(options) {
+  var key = options.key;
+
+  if (isBrowser$4 && key === 'css') {
+    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
+    // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be)
+    // note this very very intentionally targets all style elements regardless of the key to ensure
+    // that creating a cache works inside of render of a React component
+
+    Array.prototype.forEach.call(ssrStyles, function (node) {
+      // we want to only move elements which have a space in the data-emotion attribute value
+      // because that indicates that it is an Emotion 11 server-side rendered style elements
+      // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector
+      // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes)
+      // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles
+      // will not result in the Emotion 10 styles being destroyed
+      var dataEmotionAttribute = node.getAttribute('data-emotion');
+
+      if (dataEmotionAttribute.indexOf(' ') === -1) {
+        return;
+      }
+
+      document.head.appendChild(node);
+      node.setAttribute('data-s', '');
+    });
+  }
+
+  var stylisPlugins = options.stylisPlugins || defaultStylisPlugins;
+
+  var inserted = {};
+  var container;
+  var nodesToHydrate = [];
+
+  if (isBrowser$4) {
+    container = options.container || document.head;
+    Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which
+    // means that the style elements we're looking at are only Emotion 11 server-rendered style elements
+    document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) {
+      var attrib = node.getAttribute("data-emotion").split(' ');
+
+      for (var i = 1; i < attrib.length; i++) {
+        inserted[attrib[i]] = true;
+      }
+
+      nodesToHydrate.push(node);
+    });
+  }
+
+  var _insert;
+
+  var omnipresentPlugins = [compat, removeLabel];
+
+  if (!getServerStylisCache) {
+    var currentSheet;
+    var finalizingPlugins = [stringify, rulesheet(function (rule) {
+      currentSheet.insert(rule);
+    })];
+    var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
+
+    var stylis = function stylis(styles) {
+      return serialize(compile(styles), serializer);
+    };
+
+    _insert = function insert(selector, serialized, sheet, shouldCache) {
+      currentSheet = sheet;
+
+      stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+
+      if (shouldCache) {
+        cache.inserted[serialized.name] = true;
+      }
+    };
+  } else {
+    var _finalizingPlugins = [stringify];
+
+    var _serializer = middleware(omnipresentPlugins.concat(stylisPlugins, _finalizingPlugins));
+
+    var _stylis = function _stylis(styles) {
+      return serialize(compile(styles), _serializer);
+    };
+
+    var serverStylisCache = getServerStylisCache(stylisPlugins)(key);
+
+    var getRules = function getRules(selector, serialized) {
+      var name = serialized.name;
+
+      if (serverStylisCache[name] === undefined) {
+        serverStylisCache[name] = _stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles);
+      }
+
+      return serverStylisCache[name];
+    };
+
+    _insert = function _insert(selector, serialized, sheet, shouldCache) {
+      var name = serialized.name;
+      var rules = getRules(selector, serialized);
+
+      if (cache.compat === undefined) {
+        // in regular mode, we don't set the styles on the inserted cache
+        // since we don't need to and that would be wasting memory
+        // we return them so that they are rendered in a style tag
+        if (shouldCache) {
+          cache.inserted[name] = true;
+        }
+
+        return rules;
+      } else {
+        // in compat mode, we put the styles on the inserted cache so
+        // that emotion-server can pull out the styles
+        // except when we don't want to cache it which was in Global but now
+        // is nowhere but we don't want to do a major right now
+        // and just in case we're going to leave the case here
+        // it's also not affecting client side bundle size
+        // so it's really not a big deal
+        if (shouldCache) {
+          cache.inserted[name] = rules;
+        } else {
+          return rules;
+        }
+      }
+    };
+  }
+
+  var cache = {
+    key: key,
+    sheet: new StyleSheet({
+      key: key,
+      container: container,
+      nonce: options.nonce,
+      speedy: options.speedy,
+      prepend: options.prepend,
+      insertionPoint: options.insertionPoint
+    }),
+    nonce: options.nonce,
+    inserted: inserted,
+    registered: {},
+    insert: _insert
+  };
+  cache.sheet.hydrate(nodesToHydrate);
+  return cache;
+};
+
+var isBrowser$3 = typeof document !== 'undefined';
+
+function getRegisteredStyles(registered, registeredStyles, classNames) {
+  var rawClassName = '';
+  classNames.split(' ').forEach(function (className) {
+    if (registered[className] !== undefined) {
+      registeredStyles.push(registered[className] + ";");
+    } else if (className) {
+      rawClassName += className + " ";
+    }
+  });
+  return rawClassName;
+}
+var registerStyles = function registerStyles(cache, serialized, isStringTag) {
+  var className = cache.key + "-" + serialized.name;
+
+  if ( // we only need to add the styles to the registered cache if the
+  // class name could be used further down
+  // the tree but if it's a string tag, we know it won't
+  // so we don't have to add it to registered cache.
+  // this improves memory usage since we can avoid storing the whole style string
+  (isStringTag === false || // we need to always store it if we're in compat mode and
+  // in node since emotion-server relies on whether a style is in
+  // the registered cache to know whether a style is global or not
+  // also, note that this check will be dead code eliminated in the browser
+  isBrowser$3 === false && cache.compat !== undefined) && cache.registered[className] === undefined) {
+    cache.registered[className] = serialized.styles;
+  }
+};
+var insertStyles = function insertStyles(cache, serialized, isStringTag) {
+  registerStyles(cache, serialized, isStringTag);
+  var className = cache.key + "-" + serialized.name;
+
+  if (cache.inserted[serialized.name] === undefined) {
+    var stylesForSSR = '';
+    var current = serialized;
+
+    do {
+      var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true);
+
+      if (!isBrowser$3 && maybeStyles !== undefined) {
+        stylesForSSR += maybeStyles;
+      }
+
+      current = current.next;
+    } while (current !== undefined);
+
+    if (!isBrowser$3 && stylesForSSR.length !== 0) {
+      return stylesForSSR;
+    }
+  }
+};
+
+/* eslint-disable */
+// Inspired by https://github.com/garycourt/murmurhash-js
+// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86
+function murmur2(str) {
+  // 'm' and 'r' are mixing constants generated offline.
+  // They're not really 'magic', they just happen to work well.
+  // const m = 0x5bd1e995;
+  // const r = 24;
+  // Initialize the hash
+  var h = 0; // Mix 4 bytes at a time into the hash
+
+  var k,
+      i = 0,
+      len = str.length;
+
+  for (; len >= 4; ++i, len -= 4) {
+    k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24;
+    k =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16);
+    k ^=
+    /* k >>> r: */
+    k >>> 24;
+    h =
+    /* Math.imul(k, m): */
+    (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^
+    /* Math.imul(h, m): */
+    (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Handle the last few bytes of the input array
+
+
+  switch (len) {
+    case 3:
+      h ^= (str.charCodeAt(i + 2) & 0xff) << 16;
+
+    case 2:
+      h ^= (str.charCodeAt(i + 1) & 0xff) << 8;
+
+    case 1:
+      h ^= str.charCodeAt(i) & 0xff;
+      h =
+      /* Math.imul(h, m): */
+      (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  } // Do a few final mixes of the hash to ensure the last few
+  // bytes are well-incorporated.
+
+
+  h ^= h >>> 13;
+  h =
+  /* Math.imul(h, m): */
+  (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16);
+  return ((h ^ h >>> 15) >>> 0).toString(36);
+}
+
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  scale: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+var hyphenateRegex = /[A-Z]|^ms/g;
+var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
+
+var isCustomProperty = function isCustomProperty(property) {
+  return property.charCodeAt(1) === 45;
+};
+
+var isProcessableValue = function isProcessableValue(value) {
+  return value != null && typeof value !== 'boolean';
+};
+
+var processStyleName = /* #__PURE__ */memoize(function (styleName) {
+  return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase();
+});
+
+var processStyleValue = function processStyleValue(key, value) {
+  switch (key) {
+    case 'animation':
+    case 'animationName':
+      {
+        if (typeof value === 'string') {
+          return value.replace(animationRegex, function (match, p1, p2) {
+            cursor = {
+              name: p1,
+              styles: p2,
+              next: cursor
+            };
+            return p1;
+          });
+        }
+      }
+  }
+
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+    return value + 'px';
+  }
+
+  return value;
+};
+
+function handleInterpolation(mergedProps, registered, interpolation) {
+  if (interpolation == null) {
+    return '';
+  }
+
+  var componentSelector = interpolation;
+
+  if (componentSelector.__emotion_styles !== undefined) {
+
+    return componentSelector;
+  }
+
+  switch (typeof interpolation) {
+    case 'boolean':
+      {
+        return '';
+      }
+
+    case 'object':
+      {
+        var keyframes = interpolation;
+
+        if (keyframes.anim === 1) {
+          cursor = {
+            name: keyframes.name,
+            styles: keyframes.styles,
+            next: cursor
+          };
+          return keyframes.name;
+        }
+
+        var serializedStyles = interpolation;
+
+        if (serializedStyles.styles !== undefined) {
+          var next = serializedStyles.next;
+
+          if (next !== undefined) {
+            // not the most efficient thing ever but this is a pretty rare case
+            // and there will be very few iterations of this generally
+            while (next !== undefined) {
+              cursor = {
+                name: next.name,
+                styles: next.styles,
+                next: cursor
+              };
+              next = next.next;
+            }
+          }
+
+          var styles = serializedStyles.styles + ";";
+          return styles;
+        }
+
+        return createStringFromObject(mergedProps, registered, interpolation);
+      }
+
+    case 'function':
+      {
+        if (mergedProps !== undefined) {
+          var previousCursor = cursor;
+          var result = interpolation(mergedProps);
+          cursor = previousCursor;
+          return handleInterpolation(mergedProps, registered, result);
+        }
+
+        break;
+      }
+  } // finalize string values (regular strings and functions interpolated into css calls)
+
+
+  var asString = interpolation;
+
+  if (registered == null) {
+    return asString;
+  }
+
+  var cached = registered[asString];
+  return cached !== undefined ? cached : asString;
+}
+
+function createStringFromObject(mergedProps, registered, obj) {
+  var string = '';
+
+  if (Array.isArray(obj)) {
+    for (var i = 0; i < obj.length; i++) {
+      string += handleInterpolation(mergedProps, registered, obj[i]) + ";";
+    }
+  } else {
+    for (var key in obj) {
+      var value = obj[key];
+
+      if (typeof value !== 'object') {
+        var asString = value;
+
+        if (registered != null && registered[asString] !== undefined) {
+          string += key + "{" + registered[asString] + "}";
+        } else if (isProcessableValue(asString)) {
+          string += processStyleName(key) + ":" + processStyleValue(key, asString) + ";";
+        }
+      } else {
+
+        if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) {
+          for (var _i = 0; _i < value.length; _i++) {
+            if (isProcessableValue(value[_i])) {
+              string += processStyleName(key) + ":" + processStyleValue(key, value[_i]) + ";";
+            }
+          }
+        } else {
+          var interpolated = handleInterpolation(mergedProps, registered, value);
+
+          switch (key) {
+            case 'animation':
+            case 'animationName':
+              {
+                string += processStyleName(key) + ":" + interpolated + ";";
+                break;
+              }
+
+            default:
+              {
+
+                string += key + "{" + interpolated + "}";
+              }
+          }
+        }
+      }
+    }
+  }
+
+  return string;
+}
+
+var labelPattern = /label:\s*([^\s;{]+)\s*(;|$)/g; // this is the cursor for keyframes
+// keyframes are stored on the SerializedStyles object as a linked list
+
+var cursor;
+function serializeStyles(args, registered, mergedProps) {
+  if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) {
+    return args[0];
+  }
+
+  var stringMode = true;
+  var styles = '';
+  cursor = undefined;
+  var strings = args[0];
+
+  if (strings == null || strings.raw === undefined) {
+    stringMode = false;
+    styles += handleInterpolation(mergedProps, registered, strings);
+  } else {
+    var asTemplateStringsArr = strings;
+
+    styles += asTemplateStringsArr[0];
+  } // we start at 1 since we've already handled the first arg
+
+
+  for (var i = 1; i < args.length; i++) {
+    styles += handleInterpolation(mergedProps, registered, args[i]);
+
+    if (stringMode) {
+      var templateStringsArr = strings;
+
+      styles += templateStringsArr[i];
+    }
+  } // using a global regex with .exec is stateful so lastIndex has to be reset each time
+
+
+  labelPattern.lastIndex = 0;
+  var identifierName = '';
+  var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5
+
+  while ((match = labelPattern.exec(styles)) !== null) {
+    identifierName += '-' + match[1];
+  }
+
+  var name = murmur2(styles) + identifierName;
+
+  return {
+    name: name,
+    styles: styles,
+    next: cursor
+  };
+}
+
+var isBrowser$2 = typeof document !== 'undefined';
+
+var syncFallback = function syncFallback(create) {
+  return create();
+};
+
+var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : false;
+var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$2 ? syncFallback : useInsertionEffect || syncFallback;
+
+var isBrowser$1 = typeof document !== 'undefined';
+
+var EmotionCacheContext = /* #__PURE__ */React__namespace.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
+// because this module is primarily intended for the browser and node
+// but it's also required in react native and similar environments sometimes
+// and we could have a special build just for that
+// but this is much easier and the native packages
+// might use a different theme context in the future anyway
+typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
+  key: 'css'
+}) : null);
+
+EmotionCacheContext.Provider;
+
+var withEmotionCache = function withEmotionCache(func) {
+  return /*#__PURE__*/React.forwardRef(function (props, ref) {
+    // the cache will never be null in the browser
+    var cache = React.useContext(EmotionCacheContext);
+    return func(props, cache, ref);
+  });
+};
+
+if (!isBrowser$1) {
+  withEmotionCache = function withEmotionCache(func) {
+    return function (props) {
+      var cache = React.useContext(EmotionCacheContext);
+
+      if (cache === null) {
+        // yes, we're potentially creating this on every render
+        // it doesn't actually matter though since it's only on the server
+        // so there will only every be a single render
+        // that could change in the future because of suspense and etc. but for now,
+        // this works and i don't want to optimise for a future thing that we aren't sure about
+        cache = createCache({
+          key: 'css'
+        });
+        return /*#__PURE__*/React__namespace.createElement(EmotionCacheContext.Provider, {
+          value: cache
+        }, func(props, cache));
+      } else {
+        return func(props, cache);
+      }
+    };
+  };
+}
+
+var ThemeContext = /* #__PURE__ */React__namespace.createContext({});
+
+// eslint-disable-next-line no-undef
+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|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|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 */
+);
+
+var isBrowser = typeof document !== 'undefined';
+
+var testOmitPropsOnStringTag = isPropValid;
+
+var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) {
+  return key !== 'theme';
+};
+
+var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) {
+  return typeof tag === 'string' && // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent;
+};
+var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) {
+  var shouldForwardProp;
+
+  if (options) {
+    var optionsShouldForwardProp = options.shouldForwardProp;
+    shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) {
+      return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName);
+    } : optionsShouldForwardProp;
+  }
+
+  if (typeof shouldForwardProp !== 'function' && isReal) {
+    shouldForwardProp = tag.__emotion_forwardProp;
+  }
+
+  return shouldForwardProp;
+};
+
+var Insertion = function Insertion(_ref) {
+  var cache = _ref.cache,
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
+  var rules = useInsertionEffectAlwaysWithSyncFallback(function () {
+    return insertStyles(cache, serialized, isStringTag);
+  });
+
+  if (!isBrowser && rules !== undefined) {
+    var _ref2;
+
+    var serializedNames = serialized.name;
+    var next = serialized.next;
+
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name;
+      next = next.next;
+    }
+
+    return /*#__PURE__*/React__namespace.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+      __html: rules
+    }, _ref2.nonce = cache.sheet.nonce, _ref2));
+  }
+
+  return null;
+};
+
+var createStyled = function createStyled(tag, options) {
+
+  var isReal = tag.__emotion_real === tag;
+  var baseTag = isReal && tag.__emotion_base || tag;
+  var identifierName;
+  var targetClassName;
+
+  if (options !== undefined) {
+    identifierName = options.label;
+    targetClassName = options.target;
+  }
+
+  var shouldForwardProp = composeShouldForwardProps(tag, options, isReal);
+  var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag);
+  var shouldUseAs = !defaultShouldForwardProp('as');
+  return function () {
+    // eslint-disable-next-line prefer-rest-params
+    var args = arguments;
+    var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : [];
+
+    if (identifierName !== undefined) {
+      styles.push("label:" + identifierName + ";");
+    }
+
+    if (args[0] == null || args[0].raw === undefined) {
+      // eslint-disable-next-line prefer-spread
+      styles.push.apply(styles, args);
+    } else {
+      var templateStringsArr = args[0];
+
+      styles.push(templateStringsArr[0]);
+      var len = args.length;
+      var i = 1;
+
+      for (; i < len; i++) {
+
+        styles.push(args[i], templateStringsArr[i]);
+      }
+    }
+
+    var Styled = withEmotionCache(function (props, cache, ref) {
+      var FinalTag = shouldUseAs && props.as || baseTag;
+      var className = '';
+      var classInterpolations = [];
+      var mergedProps = props;
+
+      if (props.theme == null) {
+        mergedProps = {};
+
+        for (var key in props) {
+          mergedProps[key] = props[key];
+        }
+
+        mergedProps.theme = React__namespace.useContext(ThemeContext);
+      }
+
+      if (typeof props.className === 'string') {
+        className = getRegisteredStyles(cache.registered, classInterpolations, props.className);
+      } else if (props.className != null) {
+        className = props.className + " ";
+      }
+
+      var serialized = serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps);
+      className += cache.key + "-" + serialized.name;
+
+      if (targetClassName !== undefined) {
+        className += " " + targetClassName;
+      }
+
+      var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp;
+      var newProps = {};
+
+      for (var _key in props) {
+        if (shouldUseAs && _key === 'as') continue;
+
+        if (finalShouldForwardProp(_key)) {
+          newProps[_key] = props[_key];
+        }
+      }
+
+      newProps.className = className;
+
+      if (ref) {
+        newProps.ref = ref;
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Insertion, {
+        cache: cache,
+        serialized: serialized,
+        isStringTag: typeof FinalTag === 'string'
+      }), /*#__PURE__*/React__namespace.createElement(FinalTag, newProps));
+    });
+    Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")";
+    Styled.defaultProps = tag.defaultProps;
+    Styled.__emotion_real = Styled;
+    Styled.__emotion_base = baseTag;
+    Styled.__emotion_styles = styles;
+    Styled.__emotion_forwardProp = shouldForwardProp;
+    Object.defineProperty(Styled, 'toString', {
+      value: function value() {
+
+        return "." + targetClassName;
+      }
+    });
+
+    Styled.withComponent = function (nextTag, nextOptions) {
+      var newStyled = createStyled(nextTag, _extends({}, options, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      }));
+      return newStyled.apply(undefined, styles);
+    };
+
+    return Styled;
+  };
+};
+
+var tags = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr', // SVG
+'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];
+
+// bind it to avoid mutating the original function
+var newStyled = createStyled.bind(null);
+tags.forEach(function (tagName) {
+  newStyled[tagName] = newStyled(tagName);
+});
+
+function Icon(props) {
+    var _a = props.color, color = _a === undefined ? 'white' : _a, icon = props.icon, size = props.size, withBorder = props.withBorder, link = props.link;
+    return (React.createElement(IconContainer, { color: color, size: size, withBorder: withBorder, onClick: function () { return window.open(link, "_blank"); } },
+        icon === "twitter" && (React.createElement("svg", { width: "22", height: "19", viewBox: "0 0 22 19", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M7.22838 0H0.34375L8.46766 10.4263L0.786371 18.9328H3.3926L9.67543 11.9759L15.0966 18.9328H21.9812L13.515 8.06725L20.801 0H18.1946L12.3072 6.51855L7.22838 0ZM16.0801 17.0395L4.27784 1.89327H6.24482L18.0471 17.0395H16.0801Z" }))),
+        icon === "instagram" && (React.createElement("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M12.1711 0C8.8681 0 8.4528 0.0152137 7.15509 0.0730262C5.85739 0.133881 4.97336 0.337747 4.19901 0.63898C3.3868 0.944501 2.65099 1.42374 2.04325 2.04325C1.42415 2.65126 0.944947 3.38693 0.63898 4.19901C0.337747 4.97188 0.132367 5.85725 0.0730262 7.1505C0.0152137 8.45131 0 8.86513 0 12.1725C0 15.477 0.0152137 15.8908 0.0730262 17.1886C0.133881 18.4849 0.337747 19.3687 0.63898 20.1431C0.950857 20.9433 1.36627 21.6219 2.04325 22.2989C2.71874 22.9758 3.39721 23.3928 4.19753 23.7031C4.97336 24.0043 5.85577 24.2097 7.15198 24.2691C8.45131 24.3268 8.86513 24.3421 12.1711 24.3421C15.477 24.3421 15.8893 24.3268 17.1886 24.2691C18.4832 24.2082 19.3702 24.0043 20.1446 23.7031C20.9564 23.3975 21.6915 22.9182 22.2989 22.2989C22.9758 21.6219 23.3913 20.9433 23.7031 20.1431C24.0028 19.3687 24.2082 18.4849 24.2691 17.1886C24.3268 15.8908 24.3421 15.477 24.3421 12.1711C24.3421 8.86513 24.3268 8.45131 24.2691 7.15198C24.2082 5.85739 24.0028 4.97188 23.7031 4.19901C23.3972 3.38693 22.918 2.65126 22.2989 2.04325C21.6913 1.42347 20.9554 0.944244 20.1431 0.63898C19.3671 0.337747 18.4817 0.132367 17.187 0.0730262C15.8878 0.0152137 15.4755 0 12.1681 0H12.1725H12.1711ZM11.0803 2.1939H12.1725C15.4222 2.1939 15.8071 2.20445 17.0896 2.26382C18.2763 2.3171 18.9214 2.51643 19.3505 2.68223C19.9179 2.9028 20.3242 3.16745 20.7502 3.59344C21.1761 4.01942 21.4393 4.42418 21.6599 4.99324C21.8273 5.42072 22.025 6.06578 22.0783 7.25246C22.1377 8.53502 22.1498 8.9199 22.1498 12.1681C22.1498 15.4161 22.1377 15.8026 22.0783 17.0851C22.025 18.2717 21.8258 18.9153 21.6599 19.3444C21.4647 19.8729 21.1533 20.3507 20.7485 20.7425C20.3226 21.1684 19.9179 21.4317 19.349 21.6523C18.923 21.8197 18.2778 22.0174 17.0896 22.0722C15.8071 22.1301 15.4222 22.1437 12.1725 22.1437C8.92287 22.1437 8.53651 22.1301 7.25395 22.0722C6.06727 22.0174 5.42369 21.8197 4.99473 21.6523C4.46597 21.4574 3.98778 21.1465 3.59506 20.7425C3.1899 20.35 2.87805 19.8718 2.68223 19.3428C2.51643 18.9153 2.3171 18.2702 2.26382 17.0836C2.20607 15.8011 2.1939 15.4161 2.1939 12.165C2.1939 8.9153 2.20607 8.53191 2.26382 7.24935C2.31859 6.06267 2.51643 5.41761 2.68372 4.98865C2.90428 4.4212 3.16907 4.01496 3.59506 3.58897C4.02105 3.16299 4.42567 2.89982 4.99473 2.67912C5.42369 2.51184 6.06727 2.31399 7.25395 2.25922C8.3768 2.20756 8.81184 2.19228 11.0803 2.19079V2.1939ZM18.6689 4.21416C18.477 4.21416 18.2871 4.25203 18.11 4.32546C17.9327 4.39875 17.7718 4.5064 17.6361 4.64204C17.5005 4.77768 17.393 4.93861 17.3195 5.1159C17.2461 5.29306 17.2084 5.48292 17.2084 5.67482C17.2084 5.86658 17.2461 6.05645 17.3195 6.23361C17.393 6.4109 17.5005 6.57183 17.6361 6.70747C17.7718 6.84311 17.9327 6.95076 18.11 7.02405C18.2871 7.09748 18.477 7.13535 18.6689 7.13535C19.0562 7.13535 19.4277 6.98145 19.7017 6.70747C19.9755 6.43362 20.1294 6.06213 20.1294 5.67482C20.1294 5.28738 19.9755 4.91589 19.7017 4.64204C19.4277 4.36806 19.0562 4.21416 18.6689 4.21416ZM12.1725 5.92122C11.3436 5.90824 10.5203 6.06037 9.7505 6.36871C8.98075 6.67704 8.2801 7.13535 7.68927 7.71713C7.09843 8.29877 6.62917 8.99224 6.30893 9.75699C5.9887 10.5217 5.82372 11.3426 5.82372 12.1719C5.82372 13.001 5.9887 13.8219 6.30893 14.5866C6.62917 15.3514 7.09843 16.0448 7.68927 16.6265C8.2801 17.2083 8.98075 17.6666 9.7505 17.9749C10.5203 18.2832 11.3436 18.4354 12.1725 18.4224C13.8135 18.3968 15.3784 17.727 16.5298 16.5576C17.6812 15.3881 18.3264 13.8129 18.3264 12.1719C18.3264 10.5308 17.6812 8.95546 16.5298 7.78609C15.3784 6.61659 13.8135 5.94678 12.1725 5.92122ZM12.1725 8.1135C13.2487 8.1135 14.2807 8.54097 15.0417 9.30193C15.8026 10.0629 16.2301 11.095 16.2301 12.1711C16.2301 13.2471 15.8026 14.2792 15.0417 15.0402C14.2807 15.8011 13.2487 16.2286 12.1725 16.2286C11.0965 16.2286 10.0644 15.8011 9.30342 15.0402C8.54259 14.2792 8.11512 13.2471 8.11512 12.1711C8.11512 11.095 8.54259 10.0629 9.30342 9.30193C10.0644 8.54097 11.0965 8.1135 12.1725 8.1135Z" }))),
+        icon === "youtube" && (React.createElement("svg", { width: "33", height: "23", viewBox: "0 0 33 23", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M19.537 11.1568L20.0249 12.046C20.3495 11.8679 20.5513 11.5271 20.5513 11.1568C20.5513 10.7865 20.3495 10.4457 20.0249 10.2676L19.537 11.1568ZM14.3305 14.0139H13.3163C13.3163 14.3723 13.5054 14.7041 13.8139 14.8867C14.1222 15.0693 14.5043 15.0755 14.8184 14.9031L14.3305 14.0139ZM14.3305 8.29971L14.8184 7.41055C14.5043 7.23813 14.1222 7.24435 13.8139 7.42691C13.5054 7.60948 13.3163 7.94134 13.3163 8.29971H14.3305ZM16.5619 21.2993L16.5589 22.3136H16.5619V21.2993ZM10.7425 21.2051L10.7724 20.1912H10.7698L10.7425 21.2051ZM19.0491 10.2676L13.8426 13.1247L14.8184 14.9031L20.0249 12.046L19.0491 10.2676ZM15.3448 14.0139V8.29971H13.3163V14.0139H15.3448ZM13.8426 9.18888L19.0491 12.046L20.0249 10.2676L14.8184 7.41055L13.8426 9.18888ZM2.70039 10.1454C2.70039 8.04791 2.70271 6.58075 2.85884 5.4671C3.01002 4.38875 3.28882 3.78371 3.74519 3.33284L2.31959 1.88976C1.42971 2.76891 1.03537 3.86309 0.84998 5.18541C0.66955 6.47243 0.671876 8.10728 0.671876 10.1454H2.70039ZM3.74519 3.33284C4.20981 2.87386 4.84263 2.5827 5.96155 2.405C7.10955 2.22271 8.62188 2.17957 10.7702 2.12101L10.715 0.0931763C8.62228 0.15038 6.95309 0.193655 5.64335 0.401645C4.3044 0.614232 3.20271 1.01736 2.31959 1.88976L3.74519 3.33284ZM10.7702 2.12101C12.7741 2.06678 14.8165 2.02851 16.5619 2.02851V0C14.7906 0 12.7276 0.0388123 10.715 0.0931763L10.7702 2.12101ZM16.5619 2.02851C18.3057 2.02851 20.3484 2.06678 22.3538 2.12101L22.409 0.0931763C20.3949 0.0388123 18.3317 0 16.5619 0V2.02851ZM22.3538 2.12101C24.5021 2.17957 26.0142 2.22271 27.162 2.405C28.2807 2.5827 28.9129 2.87386 29.3766 3.33257L30.8031 1.89017C29.9205 1.01737 28.8189 0.614232 27.4802 0.401645C26.1706 0.193655 24.5017 0.15038 22.409 0.0931763L22.3538 2.12101ZM29.3766 3.33257C29.8335 3.78344 30.1134 4.38929 30.2647 5.46778C30.421 6.58143 30.4233 8.04872 30.4233 10.1454H32.4519C32.4519 8.10795 32.4542 6.47311 32.2735 5.18582C32.0879 3.86323 31.694 2.76932 30.8031 1.89017L29.3766 3.33257ZM30.4233 10.1454V12.1667H32.4519V10.1454H30.4233ZM30.4233 12.1667C30.4233 14.2649 30.421 15.7322 30.2649 16.8458C30.1138 17.924 29.8349 18.5294 29.3781 18.981L30.8038 20.4242C31.6932 19.5445 32.0883 18.45 32.2738 17.1274C32.4542 15.8404 32.4519 14.2056 32.4519 12.1667H30.4233ZM29.3781 18.981C28.9133 19.4396 28.2814 19.7302 27.1627 19.9078C26.015 20.0901 24.5027 20.1334 22.3539 20.1912L22.4086 22.2189C24.5024 22.1625 26.1712 22.1193 27.4809 21.9113C28.8199 21.6986 29.9208 21.2954 30.8038 20.4242L29.3781 18.981ZM22.3539 20.1912C20.3506 20.2468 18.3072 20.2851 16.5619 20.2851V22.3136C18.3332 22.3136 20.3955 22.2748 22.4086 22.2189L22.3539 20.1912ZM16.5648 20.2851C14.6337 20.2795 12.7027 20.2482 10.7724 20.1912L10.7126 22.2189C12.6608 22.2764 14.6098 22.3079 16.5589 22.3136L16.5648 20.2851ZM10.7698 20.1912C8.6216 20.1332 7.10942 20.0905 5.96142 19.9083C4.84259 19.7308 4.20979 19.4396 3.74518 18.9808L2.31919 20.4234C3.20232 21.2958 4.30444 21.6994 5.64348 21.9118C6.95336 22.1197 8.62228 22.1625 10.7152 22.2189L10.7698 20.1912ZM3.74518 18.9808C3.28844 18.5291 3.01002 17.9238 2.85884 16.8454C2.70271 15.7318 2.70039 14.2649 2.70039 12.1682H0.671876C0.671876 14.2057 0.66955 15.8401 0.84998 17.1271C1.03537 18.4494 1.42967 19.5437 2.31919 20.4234L3.74518 18.9808ZM2.70039 12.1682V10.1454H0.671876V12.1682H2.70039Z" }))),
+        icon === "linkedin" && (React.createElement("svg", { width: "27", height: "26", viewBox: "0 0 27 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.43122 0C3.51704 0 2.64031 0.363144 1.99392 1.00955C1.34752 1.65595 0.984375 2.53266 0.984375 3.44684C0.984375 4.36102 1.34752 5.23775 1.99392 5.88403C2.64031 6.53045 3.51704 6.89369 4.43122 6.89369C5.3454 6.89369 6.22212 6.53045 6.8684 5.88403C7.51482 5.23775 7.87806 4.36102 7.87806 3.44684C7.87806 2.53266 7.51482 1.65595 6.8684 1.00955C6.22212 0.363144 5.3454 0 4.43122 0ZM2.8644 3.44684C2.8644 3.03127 3.02952 2.63279 3.32338 2.33897C3.61711 2.04514 4.01564 1.88008 4.43122 1.88008C4.84666 1.88008 5.24519 2.04514 5.53905 2.33897C5.83292 2.63279 5.9979 3.03127 5.9979 3.44684C5.9979 3.86228 5.83292 4.26082 5.53905 4.55468C5.24519 4.84854 4.84666 5.01353 4.43122 5.01353C4.01564 5.01353 3.61711 4.84854 3.32338 4.55468C3.02952 4.26082 2.8644 3.86228 2.8644 3.44684ZM0.984375 8.46037C0.984375 8.211 1.08342 7.97191 1.25971 7.7957C1.436 7.61935 1.6751 7.52036 1.92441 7.52036H6.93791C7.18729 7.52036 7.42638 7.61935 7.60272 7.7957C7.77893 7.97191 7.87806 8.211 7.87806 8.46037V24.7544C7.87806 25.0037 7.77893 25.2428 7.60272 25.4191C7.42638 25.5955 7.18729 25.6945 6.93791 25.6945H1.92441C1.6751 25.6945 1.436 25.5955 1.25971 25.4191C1.08342 25.2428 0.984375 25.0037 0.984375 24.7544V8.46037ZM2.8644 9.40038V23.8144H5.9979V9.40038H2.8644ZM9.75808 8.46037C9.75808 8.211 9.85707 7.97191 10.0334 7.7957C10.2098 7.61935 10.4489 7.52036 10.6981 7.52036H15.7116C15.961 7.52036 16.2001 7.61935 16.3764 7.7957C16.5526 7.97191 16.6518 8.211 16.6518 8.46037V9.00428L17.1969 8.76992C18.137 8.36828 19.1343 8.11661 20.1524 8.02424C23.6307 7.70834 26.6788 10.4407 26.6788 13.9502V24.7544C26.6788 25.0037 26.5798 25.2428 26.4035 25.4191C26.2271 25.5955 25.9881 25.6945 25.7388 25.6945H20.7253C20.4759 25.6945 20.2368 25.5955 20.0605 25.4191C19.8843 25.2428 19.7851 25.0037 19.7851 24.7544V15.9807C19.7851 15.5652 19.6202 15.1666 19.3263 14.8729C19.0324 14.579 18.634 14.4139 18.2185 14.4139C17.8029 14.4139 17.4045 14.579 17.1106 14.8729C16.8168 15.1666 16.6518 15.5652 16.6518 15.9807V24.7544C16.6518 25.0037 16.5526 25.2428 16.3764 25.4191C16.2001 25.5955 15.961 25.6945 15.7116 25.6945H10.6981C10.4489 25.6945 10.2098 25.5955 10.0334 25.4191C9.85707 25.2428 9.75808 25.0037 9.75808 24.7544V8.46037ZM11.6381 9.40038V23.8144H14.7716V15.9807C14.7716 15.0666 15.1349 14.1898 15.7811 13.5434C16.4276 12.897 17.3043 12.5339 18.2185 12.5339C19.1326 12.5339 20.0094 12.897 20.6558 13.5434C21.3022 14.1898 21.6653 15.0666 21.6653 15.9807V23.8144H24.7988V13.9502C24.7988 11.5637 22.7169 9.67869 20.3242 9.89669C19.5021 9.97148 18.6969 10.1746 17.9377 10.4983L16.0827 11.2943C15.9396 11.3557 15.7836 11.3807 15.6285 11.367C15.4733 11.3532 15.324 11.301 15.1941 11.2152C15.0641 11.1295 14.9574 11.0128 14.8837 10.8757C14.81 10.7385 14.7715 10.5852 14.7716 10.4294V9.40038H11.6381Z" }))),
+        icon === "hamburgerMenu" && (React.createElement("svg", { width: "36px", height: "36px", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M3 6.00092H21M3 12.0009H21M3 18.0009H21", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }))),
+        icon === "arrow-long" && (React.createElement("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M11.9985 0C13.2081 1.34446 14.2541 2.36903 15.1363 3.07371C16.0186 3.76912 16.8508 4.28836 17.633 4.63143V5.2573C16.7325 5.70236 15.8594 6.2726 15.0135 6.96801C14.1677 7.65415 13.1581 8.66481 11.9848 10H10.9343C11.7893 8.1363 12.6852 6.70375 13.622 5.70236H0V4.29764H13.622C12.9307 3.39824 12.4487 2.73064 12.1758 2.29485C11.903 1.85906 11.4982 1.09411 10.9616 0H11.9985Z" }))),
+        icon === "arrow-caret" && (React.createElement("svg", { width: "8", height: "10", viewBox: "0 0 8 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("path", { d: "M1 1L6 5L1 9", stroke: "white", "stroke-width": "1.5" })))));
+}
+var IconContainer = newStyled.span(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: 4px;\n  transition: all 0.2s;\n  cursor: pointer;\n  svg {\n    transition: all 0.2s;\n    height: ", ";\n    fill: ", ";\n    path{\n      fill: ", "\n    }\n  }\n"], ["\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 1px;\n  width: ", ";\n  height: ", ";\n  border: ", ";\n  border-radius: 4px;\n  transition: all 0.2s;\n  cursor: pointer;\n  svg {\n    transition: all 0.2s;\n    height: ", ";\n    fill: ", ";\n    path{\n      fill: ", "\n    }\n  }\n"])), function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? props.size : "unset"; }, function (props) { return props.withBorder ? "2px solid ".concat(props.color) : "unset"; }, function (props) { return props.withBorder ? "53%" : props.size; }, function (props) { return props.color; }, function (props) { return props.color; });
+var templateObject_1$5;
+
+var theme = {
+    primary: "#DC3737",
+    secondary: "hsl(0, 0%, 96%)",
+    accent: "",
+    black: "#2c2c2c",
+    white: "white",
+};
+
+var formatText = function (text, format) {
+    switch (format) {
+        case 'first-capitalized':
+            return text.slice(0, 1).toLocaleUpperCase() + text.slice(1).toLocaleLowerCase();
+        case 'uppercase':
+            return text.toLocaleUpperCase();
+        case 'lowercase':
+            return text.toLocaleLowerCase();
+    }
+};
+
+function Button(props) {
+    var children = props.children, onClick = props.onClick, type = props.type, colors = props.colors, arrow = props.arrow, _a = props.font, font = _a === undefined ? {
+        size: '16px',
+        casing: 'uppercase',
+        weight: '600'
+    } : _a;
+    switch (type) {
+        default:
+            return (React.createElement(DefaultButton, { onClick: onClick, colors: colors, font: font, hasArrow: arrow !== undefined },
+                font.casing ? formatText(children, font.casing) : children,
+                arrow &&
+                    React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.white })));
+        case "rounded":
+            return (React.createElement(RoundedButton, { onClick: onClick, colors: colors, font: font, hasArrow: arrow !== undefined },
+                font.casing ? formatText(children, font.casing) : children,
+                arrow &&
+                    React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.white })));
+        case "pill":
+            return (React.createElement(PillButton, { onClick: onClick, colors: colors, font: font, hasArrow: arrow !== undefined },
+                font.casing ? formatText(children, font.casing) : children,
+                arrow &&
+                    React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.white })));
+        case "underlined":
+            return (React.createElement(UnderlinedButton, { onClick: onClick, colors: colors, font: font, hasArrow: arrow !== undefined },
+                font.casing ? formatText(children, font.casing) : children,
+                arrow &&
+                    React.createElement(Icon, { icon: arrow, color: (colors === null || colors === undefined ? undefined : colors.text) || theme.primary })));
+    }
+}
+var DefaultButton = newStyled.button(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  all: unset; \n  display: flex;\n  align-items: center;\n  padding: 10px 14px;\n  letter-spacing: 1px;\n  font-size: ", ";\n  font-weight: ", ";\n  cursor: pointer;\n  width: fit-content;\n  grid-area: button;\n  transition: filter 0.3s, background-color 0.3s;\n  gap: 11px;\n  background-color: ", ";\n  color: ", ";\n  position: relative;\n  svg {\n    fill: ", ";\n    transition: all 0.3s;\n  }\n  &:hover{\n    ", ";\n    color: ", ";\n    svg {\n      fill: ", ";\n      transform: translateX(5px);\n    }\n    &::after{\n      transform: translateX(4px);\n    }\n  }\n  &::after{\n    display: ", ";\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    transition: all 0.3s;\n    background-color: ", ";\n    left: 0;\n    top: 0;\n    z-index: -1;\n    border-radius: inherit;\n    transform-origin: left;\n  }\n"], ["\n  all: unset; \n  display: flex;\n  align-items: center;\n  padding: 10px 14px;\n  letter-spacing: 1px;\n  font-size: ", ";\n  font-weight: ", ";\n  cursor: pointer;\n  width: fit-content;\n  grid-area: button;\n  transition: filter 0.3s, background-color 0.3s;\n  gap: 11px;\n  background-color: ", ";\n  color: ", ";\n  position: relative;\n  svg {\n    fill: ", ";\n    transition: all 0.3s;\n  }\n  &:hover{\n    ", ";\n    color: ", ";\n    svg {\n      fill: ", ";\n      transform: translateX(5px);\n    }\n    &::after{\n      transform: translateX(4px);\n    }\n  }\n  &::after{\n    display: ", ";\n    content: \"\";\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    transition: all 0.3s;\n    background-color: ", ";\n    left: 0;\n    top: 0;\n    z-index: -1;\n    border-radius: inherit;\n    transform-origin: left;\n  }\n"])), function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.size; }, function (props) { var _a; return (_a = props.font) === null || _a === undefined ? undefined : _a.weight; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, function (props) { var _a, _b; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.backgroundHover) ? "background-color: ".concat((_b = props.colors) === null || _b === undefined ? undefined : _b.backgroundHover) : "filter: brightness(1.4)"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.white; }, function (props) { return props.hasArrow ? "unset" : "none"; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.primary; });
+var UnderlinedButton = newStyled(DefaultButton)(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  padding: 10px 0px;\n  letter-spacing: 2px;\n  &::before{\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 99%;\n    height: 2.5px;\n    background-color: ", ";\n    transition: 0.2s;\n  }\n  svg{\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  &::after{\n    display: none;\n  }\n  &:hover{\n    color: ", ";\n    transform: translateY(-1px);\n    svg{\n      transform: translateX(6px);\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n    &::before{\n      transform: translateY(4px);\n    }\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  padding: 10px 0px;\n  letter-spacing: 2px;\n  &::before{\n    content: \"\";\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 99%;\n    height: 2.5px;\n    background-color: ", ";\n    transition: 0.2s;\n  }\n  svg{\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  &::after{\n    display: none;\n  }\n  &:hover{\n    color: ", ";\n    transform: translateY(-1px);\n    svg{\n      transform: translateX(6px);\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n    &::before{\n      transform: translateY(4px);\n    }\n  }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || 'transparent'; }, function (props) { return props.color || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.border) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.textHover) || theme.black; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.borderHover) || theme.primary; });
+var PillButton = newStyled(DefaultButton)(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n  border-radius: 30px;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  "], ["\n  border-radius: 30px;\n  letter-spacing: 1px;\n  text-transform: uppercase;\n  "])));
+var RoundedButton = newStyled(DefaultButton)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  border-radius: 4px;\n"], ["\n  border-radius: 4px;\n"])));
+var templateObject_1$4, templateObject_2$3, templateObject_3$3, templateObject_4$1;
+
+function insertWithoutScoping(cache, serialized) {
+  if (cache.inserted[serialized.name] === undefined) {
+    return cache.insert('', serialized, cache.sheet, true);
+  }
+}
+
+function merge(registered, css, className) {
+  var registeredStyles = [];
+  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+
+  if (registeredStyles.length < 2) {
+    return className;
+  }
+
+  return rawClassName + css(registeredStyles);
+}
+
+var createEmotion = function createEmotion(options) {
+  var cache = createCache(options);
+
+  cache.sheet.speedy = function (value) {
+
+    this.isSpeedy = value;
+  };
+
+  cache.compat = true;
+
+  var css = function css() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var serialized = serializeStyles(args, cache.registered, undefined);
+    insertStyles(cache, serialized, false);
+    return cache.key + "-" + serialized.name;
+  };
+
+  var keyframes = function keyframes() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    var serialized = serializeStyles(args, cache.registered);
+    var animation = "animation-" + serialized.name;
+    insertWithoutScoping(cache, {
+      name: serialized.name,
+      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
+    });
+    return animation;
+  };
+
+  var injectGlobal = function injectGlobal() {
+    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+      args[_key3] = arguments[_key3];
+    }
+
+    var serialized = serializeStyles(args, cache.registered);
+    insertWithoutScoping(cache, serialized);
+  };
+
+  var cx = function cx() {
+    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+      args[_key4] = arguments[_key4];
+    }
+
+    return merge(cache.registered, css, classnames(args));
+  };
+
+  return {
+    css: css,
+    cx: cx,
+    injectGlobal: injectGlobal,
+    keyframes: keyframes,
+    hydrate: function hydrate(ids) {
+      ids.forEach(function (key) {
+        cache.inserted[key] = true;
+      });
+    },
+    flush: function flush() {
+      cache.registered = {};
+      cache.inserted = {};
+      cache.sheet.flush();
+    },
+    sheet: cache.sheet,
+    cache: cache,
+    getRegisteredStyles: getRegisteredStyles.bind(null, cache.registered),
+    merge: merge.bind(null, cache.registered, css)
+  };
+};
+
+var classnames = function classnames(args) {
+  var cls = '';
+
+  for (var i = 0; i < args.length; i++) {
+    var arg = args[i];
+    if (arg == null) continue;
+    var toAdd = undefined;
+
+    switch (typeof arg) {
+      case 'boolean':
+        break;
+
+      case 'object':
+        {
+          if (Array.isArray(arg)) {
+            toAdd = classnames(arg);
+          } else {
+            toAdd = '';
+
+            for (var k in arg) {
+              if (arg[k] && k) {
+                toAdd && (toAdd += ' ');
+                toAdd += k;
+              }
+            }
+          }
+
+          break;
+        }
+
+      default:
+        {
+          toAdd = arg;
+        }
+    }
+
+    if (toAdd) {
+      cls && (cls += ' ');
+      cls += toAdd;
+    }
+  }
+
+  return cls;
+};
+
+var _createEmotion = createEmotion({
+  key: 'css'
+}),
+    keyframes = _createEmotion.keyframes;
+
+var appearAnimation = keyframes(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  0% {\n    display: none;\n    opacity: 0%;\n    transform: translateY(-6px);\n  }\n  1% {\n    display: flex;\n    opacity: 0%;\n  }\n  100% {\n    display: flex;\n    opacity: 100%;\n    transform: translateY(0px);\n  }\n"], ["\n  0% {\n    display: none;\n    opacity: 0%;\n    transform: translateY(-6px);\n  }\n  1% {\n    display: flex;\n    opacity: 0%;\n  }\n  100% {\n    display: flex;\n    opacity: 100%;\n    transform: translateY(0px);\n  }\n"])));
+var disappearAnimation = keyframes(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  0% {\n    transform: translateY(0px);\n    display: flex;\n    opacity: 100%;\n  }\n  99% {\n    display: flex;\n    opacity: 0%;\n  }\n  100% {\n    transform: translateY(-6px);\n    display: none;\n    opacity: 0%;\n  }\n"], ["\n  0% {\n    transform: translateY(0px);\n    display: flex;\n    opacity: 100%;\n  }\n  99% {\n    display: flex;\n    opacity: 0%;\n  }\n  100% {\n    transform: translateY(-6px);\n    display: none;\n    opacity: 0%;\n  }\n"])));
+var fadeInFromLeft = keyframes(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateX(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
+var fadeInFromRight = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateX(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
+var fadeInFromTop = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var fadeInFromBottom = keyframes(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4, templateObject_5, templateObject_6;
+
+function Navbar(props) {
+    var logo = props.logo, items = props.items, button = props.button, config = props.config;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(NavbarContainer, { height: config.height, colors: config.colors, centeredItems: config.centeredItems },
+            React.createElement(Logo, { src: logo === null || logo === undefined ? undefined : logo.url, onClick: logo === null || logo === undefined ? undefined : logo.onClick }),
+            React.createElement("div", null, items === null || items === undefined ? undefined : items.map(function (item) {
+                var _a;
+                return (React.createElement("a", { key: item.label, href: "#", onClick: function (e) {
+                        e.preventDefault();
+                        item.onClick && item.onClick();
+                    } },
+                    item.label,
+                    item.subitems && (React.createElement(React.Fragment, null,
+                        React.createElement(Icon, { icon: 'arrow-caret', size: '8px' }),
+                        React.createElement("div", null, (_a = item.subitems) === null || _a === undefined ? undefined : _a.map(function (subitem) {
+                            return (React.createElement(ControlledNavItem, { key: subitem.label },
+                                React.createElement("a", { href: "#", onClick: function (e) {
+                                        e.preventDefault();
+                                        subitem.onClick && subitem.onClick();
+                                    } }, subitem.label)));
+                        }))))));
+            })),
+            button &&
+                React.createElement(Button, { colors: button.colors, type: button.type, font: button.font, onClick: button.onClick, arrow: button.arrow }, button.label))));
+}
+var NavbarContainer = newStyled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n  @media only screen and (max-width: 800px) {\n    height: 80px;\n    padding: 0 6vw;\n  }\n  & > div {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    margin-left: ", ";\n    & > a {\n      color: ", ";\n      position: relative;\n      display: flex;\n      gap: 5px;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      font-size: 12px;\n      letter-spacing: 2px;\n      font-weight: 500;\n      text-transform: uppercase;\n      text-decoration: none;\n      padding: 6px 22px 0;\n      transition: 0.3s;\n      border-bottom: 4px solid transparent;\n      svg {\n        margin-bottom: 1px;\n        transform: rotateZ(90deg);\n      }\n      & > div {\n        z-index: 10;\n        position: absolute;\n        display: none;\n        flex-direction: column;\n        align-items: flex-start;\n        width: max-content;\n        gap: 12px;\n        top: 88%;\n        left: 0;\n        background-color: black;\n        padding: 16px 14px;\n        animation-name: ", ";\n        animation-duration: 0.3s;\n        animation-fill-mode: forwards;\n        a {\n          color: ", ";\n          padding: 0;\n        }\n        &:hover {\n          animation-name: ", ";\n          display: flex;\n        }\n      }\n      &:hover {\n        border-color: white;\n        svg {\n          transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n        }\n        & > div{\n          animation-name: ", ";\n          display: flex;\n        }\n      }\n    }\n    @media only screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n"], ["\n  background-color: ", ";\n  width: 100vw;\n  height: ", ";\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 4vw;\n  z-index: 99;\n  backdrop-filter: blur(4px);\n  * {\n    -webkit-user-drag: none;\n    -khtml-user-drag: none;\n    -moz-user-drag: none;\n    -o-user-drag: none;\n  }\n  @media only screen and (max-width: 800px) {\n    height: 80px;\n    padding: 0 6vw;\n  }\n  & > div {\n    display: flex;\n    align-items: center;\n    height: 100%;\n    margin-left: ", ";\n    & > a {\n      color: ", ";\n      position: relative;\n      display: flex;\n      gap: 5px;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      font-size: 12px;\n      letter-spacing: 2px;\n      font-weight: 500;\n      text-transform: uppercase;\n      text-decoration: none;\n      padding: 6px 22px 0;\n      transition: 0.3s;\n      border-bottom: 4px solid transparent;\n      svg {\n        margin-bottom: 1px;\n        transform: rotateZ(90deg);\n      }\n      & > div {\n        z-index: 10;\n        position: absolute;\n        display: none;\n        flex-direction: column;\n        align-items: flex-start;\n        width: max-content;\n        gap: 12px;\n        top: 88%;\n        left: 0;\n        background-color: black;\n        padding: 16px 14px;\n        animation-name: ", ";\n        animation-duration: 0.3s;\n        animation-fill-mode: forwards;\n        a {\n          color: ", ";\n          padding: 0;\n        }\n        &:hover {\n          animation-name: ", ";\n          display: flex;\n        }\n      }\n      &:hover {\n        border-color: white;\n        svg {\n          transform: rotateZ(90deg) rotateY(-180deg) translateX(1px);\n        }\n        & > div{\n          animation-name: ", ";\n          display: flex;\n        }\n      }\n    }\n    @media only screen and (max-width: 800px) {\n      display: none;\n    }\n  }\n"])), function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.background) || theme.black; }, function (props) { return props.height || '80px'; }, function (props) { return props.centeredItems ? 'unset' : 'auto'; }, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, disappearAnimation, function (props) { var _a; return ((_a = props.colors) === null || _a === undefined ? undefined : _a.text) || theme.white; }, appearAnimation, appearAnimation);
+var Logo = newStyled.img(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  cursor: pointer;\n  height: 56%;\n  transition: all 0.2s;\n  &:hover {\n    filter: brightness(1.2);\n  }\n"], ["\n  cursor: pointer;\n  height: 56%;\n  transition: all 0.2s;\n  &:hover {\n    filter: brightness(1.2);\n  }\n"])));
+var ControlledNavItem = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    cursor: pointer;\n    height: 100%;\n    max-height: 90px;\n    text-transform: uppercase;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: 0.3s;\n    a {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 0 22px;\n      font-size: 12px;\n      letter-spacing: 2px;\n      font-weight: 500;\n      text-decoration: none;\n    }\n    &:hover {\n      & > div{\n        display: flex;\n      }\n    }\n  "], ["\n    cursor: pointer;\n    height: 100%;\n    max-height: 90px;\n    text-transform: uppercase;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: 0.3s;\n    a {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      padding: 0 22px;\n      font-size: 12px;\n      letter-spacing: 2px;\n      font-weight: 500;\n      text-decoration: none;\n    }\n    &:hover {\n      & > div{\n        display: flex;\n      }\n    }\n  "])));
+var templateObject_1$2, templateObject_2$1, templateObject_3$1;
+
+function Hero(props) {
+    var children = props.children, _a = props.imageUrls, imageUrls = _a === undefined ? [""] : _a, overlay = props.overlay, marginTop = props.marginTop, height = props.height;
+    var _b = React.useState(imageUrls && imageUrls[0] ? imageUrls[0] : ""), activeBackgroundUrl = _b[0]; _b[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container$1, { backgroundUrl: activeBackgroundUrl, marginTop: marginTop, height: height },
+            overlay && (React.createElement(Overlay, { color: overlay.color, opacity: overlay.opacity })),
+            React.createElement(HeroContent, null, children))));
+}
+var Container$1 = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  height: ", ";\n  margin-top: ", ";\n  background-image: url(", ");\n  /* background-color:  rgba(76, 88, 97, 0.7);\n  background-blend-mode: luminosity; */\n  background-position-y: 69%;\n  background-size: cover;\n  padding: 0 8vw;\n  @media only screen and (max-width: 800px) {\n    padding: 80px 10px;\n    svg {\n      max-height: 300px;\n      transform: translateX(20px);\n    }\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n  height: ", ";\n  margin-top: ", ";\n  background-image: url(", ");\n  /* background-color:  rgba(76, 88, 97, 0.7);\n  background-blend-mode: luminosity; */\n  background-position-y: 69%;\n  background-size: cover;\n  padding: 0 8vw;\n  @media only screen and (max-width: 800px) {\n    padding: 80px 10px;\n    svg {\n      max-height: 300px;\n      transform: translateX(20px);\n    }\n  }\n"])), function (props) { return "calc(".concat(props.height, " - ").concat(props.marginTop, ")"); }, function (props) { return props.marginTop; }, function (props) { return props.backgroundUrl; });
+var Overlay = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  background-color: ", ";\n  opacity: ", ";\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  z-index: 1;\n  background-color: ", ";\n  opacity: ", ";\n"])), function (props) { return props.color; }, function (props) { return props.opacity; });
+var HeroContent = newStyled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  z-index: 2;\n"], ["\n  width: 100%;\n  z-index: 2;\n"])));
+var templateObject_1$1, templateObject_2, templateObject_3;
+
+function useIntObs(_a) {
+    var _b;
+    var _c = _a === undefined ? {} : _a, _d = _c.threshold, threshold = _d === undefined ? 0 : _d, _e = _c.root, root = _e === undefined ? null : _e, _f = _c.rootMargin, rootMargin = _f === undefined ? '0%' : _f, _g = _c.freezeOnceVisible, freezeOnceVisible = _g === undefined ? false : _g, _h = _c.initialIsIntersecting, initialIsIntersecting = _h === undefined ? false : _h, onChange = _c.onChange;
+    var _j = React.useState(null), ref = _j[0], setRef = _j[1];
+    var _k = React.useState(function () { return ({
+        isIntersecting: initialIsIntersecting,
+        entry: undefined,
+    }); }), state = _k[0], setState = _k[1];
+    var callbackRef = React.useRef(undefined);
+    callbackRef.current = onChange;
+    var frozen = ((_b = state.entry) === null || _b === undefined ? undefined : _b.isIntersecting) && freezeOnceVisible;
+    React.useEffect(function () {
+        if (!ref || frozen || !('IntersectionObserver' in window))
+            return;
+        var unobserve;
+        var observer = new IntersectionObserver(function (entries) {
+            var thresholds = Array.isArray(observer.thresholds)
+                ? observer.thresholds
+                : [observer.thresholds];
+            entries.forEach(function (entry) {
+                var isIntersecting = entry.isIntersecting &&
+                    thresholds.some(function (threshold) { return entry.intersectionRatio >= threshold; });
+                setState({ isIntersecting: isIntersecting, entry: entry });
+                if (callbackRef.current) {
+                    callbackRef.current(isIntersecting, entry);
+                }
+                if (isIntersecting && freezeOnceVisible && unobserve) {
+                    unobserve();
+                    unobserve = undefined;
+                }
+            });
+        }, { threshold: threshold, root: root, rootMargin: rootMargin });
+        observer.observe(ref);
+        unobserve = function () { return observer.unobserve(ref); };
+        return function () {
+            observer.disconnect();
+        };
+    }, [ref, JSON.stringify(threshold), root, rootMargin, frozen, freezeOnceVisible]);
+    var prevRef = React.useRef(null);
+    React.useEffect(function () {
+        var _a;
+        if (!ref &&
+            ((_a = state.entry) === null || _a === undefined ? undefined : _a.target) &&
+            !freezeOnceVisible &&
+            !frozen &&
+            prevRef.current !== state.entry.target) {
+            prevRef.current = state.entry.target;
+            setState({ isIntersecting: initialIsIntersecting, entry: undefined });
+        }
+    }, [ref, state.entry, freezeOnceVisible, frozen, initialIsIntersecting]);
+    var result = [
+        setRef,
+        !!state.isIntersecting,
+        state.entry,
+    ];
+    result.ref = result[0];
+    result.isIntersecting = result[1];
+    result.entry = result[2];
+    return result;
+}
+
+function Fade(props) {
+    var children = props.children, _a = props.type, type = _a === undefined ? 'bottom-to-top' : _a;
+    var _b = useIntObs({
+        threshold: 0,
+        root: document,
+        rootMargin: "-10% 0% -10% 0%"
+    }), isIntersecting = _b.isIntersecting, ref = _b.ref;
+    return (React.createElement(Container, { ref: ref, isVisible: isIntersecting, animation: function () {
+            switch (type) {
+                case 'bottom-to-top':
+                    return fadeInFromBottom;
+                case 'top-to-bottom':
+                    return fadeInFromTop;
+                case 'right-to-left':
+                    return fadeInFromRight;
+                case 'left-to-right':
+                    return fadeInFromLeft;
+            }
+        } }, children));
+}
+var Container = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0;\n  ", ";\n"], ["\n  opacity: 0;\n  ", ";\n"])), function (props) { return props.isVisible ? "animation: ".concat(props.animation(), " 0.8s ease forwards") : ''; });
+var templateObject_1;
+
+exports.Button = Button;
+exports.Fade = Fade;
+exports.Hero = Hero;
+exports.Navbar = Navbar;
+//# sourceMappingURL=index.cjs.js.map