teachable-design-system 0.1.0

package/dist/index.cjs.js

@@ -0,0 +1,3515 @@
+'use strict';
+
+var React = require('react');
+var ReactJSXRuntime = require('react/jsx-runtime');
+var element = require('./assets/icons/checked.png');
+var arrowDownIcon = require('./assets/icons/arrow-down.png');
+require('./assets/icons/icon_size.png');
+
+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);
+var ReactJSXRuntime__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactJSXRuntime);
+
+var isDevelopment$3 = false;
+
+/*
+
+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 ? !isDevelopment$3 : 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 ? void 0 : _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;
+};
+
+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);
+}
+
+var reactIs$1 = {exports: {}};
+
+var reactIs_production_min = {};
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_production_min;
+
+function requireReactIs_production_min () {
+	if (hasRequiredReactIs_production_min) return reactIs_production_min;
+	hasRequiredReactIs_production_min = 1;
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+	return reactIs_production_min;
+}
+
+var reactIs_development = {};
+
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactIs_development;
+
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
+
+
+
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
+
+	// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+	// nor polyfill, then a plain number is used for performance.
+	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+	var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+	var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+	var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+	var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+	// (unstable) APIs that have been removed. Can we remove the symbols?
+
+	var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+	var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+	var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+	var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+	var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+	var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+	var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+	var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+	var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+	var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+	var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+	function isValidElementType(type) {
+	  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+	  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+	}
+
+	function typeOf(object) {
+	  if (typeof object === 'object' && object !== null) {
+	    var $$typeof = object.$$typeof;
+
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        var type = object.type;
+
+	        switch (type) {
+	          case REACT_ASYNC_MODE_TYPE:
+	          case REACT_CONCURRENT_MODE_TYPE:
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	            return type;
+
+	          default:
+	            var $$typeofType = type && type.$$typeof;
+
+	            switch ($$typeofType) {
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	              case REACT_PROVIDER_TYPE:
+	                return $$typeofType;
+
+	              default:
+	                return $$typeof;
+	            }
+
+	        }
+
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
+
+	  return undefined;
+	} // AsyncMode is deprecated along with isAsyncMode
+
+	var AsyncMode = REACT_ASYNC_MODE_TYPE;
+	var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+	var ContextConsumer = REACT_CONTEXT_TYPE;
+	var ContextProvider = REACT_PROVIDER_TYPE;
+	var Element = REACT_ELEMENT_TYPE;
+	var ForwardRef = REACT_FORWARD_REF_TYPE;
+	var Fragment = REACT_FRAGMENT_TYPE;
+	var Lazy = REACT_LAZY_TYPE;
+	var Memo = REACT_MEMO_TYPE;
+	var Portal = REACT_PORTAL_TYPE;
+	var Profiler = REACT_PROFILER_TYPE;
+	var StrictMode = REACT_STRICT_MODE_TYPE;
+	var Suspense = REACT_SUSPENSE_TYPE;
+	var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+	function isAsyncMode(object) {
+	  {
+	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+	    }
+	  }
+
+	  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+	}
+	function isConcurrentMode(object) {
+	  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+	}
+	function isContextConsumer(object) {
+	  return typeOf(object) === REACT_CONTEXT_TYPE;
+	}
+	function isContextProvider(object) {
+	  return typeOf(object) === REACT_PROVIDER_TYPE;
+	}
+	function isElement(object) {
+	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+	}
+	function isForwardRef(object) {
+	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+	}
+	function isFragment(object) {
+	  return typeOf(object) === REACT_FRAGMENT_TYPE;
+	}
+	function isLazy(object) {
+	  return typeOf(object) === REACT_LAZY_TYPE;
+	}
+	function isMemo(object) {
+	  return typeOf(object) === REACT_MEMO_TYPE;
+	}
+	function isPortal(object) {
+	  return typeOf(object) === REACT_PORTAL_TYPE;
+	}
+	function isProfiler(object) {
+	  return typeOf(object) === REACT_PROFILER_TYPE;
+	}
+	function isStrictMode(object) {
+	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+	}
+	function isSuspense(object) {
+	  return typeOf(object) === REACT_SUSPENSE_TYPE;
+	}
+
+	reactIs_development.AsyncMode = AsyncMode;
+	reactIs_development.ConcurrentMode = ConcurrentMode;
+	reactIs_development.ContextConsumer = ContextConsumer;
+	reactIs_development.ContextProvider = ContextProvider;
+	reactIs_development.Element = Element;
+	reactIs_development.ForwardRef = ForwardRef;
+	reactIs_development.Fragment = Fragment;
+	reactIs_development.Lazy = Lazy;
+	reactIs_development.Memo = Memo;
+	reactIs_development.Portal = Portal;
+	reactIs_development.Profiler = Profiler;
+	reactIs_development.StrictMode = StrictMode;
+	reactIs_development.Suspense = Suspense;
+	reactIs_development.isAsyncMode = isAsyncMode;
+	reactIs_development.isConcurrentMode = isConcurrentMode;
+	reactIs_development.isContextConsumer = isContextConsumer;
+	reactIs_development.isContextProvider = isContextProvider;
+	reactIs_development.isElement = isElement;
+	reactIs_development.isForwardRef = isForwardRef;
+	reactIs_development.isFragment = isFragment;
+	reactIs_development.isLazy = isLazy;
+	reactIs_development.isMemo = isMemo;
+	reactIs_development.isPortal = isPortal;
+	reactIs_development.isProfiler = isProfiler;
+	reactIs_development.isStrictMode = isStrictMode;
+	reactIs_development.isSuspense = isSuspense;
+	reactIs_development.isValidElementType = isValidElementType;
+	reactIs_development.typeOf = typeOf;
+	  })();
+	}
+	return reactIs_development;
+}
+
+if (process.env.NODE_ENV === 'production') {
+  reactIs$1.exports = requireReactIs_production_min();
+} else {
+  reactIs$1.exports = requireReactIs_development();
+}
+
+var reactIsExports = reactIs$1.exports;
+
+var reactIs = reactIsExports;
+var FORWARD_REF_STATICS = {
+  '$$typeof': true,
+  render: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true
+};
+var MEMO_STATICS = {
+  '$$typeof': true,
+  compare: true,
+  defaultProps: true,
+  displayName: true,
+  propTypes: true,
+  type: true
+};
+var TYPE_STATICS = {};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
+
+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 isDevelopment$2 = false;
+
+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;
+};
+
+var noComponentSelectorMessage = 'Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.';
+
+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 (key === 'NO_COMPONENT_SELECTOR' && isDevelopment$2) {
+          throw new Error(noComponentSelectorMessage);
+        }
+
+        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 isDevelopment$1 = false;
+
+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({});
+
+var hasOwn = {}.hasOwnProperty;
+
+var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
+var createEmotionProps = function createEmotionProps(type, props) {
+
+  var newProps = {};
+
+  for (var _key in props) {
+    if (hasOwn.call(props, _key)) {
+      newProps[_key] = props[_key];
+    }
+  }
+
+  newProps[typePropName] = type; // Runtime labeling is an opt-in feature because:
+
+  return newProps;
+};
+
+var Insertion$1 = 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$1 && 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 Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
+  var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
+  // not passing the registered cache to serializeStyles because it would
+  // make certain babel optimisations not possible
+
+  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
+    cssProp = cache.registered[cssProp];
+  }
+
+  var WrappedComponent = props[typePropName];
+  var registeredStyles = [cssProp];
+  var className = '';
+
+  if (typeof props.className === 'string') {
+    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
+  } else if (props.className != null) {
+    className = props.className + " ";
+  }
+
+  var serialized = serializeStyles(registeredStyles, undefined, React__namespace.useContext(ThemeContext));
+
+  className += cache.key + "-" + serialized.name;
+  var newProps = {};
+
+  for (var _key2 in props) {
+    if (hasOwn.call(props, _key2) && _key2 !== 'css' && _key2 !== typePropName && (!isDevelopment$1 )) {
+      newProps[_key2] = props[_key2];
+    }
+  }
+
+  newProps.className = className;
+
+  if (ref) {
+    newProps.ref = ref;
+  }
+
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Insertion$1, {
+    cache: cache,
+    serialized: serialized,
+    isStringTag: typeof WrappedComponent === 'string'
+  }), /*#__PURE__*/React__namespace.createElement(WrappedComponent, newProps));
+});
+
+var Emotion$1 = Emotion;
+
+var jsx$1 = function jsx(type, props, key) {
+  if (!hasOwn.call(props, 'css')) {
+    return ReactJSXRuntime__namespace.jsx(type, props, key);
+  }
+
+  return ReactJSXRuntime__namespace.jsx(Emotion$1, createEmotionProps(type, props), key);
+};
+var jsxs = function jsxs(type, props, key) {
+  if (!hasOwn.call(props, 'css')) {
+    return ReactJSXRuntime__namespace.jsxs(type, props, key);
+  }
+
+  return ReactJSXRuntime__namespace.jsxs(Emotion$1, createEmotionProps(type, props), key);
+};
+
+var jsx = function jsx(type, props) {
+  // eslint-disable-next-line prefer-rest-params
+  var args = arguments;
+
+  if (props == null || !hasOwn.call(props, 'css')) {
+    return React__namespace.createElement.apply(undefined, args);
+  }
+
+  var argsLength = args.length;
+  var createElementArgArray = new Array(argsLength);
+  createElementArgArray[0] = Emotion$1;
+  createElementArgArray[1] = createEmotionProps(type, props);
+
+  for (var i = 2; i < argsLength; i++) {
+    createElementArgArray[i] = args[i];
+  }
+
+  return React__namespace.createElement.apply(null, createElementArgArray);
+};
+
+(function (_jsx) {
+  var JSX;
+
+  (function (_JSX) {})(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
+})(jsx || (jsx = {}));
+
+function css() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return serializeStyles(args);
+}
+
+// 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|popover|popoverTarget|popoverTargetAction|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 isDevelopment = false;
+
+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() {
+        if (targetClassName === undefined && isDevelopment) {
+          return 'NO_COMPONENT_SELECTOR';
+        }
+
+        return "." + targetClassName;
+      }
+    });
+
+    Styled.withComponent = function (nextTag, nextOptions) {
+      var newStyled = createStyled(nextTag, _extends({}, options, nextOptions, {
+        shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
+      }));
+      return newStyled.apply(void 0, 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 styled = createStyled.bind(null);
+tags.forEach(function (tagName) {
+  styled[tagName] = styled(tagName);
+});
+
+const colors = {
+    //mode
+    background: {
+        'white': '#FFFFFF',
+        'black': '#000000',
+        'gray-subtler': '#F4F5F6',
+        'gray-subtle': '#E6E8EA',
+        'inverse': '#1E2124',
+    },
+    surface: {
+        'white': '#FFFFFF',
+        'white-subtler': '#FFFFFF',
+        'white-subtle': '#FFFFFF',
+        'white-static': '#FFFFFF',
+        'inverse': '#1E2124',
+        'inverse-static': '#1E2124',
+        'gray-subtler': '#F4F5F6',
+        'gray-subtle': '#E6E8EA',
+        'disabled': '#CDD1D5',
+        'primary-subtler': '#ECF2FE',
+        'secondary-subtler': '#EEF2F7',
+        'point-subtler': '#FBEFF0',
+        'danger-subtler': '#FDEFEC',
+        'warning-subtler': '#FFF3DB',
+        'success-subtler': '#EAF6EC',
+        'information-subtler': '#E7F4FE'
+    },
+    border: {
+        'transparency': 'rgba(0, 0, 0, 0)',
+        'inverse': '#FFFFFF',
+        'disabled': '#B1B8BE',
+        'gray-light': '#CDD1D5',
+        'gray': '#B1B8BE',
+        'gray-dark': '#58616A',
+        'gray-darker': '#1E2124',
+        'primary-light': '#D8E5FD',
+        'primary': '#256EF4',
+        'secondary-light': '#D6E0EB',
+        'secondary': '#063A74',
+        'point-light': '#F5D6D9',
+        'point': '#D63D4A',
+        'danger-light': '#FCDFD9',
+        'danger': '#DE3412',
+        'warning-light': '#FFE0A3',
+        'warning': '#9E6A00',
+        'success-light': '#D8EEDD',
+        'success': '#228738',
+        'information-light': '#D3EBFD',
+        'information': '#0B78CB'
+    },
+    divider: {
+        'gray-light': '#CDD1D5',
+        'gray': '#8A949E',
+        'gray-dark': '#6D7882',
+        'gray-darker': '#1E2124',
+        'inverse': '#FFFFFF',
+        'primary-light': '#D8E5FD',
+        'primary': '#256EF4',
+        'secondary-light': '#D6E0EB',
+        'secondary': '#063A74',
+        'error': '#DE3412',
+        'point': '#D63D4A'
+    },
+    text: {
+        'bolder': '#131416',
+        'basic': '#1E2124',
+        'subtle': '#464C53',
+        'disabled': '#8A949E',
+        'disabled-on': '#6D7882',
+        'border-inverse': '#FFFFFF',
+        'basic-inverse': '#FFFFFF',
+        'subtle-inverse': '#B1B8BE',
+        'static': '#1E2124',
+        'inverse-static': '#FFFFFF',
+        'primary': '#0B50D0',
+        'secondary': '#052B57',
+        'point': '#AB2B36',
+        'danger': '#BD2C0F',
+        'warning': '#8A5C00',
+        'success': '#267337',
+        'information': '#096AB3'
+    },
+    action: {
+        'white': '#FFFFFF',
+        'primary': 'rgba(255, 255, 255, 0)',
+        'primary-hover': '#ECF2FE',
+        'primary-pressed': '#D8E5FD',
+        'primary-selected': '#ECF2FE',
+        'primary-active': '#256EF4',
+        'secondary': 'rgba(255, 255, 255, 0)',
+        'secondary-hover': '#EEF2F7',
+        'secondary-pressed': '#D6E0EB',
+        'secondary-selected': '#EEF2F7',
+        'secondary-on': '#rgba(255, 255, 255, 0)',
+        'secondary-on-hover': '#FFFFFF',
+        'secondary-on-pressed': '#D6E0EB',
+        'secondary-on-selected': '#FFFFFF',
+        'secondary-active': '#063A74',
+        'disabled': '#CDD1D5'
+    },
+    element: {
+        'inverse': '#FFFFFF',
+        'inverse-static': '#FFFFFF',
+        'gray-lighter': '#',
+        'gray-light': '#E6E8EA',
+        'gray': '#6D7882',
+        'gray-dark': '#58616A',
+        'disabled-light': '#CDD1D5',
+        'disabled-dark': '#8A949E',
+        'primary-light': '#D8E5FD',
+        'primary-lighter': '#ECF2FE',
+        'primary': '#256EF4',
+        'secondary-light': '#D6E0EB',
+        'secondary-lighter': '#EEF2F7',
+        'secondary': '#063A74',
+        'point-light': '#F5D6D9',
+        'point-lighter': '#FBEFF0',
+        'point': '#D63D4A',
+        'danger': '#DE3412',
+        'danger-lighter': '#FDEFEC',
+        'warning': '#FFB114',
+        'warning-lighter': '#FFF3DB',
+        'success': '#228738',
+        'success-lighter': '#EAF6EC',
+        'information': '#0B78CB',
+        'information-lighter': '#E7F4FE',
+        'logo-text': '#575756'
+    },
+    icon: {
+        'gray': '#33363D',
+        'gary-light': '#464C53',
+        'gray-fill': '#CDD1D5',
+        'inverse': '#FFFFFF',
+        'disabled': '#8A949E',
+        'disabled-on': '#6D7882',
+        'primary': '#256EF4',
+        'secondary': '#052B57',
+        'point': '#D63D4A',
+        'danger': '#DE3412',
+        'warning': '#9E6A00',
+        'success': '#228738',
+        'information': '#0B78CB',
+        'inverse-static': '#FFFFFF',
+        'primary-static': '#256EF4',
+        'secondary-static': '#052B57',
+        'point-static': '#D63D4A',
+        'danger-static': '#DE3412',
+        'warning-static': '#9E6A00',
+        'success-static': '#228738',
+        'information-static': '#0B78CB'
+    },
+    link: {
+        'default': '#0B78CB',
+        'hover': '#0B50D0',
+        'pressed': '#083891',
+        'visited': '#5917B8'
+    },
+    button: {
+        'primary-fill': '#256EF4',
+        'primary-fill-hover': '#0B50D0',
+        'primary-fill-pressed': '#083891',
+        'secondary-fill': '#ECF2FE',
+        'secondary-fill-hover': '#D8E5FD',
+        'secondary-fill-pressed': '#B1CEFB',
+        'secondary-border': '#256EF4',
+        'tertiary-fill': 'rgba(255, 255, 255, 0)',
+        'tertiary-fill-hover': '#F4F5F6',
+        'tertiary-fill-pressed': '#E6E8EA',
+        'tertiary-border': '#58616A',
+        'text-fill': 'rgba(255, 255, 255, 0)',
+        'text-fill-hover': '#EEF2F7',
+        'text-fill-pressed': '#D6E0EB',
+        'text-border': 'rgba(0, 0, 0, 0)',
+        'disabled-fill': '#CDD1D5',
+        'disabled-border': '#B1B8BE'
+    },
+    input: {
+        'surface': '#FFFFFF',
+        'border': '#58616A',
+        'border-active': '#256EF4',
+        'border-error': '#DE3412',
+        'surface-disabled': '#CDD1D5',
+        'border-disabled': '#B1B8BE',
+    },
+    graphic: {
+        'blue-subtler': '#E5ECF9',
+        'blue-subtle': '#98ACC5',
+        'blue': '#61758F',
+        'blue-dark': '#39506C',
+        'blue-darker': '#223A58',
+        'red-subtler': '#FBEFF0',
+        'red-subtle': '#F5D6D9',
+        'red': '#EBADB2',
+        'red-dark': '#D65C66',
+        'red-darker': '#7A1F26',
+        'brand': '#256EF4'
+    },
+    alpha: {
+        'base100': 'rgba(255, 255, 255, 1)',
+        'base75': 'rgba(255, 255, 255, 0.75)',
+        'base50': 'rgba(255, 255, 255, 0.50)',
+        'base25': 'rgba(255, 255, 255, 0.25)',
+        'base10': 'rgba(255, 255, 255, 0.1)',
+        'base0': 'rgba(255, 255, 255, 0)',
+        'inverse100': 'rgba(0, 0, 0, 1)',
+        'inverse75': 'rgba(0, 0, 0, 0.75)',
+        'inverse50': 'rgba(0, 0, 0, 0.5)',
+        'inverse25': 'rgba(0, 0, 0, 0.25)',
+        'inverse10': 'rgba(0, 0, 0, 0.1)',
+        'inverse0': 'rgba(0, 0, 0, 0)',
+        'shadow0': 'rgba(0, 0, 0, 0)',
+        'shadow1': 'rgba(0, 0, 0, 0.05)',
+        'shadow2': 'rgba(0, 0, 0, 0.08)',
+        'shadow3': 'rgba(0, 0, 0, 0.12)',
+    },
+    //primitive
+    light: {
+        gray: {
+            '100': '#000000',
+            '95': '#131416',
+            '90': '#1E2124',
+            '80': '#33363D',
+            '70': '#464C53',
+            '60': '#58616A',
+            '50': '#6D7882',
+            '40': '#8A949E',
+            '30': '#B1B8BE',
+            '20': '#CDD1D5',
+            '10': '#E6E8EA',
+            '5': '#F4F5F6',
+            '0': '#FFFFFF',
+        },
+        primary: {
+            '95': '#020F27',
+            '90': '#03163A',
+            '80': '#052561',
+            '70': '#083891',
+            '60': '#0B50D0',
+            '50': '#256EF4',
+            '40': '#4C87F6',
+            '30': '#86AFF9',
+            '20': '#B1CEFB',
+            '10': '#D8E5FD',
+            '5': '#ECF2FE',
+        },
+        secondary: {
+            '95': '#02162C',
+            '90': '#031F3F',
+            '80': '#052B57',
+            '70': '#063A74',
+            '60': '#1C589C',
+            '50': '#346FB2',
+            '40': '#6B96C7',
+            '30': '#90B0D5',
+            '20': '#BACBDE',
+            '10': '#D6E0EB',
+            '5': '#EEF2F7',
+        },
+        point: {
+            '95': '#21080A',
+            '90': '#310C0F',
+            '80': '#521419',
+            '70': '#7A1F26',
+            '60': '#AB2B36',
+            '50': '#D63D4A',
+            '40': '#D65C66',
+            '30': '#E0858C',
+            '20': '#EBADB2',
+            '10': '#F5D6D9',
+            '5': '#FBEFF0'
+        },
+        danger: {
+            '95': '#260903',
+            '90': '#390D05',
+            '80': '#5C180A',
+            '70': '#8A240F',
+            '60': '#BD2C0F',
+            '50': '#DE3412',
+            '40': '#F05F42',
+            '30': '#F48771',
+            '20': '#F7AFA1',
+            '10': '#FCDFD9',
+            '5': '#FDEFEC',
+        },
+        warning: {
+            '95': '#241800',
+            '90': '#2E1F00',
+            '80': '#422C00',
+            '70': '#614100',
+            '60': '#8A5C00',
+            '50': '#9E6A00',
+            '40': '#C78500',
+            '30': '#FFB114',
+            '20': '#FFC95C',
+            '10': '#FFE0A3',
+            '5': '#FFF3DB'
+        },
+        success: {
+            '95': '#0E2012',
+            '90': '#122B18',
+            '80': '#1F4727',
+            '70': '#285D33',
+            '60': '#267337',
+            '50': '#228738',
+            '40': '#3FA654',
+            '30': '#7EC88E',
+            '20': '#A9DAB4',
+            '10': '#D8EEDD',
+            '5': '#EAF6EC',
+        },
+        information: {
+            '95': '#021A2C',
+            '90': '#03253F',
+            '80': '#053961',
+            '70': '#085691',
+            '60': '#096AB3',
+            '50': '#0B78CB',
+            '40': '#2098F3',
+            '30': '#5FB5F7',
+            '20': '#9ED2FA',
+            '10': '#D3EBFD',
+            '5': '#E7F4FE'
+        },
+        alpha: {
+            'black100': 'rgba(0, 0, 0, 1)',
+            'black75': 'rgba(0, 0, 0, 0.75)',
+            'black50': 'rgba(0, 0, 0, 0.5)',
+            'black25': 'rgba(0, 0, 0, 0.25)',
+            'black10': 'rgba(0, 0, 0, 0.1)',
+            'black0': 'rgba(0, 0, 0, 0)',
+            'white100': 'rgba(0, 0, 0, 1)',
+            'white75': 'rgba(0, 0, 0, 0.75)',
+            'white50': 'rgba(0, 0, 0, 0.50)',
+            'white25': 'rgba(0, 0, 0, 0.25)',
+            'white10': 'rgba(0, 0, 0, 0.1)',
+            'white0': 'rgba(0, 0, 0, 0)',
+        },
+        graphic: {
+            '90': '#223A58',
+            '70': '#39506C',
+            '50': '#61758F',
+            '30': '#98ACC5',
+            '10': '#E5ECF9'
+        },
+    },
+    highContrast: {
+        gray: {
+            '100': '#000000',
+            '95': '#131416',
+            '90': '#1E2124',
+            '80': '#33363D',
+            '70': '#464C53',
+            '60': '#58616A',
+            '50': '#6D7882',
+            '40': '#8A949E',
+            '30': '#B1B8BE',
+            '20': '#CDD1D5',
+            '10': '#E6E8EA',
+            '5': '#F4F5F6',
+            '0': '#FFFFFF',
+        },
+        primary: {
+            '95': '#020F27',
+            '90': '#03163A',
+            '80': '#052561',
+            '70': '#083891',
+            '60': '#0B50D0',
+            '50': '#256EF4',
+            '40': '#4C87F6',
+            '30': '#86AFF9',
+            '20': '#B1CEFB',
+            '10': '#D8E5FD',
+            '5': '#ECF2FE',
+        },
+        secondary: {
+            '95': '#091F25',
+            '90': '#0E3139',
+            '80': '#113B45',
+            '70': '#17505E',
+            '60': '#1F687A',
+            '50': '#268097',
+            '40': '#3D9FB8',
+            '30': '#75C0D1',
+            '20': '#ABD8E3',
+            '10': '#D5EBF1',
+            '5': '#EDF6F8'
+        },
+        point: {
+            '95': '#21080A',
+            '90': '#310C0F',
+            '80': '#521419',
+            '70': '#7A1F26',
+            '60': '#AB2B36',
+            '50': '#D63D4A',
+            '40': '#D65C66',
+            '30': '#E0858C',
+            '20': '#EBADB2',
+            '10': '#F5D6D9',
+            '5': '#FBEFF0'
+        },
+        danger: {
+            '95': '#260903',
+            '90': '#390D05',
+            '80': '#5C180A',
+            '70': '#8A240F',
+            '60': '#BD2C0F',
+            '50': '#DE3412',
+            '40': '#F05F42',
+            '30': '#F48771',
+            '20': '#F7AFA1',
+            '10': '#FCDFD9',
+            '5': '#FDEFEC',
+        },
+        warning: {
+            '95': '#241800',
+            '90': '#2E1F00',
+            '80': '#422C00',
+            '70': '#614100',
+            '60': '#8A5C00',
+            '50': '#9E6A00',
+            '40': '#C78500',
+            '30': '#FFB114',
+            '20': '#FFC95C',
+            '10': '#FFE0A3',
+            '5': '#FFF3DB'
+        },
+        success: {
+            '95': '#0E2012',
+            '90': '#122B18',
+            '80': '#1F4727',
+            '70': '#285D33',
+            '60': '#267337',
+            '50': '#228738',
+            '40': '#3FA654',
+            '30': '#7EC88E',
+            '20': '#A9DAB4',
+            '10': '#D8EEDD',
+            '5': '#EAF6EC',
+        },
+        information: {
+            '95': '#021A2C',
+            '90': '#03253F',
+            '80': '#053961',
+            '70': '#085691',
+            '60': '#096AB3',
+            '50': '#0B78CB',
+            '40': '#2098F3',
+            '30': '#5FB5F7',
+            '20': '#9ED2FA',
+            '10': '#D3EBFD',
+            '5': '#E7F4FE'
+        },
+        alpha: {
+            'black100': 'rgba(0, 0, 0, 1)',
+            'black75': 'rgba(0, 0, 0, 0.75)',
+            'black50': 'rgba(0, 0, 0, 0.5)',
+            'black25': 'rgba(0, 0, 0, 0.25)',
+            'black10': 'rgba(0, 0, 0, 0.1)',
+            'black0': 'rgba(0, 0, 0, 0)',
+            'white100': 'rgba(0, 0, 0, 1)',
+            'white75': 'rgba(0, 0, 0, 0.75)',
+            'white50': 'rgba(0, 0, 0, 0.50)',
+            'white25': 'rgba(0, 0, 0, 0.25)',
+            'white10': 'rgba(0, 0, 0, 0.1)',
+            'white0': 'rgba(0, 0, 0, 0)',
+        },
+        graphic: {
+            '90': '#223A58',
+            '70': '#39506C',
+            '50': '#61758F',
+            '30': '#98ACC5',
+            '10': '#E5ECF9'
+        },
+    },
+};
+
+const typography = {
+    fontFamily: {
+        primary: '"Pretendard", -apple-system, BlinkMacSystemFont, sans-serif',
+    },
+    // Display
+    display: {
+        large: {
+            fontSize: '60px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        medium: {
+            fontSize: '44px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        small: {
+            fontSize: '36px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+    },
+    // Heading
+    heading: {
+        xlarge: {
+            fontSize: '40px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        large: {
+            fontSize: '32px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        medium: {
+            fontSize: '24px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        small: {
+            fontSize: '19px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        xsmall: {
+            fontSize: '17px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        xxsmall: {
+            fontSize: '15px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+    },
+    // Body
+    body: {
+        large: {
+            fontSize: '19px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        largeBold: {
+            fontSize: '19px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        medium: {
+            fontSize: '17px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        mediumBold: {
+            fontSize: '17px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        small: {
+            fontSize: '15px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        smallBold: {
+            fontSize: '15px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        xsmall: {
+            fontSize: '13px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        xsmallBold: {
+            fontSize: '13px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+    },
+    // Label
+    label: {
+        large: {
+            fontSize: '19px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        medium: {
+            fontSize: '17px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        small: {
+            fontSize: '15px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        xsmall: {
+            fontSize: '13px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+    },
+    // Navigation
+    navigation: {
+        titleMedium: {
+            fontSize: '24px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        titleSmall: {
+            fontSize: '19px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        depthMediumBold: {
+            fontSize: '17px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        depthMedium: {
+            fontSize: '17px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+        depthSmallBold: {
+            fontSize: '15px',
+            lineHeight: '150%',
+            fontWeight: 700,
+        },
+        depthSmall: {
+            fontSize: '15px',
+            lineHeight: '150%',
+            fontWeight: 400,
+        },
+    },
+    // Underline
+    underline: {
+        large: {
+            fontSize: '19px',
+            lineHeight: '150%',
+            fontWeight: 400,
+            textDecoration: 'underline',
+        },
+        medium: {
+            fontSize: '17px',
+            lineHeight: '150%',
+            fontWeight: 400,
+            textDecoration: 'underline',
+        },
+        small: {
+            fontSize: '15px',
+            lineHeight: '150%',
+            fontWeight: 400,
+            textDecoration: 'underline',
+        },
+        xsmall: {
+            fontSize: '13px',
+            lineHeight: '150%',
+            fontWeight: 400,
+            textDecoration: 'underline',
+        },
+    },
+    // Font Weight
+    fontWeight: {
+        regular: 400,
+        bold: 700,
+    },
+};
+
+const getButtonSizeStyle = (size) => {
+    switch (size) {
+        case 'small':
+            return css `
+                width: 148px;
+                height: 40px;
+                padding: 12px 0px;
+                font-size: ${typography.label.small.fontSize};
+                line-height: ${typography.label.small.lineHeight};
+                font-weight: ${typography.label.small.fontWeight};
+                font-family: ${typography.fontFamily.primary};
+                letter-spacing: -0.02em;
+            `;
+        case 'medium':
+            return css `
+                width: 168px;
+                height: 40px;
+                padding: 12px 0px;
+                font-size: ${typography.label.medium.fontSize};
+                line-height: ${typography.label.medium.lineHeight};
+                font-weight: ${typography.label.medium.fontWeight};
+                font-family: ${typography.fontFamily.primary};
+                letter-spacing: -0.02em;
+            `;
+        case 'large':
+            return css `
+                width: 198px;
+                height: 40px;
+                padding: 12px 0px;
+                font-size: ${typography.label.medium.fontSize};
+                line-height: ${typography.label.medium.lineHeight};
+                font-weight: ${typography.label.medium.fontWeight};
+                font-family: ${typography.fontFamily.primary};
+                letter-spacing: -0.02em;
+            `;
+        default:
+            return css `
+                width: 168px;
+                height: 40px;
+                padding: 12px 24px;
+                font-size: ${typography.label.medium.fontSize};
+                line-height: ${typography.label.medium.lineHeight};
+                font-weight: ${typography.label.medium.fontWeight};
+                font-family: ${typography.fontFamily.primary};
+                letter-spacing: -0.02em;
+            `;
+    }
+};
+styled.button `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-radius: 8px;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    /* Size에 따른 스타일 */
+    ${props => getButtonSizeStyle(props.buttonSize)}
+
+    ${props => props.width && css `
+        width: ${props.width};
+    `}
+    
+    ${props => props.height && css `
+        height: ${props.height};
+    `}
+
+    ${props => props.buttonType === 'primary' && css `
+        background-color: ${colors.button["primary-fill"]};
+        color: ${colors.text["inverse-static"]};
+        border: none;
+
+        &:hover:not(:disabled) {
+            background-color: ${colors.button["primary-fill-hover"]};
+        }
+
+        &:active:not(:disabled) {
+            background-color: ${colors.button["tertiary-fill"]};
+        }
+    `}
+
+    ${props => props.buttonType === 'secondary' && css `
+        background-color: ${colors.button['secondary-fill']};
+        color: ${colors.text['primary']};
+        border: 1px solid ${colors.button["secondary-border"]};
+
+        &:hover:not(:disabled) {
+            background-color: ${colors.button['secondary-fill-hover']};
+        }
+
+        &:active:not(:disabled) {
+            background-color: #e0efff;
+        }
+    `}
+
+    ${props => props.buttonType === 'tertiary' && css `
+        background-color: transparent;
+        color: ${colors.text["basic"]};
+        border: 1px solid ${colors.button["tertiary-border"]};
+
+        &:hover:not(:disabled) {
+            background-color: #f0f7ff;
+        }
+
+        &:active:not(:disabled) {
+            background-color: #e0efff;
+        }
+    `}
+
+    /* Disabled 스타일 */
+    &:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+`;
+
+styled.div `
+  ${({ size, select, state }) => {
+    const dimensions = size === "large" ? "24px" : "20px";
+    const borderRadius = size === "large" ? "8px" : "6px";
+    return css `
+      width: ${dimensions};
+      height: ${dimensions};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${borderRadius};
+      cursor: ${state === "disabled" ? "not-allowed" : "pointer"};
+      transition: all 0.2s ease;
+
+      ${state === "disabled" &&
+        css `
+        background-color: ${colors.surface.disabled};
+        border: 1px solid ${colors.border.disabled};
+      `}
+
+      ${state === "default" &&
+        select === "off" &&
+        css `
+        background-color: ${colors.surface.white};
+        border: 1px solid ${colors.border["gray-dark"]};
+
+        &:hover {
+          border-color: ${colors.border.primary};
+        }
+      `}
+      
+      ${state === "default" &&
+        (select === "on" || select === "indeterminate") &&
+        css `
+        background-color: ${colors.element.primary};
+        border: 1px solid ${colors.element.primary};
+
+        &:hover {
+          background-color: ${colors.light.primary["60"]};
+          border-color: ${colors.light.primary["60"]};
+        }
+      `}
+    `;
+}}
+`;
+styled.svg `
+  width: 100%;
+  height: 100%;
+  padding: 2px;
+`;
+styled.div `
+  width: 60%;
+  height: 2.5px;
+  background-color: ${({ state }) => state === "disabled"
+    ? colors.element["disabled-dark"]
+    : colors.element.inverse};
+  border-radius: 2px;
+`;
+
+const getButtonSize = (size) => {
+    switch (size) {
+        case 'small':
+            return css `
+			height: 40px;
+			`;
+        case 'medium':
+            return css `
+			height: 48px;
+			`;
+        case 'large':
+            return css `
+			height: 56px;
+			`;
+        default:
+            return css `
+			height: 48px;
+			`;
+    }
+};
+const getFontSize = (size) => {
+    switch (size) {
+        case 'small':
+            return css `
+			font-size: ${typography.label.small.fontSize};
+			line-height: ${typography.label.small.lineHeight};
+			font-weight: ${typography.label.small.fontWeight};
+			`;
+        case 'medium':
+            return css `
+			font-size: ${typography.label.medium.fontSize};
+			line-height: ${typography.label.medium.lineHeight};
+			font-weight: ${typography.label.medium.fontWeight};
+			`;
+        case 'large':
+            return css `
+			font-size: ${typography.label.large.fontSize};
+			line-height: ${typography.label.large.lineHeight};
+			font-weight: ${typography.label.large.fontWeight};
+			`;
+        default:
+            return css `
+			font-size: ${typography.label.medium.fontSize};
+			line-height: ${typography.label.medium.lineHeight};
+			font-weight: ${typography.label.medium.fontWeight};
+			`;
+    }
+};
+const getIconSize = (size) => {
+    switch (size) {
+        case 'small':
+            return css `
+			width: 16px;
+			height: 16px;
+			`;
+        case 'medium':
+            return css `
+			width: 20px;
+			height: 20px;
+			`;
+        case 'large':
+            return css `
+			width: 24px;
+			height: 24px;
+			`;
+        default:
+            return css `
+			width: 20px;
+			height: 20px;
+			`;
+    }
+};
+const getOptionSize = (size) => {
+    switch (size) {
+        case 'small':
+            return css `
+				height: 23px;
+			`;
+        case 'medium':
+            return css `
+				height: 26px;
+			`;
+        case 'large':
+            return css `
+			height: 29px;
+			`;
+        default:
+            return css `
+			height: 26px;
+			`;
+    }
+};
+const StyledDropDown = styled.button `
+	font-family: ${typography.fontFamily.primary};
+	background: ${colors.input.surface};
+    border-radius: 8px;
+	display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+	width: 320px;
+	
+    border: ${({ isOpen }) => isOpen ? `2px solid ${colors.input['border-active']}` : `1px solid ${colors.input.border}`};
+    ${props => getButtonSize(props.size)}
+	
+`;
+const StyledBox = styled.div `
+    display: flex;
+	height: 100%;
+    padding: 0 16px;
+    align-items: center;
+    gap: 8px;
+    align-self: stretch;
+`;
+const StyledText = styled.p `
+    font-family: ${typography.fontFamily.primary};
+    font-style: normal;
+    letter-spacing: 0;
+	width: 246px;
+    flex: 1 0 0;
+	text-align: left;
+	${props => getFontSize(props.size)}
+    color: ${({ isOpen }) => isOpen ? colors.text.static : colors.text.disabled};
+`;
+const StyledLabel = styled.p `
+    font-family: ${typography.fontFamily.primary};
+	color: ${colors.text.static};
+`;
+const StyledIcon = styled.div `
+    ${props => getIconSize(props.size)}
+`;
+const StyledOptions = styled.div `
+	border: 1px solid ${colors.border["gray-light"]};
+	border-radius: 8px;
+
+    display: flex;
+    padding: 12px 8px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    max-height: ${({ size }) => size === 'small' ? '220px' :
+    size === 'large' ? '260px' :
+        '240px'};
+    overflow-y: auto;
+    overflow-x: hidden;
+`;
+const StyledOption = styled.div `
+    display: flex;
+    padding: 8px 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    align-self: stretch;
+	
+	
+	border-radius: 8px;
+	
+	color: ${colors.text.subtle};
+	position: relative;
+	
+	${props => getFontSize(props.size)}
+	${props => getOptionSize(props.size)}
+
+
+    ${({ isSelected }) => isSelected && css `
+		background: ${colors.action["secondary-selected"]};
+		color: ${colors.text.secondary};
+
+		padding-left: 36px;
+
+		&::after {
+        content: '';
+        width: 16px;
+        height: 16px;
+        background-image: url(${element});
+        background-size: cover;
+        background-repeat: no-repeat;
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+	`}
+	
+	&:hover {
+		background: ${colors.action["secondary-hover"]};
+	}
+	&:active {
+		background: ${colors.action["secondary-pressed"]};
+	}
+`;
+
+function Dropdown({ size, options, onSelect, label, placeholder }) {
+    const [open, setOpen] = React.useState(false);
+    const [selected, setSelected] = React.useState(null);
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleSelect = (option) => {
+        setSelected(option);
+        onSelect?.(option);
+        setOpen(false);
+    };
+    return (jsxs("div", { style: { position: 'relative' }, children: [jsx$1(StyledLabel, { children: label }), jsx$1(StyledDropDown, { onClick: () => setOpen((prev) => !prev), size: size, isOpen: open, children: jsxs(StyledBox, { children: [jsx$1(StyledText, { size: size, isOpen: open, children: selected ?? placeholder }), jsx$1(StyledIcon, { size: size, children: jsx$1("img", { src: arrowDownIcon, alt: "dropdown icon", style: { width: '100%', height: '100%' } }) })] }) }), open && (jsx$1(StyledOptions, { ref: ref, size: size, children: options?.map((option) => (jsx$1(StyledOption, { onClick: () => handleSelect(option), size: size, isSelected: option === selected, children: option }, option))) }))] }));
+}
+
+styled.img `
+    width: 20px;
+	height: 20px;
+    transition: transform 0.3s ease;
+    transform: rotate(${props => (props.isOpen ? '0deg' : '90deg')});
+`;
+styled.div `
+    display: flex;
+    width: 240px;
+	height: 100vh;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+	
+	background: ${colors.background.white};
+`;
+styled.div `
+	width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 18px;
+    flex: 1 0 0;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    ::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: ${colors.surface["gray-subtler"]};
+        border-radius: 4px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: ${colors.text.subtle};
+        border-radius: 4px;
+    }
+	
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: ${colors.action["secondary-active"]};
+    }
+	
+    ::-webkit-scrollbar-thumb:active {
+        background-color: ${colors.action["primary-active"]};
+    }
+`;
+styled.div `
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    align-self: stretch;
+	
+`;
+styled.div `
+	display: flex;
+	gap: 4px;
+    flex-direction: column;
+	
+`;
+styled.div `
+    display: flex;
+    width: 147px;
+    align-items: center;
+    gap: 4px;
+	height: 26px;
+    user-select: none;
+`;
+styled.div `
+    display: flex;
+    padding:  12px 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    align-self: stretch;
+	max-width: 186px;
+	
+	border-radius: 12px;
+	background: ${colors.surface["gray-subtler"]};
+`;
+styled.p `
+    align-self: stretch;
+	
+    color: ${colors.text.subtle};
+
+    font-family: ${typography.fontFamily.primary};
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 19.5px */
+    letter-spacing: 0;
+    margin: 0;
+`;
+
+styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 160px;
+  height: 100vh;
+  padding: 16px;
+  background-color: ${colors.surface.white};
+  gap: 16px;
+`;
+styled.span `
+  padding: 4px 0;
+  margin: 0;
+  ${typography.heading.xxsmall}
+  font-family:${typography.fontFamily.primary};
+  color: ${colors.text.bolder};
+`;
+styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+styled.div `
+  padding: 8px 8px;
+  font-family: ${typography.fontFamily.primary};
+  ${({ isSelected }) => isSelected ? typography.body.xsmallBold : typography.body.xsmall}
+  color: ${({ isSelected }) => isSelected ? colors.text.secondary : colors.text.subtle};
+  background-color: ${({ isSelected }) => isSelected ? colors.action["secondary-selected"] : "transparent"};
+  border-radius: 4px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${({ isSelected }) => isSelected
+    ? colors.action["secondary-selected"]
+    : colors.action["secondary-hover"]};
+  }
+
+  &:active {
+    background-color: ${colors.action["secondary-pressed"]};
+  }
+`;
+
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=index.cjs.js.map