@typeolymp/ui-components 1.9.14 → 1.10.1

package/build/index.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var r$1 = require('react');
+var React$3 = require('react');
+var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,8 +26,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var r__namespace = /*#__PURE__*/_interopNamespace(r$1);
-var r__default = /*#__PURE__*/_interopDefaultLegacy(r$1);
+var React__namespace = /*#__PURE__*/_interopNamespace(React$3);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React$3);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var theme = {
     colors: {
@@ -1685,12 +1687,12 @@ var reactIs_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var b$1="function"===typeof Symbol&&Symbol.for,c=b$1?Symbol.for("react.element"):60103,d=b$1?Symbol.for("react.portal"):60106,e=b$1?Symbol.for("react.fragment"):60107,f=b$1?Symbol.for("react.strict_mode"):60108,g$1=b$1?Symbol.for("react.profiler"):60114,h=b$1?Symbol.for("react.provider"):60109,k$1=b$1?Symbol.for("react.context"):60110,l=b$1?Symbol.for("react.async_mode"):60111,m=b$1?Symbol.for("react.concurrent_mode"):60111,n=b$1?Symbol.for("react.forward_ref"):60112,p=b$1?Symbol.for("react.suspense"):60113,q$1=b$1?
-Symbol.for("react.suspense_list"):60120,r=b$1?Symbol.for("react.memo"):60115,t=b$1?Symbol.for("react.lazy"):60116,v$1=b$1?Symbol.for("react.block"):60121,w$1=b$1?Symbol.for("react.fundamental"):60117,x$1=b$1?Symbol.for("react.responder"):60118,y$1=b$1?Symbol.for("react.scope"):60119;
-function z$1(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$1:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k$1:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z$1(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k$1;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$1;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z$1(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z$1(a)===k$1};reactIs_production_min.isContextProvider=function(a){return z$1(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$1(a)===n};reactIs_production_min.isFragment=function(a){return z$1(a)===e};reactIs_production_min.isLazy=function(a){return z$1(a)===t};
-reactIs_production_min.isMemo=function(a){return z$1(a)===r};reactIs_production_min.isPortal=function(a){return z$1(a)===d};reactIs_production_min.isProfiler=function(a){return z$1(a)===g$1};reactIs_production_min.isStrictMode=function(a){return z$1(a)===f};reactIs_production_min.isSuspense=function(a){return z$1(a)===p};
-reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g$1||a===f||a===p||a===q$1||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k$1||a.$$typeof===n||a.$$typeof===w$1||a.$$typeof===x$1||a.$$typeof===y$1||a.$$typeof===v$1)};reactIs_production_min.typeOf=z$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;
 
 var reactIs_development = {};
 
@@ -2097,7 +2099,7 @@ function murmur2(str) {
   return ((h ^ h >>> 15) >>> 0).toString(36);
 }
 
-var unitlessKeys$1 = {
+var unitlessKeys = {
   animationIterationCount: 1,
   borderImageOutset: 1,
   borderImageSlice: 1,
@@ -2181,7 +2183,7 @@ var processStyleValue = function processStyleValue(key, value) {
       }
   }
 
-  if (unitlessKeys$1[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
+  if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) {
     return value + 'px';
   }
 
@@ -2463,14 +2465,14 @@ var syncFallback = function syncFallback(create) {
   return create();
 };
 
-var useInsertionEffect = r__namespace['useInsertion' + 'Effect'] ? r__namespace['useInsertion' + 'Effect'] : false;
+var useInsertionEffect = React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : false;
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser$2 ? syncFallback : useInsertionEffect || syncFallback;
-var useInsertionEffectWithLayoutFallback = useInsertionEffect || r$1.useLayoutEffect;
+var useInsertionEffectWithLayoutFallback = useInsertionEffect || React$3.useLayoutEffect;
 
 var isBrowser$1 = typeof document !== 'undefined';
 var hasOwnProperty = {}.hasOwnProperty;
 
-var EmotionCacheContext = /* #__PURE__ */r$1.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
+var EmotionCacheContext = /* #__PURE__ */React$3.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
@@ -2486,14 +2488,14 @@ if (process.env.NODE_ENV !== 'production') {
 
 var CacheProvider = EmotionCacheContext.Provider;
 var __unsafe_useEmotionCache = function useEmotionCache() {
-  return r$1.useContext(EmotionCacheContext);
+  return React$3.useContext(EmotionCacheContext);
 };
 
 var withEmotionCache = function withEmotionCache(func) {
   // $FlowFixMe
-  return /*#__PURE__*/r$1.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React$3.forwardRef(function (props, ref) {
     // the cache will never be null in the browser
-    var cache = r$1.useContext(EmotionCacheContext);
+    var cache = React$3.useContext(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
@@ -2501,7 +2503,7 @@ var withEmotionCache = function withEmotionCache(func) {
 if (!isBrowser$1) {
   withEmotionCache = function withEmotionCache(func) {
     return function (props) {
-      var cache = r$1.useContext(EmotionCacheContext);
+      var cache = React$3.useContext(EmotionCacheContext);
 
       if (cache === null) {
         // yes, we're potentially creating this on every render
@@ -2512,7 +2514,7 @@ if (!isBrowser$1) {
         cache = createCache({
           key: 'css'
         });
-        return /*#__PURE__*/r$1.createElement(EmotionCacheContext.Provider, {
+        return /*#__PURE__*/React$3.createElement(EmotionCacheContext.Provider, {
           value: cache
         }, func(props, cache));
       } else {
@@ -2522,14 +2524,14 @@ if (!isBrowser$1) {
   };
 }
 
-var ThemeContext = /* #__PURE__ */r$1.createContext({});
+var ThemeContext = /* #__PURE__ */React$3.createContext({});
 
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'EmotionThemeContext';
 }
 
 var useTheme = function useTheme() {
-  return r$1.useContext(ThemeContext);
+  return React$3.useContext(ThemeContext);
 };
 
 var getTheme = function getTheme(outerTheme, theme) {
@@ -2556,13 +2558,13 @@ var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
   });
 });
 var ThemeProvider = function ThemeProvider(props) {
-  var theme = r$1.useContext(ThemeContext);
+  var theme = React$3.useContext(ThemeContext);
 
   if (props.theme !== theme) {
     theme = createCacheWithTheme(theme)(props.theme);
   }
 
-  return /*#__PURE__*/r$1.createElement(ThemeContext.Provider, {
+  return /*#__PURE__*/React$3.createElement(ThemeContext.Provider, {
     value: theme
   }, props.children);
 };
@@ -2570,15 +2572,15 @@ function withTheme(Component) {
   var componentName = Component.displayName || Component.name || 'Component';
 
   var render = function render(props, ref) {
-    var theme = r$1.useContext(ThemeContext);
-    return /*#__PURE__*/r$1.createElement(Component, _extends({
+    var theme = React$3.useContext(ThemeContext);
+    return /*#__PURE__*/React$3.createElement(Component, _extends({
       theme: theme,
       ref: ref
     }, props));
   }; // $FlowFixMe
 
 
-  var WithTheme = /*#__PURE__*/r$1.forwardRef(render);
+  var WithTheme = /*#__PURE__*/React$3.forwardRef(render);
   WithTheme.displayName = "WithTheme(" + componentName + ")";
   return hoistNonReactStatics$1(WithTheme, Component);
 }
@@ -2673,7 +2675,7 @@ var Insertion$1 = function Insertion(_ref) {
       next = next.next;
     }
 
-    return /*#__PURE__*/r$1.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+    return /*#__PURE__*/React$3.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
       __html: rules
     }, _ref2.nonce = cache.sheet.nonce, _ref2));
   }
@@ -2700,7 +2702,7 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
     className = props.className + " ";
   }
 
-  var serialized = serializeStyles(registeredStyles, undefined, r$1.useContext(ThemeContext));
+  var serialized = serializeStyles(registeredStyles, undefined, React$3.useContext(ThemeContext));
 
   if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
     var labelFromStack = props[labelPropName];
@@ -2721,11 +2723,11 @@ var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
 
   newProps.ref = ref;
   newProps.className = className;
-  return /*#__PURE__*/r$1.createElement(r$1.Fragment, null, /*#__PURE__*/r$1.createElement(Insertion$1, {
+  return /*#__PURE__*/React$3.createElement(React$3.Fragment, null, /*#__PURE__*/React$3.createElement(Insertion$1, {
     cache: cache,
     serialized: serialized,
     isStringTag: typeof WrappedComponent === 'string'
-  }), /*#__PURE__*/r$1.createElement(WrappedComponent, newProps));
+  }), /*#__PURE__*/React$3.createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
@@ -2860,7 +2862,7 @@ var jsx = function jsx(type, props) {
 
   if (props == null || !hasOwnProperty.call(props, 'css')) {
     // $FlowFixMe
-    return r$1.createElement.apply(undefined, args);
+    return React$3.createElement.apply(undefined, args);
   }
 
   var argsLength = args.length;
@@ -2873,7 +2875,7 @@ var jsx = function jsx(type, props) {
   } // $FlowFixMe
 
 
-  return r$1.createElement.apply(null, createElementArgArray);
+  return React$3.createElement.apply(null, createElementArgArray);
 };
 
 var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
@@ -2891,7 +2893,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   }
 
   var styles = props.styles;
-  var serialized = serializeStyles([styles], undefined, r$1.useContext(ThemeContext));
+  var serialized = serializeStyles([styles], undefined, React$3.useContext(ThemeContext));
 
   if (!isBrowser$1) {
     var _ref;
@@ -2916,7 +2918,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
       return null;
     }
 
-    return /*#__PURE__*/r$1.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
+    return /*#__PURE__*/React$3.createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
       __html: rules
     }, _ref.nonce = cache.sheet.nonce, _ref));
   } // yes, i know these hooks are used conditionally
@@ -2925,7 +2927,7 @@ var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
   // so it's not actually breaking anything
 
 
-  var sheetRef = r$1.useRef();
+  var sheetRef = React$3.useRef();
   useInsertionEffectWithLayoutFallback(function () {
     var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
 
@@ -3092,7 +3094,7 @@ var Insertion = function Insertion(_ref) {
   if (!isBrowser$1 && rules.length !== 0) {
     var _ref2;
 
-    return /*#__PURE__*/r$1.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
+    return /*#__PURE__*/React$3.createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
       return serialized.name;
     }).join(' '), _ref2.dangerouslySetInnerHTML = {
       __html: rules
@@ -3137,11 +3139,11 @@ var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
   var content = {
     css: css,
     cx: cx,
-    theme: r$1.useContext(ThemeContext)
+    theme: React$3.useContext(ThemeContext)
   };
   var ele = props.children(content);
   hasRendered = true;
-  return /*#__PURE__*/r$1.createElement(r$1.Fragment, null, /*#__PURE__*/r$1.createElement(Insertion, {
+  return /*#__PURE__*/React$3.createElement(React$3.Fragment, null, /*#__PURE__*/React$3.createElement(Insertion, {
     cache: cache,
     serializedArr: serializedArr
   }), ele);
@@ -3403,17 +3405,17 @@ var __importStar$2 = (commonjsGlobal && commonjsGlobal.__importStar) || function
 };
 Object.defineProperty(BeatLoader, "__esModule", { value: true });
 /** @jsx jsx */
-var React$2 = __importStar$2(r__default["default"]);
+var React$2 = __importStar$2(React__default["default"]);
 var react_1 = require$$1;
 var helpers_1 = helpers$1;
-var beat = react_1.keyframes(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n  50% {transform: scale(0.75);opacity: 0.2}\n  100% {transform: scale(1);opacity: 1}\n"], ["\n  50% {transform: scale(0.75);opacity: 0.2}\n  100% {transform: scale(1);opacity: 1}\n"])));
+var beat = react_1.keyframes(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n  50% {transform: scale(0.75);opacity: 0.2}\n  100% {transform: scale(1);opacity: 1}\n"], ["\n  50% {transform: scale(0.75);opacity: 0.2}\n  100% {transform: scale(1);opacity: 1}\n"])));
 var Loader = /** @class */ (function (_super) {
     __extends$1(Loader, _super);
     function Loader() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.style = function (i) {
             var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
-            return react_1.css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " ", "s ", "\n        infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " ", "s ", "\n        infinite linear;\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
+            return react_1.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " ", "s ", "\n        infinite linear;\n      animation-fill-mode: both;\n    "], ["\n      display: inline-block;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: 100%;\n      animation: ", " ", "s ", "\n        infinite linear;\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
         };
         return _this;
     }
@@ -3428,686 +3430,9 @@ var Loader = /** @class */ (function (_super) {
     return Loader;
 }(React$2.PureComponent));
 var _default = BeatLoader.default = Loader;
-var templateObject_1$O, templateObject_2$u;
-
-function stylis_min (W) {
-  function M(d, c, e, h, a) {
-    for (var m = 0, b = 0, v = 0, n = 0, q, g, x = 0, K = 0, k, u = k = q = 0, l = 0, r = 0, I = 0, t = 0, B = e.length, J = B - 1, y, f = '', p = '', F = '', G = '', C; l < B;) {
-      g = e.charCodeAt(l);
-      l === J && 0 !== b + n + v + m && (0 !== b && (g = 47 === b ? 10 : 47), n = v = m = 0, B++, J++);
-
-      if (0 === b + n + v + m) {
-        if (l === J && (0 < r && (f = f.replace(N, '')), 0 < f.trim().length)) {
-          switch (g) {
-            case 32:
-            case 9:
-            case 59:
-            case 13:
-            case 10:
-              break;
-
-            default:
-              f += e.charAt(l);
-          }
-
-          g = 59;
-        }
-
-        switch (g) {
-          case 123:
-            f = f.trim();
-            q = f.charCodeAt(0);
-            k = 1;
-
-            for (t = ++l; l < B;) {
-              switch (g = e.charCodeAt(l)) {
-                case 123:
-                  k++;
-                  break;
-
-                case 125:
-                  k--;
-                  break;
-
-                case 47:
-                  switch (g = e.charCodeAt(l + 1)) {
-                    case 42:
-                    case 47:
-                      a: {
-                        for (u = l + 1; u < J; ++u) {
-                          switch (e.charCodeAt(u)) {
-                            case 47:
-                              if (42 === g && 42 === e.charCodeAt(u - 1) && l + 2 !== u) {
-                                l = u + 1;
-                                break a;
-                              }
-
-                              break;
-
-                            case 10:
-                              if (47 === g) {
-                                l = u + 1;
-                                break a;
-                              }
-
-                          }
-                        }
-
-                        l = u;
-                      }
-
-                  }
-
-                  break;
-
-                case 91:
-                  g++;
-
-                case 40:
-                  g++;
-
-                case 34:
-                case 39:
-                  for (; l++ < J && e.charCodeAt(l) !== g;) {
-                  }
-
-              }
-
-              if (0 === k) break;
-              l++;
-            }
-
-            k = e.substring(t, l);
-            0 === q && (q = (f = f.replace(ca, '').trim()).charCodeAt(0));
-
-            switch (q) {
-              case 64:
-                0 < r && (f = f.replace(N, ''));
-                g = f.charCodeAt(1);
-
-                switch (g) {
-                  case 100:
-                  case 109:
-                  case 115:
-                  case 45:
-                    r = c;
-                    break;
-
-                  default:
-                    r = O;
-                }
-
-                k = M(c, r, k, g, a + 1);
-                t = k.length;
-                0 < A && (r = X(O, f, I), C = H(3, k, r, c, D, z, t, g, a, h), f = r.join(''), void 0 !== C && 0 === (t = (k = C.trim()).length) && (g = 0, k = ''));
-                if (0 < t) switch (g) {
-                  case 115:
-                    f = f.replace(da, ea);
-
-                  case 100:
-                  case 109:
-                  case 45:
-                    k = f + '{' + k + '}';
-                    break;
-
-                  case 107:
-                    f = f.replace(fa, '$1 $2');
-                    k = f + '{' + k + '}';
-                    k = 1 === w || 2 === w && L('@' + k, 3) ? '@-webkit-' + k + '@' + k : '@' + k;
-                    break;
-
-                  default:
-                    k = f + k, 112 === h && (k = (p += k, ''));
-                } else k = '';
-                break;
-
-              default:
-                k = M(c, X(c, f, I), k, h, a + 1);
-            }
-
-            F += k;
-            k = I = r = u = q = 0;
-            f = '';
-            g = e.charCodeAt(++l);
-            break;
-
-          case 125:
-          case 59:
-            f = (0 < r ? f.replace(N, '') : f).trim();
-            if (1 < (t = f.length)) switch (0 === u && (q = f.charCodeAt(0), 45 === q || 96 < q && 123 > q) && (t = (f = f.replace(' ', ':')).length), 0 < A && void 0 !== (C = H(1, f, c, d, D, z, p.length, h, a, h)) && 0 === (t = (f = C.trim()).length) && (f = '\x00\x00'), q = f.charCodeAt(0), g = f.charCodeAt(1), q) {
-              case 0:
-                break;
-
-              case 64:
-                if (105 === g || 99 === g) {
-                  G += f + e.charAt(l);
-                  break;
-                }
-
-              default:
-                58 !== f.charCodeAt(t - 1) && (p += P(f, q, g, f.charCodeAt(2)));
-            }
-            I = r = u = q = 0;
-            f = '';
-            g = e.charCodeAt(++l);
-        }
-      }
-
-      switch (g) {
-        case 13:
-        case 10:
-          47 === b ? b = 0 : 0 === 1 + q && 107 !== h && 0 < f.length && (r = 1, f += '\x00');
-          0 < A * Y && H(0, f, c, d, D, z, p.length, h, a, h);
-          z = 1;
-          D++;
-          break;
-
-        case 59:
-        case 125:
-          if (0 === b + n + v + m) {
-            z++;
-            break;
-          }
-
-        default:
-          z++;
-          y = e.charAt(l);
-
-          switch (g) {
-            case 9:
-            case 32:
-              if (0 === n + m + b) switch (x) {
-                case 44:
-                case 58:
-                case 9:
-                case 32:
-                  y = '';
-                  break;
-
-                default:
-                  32 !== g && (y = ' ');
-              }
-              break;
-
-            case 0:
-              y = '\\0';
-              break;
-
-            case 12:
-              y = '\\f';
-              break;
-
-            case 11:
-              y = '\\v';
-              break;
-
-            case 38:
-              0 === n + b + m && (r = I = 1, y = '\f' + y);
-              break;
-
-            case 108:
-              if (0 === n + b + m + E && 0 < u) switch (l - u) {
-                case 2:
-                  112 === x && 58 === e.charCodeAt(l - 3) && (E = x);
-
-                case 8:
-                  111 === K && (E = K);
-              }
-              break;
-
-            case 58:
-              0 === n + b + m && (u = l);
-              break;
-
-            case 44:
-              0 === b + v + n + m && (r = 1, y += '\r');
-              break;
-
-            case 34:
-            case 39:
-              0 === b && (n = n === g ? 0 : 0 === n ? g : n);
-              break;
-
-            case 91:
-              0 === n + b + v && m++;
-              break;
-
-            case 93:
-              0 === n + b + v && m--;
-              break;
-
-            case 41:
-              0 === n + b + m && v--;
-              break;
-
-            case 40:
-              if (0 === n + b + m) {
-                if (0 === q) switch (2 * x + 3 * K) {
-                  case 533:
-                    break;
-
-                  default:
-                    q = 1;
-                }
-                v++;
-              }
-
-              break;
-
-            case 64:
-              0 === b + v + n + m + u + k && (k = 1);
-              break;
-
-            case 42:
-            case 47:
-              if (!(0 < n + m + v)) switch (b) {
-                case 0:
-                  switch (2 * g + 3 * e.charCodeAt(l + 1)) {
-                    case 235:
-                      b = 47;
-                      break;
-
-                    case 220:
-                      t = l, b = 42;
-                  }
-
-                  break;
-
-                case 42:
-                  47 === g && 42 === x && t + 2 !== l && (33 === e.charCodeAt(t + 2) && (p += e.substring(t, l + 1)), y = '', b = 0);
-              }
-          }
-
-          0 === b && (f += y);
-      }
-
-      K = x;
-      x = g;
-      l++;
-    }
-
-    t = p.length;
-
-    if (0 < t) {
-      r = c;
-      if (0 < A && (C = H(2, p, r, d, D, z, t, h, a, h), void 0 !== C && 0 === (p = C).length)) return G + p + F;
-      p = r.join(',') + '{' + p + '}';
-
-      if (0 !== w * E) {
-        2 !== w || L(p, 2) || (E = 0);
-
-        switch (E) {
-          case 111:
-            p = p.replace(ha, ':-moz-$1') + p;
-            break;
-
-          case 112:
-            p = p.replace(Q, '::-webkit-input-$1') + p.replace(Q, '::-moz-$1') + p.replace(Q, ':-ms-input-$1') + p;
-        }
-
-        E = 0;
-      }
-    }
-
-    return G + p + F;
-  }
-
-  function X(d, c, e) {
-    var h = c.trim().split(ia);
-    c = h;
-    var a = h.length,
-        m = d.length;
-
-    switch (m) {
-      case 0:
-      case 1:
-        var b = 0;
-
-        for (d = 0 === m ? '' : d[0] + ' '; b < a; ++b) {
-          c[b] = Z(d, c[b], e).trim();
-        }
-
-        break;
-
-      default:
-        var v = b = 0;
-
-        for (c = []; b < a; ++b) {
-          for (var n = 0; n < m; ++n) {
-            c[v++] = Z(d[n] + ' ', h[b], e).trim();
-          }
-        }
-
-    }
-
-    return c;
-  }
-
-  function Z(d, c, e) {
-    var h = c.charCodeAt(0);
-    33 > h && (h = (c = c.trim()).charCodeAt(0));
-
-    switch (h) {
-      case 38:
-        return c.replace(F, '$1' + d.trim());
-
-      case 58:
-        return d.trim() + c.replace(F, '$1' + d.trim());
-
-      default:
-        if (0 < 1 * e && 0 < c.indexOf('\f')) return c.replace(F, (58 === d.charCodeAt(0) ? '' : '$1') + d.trim());
-    }
-
-    return d + c;
-  }
-
-  function P(d, c, e, h) {
-    var a = d + ';',
-        m = 2 * c + 3 * e + 4 * h;
-
-    if (944 === m) {
-      d = a.indexOf(':', 9) + 1;
-      var b = a.substring(d, a.length - 1).trim();
-      b = a.substring(0, d).trim() + b + ';';
-      return 1 === w || 2 === w && L(b, 1) ? '-webkit-' + b + b : b;
-    }
-
-    if (0 === w || 2 === w && !L(a, 1)) return a;
-
-    switch (m) {
-      case 1015:
-        return 97 === a.charCodeAt(10) ? '-webkit-' + a + a : a;
-
-      case 951:
-        return 116 === a.charCodeAt(3) ? '-webkit-' + a + a : a;
-
-      case 963:
-        return 110 === a.charCodeAt(5) ? '-webkit-' + a + a : a;
-
-      case 1009:
-        if (100 !== a.charCodeAt(4)) break;
-
-      case 969:
-      case 942:
-        return '-webkit-' + a + a;
-
-      case 978:
-        return '-webkit-' + a + '-moz-' + a + a;
-
-      case 1019:
-      case 983:
-        return '-webkit-' + a + '-moz-' + a + '-ms-' + a + a;
-
-      case 883:
-        if (45 === a.charCodeAt(8)) return '-webkit-' + a + a;
-        if (0 < a.indexOf('image-set(', 11)) return a.replace(ja, '$1-webkit-$2') + a;
-        break;
-
-      case 932:
-        if (45 === a.charCodeAt(4)) switch (a.charCodeAt(5)) {
-          case 103:
-            return '-webkit-box-' + a.replace('-grow', '') + '-webkit-' + a + '-ms-' + a.replace('grow', 'positive') + a;
-
-          case 115:
-            return '-webkit-' + a + '-ms-' + a.replace('shrink', 'negative') + a;
-
-          case 98:
-            return '-webkit-' + a + '-ms-' + a.replace('basis', 'preferred-size') + a;
-        }
-        return '-webkit-' + a + '-ms-' + a + a;
-
-      case 964:
-        return '-webkit-' + a + '-ms-flex-' + a + a;
-
-      case 1023:
-        if (99 !== a.charCodeAt(8)) break;
-        b = a.substring(a.indexOf(':', 15)).replace('flex-', '').replace('space-between', 'justify');
-        return '-webkit-box-pack' + b + '-webkit-' + a + '-ms-flex-pack' + b + a;
-
-      case 1005:
-        return ka.test(a) ? a.replace(aa, ':-webkit-') + a.replace(aa, ':-moz-') + a : a;
-
-      case 1e3:
-        b = a.substring(13).trim();
-        c = b.indexOf('-') + 1;
-
-        switch (b.charCodeAt(0) + b.charCodeAt(c)) {
-          case 226:
-            b = a.replace(G, 'tb');
-            break;
-
-          case 232:
-            b = a.replace(G, 'tb-rl');
-            break;
-
-          case 220:
-            b = a.replace(G, 'lr');
-            break;
-
-          default:
-            return a;
-        }
-
-        return '-webkit-' + a + '-ms-' + b + a;
-
-      case 1017:
-        if (-1 === a.indexOf('sticky', 9)) break;
+var templateObject_1$P, templateObject_2$v;
 
-      case 975:
-        c = (a = d).length - 10;
-        b = (33 === a.charCodeAt(c) ? a.substring(0, c) : a).substring(d.indexOf(':', 7) + 1).trim();
-
-        switch (m = b.charCodeAt(0) + (b.charCodeAt(7) | 0)) {
-          case 203:
-            if (111 > b.charCodeAt(8)) break;
-
-          case 115:
-            a = a.replace(b, '-webkit-' + b) + ';' + a;
-            break;
-
-          case 207:
-          case 102:
-            a = a.replace(b, '-webkit-' + (102 < m ? 'inline-' : '') + 'box') + ';' + a.replace(b, '-webkit-' + b) + ';' + a.replace(b, '-ms-' + b + 'box') + ';' + a;
-        }
-
-        return a + ';';
-
-      case 938:
-        if (45 === a.charCodeAt(5)) switch (a.charCodeAt(6)) {
-          case 105:
-            return b = a.replace('-items', ''), '-webkit-' + a + '-webkit-box-' + b + '-ms-flex-' + b + a;
-
-          case 115:
-            return '-webkit-' + a + '-ms-flex-item-' + a.replace(ba, '') + a;
-
-          default:
-            return '-webkit-' + a + '-ms-flex-line-pack' + a.replace('align-content', '').replace(ba, '') + a;
-        }
-        break;
-
-      case 973:
-      case 989:
-        if (45 !== a.charCodeAt(3) || 122 === a.charCodeAt(4)) break;
-
-      case 931:
-      case 953:
-        if (!0 === la.test(d)) return 115 === (b = d.substring(d.indexOf(':') + 1)).charCodeAt(0) ? P(d.replace('stretch', 'fill-available'), c, e, h).replace(':fill-available', ':stretch') : a.replace(b, '-webkit-' + b) + a.replace(b, '-moz-' + b.replace('fill-', '')) + a;
-        break;
-
-      case 962:
-        if (a = '-webkit-' + a + (102 === a.charCodeAt(5) ? '-ms-' + a : '') + a, 211 === e + h && 105 === a.charCodeAt(13) && 0 < a.indexOf('transform', 10)) return a.substring(0, a.indexOf(';', 27) + 1).replace(ma, '$1-webkit-$2') + a;
-    }
-
-    return a;
-  }
-
-  function L(d, c) {
-    var e = d.indexOf(1 === c ? ':' : '{'),
-        h = d.substring(0, 3 !== c ? e : 10);
-    e = d.substring(e + 1, d.length - 1);
-    return R(2 !== c ? h : h.replace(na, '$1'), e, c);
-  }
-
-  function ea(d, c) {
-    var e = P(c, c.charCodeAt(0), c.charCodeAt(1), c.charCodeAt(2));
-    return e !== c + ';' ? e.replace(oa, ' or ($1)').substring(4) : '(' + c + ')';
-  }
-
-  function H(d, c, e, h, a, m, b, v, n, q) {
-    for (var g = 0, x = c, w; g < A; ++g) {
-      switch (w = S[g].call(B, d, x, e, h, a, m, b, v, n, q)) {
-        case void 0:
-        case !1:
-        case !0:
-        case null:
-          break;
-
-        default:
-          x = w;
-      }
-    }
-
-    if (x !== c) return x;
-  }
-
-  function T(d) {
-    switch (d) {
-      case void 0:
-      case null:
-        A = S.length = 0;
-        break;
-
-      default:
-        if ('function' === typeof d) S[A++] = d;else if ('object' === typeof d) for (var c = 0, e = d.length; c < e; ++c) {
-          T(d[c]);
-        } else Y = !!d | 0;
-    }
-
-    return T;
-  }
-
-  function U(d) {
-    d = d.prefix;
-    void 0 !== d && (R = null, d ? 'function' !== typeof d ? w = 1 : (w = 2, R = d) : w = 0);
-    return U;
-  }
-
-  function B(d, c) {
-    var e = d;
-    33 > e.charCodeAt(0) && (e = e.trim());
-    V = e;
-    e = [V];
-
-    if (0 < A) {
-      var h = H(-1, c, e, e, D, z, 0, 0, 0, 0);
-      void 0 !== h && 'string' === typeof h && (c = h);
-    }
-
-    var a = M(O, e, c, 0, 0);
-    0 < A && (h = H(-2, a, e, e, D, z, a.length, 0, 0, 0), void 0 !== h && (a = h));
-    V = '';
-    E = 0;
-    z = D = 1;
-    return a;
-  }
-
-  var ca = /^\0+/g,
-      N = /[\0\r\f]/g,
-      aa = /: */g,
-      ka = /zoo|gra/,
-      ma = /([,: ])(transform)/g,
-      ia = /,\r+?/g,
-      F = /([\t\r\n ])*\f?&/g,
-      fa = /@(k\w+)\s*(\S*)\s*/,
-      Q = /::(place)/g,
-      ha = /:(read-only)/g,
-      G = /[svh]\w+-[tblr]{2}/,
-      da = /\(\s*(.*)\s*\)/g,
-      oa = /([\s\S]*?);/g,
-      ba = /-self|flex-/g,
-      na = /[^]*?(:[rp][el]a[\w-]+)[^]*/,
-      la = /stretch|:\s*\w+\-(?:conte|avail)/,
-      ja = /([^-])(image-set\()/,
-      z = 1,
-      D = 1,
-      E = 0,
-      w = 1,
-      O = [],
-      S = [],
-      A = 0,
-      R = null,
-      Y = 0,
-      V = '';
-  B.use = T;
-  B.set = U;
-  void 0 !== W && U(W);
-  return B;
-}
-
-var unitlessKeys = {
-  animationIterationCount: 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,
-  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 reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
-
-var isPropValid = /* #__PURE__ */memoize(function (prop) {
-  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
-  /* o */
-  && prop.charCodeAt(1) === 110
-  /* n */
-  && prop.charCodeAt(2) < 91;
-}
-/* Z+1 */
-);
-
-function y(){return (y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);}return e}).apply(this,arguments)}var v=function(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n},g=function(t){return null!==t&&"object"==typeof t&&"[object Object]"===(t.toString?t.toString():Object.prototype.toString.call(t))&&!reactIs$1.exports.typeOf(t)},S=Object.freeze([]),w=Object.freeze({});function E(e){return "function"==typeof e}function b(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function _(e){return e&&"string"==typeof e.styledComponentId}var N="undefined"!=typeof process&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",C="undefined"!=typeof window&&"HTMLElement"in window,I=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),O="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n"}:{};function R(){for(var e=arguments.length<=0?void 0:arguments[0],t=[],n=1,r=arguments.length;n<r;n+=1)t.push(n<0||arguments.length<=n?void 0:arguments[n]);return t.forEach((function(t){e=e.replace(/%[a-z]/,t);})),e}function D(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];throw "production"===process.env.NODE_ENV?new Error("An error occurred. See https://git.io/JUIaE#"+e+" for more information."+(n.length>0?" Args: "+n.join(", "):"")):new Error(R.apply(void 0,[O[e]].concat(n)).trim())}var j=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}var t=e.prototype;return t.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},t.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)(o<<=1)<0&&D(16,""+e);this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=0,c=t.length;a<c;a++)this.tag.insertRule(i,t[a])&&(this.groupSizes[e]++,i++);},t.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},t.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+=this.tag.getRule(s)+"/*!sc*/\n";return t},e}(),T=new Map,x=new Map,k=1,V=function(e){if(T.has(e))return T.get(e);for(;x.has(k);)k++;var t=k++;return "production"!==process.env.NODE_ENV&&((0|t)<0||t>1<<30)&&D(16,""+t),T.set(e,t),x.set(t,e),t},z=function(e){return x.get(e)},B=function(e,t){t>=k&&(k=t+1),T.set(e,t),x.set(t,e);},M="style["+N+'][data-styled-version="5.3.6"]',G=new RegExp("^"+N+'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'),L=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},F=function(e,t){for(var n=(t.textContent||"").split("/*!sc*/\n"),r=[],o=0,s=n.length;o<s;o++){var i=n[o].trim();if(i){var a=i.match(G);if(a){var c=0|parseInt(a[1],10),u=a[2];0!==c&&(B(u,c),L(e,u,a[3]),e.getTag().insertRules(c,r)),r.length=0;}else r.push(i);}}},Y=function(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null},q=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){for(var t=e.childNodes,n=t.length;n>=0;n--){var r=t[n];if(r&&1===r.nodeType&&r.hasAttribute(N))return r}}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(N,"active"),r.setAttribute("data-styled-version","5.3.6");var i=Y();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},H=function(){function e(e){var t=this.element=q(e);t.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}D(17);}(t),this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return !1}},t.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},t.getRule=function(e){var t=this.sheet.cssRules[e];return void 0!==t&&"string"==typeof t.cssText?t.cssText:""},e}(),$=function(){function e(e){var t=this.element=q(e);this.nodes=t.childNodes,this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t),r=this.nodes[e];return this.element.insertBefore(n,r||null),this.length++,!0}return !1},t.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},t.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),W=function(){function e(e){this.rules=[],this.length=0;}var t=e.prototype;return t.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,!0)},t.deleteRule=function(e){this.rules.splice(e,1),this.length--;},t.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),U=C,J={isServer:!C,useCSSOMInjection:!I},X=function(){function e(e,t,n){void 0===e&&(e=w),void 0===t&&(t={}),this.options=y({},J,{},e),this.gs=t,this.names=new Map(n),this.server=!!e.isServer,!this.server&&C&&U&&(U=!1,function(e){for(var t=document.querySelectorAll(M),n=0,r=t.length;n<r;n++){var o=t[n];o&&"active"!==o.getAttribute(N)&&(F(e,o),o.parentNode&&o.parentNode.removeChild(o));}}(this));}e.registerId=function(e){return V(e)};var t=e.prototype;return t.reconstructWithOptions=function(t,n){return void 0===n&&(n=!0),new e(y({},this.options,{},t),this.gs,n&&this.names||void 0)},t.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},t.getTag=function(){return this.tag||(this.tag=(n=(t=this.options).isServer,r=t.useCSSOMInjection,o=t.target,e=n?new W(o):r?new H(o):new $(o),new j(e)));var e,t,n,r,o;},t.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},t.registerName=function(e,t){if(V(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},t.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(V(e),n);},t.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},t.clearRules=function(e){this.getTag().clearGroup(V(e)),this.clearNames(e);},t.clearTag=function(){this.tag=void 0;},t.toString=function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=0;o<n;o++){var s=z(o);if(void 0!==s){var i=e.names.get(s),a=t.getGroup(o);if(i&&a&&i.size){var c=N+".g"+o+'[id="'+s+'"]',u="";void 0!==i&&i.forEach((function(e){e.length>0&&(u+=e+",");})),r+=""+a+c+'{content:"'+u+'"}/*!sc*/\n';}}}return r}(this)},e}(),Z=/(a)(d)/gi,K=function(e){return String.fromCharCode(e+(e>25?39:97))};function Q(e){var t,n="";for(t=Math.abs(e);t>52;t=t/52|0)n=K(t%52)+n;return (K(t%52)+n).replace(Z,"$1-$2")}var ee=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},te=function(e){return ee(5381,e)};function ne(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(E(n)&&!_(n))return !1}return !0}var re=te("5.3.6"),oe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&ne(e),this.componentId=t,this.baseHash=ee(re,t),this.baseStyle=n,X.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.componentId,o=[];if(this.baseStyle&&o.push(this.baseStyle.generateAndInjectStyles(e,t,n)),this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(r,this.staticRulesId))o.push(this.staticRulesId);else {var s=_e(this.rules,e,t,n).join(""),i=Q(ee(this.baseHash,s)>>>0);if(!t.hasNameForId(r,i)){var a=n(s,"."+i,void 0,r);t.insertRules(r,i,a);}o.push(i),this.staticRulesId=i;}else {for(var c=this.rules.length,u=ee(this.baseHash,n.hash),l="",d=0;d<c;d++){var h=this.rules[d];if("string"==typeof h)l+=h,"production"!==process.env.NODE_ENV&&(u=ee(u,h+d));else if(h){var p=_e(h,e,t,n),f=Array.isArray(p)?p.join(""):p;u=ee(u,f+d),l+=f;}}if(l){var m=Q(u>>>0);if(!t.hasNameForId(r,m)){var y=n(l,"."+m,void 0,r);t.insertRules(r,m,y);}o.push(m);}}return o.join(" ")},e}(),se=/^\s*\/\/.*$/gm,ie=[":","[",".","#"];function ae(e){var t,n,r,o,s=void 0===e?w:e,i=s.options,a=void 0===i?w:i,c=s.plugins,u=void 0===c?S:c,l=new stylis_min(a),d=[],p=function(e){function t(t){if(t)try{e(t+"}");}catch(e){}}return function(n,r,o,s,i,a,c,u,l,d){switch(n){case 1:if(0===l&&64===r.charCodeAt(0))return e(r+";"),"";break;case 2:if(0===u)return r+"/*|*/";break;case 3:switch(u){case 102:case 112:return e(o[0]+r),"";default:return r+(0===d?"/*|*/":"")}case-2:r.split("/*|*/}").forEach(t);}}}((function(e){d.push(e);})),f=function(e,r,s){return 0===r&&-1!==ie.indexOf(s[n.length])||s.match(o)?e:"."+t};function m(e,s,i,a){void 0===a&&(a="&");var c=e.replace(se,""),u=s&&i?i+" "+s+" { "+c+" }":c;return t=a,n=s,r=new RegExp("\\"+n+"\\b","g"),o=new RegExp("(\\"+n+"\\b){2,}"),l(i||!s?"":s,u)}return l.use([].concat(u,[function(e,t,o){2===e&&o.length&&o[0].lastIndexOf(n)>0&&(o[0]=o[0].replace(r,f));},p,function(e){if(-2===e){var t=d;return d=[],t}}])),m.hash=u.length?u.reduce((function(e,t){return t.name||D(15),ee(e,t.name)}),5381).toString():"",m}var ce=r__default["default"].createContext();ce.Consumer;var le=r__default["default"].createContext(),de=(le.Consumer,new X),he=ae();function pe(){return r$1.useContext(ce)||de}function fe(){return r$1.useContext(le)||he}var ye=function(){function e(e,t){var n=this;this.inject=function(e,t){void 0===t&&(t=he);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.toString=function(){return D(12,String(n.name))},this.name=e,this.id="sc-keyframes-"+e,this.rules=t;}return e.prototype.getName=function(e){return void 0===e&&(e=he),this.name+e.hash},e}(),ve=/([A-Z])/,ge=/([A-Z])/g,Se=/^ms-/,we=function(e){return "-"+e.toLowerCase()};function Ee(e){return ve.test(e)?e.replace(ge,we).replace(Se,"-ms-"):e}var be=function(e){return null==e||!1===e||""===e};function _e(e,n,r,o){if(Array.isArray(e)){for(var s,i=[],a=0,c=e.length;a<c;a+=1)""!==(s=_e(e[a],n,r,o))&&(Array.isArray(s)?i.push.apply(i,s):i.push(s));return i}if(be(e))return "";if(_(e))return "."+e.styledComponentId;if(E(e)){if("function"!=typeof(l=e)||l.prototype&&l.prototype.isReactComponent||!n)return e;var u=e(n);return "production"!==process.env.NODE_ENV&&reactIs$1.exports.isElement(u)&&console.warn(b(e)+" is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details."),_e(u,n,r,o)}var l;return e instanceof ye?r?(e.inject(r,o),e.getName(o)):e:g(e)?function e(t,n){var r,o,s=[];for(var i in t)t.hasOwnProperty(i)&&!be(t[i])&&(Array.isArray(t[i])&&t[i].isCss||E(t[i])?s.push(Ee(i)+":",t[i],";"):g(t[i])?s.push.apply(s,e(t[i],i)):s.push(Ee(i)+": "+(r=i,null==(o=t[i])||"boolean"==typeof o||""===o?"":"number"!=typeof o||0===o||r in unitlessKeys?String(o).trim():o+"px")+";"));return n?[n+" {"].concat(s,["}"]):s}(e):e.toString()}var Ne=function(e){return Array.isArray(e)&&(e.isCss=!0),e};function Ae(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return E(e)||g(e)?Ne(_e(v(S,[e].concat(n)))):0===n.length&&1===e.length&&"string"==typeof e[0]?e:Ne(_e(v(e,n)))}var Ce=/invalid hook call/i,Ie=new Set,Pe=function(e,t){if("production"!==process.env.NODE_ENV){var n="The component "+e+(t?' with the id of "'+t+'"':"")+" has been created dynamically.\nYou may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",r=console.error;try{var o=!0;console.error=function(e){if(Ce.test(e))o=!1,Ie.delete(n);else {for(var t=arguments.length,s=new Array(t>1?t-1:0),i=1;i<t;i++)s[i-1]=arguments[i];r.apply(void 0,[e].concat(s));}},r$1.useRef(),o&&!Ie.has(n)&&(console.warn(n),Ie.add(n));}catch(e){Ce.test(e.message)&&Ie.delete(n);}finally{console.error=r;}}},Oe=function(e,t,n){return void 0===n&&(n=w),e.theme!==n.theme&&e.theme||t||n.theme},Re=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,De=/(^-|-$)/g;function je(e){return e.replace(Re,"-").replace(De,"")}var Te=function(e){return Q(te(e)>>>0)};function xe(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var ke=function(e){return "function"==typeof e||"object"==typeof e&&null!==e&&!Array.isArray(e)},Ve=function(e){return "__proto__"!==e&&"constructor"!==e&&"prototype"!==e};function ze(e,t,n){var r=e[n];ke(t)&&ke(r)?Be(r,t):e[n]=t;}function Be(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];for(var o=0,s=n;o<s.length;o++){var i=s[o];if(ke(i))for(var a in i)Ve(a)&&ze(e,i[a],a);}return e}var Me=r__default["default"].createContext();Me.Consumer;var Fe={};function Ye(e,t,n){var o=_(e),i=!xe(e),a=t.attrs,c=void 0===a?S:a,d=t.componentId,h=void 0===d?function(e,t){var n="string"!=typeof e?"sc":je(e);Fe[n]=(Fe[n]||0)+1;var r=n+"-"+Te("5.3.6"+n+Fe[n]);return t?t+"-"+r:r}(t.displayName,t.parentComponentId):d,p=t.displayName,v=void 0===p?function(e){return xe(e)?"styled."+e:"Styled("+b(e)+")"}(e):p,g=t.displayName&&t.componentId?je(t.displayName)+"-"+t.componentId:t.componentId||h,N=o&&e.attrs?Array.prototype.concat(e.attrs,c).filter(Boolean):c,A=t.shouldForwardProp;o&&e.shouldForwardProp&&(A=t.shouldForwardProp?function(n,r,o){return e.shouldForwardProp(n,r,o)&&t.shouldForwardProp(n,r,o)}:e.shouldForwardProp);var C,I=new oe(n,g,o?e.componentStyle:void 0),P=I.isStatic&&0===c.length,O=function(e,t){return function(e,t,n,r){var o=e.attrs,i=e.componentStyle,a=e.defaultProps,c=e.foldedComponentIds,d=e.shouldForwardProp,h=e.styledComponentId,p=e.target;"production"!==process.env.NODE_ENV&&r$1.useDebugValue(h);var m=function(e,t,n){void 0===e&&(e=w);var r=y({},t,{theme:e}),o={};return n.forEach((function(e){var t,n,s,i=e;for(t in E(i)&&(i=i(r)),i)r[t]=o[t]="className"===t?(n=o[t],s=i[t],n&&s?n+" "+s:n||s):i[t];})),[r,o]}(Oe(t,r$1.useContext(Me),a)||w,t,o),v=m[0],g=m[1],S=function(e,t,n,r){var o=pe(),s=fe(),i=t?e.generateAndInjectStyles(w,o,s):e.generateAndInjectStyles(n,o,s);return "production"!==process.env.NODE_ENV&&r$1.useDebugValue(i),"production"!==process.env.NODE_ENV&&!t&&r&&r(i),i}(i,r,v,"production"!==process.env.NODE_ENV?e.warnTooManyClasses:void 0),b=n,_=g.$as||t.$as||g.as||t.as||p,N=xe(_),A=g!==t?y({},t,{},g):t,C={};for(var I in A)"$"!==I[0]&&"as"!==I&&("forwardedAs"===I?C.as=A[I]:(d?d(I,isPropValid,_):!N||isPropValid(I))&&(C[I]=A[I]));return t.style&&g.style!==t.style&&(C.style=y({},t.style,{},g.style)),C.className=Array.prototype.concat(c,h,S!==h?S:null,t.className,g.className).filter(Boolean).join(" "),C.ref=b,r$1.createElement(_,C)}(C,e,t,P)};return O.displayName=v,(C=r__default["default"].forwardRef(O)).attrs=N,C.componentStyle=I,C.displayName=v,C.shouldForwardProp=A,C.foldedComponentIds=o?Array.prototype.concat(e.foldedComponentIds,e.styledComponentId):S,C.styledComponentId=g,C.target=o?e.target:e,C.withComponent=function(e){var r=t.componentId,o=function(e,t){if(null==e)return {};var n,r,o={},s=Object.keys(e);for(r=0;r<s.length;r++)n=s[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(t,["componentId"]),s=r&&r+"-"+(xe(e)?e:je(b(e)));return Ye(e,y({},o,{attrs:N,componentId:s}),n)},Object.defineProperty(C,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(t){this._foldedDefaultProps=o?Be({},e.defaultProps,t):t;}}),"production"!==process.env.NODE_ENV&&(Pe(v,g),C.warnTooManyClasses=function(e,t){var n={},r=!1;return function(o){if(!r&&(n[o]=!0,Object.keys(n).length>=200)){var s=t?' with the id of "'+t+'"':"";console.warn("Over 200 classes were generated for component "+e+s+".\nConsider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=!0,n={};}}}(v,g)),C.toString=function(){return "."+C.styledComponentId},i&&hoistNonReactStatics_cjs(C,e,{attrs:!0,componentStyle:!0,displayName:!0,foldedComponentIds:!0,shouldForwardProp:!0,styledComponentId:!0,target:!0,withComponent:!0}),C}var qe=function(e){return function e(t,r,o){if(void 0===o&&(o=w),!reactIs$1.exports.isValidElementType(r))return D(1,String(r));var s=function(){return t(r,o,Ae.apply(void 0,arguments))};return s.withConfig=function(n){return e(t,r,y({},o,{},n))},s.attrs=function(n){return e(t,r,y({},o,{attrs:Array.prototype.concat(o.attrs,n).filter(Boolean)}))},s}(Ye,e)};["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","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","textPath","tspan"].forEach((function(e){qe[e]=qe(e);}));function We(e){"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];var o=Ae.apply(void 0,[e].concat(n)).join(""),s=Te(o);return new ye(s,o)}"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native"),"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window["__styled-components-init__"]=window["__styled-components-init__"]||0,1===window["__styled-components-init__"]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window["__styled-components-init__"]+=1);var styled = qe;
-
-var StyledButton = styled.button(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 13px 20px 16px;\n  background-color: ", ";\n  box-shadow: ", ";\n\n  border: ", ";\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n\n  span {\n    color: ", ";\n    font-family: ", ";\n    font-style: normal;\n    font-weight: bold;\n    font-size: ", ";\n  }\n\n  :hover {\n    opacity: 0.85;\n  }\n\n  :active {\n    box-shadow: none;\n    margin-top: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 13px 20px 16px;\n  background-color: ", ";\n  box-shadow: ", ";\n\n  border: ", ";\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n\n  span {\n    color: ", ";\n    font-family: ", ";\n    font-style: normal;\n    font-weight: bold;\n    font-size: ", ";\n  }\n\n  :hover {\n    opacity: 0.85;\n  }\n\n  :active {\n    box-shadow: none;\n    margin-top: ", ";\n    height: ", ";\n  }\n"])), function (_a) {
+var StyledButton = styled__default["default"].button(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 13px 20px 16px;\n  background-color: ", ";\n  box-shadow: ", ";\n\n  border: ", ";\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n\n  span {\n    color: ", ";\n    font-family: ", ";\n    font-style: normal;\n    font-weight: bold;\n    font-size: ", ";\n  }\n\n  :hover {\n    opacity: 0.85;\n  }\n\n  :active {\n    box-shadow: none;\n    margin-top: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 13px 20px 16px;\n  background-color: ", ";\n  box-shadow: ", ";\n\n  border: ", ";\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n\n  span {\n    color: ", ";\n    font-family: ", ";\n    font-style: normal;\n    font-weight: bold;\n    font-size: ", ";\n  }\n\n  :hover {\n    opacity: 0.85;\n  }\n\n  :active {\n    box-shadow: none;\n    margin-top: ", ";\n    height: ", ";\n  }\n"])), function (_a) {
     var fluid = _a.fluid;
     return (fluid ? "100%" : "fit-content");
 }, function (_a) {
@@ -4157,11 +3482,11 @@ var StyledButton = styled.button(templateObject_1$N || (templateObject_1$N = __m
         ? theme.button.medium.heightActive
         : theme.button[size].heightActive;
 });
-var DisabledButton = styled(StyledButton)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n  background-color: ", ";\n  border: 2px solid ", ";\n  box-shadow: none;\n  padding: 16px 20px;\n  cursor: not-allowed;\n\n  span {\n    color: ", ";\n  }\n\n  :active {\n    margin-top: 0;\n    height: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 2px solid ", ";\n  box-shadow: none;\n  padding: 16px 20px;\n  cursor: not-allowed;\n\n  span {\n    color: ", ";\n  }\n\n  :active {\n    margin-top: 0;\n    height: ", ";\n  }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
+var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n  background-color: ", ";\n  border: 2px solid ", ";\n  box-shadow: none;\n  padding: 16px 20px;\n  cursor: not-allowed;\n\n  span {\n    color: ", ";\n  }\n\n  :active {\n    margin-top: 0;\n    height: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 2px solid ", ";\n  box-shadow: none;\n  padding: 16px 20px;\n  cursor: not-allowed;\n\n  span {\n    color: ", ";\n  }\n\n  :active {\n    margin-top: 0;\n    height: ", ";\n  }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
     var size = _a.size;
     return !size ? theme.button.medium.height : theme.button[size].height;
 });
-var GhostButton = styled(StyledButton)(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n  height: ", ";\n  padding: 16px 18px;\n\n  :active {\n    box-shadow: none;\n    height: ", ";\n    margin-top: ", ";\n    margin-bottom: -2.5px;\n  }\n"], ["\n  height: ", ";\n  padding: 16px 18px;\n\n  :active {\n    box-shadow: none;\n    height: ", ";\n    margin-top: ", ";\n    margin-bottom: -2.5px;\n  }\n"])), function (_a) {
+var GhostButton = styled__default["default"](StyledButton)(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n  height: ", ";\n  padding: 16px 18px;\n\n  :active {\n    box-shadow: none;\n    height: ", ";\n    margin-top: ", ";\n    margin-bottom: -2.5px;\n  }\n"], ["\n  height: ", ";\n  padding: 16px 18px;\n\n  :active {\n    box-shadow: none;\n    height: ", ";\n    margin-top: ", ";\n    margin-bottom: -2.5px;\n  }\n"])), function (_a) {
     var size = _a.size;
     return !size
         ? "calc(".concat(theme.button.medium.height, " - 2.5px)")
@@ -4177,19 +3502,19 @@ var GhostButton = styled(StyledButton)(templateObject_3$a || (templateObject_3$a
         ? theme.button.medium.marginTopActive
         : theme.button[size].marginTopActive;
 });
-var LoaderWrapper = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n  width: ", ";\n  margin-top: ", ";\n"], ["\n  width: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var LoaderWrapper = styled__default["default"].div(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject$1(["\n  width: ", ";\n  margin-top: ", ";\n"], ["\n  width: ", ";\n  margin-top: ", ";\n"])), function (_a) {
     var width = _a.width;
     return "".concat(width, "px");
 }, function (_a) {
     var size = _a.size;
     return (size === "small" ? "3px" : "");
 });
-var templateObject_1$N, templateObject_2$t, templateObject_3$a, templateObject_4$7;
+var templateObject_1$O, templateObject_2$u, templateObject_3$b, templateObject_4$8;
 
-var Button = r$1.forwardRef(function (_a, ref) {
+var Button = React$3.forwardRef(function (_a, ref) {
     var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
-    var buttonRef = r$1.useRef(null);
-    var _b = r$1.useState(false), isLoading = _b[0], setIsLoading = _b[1];
+    var buttonRef = React$3.useRef(null);
+    var _b = React$3.useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var as = href || asAnchor ? "a" : "button";
     var onClick = function () {
         if (props.onClickAsync) {
@@ -4220,7 +3545,7 @@ var Button = r$1.forwardRef(function (_a, ref) {
     return (jsxRuntime.jsx(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx("span", { children: label }) })));
 });
 
-var StyledCheckbox = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var StyledCheckbox = styled__default["default"].div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var checked = _a.checked, disabled = _a.disabled;
     if (disabled)
         return theme.colors.lightGray.darker;
@@ -4241,22 +3566,22 @@ var StyledCheckbox = styled.div(templateObject_1$M || (templateObject_1$M = __ma
         return theme.colors.green.base;
     return theme.colors.lightGray.darker;
 }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$M;
+var templateObject_1$N;
 
 var Checkbox = function (props) {
     var _a;
-    var wrapperRef = r$1.useRef(null);
-    var inputRef = r$1.useRef(null);
-    var _b = r$1.useState(props.checked), checked = _b[0], setChecked = _b[1];
-    r$1.useEffect(function () {
+    var wrapperRef = React$3.useRef(null);
+    var inputRef = React$3.useRef(null);
+    var _b = React$3.useState(props.checked), checked = _b[0], setChecked = _b[1];
+    React$3.useEffect(function () {
         var _a;
         if (props.autoFocus)
             (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, []);
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         setChecked(inputRef.current.checked);
     }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         inputRef.current.checked = props.checked;
         setChecked(props.checked);
     }, [props.checked]);
@@ -4274,7 +3599,7 @@ var Checkbox = function (props) {
     return (jsxRuntime.jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
 };
 
-var Wrapper$9 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+var Wrapper$9 = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
     var size = _a.size;
     switch (size) {
         case "small":
@@ -4297,7 +3622,7 @@ var Wrapper$9 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTem
             return "27px";
     }
 });
-var templateObject_1$L;
+var templateObject_1$M;
 
 var parsers = {};
 
@@ -4407,16 +3732,16 @@ var Locale;
 })(Locale || (Locale = {}));
 Locale$1.default = Locale;
 
-var Medal$2 = {};
+var Medal$3 = {};
 
-Object.defineProperty(Medal$2, "__esModule", { value: true });
-var Medal$1;
+Object.defineProperty(Medal$3, "__esModule", { value: true });
+var Medal$2;
 (function (Medal) {
     Medal["GOLD"] = "gold";
     Medal["SILVER"] = "silver";
     Medal["BRONZE"] = "bronze";
-})(Medal$1 || (Medal$1 = {}));
-Medal$2.default = Medal$1;
+})(Medal$2 || (Medal$2 = {}));
+Medal$3.default = Medal$2;
 
 var PaymentStatus$1 = {};
 
@@ -4490,7 +3815,7 @@ var __importDefault$2 = (commonjsGlobal && commonjsGlobal.__importDefault) || fu
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(enums, "__esModule", { value: true });
-enums.TextTopic = enums.Role = enums.RankingType = enums.Plan = enums.PaymentType = enums.PaymentStatus = enums.Medal = enums.Locale = enums.KeyboardLayout = enums.ExerciseType = enums.Currency = enums.CourseTranslation = enums.Color = enums.ChartDataType = enums.AchievementType = void 0;
+enums.TextTopic = enums.Role = enums.RankingType = enums.Plan = enums.PaymentType = enums.PaymentStatus = Medal$1 = enums.Medal = enums.Locale = enums.KeyboardLayout = enums.ExerciseType = enums.Currency = enums.CourseTranslation = enums.Color = enums.ChartDataType = enums.AchievementType = void 0;
 var AchievementType_1 = __importDefault$2(AchievementType$1);
 enums.AchievementType = AchievementType_1.default;
 var ChartDataType_1 = __importDefault$2(ChartDataType$1);
@@ -4507,8 +3832,8 @@ var KeyboardLayout_1 = __importDefault$2(KeyboardLayout$1);
 enums.KeyboardLayout = KeyboardLayout_1.default;
 var Locale_1 = __importDefault$2(Locale$1);
 enums.Locale = Locale_1.default;
-var Medal_1 = __importDefault$2(Medal$2);
-enums.Medal = Medal_1.default;
+var Medal_1 = __importDefault$2(Medal$3);
+var Medal$1 = enums.Medal = Medal_1.default;
 var PaymentStatus_1 = __importDefault$2(PaymentStatus$1);
 enums.PaymentStatus = PaymentStatus_1.default;
 var PaymentType_1 = __importDefault$2(PaymentType$1);
@@ -4565,7 +3890,7 @@ var flags = {
 };
 var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
 
-var StyledHeading = styled.span(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  font-style: normal;\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin: 0;\n  color: ", ";\n  text-align: ", ";\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  font-style: normal;\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin: 0;\n  color: ", ";\n  text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
+var StyledHeading = styled__default["default"].span(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  font-style: normal;\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin: 0;\n  color: ", ";\n  text-align: ", ";\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 700;\n  font-style: normal;\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin: 0;\n  color: ", ";\n  text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
     var type = _a.type;
     return theme.heading[type].fontSize;
 }, function (_a) {
@@ -4589,14 +3914,14 @@ var StyledHeading = styled.span(templateObject_1$K || (templateObject_1$K = __ma
     var align = _a.align;
     return align;
 });
-var templateObject_1$K;
+var templateObject_1$L;
 
 var Heading = function (props) {
     var element = !!props.as ? props.as : props.type;
     return (jsxRuntime.jsx(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
 };
 
-var Wrapper$8 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+var Wrapper$8 = styled__default["default"].div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
     var size = _a.size;
     return theme.icon[size] || theme.icon.medium;
 }, function (_a) {
@@ -4626,7 +3951,7 @@ var Wrapper$8 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
             return theme.colors.lightGray.light;
     }
 });
-var templateObject_1$J;
+var templateObject_1$K;
 
 var icons = {
     check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" })),
@@ -4652,10 +3977,11 @@ var icons = {
     facebook: (jsxRuntime.jsx("path", { d: "M18.75.5a2.17 2.17 0 011.594.656c.437.438.656.969.656 1.594v16.5a2.17 2.17 0 01-.656 1.594 2.17 2.17 0 01-1.594.656h-6.422v-7.125h2.719L15.562 11h-3.234V8.797c0-1.188.625-1.781 1.875-1.781h1.453v-2.86a14.647 14.647 0 00-2.578-.234c-.906 0-1.687.172-2.344.515-.625.344-1.125.86-1.5 1.547-.375.688-.562 1.5-.562 2.438V11H5.719v3.375h2.953V21.5H2.25a2.17 2.17 0 01-1.594-.656A2.17 2.17 0 010 19.25V2.75c0-.625.219-1.156.656-1.594A2.17 2.17 0 012.25.5h16.5z" })),
     instagram: (jsxRuntime.jsx("path", { d: "M8.719 9.266c.5-.5 1.094-.75 1.781-.75.688 0 1.266.25 1.734.75.5.468.75 1.046.75 1.734s-.25 1.281-.75 1.781c-.468.469-1.046.703-1.734.703a2.516 2.516 0 01-1.781-.703A2.516 2.516 0 018.016 11c0-.688.234-1.266.703-1.734zm7.64-2.672c.188.5.282 1.968.282 4.406 0 2.438-.094 3.906-.282 4.406a2.558 2.558 0 01-1.453 1.453c-.5.188-1.969.282-4.406.282-2.438 0-3.906-.094-4.406-.282a2.558 2.558 0 01-1.453-1.453c-.188-.5-.282-1.969-.282-4.406 0-2.438.094-3.906.282-4.406A2.558 2.558 0 016.094 5.14c.5-.188 1.968-.282 4.406-.282 2.438 0 3.906.094 4.406.282a2.558 2.558 0 011.453 1.453zm-8.578 7.125a3.704 3.704 0 002.719 1.125 3.704 3.704 0 002.719-1.125A3.704 3.704 0 0014.344 11a3.704 3.704 0 00-1.125-2.719A3.704 3.704 0 0010.5 7.156a3.704 3.704 0 00-2.719 1.125A3.704 3.704 0 006.656 11c0 1.063.375 1.969 1.125 2.719zm6.047-6.094a.9.9 0 00.656.281c.25 0 .47-.078.657-.234a.9.9 0 00.28-.656.9.9 0 00-.28-.657.9.9 0 00-.657-.28.9.9 0 00-.656.28.994.994 0 00-.234.657c0 .218.078.421.234.609zM18.75.5a2.17 2.17 0 011.594.656c.437.438.656.969.656 1.594v16.5a2.17 2.17 0 01-.656 1.594 2.17 2.17 0 01-1.594.656H2.25a2.17 2.17 0 01-1.594-.656A2.17 2.17 0 010 19.25V2.75c0-.625.219-1.156.656-1.594A2.17 2.17 0 012.25.5h16.5zm-.797 13.594c.031-.625.047-1.656.047-3.094s-.016-2.469-.047-3.094c-.062-1.343-.469-2.39-1.219-3.14-.75-.75-1.797-1.157-3.14-1.22-.625-.03-1.656-.046-3.094-.046s-2.469.016-3.094.047c-1.343.062-2.39.469-3.14 1.219-.75.75-1.157 1.796-1.22 3.14C3.017 8.531 3 9.563 3 11c0 1.438.016 2.469.047 3.094.062 1.344.469 2.39 1.219 3.14.75.75 1.796 1.157 3.14 1.22.625.03 1.657.046 3.094.046 1.438 0 2.469-.016 3.094-.047 1.344-.062 2.39-.469 3.14-1.219.75-.75 1.157-1.797 1.22-3.14z" })),
     menuAlt: (jsxRuntime.jsx("path", { d: "M1.5 3.4C.7 3.4 0 4.1 0 4.9s.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-21zM0 11.9c0-.8.7-1.5 1.5-1.5h21c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-21c-.8 0-1.5-.7-1.5-1.5zm0 7c0-.8.7-1.5 1.5-1.5h13c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5z" })),
+    link: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("path", { d: "M10.1 17.9l-2.8 2.8c-.7.7-1.7 1-2.7.7-1-.3-1.7-1-2-2-.3-1 0-2 .7-2.7L9 11c.5-.5 1.2-.8 2-.8.7 0 1.5.3 2 .8.2.2.6.4.9.4.3 0 .6-.1.9-.4.2-.2.4-.5.4-.9 0-.3-.1-.6-.4-.9-1-1-2.3-1.5-3.7-1.5-1.4 0-2.7.6-3.7 1.6L1.6 15C.6 16 0 17.3 0 18.7c0 1.4.5 2.7 1.5 3.7s2.3 1.5 3.7 1.5c1.4.1 2.8-.4 3.8-1.4l2.8-2.8c.2-.2.4-.5.4-.9 0-.3-.1-.6-.4-.9-.2-.2-.5-.4-.9-.4-.3 0-.6.2-.8.4z" }), jsxRuntime.jsx("path", { d: "M22.5 1.5c-1-1-2.3-1.5-3.7-1.5-1.5 0-2.8.6-3.8 1.6l-2.8 2.8c-.3.3-.4.8-.3 1.2.1.4.4.7.9.8.4.1.9 0 1.2-.3l2.8-2.8c.7-.7 1.7-1 2.7-.7 1 .3 1.7 1 2 2 .3 1 0 2-.7 2.7L15 12.9c-.5.5-1.2.8-2 .8-.7 0-1.5-.3-2-.8-.3-.3-.8-.4-1.2-.3-.4.1-.8.4-.9.9-.1.4 0 .9.3 1.2 1 1 2.3 1.5 3.7 1.5 1.4 0 2.7-.6 3.7-1.6L22.4 9c1-1 1.6-2.3 1.6-3.7 0-1.4-.5-2.8-1.5-3.8z" })] })),
 };
 var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign$2({}, props, { children: jsxRuntime.jsx("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
 
-var Wrapper$7 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n  > svg {\n    height: ", ";\n  }\n"], ["\n  > svg {\n    height: ", ";\n  }\n"])), function (_a) {
+var Wrapper$7 = styled__default["default"].div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n  > svg {\n    height: ", ";\n  }\n"], ["\n  > svg {\n    height: ", ";\n  }\n"])), function (_a) {
     var size = _a.size;
     switch (size) {
         default:
@@ -4667,7 +3993,7 @@ var Wrapper$7 = styled.div(templateObject_1$I || (templateObject_1$I = __makeTem
             return "118px";
     }
 });
-var templateObject_1$I;
+var templateObject_1$J;
 
 var illustrations = {
     keyboard: (jsxRuntime.jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" })] }))),
@@ -4683,14 +4009,14 @@ var illustrations = {
 };
 var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
 
-var InputIconWrapper = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"])), function (_a) {
+var InputIconWrapper = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"])), function (_a) {
     var isChanged = _a.isChanged;
     return !isChanged ? theme.colors.lightGray.darker : "";
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "not-allowed" : "pointer");
 });
-var StyledInput = styled.input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var StyledInput = styled__default["default"].input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
 }, function (_a) {
@@ -4703,10 +4029,10 @@ var StyledInput = styled.input(templateObject_2$s || (templateObject_2$s = __mak
     var disabled = _a.disabled;
     return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
 }, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$H, templateObject_2$s;
+var templateObject_1$I, templateObject_2$t;
 
 var PasswordInput = function (props) {
-    var _a = r$1.useState(false), isVisible = _a[0], setIsVisible = _a[1];
+    var _a = React$3.useState(false), isVisible = _a[0], setIsVisible = _a[1];
     var toggle = function () {
         if (!props.disabled)
             setIsVisible(!isVisible);
@@ -4835,9 +4161,9 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
 
 var DateInput = function (props) {
     var _a;
-    var inputRef = r$1.useRef(null);
-    var _b = r$1.useState(false), isChanged = _b[0], setIsChanged = _b[1];
-    r$1.useEffect(function () {
+    var inputRef = React$3.useRef(null);
+    var _b = React$3.useState(false), isChanged = _b[0], setIsChanged = _b[1];
+    React$3.useEffect(function () {
         var _a;
         if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value))
             setIsChanged(false);
@@ -4883,7 +4209,7 @@ Input.Date = DateInput;
 
 var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsxRuntime.jsx("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsxRuntime.jsx("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsxRuntime.jsx("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsxRuntime.jsx("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxRuntime.jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsxRuntime.jsx("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsxRuntime.jsx("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
 
-var Wrapper$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
+var Wrapper$6 = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
     var size = _a.size;
     switch (size) {
         default:
@@ -4893,7 +4219,7 @@ var Wrapper$6 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTem
             return "116px";
     }
 });
-var templateObject_1$G;
+var templateObject_1$H;
 
 var medals = {
     small: {
@@ -4909,11 +4235,11 @@ var medals = {
 };
 var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
 
-var Wrapper$5 = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n  width: fit-content;\n  display: flex;\n\n  button:first-child {\n    border-radius: 6px 0 0 6px;\n    border-width: 2px 1px 2px 2px;\n  }\n\n  button:last-child {\n    border-radius: 0 6px 6px 0;\n    border-width: 2px 2px 2px 1px;\n  }\n\n  button {\n    width: ", ";\n  }\n"], ["\n  width: fit-content;\n  display: flex;\n\n  button:first-child {\n    border-radius: 6px 0 0 6px;\n    border-width: 2px 1px 2px 2px;\n  }\n\n  button:last-child {\n    border-radius: 0 6px 6px 0;\n    border-width: 2px 2px 2px 1px;\n  }\n\n  button {\n    width: ", ";\n  }\n"])), function (_a) {
+var Wrapper$5 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n  width: fit-content;\n  display: flex;\n\n  button:first-child {\n    border-radius: 6px 0 0 6px;\n    border-width: 2px 1px 2px 2px;\n  }\n\n  button:last-child {\n    border-radius: 0 6px 6px 0;\n    border-width: 2px 2px 2px 1px;\n  }\n\n  button {\n    width: ", ";\n  }\n"], ["\n  width: fit-content;\n  display: flex;\n\n  button:first-child {\n    border-radius: 6px 0 0 6px;\n    border-width: 2px 1px 2px 2px;\n  }\n\n  button:last-child {\n    border-radius: 0 6px 6px 0;\n    border-width: 2px 2px 2px 1px;\n  }\n\n  button {\n    width: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "49.5px" : "");
 });
-var StyledInputNumber = styled.input(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n  width: 50px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  text-align: center;\n  -moz-appearance: textfield;\n\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 50px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  text-align: center;\n  -moz-appearance: textfield;\n\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var StyledInputNumber = styled__default["default"].input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  width: 50px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  text-align: center;\n  -moz-appearance: textfield;\n\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 50px;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  text-align: center;\n  -moz-appearance: textfield;\n\n  ::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
 }, function (_a) {
@@ -4926,10 +4252,10 @@ var StyledInputNumber = styled.input(templateObject_2$r || (templateObject_2$r =
     var disabled = _a.disabled;
     return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
 }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$F, templateObject_2$r;
+var templateObject_1$G, templateObject_2$s;
 
 var Number$1 = function (props) {
-    var inputRef = r$1.useRef(null);
+    var inputRef = React$3.useRef(null);
     var onChange = function (e) {
         if (!props.disabled && !!props.onChange)
             props.onChange(parseInt(e.target.value));
@@ -4963,7 +4289,7 @@ var Number$1 = function (props) {
     return (jsxRuntime.jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsxRuntime.jsx(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
 };
 
-var StyledParagraph = styled.p(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n  text-align: ", ";\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n  text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
+var StyledParagraph = styled__default["default"].p(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n  text-align: ", ";\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  margin: 0;\n  text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
     var size = _a.size;
     return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
 }, function (_a) {
@@ -4995,11 +4321,11 @@ var StyledParagraph = styled.p(templateObject_1$E || (templateObject_1$E = __mak
     var align = _a.align;
     return align;
 });
-var templateObject_1$E;
+var templateObject_1$F;
 
 var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
 
-var StyledRadio = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 14px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :after {\n    content: \"\";\n    width: 15px;\n    height: 15px;\n    border-radius: 50%;\n    background-color: ", ";\n    position: absolute;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 14px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :after {\n    content: \"\";\n    width: 15px;\n    height: 15px;\n    border-radius: 50%;\n    background-color: ", ";\n    position: absolute;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var StyledRadio = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 14px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :after {\n    content: \"\";\n    width: 15px;\n    height: 15px;\n    border-radius: 50%;\n    background-color: ", ";\n    position: absolute;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  min-height: 25px;\n  max-height: 25px;\n  min-width: 25px;\n  max-width: 25px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 14px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  cursor: ", ";\n  background-color: ", ";\n\n  svg {\n    margin-left: -1px;\n    fill: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :after {\n    content: \"\";\n    width: 15px;\n    height: 15px;\n    border-radius: 50%;\n    background-color: ", ";\n    position: absolute;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var checked = _a.checked, disabled = _a.disabled;
     if (disabled)
         return theme.colors.lightGray.darker;
@@ -5027,23 +4353,23 @@ var StyledRadio = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
         return theme.colors.green.base;
     return "";
 }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$D;
+var templateObject_1$E;
 
 var Radio = function (props) {
     var _a, _b;
-    var wrapperRef = r$1.useRef(null);
-    var inputRef = r$1.useRef(null);
-    var _c = r$1.useState((_a = props.checked) !== null && _a !== void 0 ? _a : props.defaultValue), checked = _c[0], setChecked = _c[1];
-    r$1.useEffect(function () {
+    var wrapperRef = React$3.useRef(null);
+    var inputRef = React$3.useRef(null);
+    var _c = React$3.useState((_a = props.checked) !== null && _a !== void 0 ? _a : props.defaultValue), checked = _c[0], setChecked = _c[1];
+    React$3.useEffect(function () {
         if (props.autoFocus)
             wrapperRef.current.focus();
         if (props.defaultValue)
             inputRef.current.checked = true;
     }, []);
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         setChecked(inputRef.current.checked);
     }, [(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.checked]);
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         setChecked(props.checked);
     }, [props.checked]);
     var toggle = function () {
@@ -5059,7 +4385,7 @@ var Radio = function (props) {
     return (jsxRuntime.jsx(StyledRadio, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
 };
 
-var StyledRange = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n  input {\n    appearance: none;\n    width: 100%;\n    height: 11px;\n    border: ", ";\n    border-radius: 8px;\n    position: relative;\n    background: ", ";\n\n    ::-webkit-slider-thumb {\n      appearance: none;\n      width: 24px;\n      height: 24px;\n      background-color: ", ";\n      border: ", ";\n      border-radius: 50%;\n      cursor: ", ";\n    }\n  }\n"], ["\n  input {\n    appearance: none;\n    width: 100%;\n    height: 11px;\n    border: ", ";\n    border-radius: 8px;\n    position: relative;\n    background: ", ";\n\n    ::-webkit-slider-thumb {\n      appearance: none;\n      width: 24px;\n      height: 24px;\n      background-color: ", ";\n      border: ", ";\n      border-radius: 50%;\n      cursor: ", ";\n    }\n  }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
+var StyledRange = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n  input {\n    appearance: none;\n    width: 100%;\n    height: 11px;\n    border: ", ";\n    border-radius: 8px;\n    position: relative;\n    background: ", ";\n\n    ::-webkit-slider-thumb {\n      appearance: none;\n      width: 24px;\n      height: 24px;\n      background-color: ", ";\n      border: ", ";\n      border-radius: 50%;\n      cursor: ", ";\n    }\n  }\n"], ["\n  input {\n    appearance: none;\n    width: 100%;\n    height: 11px;\n    border: ", ";\n    border-radius: 8px;\n    position: relative;\n    background: ", ";\n\n    ::-webkit-slider-thumb {\n      appearance: none;\n      width: 24px;\n      height: 24px;\n      background-color: ", ";\n      border: ", ";\n      border-radius: 50%;\n      cursor: ", ";\n    }\n  }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
     var value = _a.value, disabled = _a.disabled;
     return "linear-gradient(90deg,\n      ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " 0%,\n      ").concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " ").concat(value, "%,\n      ").concat(theme.colors.lightGray.dark, " ").concat(value, "%,\n      ").concat(theme.colors.lightGray.dark, " 100%\n      )");
 }, function () { return theme.colors.lightGray.light; }, function (_a) {
@@ -5069,21 +4395,21 @@ var StyledRange = styled.div(templateObject_1$C || (templateObject_1$C = __makeT
     var disabled = _a.disabled;
     return disabled ? "not-allowed" : "pointer";
 });
-var templateObject_1$C;
+var templateObject_1$D;
 
 var Range = function (props) {
     var _a;
-    var rangeRef = r$1.useRef(null);
-    var _b = r$1.useState(props.defaultValue || 0), value = _b[0], setValue = _b[1];
-    r$1.useEffect(function () {
+    var rangeRef = React$3.useRef(null);
+    var _b = React$3.useState(props.defaultValue || 0), value = _b[0], setValue = _b[1];
+    React$3.useEffect(function () {
         if (props.autoFocus)
             rangeRef.current.focus();
     }, []);
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         var value = parseInt(rangeRef.current.value);
         setValue(value);
     }, [(_a = rangeRef.current) === null || _a === void 0 ? void 0 : _a.value]);
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         rangeRef.current.value = "".concat(value);
     }, [value]);
     var onChange = function () {
@@ -5098,11 +4424,11 @@ var Range = function (props) {
     return (jsxRuntime.jsx(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsxRuntime.jsx("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
 };
 
-var Wrapper$4 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n  position: relative;\n\n  div {\n    pointer-events: none;\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"], ["\n  position: relative;\n\n  div {\n    pointer-events: none;\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"])), function (_a) {
+var Wrapper$4 = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n  position: relative;\n\n  div {\n    pointer-events: none;\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"], ["\n  position: relative;\n\n  div {\n    pointer-events: none;\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "not-allowed" : "pointer");
 });
-var StyledSelect = styled.select(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n  width: 100%;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 43px 15px 13px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  appearance: none;\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 43px 15px 13px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  appearance: none;\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var StyledSelect = styled__default["default"].select(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n  width: 100%;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 43px 15px 13px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  appearance: none;\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 43px 15px 13px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  appearance: none;\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
 }, function (_a) {
@@ -5115,13 +4441,13 @@ var StyledSelect = styled.select(templateObject_2$q || (templateObject_2$q = __m
     var isChanged = _a.isChanged;
     return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
 }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$B, templateObject_2$q;
+var templateObject_1$C, templateObject_2$r;
 
 var Select = function (props) {
     var _a;
-    var inputRef = r$1.useRef(null);
-    var _b = r$1.useState(false), isChanged = _b[0], setIsChanged = _b[1];
-    r$1.useEffect(function () {
+    var inputRef = React$3.useRef(null);
+    var _b = React$3.useState(false), isChanged = _b[0], setIsChanged = _b[1];
+    React$3.useEffect(function () {
         var _a, _b;
         if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) ||
             ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) === props.placeholder)
@@ -5137,18 +4463,18 @@ var Select = function (props) {
     return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxRuntime.jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
 };
 
-var StyledSpacer = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+var StyledSpacer = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
     var horizontal = _a.horizontal;
     return (horizontal ? "".concat(horizontal, "px") : "");
 }, function (_a) {
     var vertical = _a.vertical;
     return (vertical ? "".concat(vertical, "px") : "");
 });
-var templateObject_1$A;
+var templateObject_1$B;
 
 var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign$2({}, props))); };
 
-var StyledSubheading = styled.p(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  margin: 0;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  font-style: normal;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  margin: 0;\n  color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
+var StyledSubheading = styled__default["default"].p(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n  font-family: ", ";\n  font-style: normal;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  margin: 0;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  font-style: normal;\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-align: ", ";\n  margin: 0;\n  color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
     var size = _a.size;
     return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
 }, function (_a) {
@@ -5176,18 +4502,18 @@ var StyledSubheading = styled.p(templateObject_1$z || (templateObject_1$z = __ma
             return theme.colors.darkGray.dark;
     }
 });
-var templateObject_1$z;
+var templateObject_1$A;
 
 var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
 
-var Container$j = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
-var templateObject_1$y;
+var Container$k = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
+var templateObject_1$z;
 
 var Tag = function (props) {
-    return jsxRuntime.jsx(Container$j, { children: props.children });
+    return jsxRuntime.jsx(Container$k, { children: props.children });
 };
 
-var Container$i = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var Container$j = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "not-allowed" : "pointer");
 }, function (_a) {
@@ -5205,21 +4531,21 @@ var Container$i = styled.div(templateObject_1$x || (templateObject_1$x = __makeT
     var disabled = _a.disabled;
     return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
 }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$x;
+var templateObject_1$y;
 
 var Toggle = function (props) {
     var _a;
-    var containerRef = r$1.useRef(null);
-    var inputRef = r$1.useRef(null);
-    var _b = r$1.useState(props.defaultValue), checked = _b[0], setChecked = _b[1];
-    r$1.useEffect(function () {
+    var containerRef = React$3.useRef(null);
+    var inputRef = React$3.useRef(null);
+    var _b = React$3.useState(props.defaultValue), checked = _b[0], setChecked = _b[1];
+    React$3.useEffect(function () {
         var _a;
         if (props.autoFocus)
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         if (props.defaultValue)
             inputRef.current.checked = true;
     }, []);
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         setChecked(inputRef.current.checked);
     }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
     var toggle = function () {
@@ -5233,10 +4559,10 @@ var Toggle = function (props) {
                 props.onChange(newValue);
         }
     };
-    return (jsxRuntime.jsx(Container$i, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
+    return (jsxRuntime.jsx(Container$j, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
 };
 
-var Wrapper$3 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n  display: flex;\n  align-items: flex-end;\n\n  > svg {\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-end;\n\n  > svg {\n    height: ", ";\n  }\n"])), function (_a) {
+var Wrapper$3 = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n  display: flex;\n  align-items: flex-end;\n\n  > svg {\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: flex-end;\n\n  > svg {\n    height: ", ";\n  }\n"])), function (_a) {
     var level = _a.level;
     switch (level) {
         case 1:
@@ -5247,7 +4573,7 @@ var Wrapper$3 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTem
             return "70px";
     }
 });
-var templateObject_1$w;
+var templateObject_1$x;
 
 var trophies = {
     1: {
@@ -5283,7 +4609,7 @@ var trophies = {
 };
 var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
 
-var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n  min-height: 44px;\n  padding: 10px;\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n  }\n\n  p {\n    color: ", ";\n  }\n"], ["\n  min-height: 44px;\n  padding: 10px;\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n  }\n\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
+var Container$i = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n  min-height: 44px;\n  padding: 10px;\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n  }\n\n  p {\n    color: ", ";\n  }\n"], ["\n  min-height: 44px;\n  padding: 10px;\n  background-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n  }\n\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
     var type = _a.type;
     switch (type) {
         case "success":
@@ -5300,11 +4626,11 @@ var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __makeT
             return theme.colors.red.base;
     }
 });
-var templateObject_1$v;
+var templateObject_1$w;
 
-var Alert = function (props) { return (jsxRuntime.jsxs(Container$h, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
+var Alert = function (props) { return (jsxRuntime.jsxs(Container$i, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
 
-var StyledCard = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  overflow: hidden;\n  position: relative;\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  overflow: hidden;\n  position: relative;\n\n  ", "\n"])), theme.colors.lightGray.light, function (_a) {
+var StyledCard = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  overflow: hidden;\n  position: relative;\n\n  ", "\n"], ["\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  overflow: hidden;\n  position: relative;\n\n  ", "\n"])), theme.colors.lightGray.light, function (_a) {
     var ellipse = _a.ellipse;
     return ellipse
         ? ":hover {\n        box-shadow: 0px 4px 0px ".concat(function (_a) {
@@ -5313,26 +4639,26 @@ var StyledCard = styled.div(templateObject_1$u || (templateObject_1$u = __makeTe
         }, ";\n\n        > div:first-child {\n          width: 175%;\n          padding-bottom: 175%;\n          top: -25%;\n          right: -25%;\n        }\n      }")
         : "";
 });
-var Ellipse = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n  width: 85%;\n  height: 0;\n  padding-bottom: 85%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0.3;\n  position: absolute;\n  top: -20%;\n  right: -20%;\n  transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n  width: 85%;\n  height: 0;\n  padding-bottom: 85%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0.3;\n  position: absolute;\n  top: -20%;\n  right: -20%;\n  transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
+var Ellipse = styled__default["default"].div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n  width: 85%;\n  height: 0;\n  padding-bottom: 85%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0.3;\n  position: absolute;\n  top: -20%;\n  right: -20%;\n  transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n  width: 85%;\n  height: 0;\n  padding-bottom: 85%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0.3;\n  position: absolute;\n  top: -20%;\n  right: -20%;\n  transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
     var color = _a.color;
     return color ? theme.colors[color].light : "";
 });
-var Content = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\n  height: 100%;\n  padding: 15px;\n  position: inherit;\n  top: 0;\n  left: 0;\n"], ["\n  height: 100%;\n  padding: 15px;\n  position: inherit;\n  top: 0;\n  left: 0;\n"])));
-var templateObject_1$u, templateObject_2$p, templateObject_3$9;
+var Content = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n  height: 100%;\n  padding: 15px;\n  position: inherit;\n  top: 0;\n  left: 0;\n"], ["\n  height: 100%;\n  padding: 15px;\n  position: inherit;\n  top: 0;\n  left: 0;\n"])));
+var templateObject_1$v, templateObject_2$q, templateObject_3$a;
 
 var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
 
-var Fieldset$1 = styled.fieldset(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"], ["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"])));
-var CheckboxContainer = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
-var CheckboxWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])));
-var Label$9 = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])), function (_a) {
+var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"], ["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"])));
+var CheckboxContainer = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
+var CheckboxWrapper = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])));
+var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])), function (_a) {
     var weight = _a.weight;
     return weight || 500;
 }, theme.colors.darkGray.base);
-var templateObject_1$t, templateObject_2$o, templateObject_3$8, templateObject_4$6;
+var templateObject_1$u, templateObject_2$p, templateObject_3$9, templateObject_4$7;
 
 var Checkboxes = function (props) {
-    var _a = r$1.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
+    var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
     var onChange = function (value) {
         if (props.onChange) {
             var newValues = values.includes(value)
@@ -5352,15 +4678,15 @@ var Checkboxes = function (props) {
                 }) })] }));
 };
 
-var Container$g = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"], ["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"])), theme.colors.lightGray.light);
-var Item = styled.div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
+var Container$h = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"], ["\n  width: 100%;\n  background-color: ", ";\n  box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n  border-radius: 6px;\n  padding: 10px 20px;\n"])), theme.colors.lightGray.light);
+var Item = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  padding: 10px 0;\n  cursor: pointer;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 5px;\n  }\n\n  p {\n    display: ", ";\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
     var isOpen = _a.isOpen;
     return (isOpen ? "" : "none");
 }, theme.colors.lightGray.darker);
-var templateObject_1$s, templateObject_2$n;
+var templateObject_1$t, templateObject_2$o;
 
 var Collapse = function (props) {
-    var _a = r$1.useState([]), openItems = _a[0], setOpenItems = _a[1];
+    var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
     var onClickItem = function (index, isOpen) {
         if (isOpen) {
             setOpenItems(function (prevState) { return prevState.filter(function (item) { return item !== index; }); });
@@ -5369,15 +4695,15 @@ var Collapse = function (props) {
             setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
         }
     };
-    return (jsxRuntime.jsx(Container$g, __assign$2({}, props, { children: props.items.map(function (item, index) {
+    return (jsxRuntime.jsx(Container$h, __assign$2({}, props, { children: props.items.map(function (item, index) {
             var isOpen = openItems.includes(index);
             return (jsxRuntime.jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
         }) })));
 };
 
-var Container$f = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
-var Label$8 = styled(StyledParagraph)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$r, templateObject_2$m;
+var Container$g = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
+var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$s, templateObject_2$n;
 
 var DateInputField = function (props) {
     var onChange = function (value) {
@@ -5388,12 +4714,12 @@ var DateInputField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
+    return (jsxRuntime.jsxs(Container$g, { children: [jsxRuntime.jsx(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
 };
 
-var StyledIconButton = styled(StyledButton)(templateObject_1$q || (templateObject_1$q = __makeTemplateObject$1(["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n  }\n\n  :active {\n    min-height: 38px;\n    max-height: 38px;\n    margin-top: 2px;\n  }\n"], ["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n  }\n\n  :active {\n    min-height: 38px;\n    max-height: 38px;\n    margin-top: 2px;\n  }\n"])));
-var GhostIconButton = styled(GhostButton)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  :active {\n    min-height: 40px;\n    max-height: 40px;\n    margin-top: 2px;\n  }\n"], ["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  :active {\n    min-height: 40px;\n    max-height: 40px;\n    margin-top: 2px;\n  }\n"])));
-var templateObject_1$q, templateObject_2$l;
+var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n  }\n\n  :active {\n    min-height: 38px;\n    max-height: 38px;\n    margin-top: 2px;\n  }\n"], ["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n  }\n\n  :active {\n    min-height: 38px;\n    max-height: 38px;\n    margin-top: 2px;\n  }\n"])));
+var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  :active {\n    min-height: 40px;\n    max-height: 40px;\n    margin-top: 2px;\n  }\n"], ["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n  padding: 2px 0 0 0;\n\n  :active {\n    min-height: 40px;\n    max-height: 40px;\n    margin-top: 2px;\n  }\n"])));
+var templateObject_1$r, templateObject_2$m;
 
 var IconButton = function (props) {
     if (props.color === "white")
@@ -5401,9 +4727,9 @@ var IconButton = function (props) {
     return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
 };
 
-var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
-var Label$7 = styled(StyledParagraph)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$p, templateObject_2$k;
+var Container$f = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
+var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$q, templateObject_2$l;
 
 var InputField = function (props) {
     var onChange = function (value) {
@@ -5414,10 +4740,10 @@ var InputField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
+    return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
 };
 
-var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n  min-width: 74px;\n  max-width: 74px;\n  width: fit-content;\n  height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"], ["\n  min-width: 74px;\n  max-width: 74px;\n  width: fit-content;\n  height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
+var Container$e = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n  min-width: 74px;\n  max-width: 74px;\n  width: fit-content;\n  height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"], ["\n  min-width: 74px;\n  max-width: 74px;\n  width: fit-content;\n  height: 74px;\n  background-color: ", ";\n  box-sizing: border-box;\n\n  border: 4px solid;\n  border-radius: 6px;\n  border-color: ", ";\n\n  padding: 8px 24px;\n  margin-right: 6px;\n  margin-left: 6px;\n  margin-bottom: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  position: relative;\n  text-transform: uppercase;\n\n  h1 {\n    color: ", ";\n  }\n\n  > svg {\n    fill: ", ";\n  }\n"])), function (_a) {
     var status = _a.status, color = _a.color;
     switch (status) {
         case "passed":
@@ -5461,23 +4787,23 @@ var Container$d = styled.div(templateObject_1$o || (templateObject_1$o = __makeT
             return theme.colors.darkGray.light;
     }
 });
-var CheckIconWrapper = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-var templateObject_1$o, templateObject_2$j;
+var CheckIconWrapper = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+var templateObject_1$p, templateObject_2$k;
 
-var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$d, __assign$2({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
+var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
                 marginTop: "13px",
                 transform: "scale(2)",
             } }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
 
-var Wrapper$2 = styled.a(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  > div {\n    width: 19px;\n    height: 19px;\n    margin-top: 3px;\n    margin-right: ", ";\n    margin-left: ", ";\n  }\n"], ["\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  > div {\n    width: 19px;\n    height: 19px;\n    margin-top: 3px;\n    margin-right: ", ";\n    margin-left: ", ";\n  }\n"])), function (_a) {
+var Wrapper$2 = styled__default["default"].a(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  > div {\n    width: 19px;\n    height: 19px;\n    margin-top: 3px;\n    margin-right: ", ";\n    margin-left: ", ";\n  }\n"], ["\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  text-decoration: none;\n\n  > div {\n    width: 19px;\n    height: 19px;\n    margin-top: 3px;\n    margin-right: ", ";\n    margin-left: ", ";\n  }\n"])), function (_a) {
     var chevron = _a.chevron;
     return (chevron === "left" ? "4px" : "");
 }, function (_a) {
     var chevron = _a.chevron;
     return (chevron === "right" ? "4px" : "");
 });
-var StyledLink = styled(StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n  color: ", ";\n\n  :hover {\n    text-decoration: underline;\n  }\n"], ["\n  color: ", ";\n\n  :hover {\n    text-decoration: underline;\n  }\n"])), theme.colors.darkGray.dark);
-var templateObject_1$n, templateObject_2$i;
+var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n  color: ", ";\n\n  :hover {\n    text-decoration: underline;\n  }\n"], ["\n  color: ", ";\n\n  :hover {\n    text-decoration: underline;\n  }\n"])), theme.colors.darkGray.dark);
+var templateObject_1$o, templateObject_2$j;
 
 var Link = function (props) {
     var onClick = function (e) {
@@ -5489,15 +4815,15 @@ var Link = function (props) {
     return (jsxRuntime.jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }), jsxRuntime.jsx(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }))] })));
 };
 
-var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: ", ";\n"])), function (_a) {
+var Container$d = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: ", ";\n"])), function (_a) {
     var text = _a.text;
     return (text ? "20px" : "");
 });
-var templateObject_1$m;
+var templateObject_1$n;
 
-var Loading = function (props) { return (jsxRuntime.jsxs(Container$c, __assign$2({}, props, { children: [jsxRuntime.jsx(_default, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
+var Loading = function (props) { return (jsxRuntime.jsxs(Container$d, __assign$2({}, props, { children: [jsxRuntime.jsx(_default, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
 
-var Container$b = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n  padding: 15px;\n  background-color: ", ";\n  border-radius: 6px 6px 0 0;\n  position: relative;\n  cursor: pointer;\n"], ["\n  padding: 15px;\n  background-color: ", ";\n  border-radius: 6px 6px 0 0;\n  position: relative;\n  cursor: pointer;\n"])), function (_a) {
+var Container$c = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject$1(["\n  padding: 15px;\n  background-color: ", ";\n  border-radius: 6px 6px 0 0;\n  position: relative;\n  cursor: pointer;\n"], ["\n  padding: 15px;\n  background-color: ", ";\n  border-radius: 6px 6px 0 0;\n  position: relative;\n  cursor: pointer;\n"])), function (_a) {
     var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
     if (dropdownIsVisible) {
         switch (color) {
@@ -5510,8 +4836,8 @@ var Container$b = styled.div(templateObject_1$l || (templateObject_1$l = __makeT
     }
     return "";
 });
-var SelectedLocaleWrapper = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n"])));
-var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n  min-width: 100%;\n  background-color: ", ";\n  overflow: hidden;\n  border-radius: 6px 0 6px 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 50px;\n  right: 0;\n"], ["\n  min-width: 100%;\n  background-color: ", ";\n  overflow: hidden;\n  border-radius: 6px 0 6px 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 50px;\n  right: 0;\n"])), function (_a) {
+var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n"])));
+var DropdownContainer = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\n  min-width: 100%;\n  background-color: ", ";\n  overflow: hidden;\n  border-radius: 6px 0 6px 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 50px;\n  right: 0;\n"], ["\n  min-width: 100%;\n  background-color: ", ";\n  overflow: hidden;\n  border-radius: 6px 0 6px 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  position: absolute;\n  top: 50px;\n  right: 0;\n"])), function (_a) {
     var color = _a.color;
     switch (color) {
         default:
@@ -5521,42 +4847,42 @@ var DropdownContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = _
             return theme.colors.lightGray.dark;
     }
 });
-var LocaleWrapper = styled.div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n\n  p {\n    white-space: nowrap;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n\n  p {\n    white-space: nowrap;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
-var templateObject_1$l, templateObject_2$h, templateObject_3$7, templateObject_4$5;
+var LocaleWrapper = styled__default["default"].div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n\n  p {\n    white-space: nowrap;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  > div:first-child {\n    display: flex;\n    align-items: center;\n    margin-right: 10px;\n  }\n\n  p {\n    white-space: nowrap;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n    svg {\n      fill: ", ";\n    }\n  }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
+var templateObject_1$m, templateObject_2$i, templateObject_3$8, templateObject_4$6;
 
 var LocaleSelect = function (props) {
-    var _a = r$1.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
-    var _b = r$1.useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
+    var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
+    var _b = React$3.useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
     var onSelectLocale = function (locale) {
         setLocale(locale);
         props.onChange(locale);
     };
-    return (jsxRuntime.jsxs(Container$b, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
+    return (jsxRuntime.jsxs(Container$c, __assign$2({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign$2({ color: props.color || "light" }, { children: props.locales
                     .filter(function (l) { return l !== locale; })
                     .map(function (locale) { return (jsxRuntime.jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
 };
 
-var Wrapper$1 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"], ["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"])));
-var templateObject_1$k;
+var Wrapper$1 = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"], ["\n  width: 100%;\n  min-width: 200px;\n  display: flex;\n  justify-content: space-between;\n\n  > div {\n    display: flex;\n    align-items: center;\n  }\n"])));
+var templateObject_1$l;
 
-var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "gold" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "silver" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "bronze" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
+var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.GOLD }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.SILVER }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: Medal$1.BRONZE }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
 
-var NotificationContainer = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n  width: fit-content;\n  max-width: 460px;\n  padding: 15px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 15px;\n  }\n"], ["\n  width: fit-content;\n  max-width: 460px;\n  padding: 15px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 15px;\n  }\n"])), function (_a) {
+var NotificationContainer = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\n  width: fit-content;\n  max-width: 460px;\n  padding: 15px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 15px;\n  }\n"], ["\n  width: fit-content;\n  max-width: 460px;\n  padding: 15px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 15px;\n  }\n"])), function (_a) {
     var contrast = _a.contrast;
     return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
 });
-var ButtonContainer = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n  margin-top: 20px;\n  display: flex;\n\n  > *:first-child {\n    margin-right: 10px;\n  }\n"], ["\n  margin-top: 20px;\n  display: flex;\n\n  > *:first-child {\n    margin-right: 10px;\n  }\n"])));
-var templateObject_1$j, templateObject_2$g;
+var ButtonContainer = styled__default["default"].div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n  margin-top: 20px;\n  display: flex;\n\n  > *:first-child {\n    margin-right: 10px;\n  }\n"], ["\n  margin-top: 20px;\n  display: flex;\n\n  > *:first-child {\n    margin-right: 10px;\n  }\n"])));
+var templateObject_1$k, templateObject_2$h;
 
 var Notification = function (props) {
     if (!props.isVisible)
         return null;
-    return (jsxRuntime.jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (r$1.createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
+    return (jsxRuntime.jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React$3.createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
 };
 
-var Container$a = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
-var Label$6 = styled(StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$i, templateObject_2$f;
+var Container$b = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
+var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$j, templateObject_2$g;
 
 var NumberField = function (props) {
     var onChange = function (value) {
@@ -5567,7 +4893,7 @@ var NumberField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$6, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Number$1, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
+    return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsx(Label$6, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Number$1, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
 };
 
 var expressions = {};
@@ -5611,15 +4937,15 @@ var isStrongPassword = function (password) {
 exports.isStrongPassword = isStrongPassword;
 }(expressions));
 
-var Container$9 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
-var Label$5 = styled(StyledParagraph)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var HelperContainer = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n  margin-top: 5px;\n  padding-left: 5px;\n"], ["\n  margin-top: 5px;\n  padding-left: 5px;\n"])));
-var fadeIn = We(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject$1(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
-var Helper = styled(StyledParagraph)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n  font-weight: 400;\n  font-size: 14px;\n  color: ", ";\n  animation: ", " 0.3s linear;\n"], ["\n  font-weight: 400;\n  font-size: 14px;\n  color: ", ";\n  animation: ", " 0.3s linear;\n"])), function (_a) {
+var Container$a = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
+var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var HelperContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n  margin-top: 5px;\n  padding-left: 5px;\n"], ["\n  margin-top: 5px;\n  padding-left: 5px;\n"])));
+var fadeIn = styled.keyframes(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var Helper = styled__default["default"](StyledParagraph)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n  font-weight: 400;\n  font-size: 14px;\n  color: ", ";\n  animation: ", " 0.3s linear;\n"], ["\n  font-weight: 400;\n  font-size: 14px;\n  color: ", ";\n  animation: ", " 0.3s linear;\n"])), function (_a) {
     var isOk = _a.isOk;
     return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
 }, fadeIn);
-var templateObject_1$h, templateObject_2$e, templateObject_3$6, templateObject_4$4, templateObject_5$2;
+var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
 
 var translations = {
     "nl-NL": {
@@ -5661,7 +4987,7 @@ var translations = {
 };
 
 var PasswordInputField = function (props) {
-    var _a = r$1.useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
+    var _a = React$3.useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
     var onChange = function (value) {
         setValue(value);
         if (props.onChange)
@@ -5676,7 +5002,7 @@ var PasswordInputField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsx(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
+    return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
 };
 
 var generateRandomString = function (length) {
@@ -5689,7 +5015,7 @@ var generateRandomString = function (length) {
     return string;
 };
 
-var PopupContainer = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n  width: fit-content;\n  max-width: 25vw;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  padding: 15px;\n  margin-top: 10px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n"], ["\n  width: fit-content;\n  max-width: 25vw;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  padding: 15px;\n  margin-top: 10px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n"])), function (_a) {
+var PopupContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n  width: fit-content;\n  max-width: 25vw;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  padding: 15px;\n  margin-top: 10px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n"], ["\n  width: fit-content;\n  max-width: 25vw;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  padding: 15px;\n  margin-top: 10px;\n  border-radius: 6px;\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n"])), function (_a) {
     var isVisible = _a.isVisible;
     return (isVisible ? "100%" : "0%");
 }, function (_a) {
@@ -5702,13 +5028,13 @@ var PopupContainer = styled.div(templateObject_1$g || (templateObject_1$g = __ma
     var contrast = _a.contrast;
     return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
 });
-var templateObject_1$g;
+var templateObject_1$h;
 
 var Popup = function (props) {
-    var popupRef = r$1.useRef(null);
-    var _a = r$1.useState(""), triggerId = _a[0], setTriggerId = _a[1];
-    var _b = r$1.useState(false), isVisible = _b[0], setIsVisible = _b[1];
-    var _c = r$1.useState(null), position = _c[0], setPosition = _c[1];
+    var popupRef = React$3.useRef(null);
+    var _a = React$3.useState(""), triggerId = _a[0], setTriggerId = _a[1];
+    var _b = React$3.useState(false), isVisible = _b[0], setIsVisible = _b[1];
+    var _c = React$3.useState(null), position = _c[0], setPosition = _c[1];
     var showPopup = function () {
         var el = document.getElementById(triggerId);
         if (el) {
@@ -5722,13 +5048,13 @@ var Popup = function (props) {
             setIsVisible(true);
         }
     };
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         var id = generateRandomString(5);
         setTriggerId(id);
     }, []);
-    var children = r__default["default"].Children.map(props.children, function (child, index) {
-        if (r__default["default"].isValidElement(child) && index <= 0) {
-            return r__default["default"].cloneElement(child, {
+    var children = React__default["default"].Children.map(props.children, function (child, index) {
+        if (React__default["default"].isValidElement(child) && index <= 0) {
+            return React__default["default"].cloneElement(child, {
                 id: triggerId,
                 onMouseEnter: function () { return showPopup(); },
                 onMouseLeave: function () { return setIsVisible(false); },
@@ -5738,24 +5064,24 @@ var Popup = function (props) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 10 })] })), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
 };
 
-var Wrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n"])));
-var StyledProgressBar = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n  width: 100%;\n  height: 15px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  margin-right: ", ";\n"], ["\n  width: 100%;\n  height: 15px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
+var Wrapper = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  display: flex;\n  align-items: center;\n"])));
+var StyledProgressBar = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n  width: 100%;\n  height: 15px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  margin-right: ", ";\n"], ["\n  width: 100%;\n  height: 15px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
     var showInfo = _a.showInfo;
     return (showInfo ? "10px" : "");
 });
-var Indicator$1 = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n  width: ", ";\n  max-width: calc(100% - 6px);\n  height: 9px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  top: 3px;\n  left: 3px;\n"], ["\n  width: ", ";\n  max-width: calc(100% - 6px);\n  height: 9px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  top: 3px;\n  left: 3px;\n"])), function (_a) {
+var Indicator$1 = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n  width: ", ";\n  max-width: calc(100% - 6px);\n  height: 9px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  top: 3px;\n  left: 3px;\n"], ["\n  width: ", ";\n  max-width: calc(100% - 6px);\n  height: 9px;\n  position: relative;\n  background-color: ", ";\n  border-radius: 8px;\n  top: 3px;\n  left: 3px;\n"])), function (_a) {
     var percent = _a.percent;
     return "calc(".concat(percent, "% - 6px)");
 }, function (_a) {
     var color = _a.color;
     return color ? theme.colors[color].base : theme.colors.green.base;
 });
-var templateObject_1$f, templateObject_2$d, templateObject_3$5;
+var templateObject_1$g, templateObject_2$e, templateObject_3$6;
 
 var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign$2({}, props, { children: jsxRuntime.jsx(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
 
-var Container$8 = styled.ol(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"])));
-var Step$1 = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin: 0 auto;\n    cursor: ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n    border: 10px solid ", ";\n    position: relative;\n    z-index: 1;\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :not(:last-child):after {\n    content: \"\";\n    height: 4px;\n    position: relative;\n    top: ", ";\n    left: 50%;\n    background-color: ", ";\n    order: -1;\n  }\n\n  :last-child {\n    margin-top: 4px;\n  }\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin: 0 auto;\n    cursor: ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n    border: 10px solid ", ";\n    position: relative;\n    z-index: 1;\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :not(:last-child):after {\n    content: \"\";\n    height: 4px;\n    position: relative;\n    top: ", ";\n    left: 50%;\n    background-color: ", ";\n    order: -1;\n  }\n\n  :last-child {\n    margin-top: 4px;\n  }\n"])), function (_a) {
+var Container$9 = styled__default["default"].ol(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"])));
+var Step$1 = styled__default["default"].li(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin: 0 auto;\n    cursor: ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n    border: 10px solid ", ";\n    position: relative;\n    z-index: 1;\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :not(:last-child):after {\n    content: \"\";\n    height: 4px;\n    position: relative;\n    top: ", ";\n    left: 50%;\n    background-color: ", ";\n    order: -1;\n  }\n\n  :last-child {\n    margin-top: 4px;\n  }\n"], ["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  text-align: center;\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin: 0 auto;\n    cursor: ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n    border: 10px solid ", ";\n    position: relative;\n    z-index: 1;\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :not(:last-child):after {\n    content: \"\";\n    height: 4px;\n    position: relative;\n    top: ", ";\n    left: 50%;\n    background-color: ", ";\n    order: -1;\n  }\n\n  :last-child {\n    margin-top: 4px;\n  }\n"])), function (_a) {
     var status = _a.status;
     return (!!status ? "pointer" : "not-allowed");
 }, function (_a) {
@@ -5777,9 +5103,9 @@ var Step$1 = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplat
     var hasTitle = _a.hasTitle;
     return (hasTitle ? "calc(50% - 12px)" : "50%");
 }, theme.colors.lightGray.dark);
-var templateObject_1$e, templateObject_2$c;
+var templateObject_1$f, templateObject_2$d;
 
-var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
+var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$9, { children: props.steps.map(function (_a, index) {
         var title = _a.title, onClick = _a.onClick;
         var step = index + 1;
         var status = props.current > step
@@ -5794,8 +5120,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$8, { children:
         return (jsxRuntime.jsxs(Step$1, __assign$2({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsxRuntime.jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
     }) })); };
 
-var Container$7 = styled.ol(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"])));
-var Step = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"])), theme.colors.lightGray.dark, function (_a) {
+var Container$8 = styled__default["default"].ol(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n"])));
+var Step = styled__default["default"].li(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  box-shadow: inset 0px -1px 0px ", ";\n  padding: 20px 0 20px 20px;\n  cursor: ", ";\n\n  > div:first-child {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    box-sizing: initial;\n    margin-right: 10px;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    background-color: ", ";\n  }\n\n  > div h6 {\n    color: ", ";\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"])), theme.colors.lightGray.dark, function (_a) {
     var status = _a.status;
     return (!!status ? "pointer" : "not-allowed");
 }, function (_a) {
@@ -5814,9 +5140,9 @@ var Step = styled.li(templateObject_2$b || (templateObject_2$b = __makeTemplateO
         ? theme.colors.lightGray.light
         : theme.colors.darkGray.light;
 }, theme.colors.darkGray.base, theme.colors.lightGray.base);
-var templateObject_1$d, templateObject_2$b;
+var templateObject_1$e, templateObject_2$c;
 
-var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$7, { children: props.steps.map(function (_a, index) {
+var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
         var title = _a.title, onClick = _a.onClick;
         var step = index + 1;
         var status = props.current > step
@@ -5835,14 +5161,14 @@ var Steps = function (props) {
     return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
 };
 
-var Fieldset = styled.fieldset(templateObject_1$c || (templateObject_1$c = __makeTemplateObject$1(["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"], ["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"])));
-var RadioContainer = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
-var RadioWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])));
-var Label$4 = styled(StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])), function (_a) {
+var Fieldset = styled__default["default"].fieldset(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"], ["\n  border: 0;\n  margin: 0;\n  padding: 0;\n"])));
+var RadioContainer = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
+var RadioWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  > div:first-child {\n    margin-right: 10px;\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])));
+var Label$4 = styled__default["default"](StyledParagraph)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n"])), function (_a) {
     var weight = _a.weight;
     return weight || 500;
 }, theme.colors.darkGray.base);
-var templateObject_1$c, templateObject_2$a, templateObject_3$4, templateObject_4$3;
+var templateObject_1$d, templateObject_2$b, templateObject_3$5, templateObject_4$4;
 
 var RadioGroup = function (props) {
     var onChange = function (value) {
@@ -5859,9 +5185,9 @@ var RadioGroup = function (props) {
                 }) })] }));
 };
 
-var Container$6 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"])));
-var Label$3 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$b, templateObject_2$9;
+var Container$7 = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"])));
+var Label$3 = styled__default["default"](StyledParagraph)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$c, templateObject_2$a;
 
 var SelectField = function (props) {
     var onChange = function (value) {
@@ -5872,15 +5198,15 @@ var SelectField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$3, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Select, __assign$2({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
+    return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(Label$3, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Select, __assign$2({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
                     var value = _a.value, label = _a.label;
                     return (jsxRuntime.jsx("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
                 }) }))] }));
 };
 
-var Container$5 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"])));
-var Label$2 = styled(StyledParagraph)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$a, templateObject_2$8;
+var Container$6 = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n"])));
+var Label$2 = styled__default["default"](StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$b, templateObject_2$9;
 
 var ToggleField = function (props) {
     var onChange = function (value) {
@@ -5891,10 +5217,10 @@ var ToggleField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(Label$2, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
+    return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$2, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
 };
 
-var TooltipContainer = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject$1(["\n  width: fit-content;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 5px;\n  pointer-events: none;\n  z-index: 9;\n"], ["\n  width: fit-content;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 5px;\n  pointer-events: none;\n  z-index: 9;\n"])), function (_a) {
+var TooltipContainer = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n  width: fit-content;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 5px;\n  pointer-events: none;\n  z-index: 9;\n"], ["\n  width: fit-content;\n  position: fixed;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 5px;\n  pointer-events: none;\n  z-index: 9;\n"])), function (_a) {
     var isVisible = _a.isVisible;
     return (isVisible ? "100%" : "0%");
 }, function (_a) {
@@ -5904,7 +5230,7 @@ var TooltipContainer = styled.div(templateObject_1$9 || (templateObject_1$9 = __
     var x = _a.x;
     return (x ? "".concat(x, "px") : "");
 });
-var TooltipTitle = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject$1(["\n  width: 100%;\n  padding: 12px 16px;\n  background-color: ", ";\n  border-radius: 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  padding: 12px 16px;\n  background-color: ", ";\n  border-radius: 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var TooltipTitle = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject$1(["\n  width: 100%;\n  padding: 12px 16px;\n  background-color: ", ";\n  border-radius: 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  padding: 12px 16px;\n  background-color: ", ";\n  border-radius: 6px;\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
     var color = _a.color;
     switch (color) {
         default:
@@ -5914,13 +5240,13 @@ var TooltipTitle = styled.div(templateObject_2$7 || (templateObject_2$7 = __make
             return theme.colors.lightGray.dark;
     }
 });
-var templateObject_1$9, templateObject_2$7;
+var templateObject_1$a, templateObject_2$8;
 
 var Tooltip = function (props) {
-    var tooltipRef = r$1.useRef(null);
-    var _a = r$1.useState(""), triggerId = _a[0], settriggerId = _a[1];
-    var _b = r$1.useState(false), isVisible = _b[0], setIsVisible = _b[1];
-    var _c = r$1.useState(null), position = _c[0], setPosition = _c[1];
+    var tooltipRef = React$3.useRef(null);
+    var _a = React$3.useState(""), triggerId = _a[0], settriggerId = _a[1];
+    var _b = React$3.useState(false), isVisible = _b[0], setIsVisible = _b[1];
+    var _c = React$3.useState(null), position = _c[0], setPosition = _c[1];
     var showTooltip = function () {
         var el = document.getElementById(triggerId);
         if (el) {
@@ -5931,13 +5257,13 @@ var Tooltip = function (props) {
             setIsVisible(true);
         }
     };
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         var id = generateRandomString(5);
         settriggerId(id);
     }, []);
-    var children = r__default["default"].Children.map(props.children, function (child, index) {
-        if (r__default["default"].isValidElement(child) && index <= 0) {
-            return r__default["default"].cloneElement(child, {
+    var children = React__default["default"].Children.map(props.children, function (child, index) {
+        if (React__default["default"].isValidElement(child) && index <= 0) {
+            return React__default["default"].cloneElement(child, {
                 id: triggerId,
                 onMouseEnter: function () { return showTooltip(); },
                 onMouseLeave: function () { return setIsVisible(false); },
@@ -7123,7 +6449,7 @@ function StyleToJS(style, options) {
 exports["default"] = StyleToJS;
 }(cjs));
 
-var React$1 = r__default["default"];
+var React$1 = React__default["default"];
 var styleToJS = cjs.default;
 
 /**
@@ -7341,7 +6667,7 @@ function getPropName(attributeName) {
   return reactProperty.possibleStandardNames[attributeName];
 }
 
-var React = r__default["default"];
+var React = React__default["default"];
 var attributesToProps$1 = attributesToProps$2;
 var utilities$1 = utilities$3;
 
@@ -11766,7 +11092,7 @@ HTMLReactParser$1.htmlToDOM;
 HTMLReactParser$1.attributesToProps;
 HTMLReactParser$1.Element;
 
-var StyledTextarea = styled.textarea(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
+var StyledTextarea = styled__default["default"].textarea(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
     var disabled = _a.disabled;
     return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
 }, function (_a) {
@@ -11779,7 +11105,7 @@ var StyledTextarea = styled.textarea(templateObject_1$8 || (templateObject_1$8 =
     var disabled = _a.disabled;
     return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
 }, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$8;
+var templateObject_1$9;
 
 var Textarea = function (props) {
     var onChange = function (e) {
@@ -11789,9 +11115,9 @@ var Textarea = function (props) {
     return jsxRuntime.jsx(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
 };
 
-var Container$4 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
-var Label$1 = styled(StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$7, templateObject_2$6;
+var Container$5 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
+var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$8, templateObject_2$7;
 
 var TextareaField = function (props) {
     var onChange = function (value) {
@@ -11802,12 +11128,12 @@ var TextareaField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$1, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
+    return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(Label$1, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
 };
 
-var Container$3 = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
-var Label = styled(StyledParagraph)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$6, templateObject_2$5;
+var Container$4 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex-wrap: wrap;\n"])));
+var Label = styled__default["default"](StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$7, templateObject_2$6;
 
 var RangeField = function (props) {
     var onChange = function (value) {
@@ -11818,25 +11144,25 @@ var RangeField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
+    return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
 };
 
 var FeedbackColors = {
     success: theme.colors.green.base,
     error: theme.colors.red.base,
 };
-var FieldWrapper = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1(["\n  input, select {\n    border-color: ", ";\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  input, select {\n    border-color: ", ";\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])), function (_a) {
+var FieldWrapper = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject$1(["\n  input, select {\n    border-color: ", ";\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  input, select {\n    border-color: ", ";\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])), function (_a) {
     var status = _a.status;
     return FeedbackColors[status];
 });
-var FeedbackWrapper = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n    margin-right: 5px;\n  }\n\n  svg {\n    fill: ", ";\n  }\n  p {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n    margin-right: 5px;\n  }\n\n  svg {\n    fill: ", ";\n  }\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
+var FeedbackWrapper = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject$1(["\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n    margin-right: 5px;\n  }\n\n  svg {\n    fill: ", ";\n  }\n  p {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 5px;\n\n  > div:first-child {\n    min-width: 24px;\n    min-height: 24px;\n    margin-right: 5px;\n  }\n\n  svg {\n    fill: ", ";\n  }\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
     var status = _a.status;
     return FeedbackColors[status];
 }, function (_a) {
     var status = _a.status;
     return FeedbackColors[status];
 });
-var templateObject_1$5, templateObject_2$4;
+var templateObject_1$6, templateObject_2$5;
 
 var WithValidation = function (_a) {
     var status = _a.status, message = _a.message, children = _a.children;
@@ -11849,18 +11175,18 @@ var WithValidation = function (_a) {
     return (jsxRuntime.jsxs(FieldWrapper, __assign$2({ status: status }, { children: [children, jsxRuntime.jsxs(FeedbackWrapper, __assign$2({ status: status }, { children: [jsxRuntime.jsx(Icon, { type: icons[status], size: "small" }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: message }))] }))] })));
 };
 
-var FormWrapper = styled.form(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1([""], [""])));
-var DescriptionWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject$1(["\n  margin-bottom: 20px;\n\n  a {\n    color: ", ";\n\n    :hover {\n      color: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 20px;\n\n  a {\n    color: ", ";\n\n    :hover {\n      color: ", ";\n    }\n  }\n"])), theme.colors.darkGray.light, theme.colors.blue.base);
-var ButtonWrapper = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject$1(["\n  padding-top: 30px;\n"], ["\n  padding-top: 30px;\n"])));
-var templateObject_1$4, templateObject_2$3, templateObject_3$3;
+var FormWrapper = styled__default["default"].form(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1([""], [""])));
+var DescriptionWrapper = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n  margin-bottom: 20px;\n\n  a {\n    color: ", ";\n\n    :hover {\n      color: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 20px;\n\n  a {\n    color: ", ";\n\n    :hover {\n      color: ", ";\n    }\n  }\n"])), theme.colors.darkGray.light, theme.colors.blue.base);
+var ButtonWrapper = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n  padding-top: 30px;\n"], ["\n  padding-top: 30px;\n"])));
+var templateObject_1$5, templateObject_2$4, templateObject_3$4;
 
-var Form = r$1.forwardRef(function (props, ref) {
-    var _a = r$1.useState({}), values = _a[0], setValues = _a[1];
-    var _b = r$1.useState({}), feedback = _b[0], setFeedback = _b[1];
-    r$1.useImperativeHandle(ref, function () { return ({
+var Form = React$3.forwardRef(function (props, ref) {
+    var _a = React$3.useState({}), values = _a[0], setValues = _a[1];
+    var _b = React$3.useState({}), feedback = _b[0], setFeedback = _b[1];
+    React$3.useImperativeHandle(ref, function () { return ({
         resetForm: resetForm,
     }); });
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         setDefaultValues();
     }, []);
     var setDefaultValues = function () {
@@ -12002,40 +11328,40 @@ var Form = r$1.forwardRef(function (props, ref) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h4" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 15 })] })), props.description && (jsxRuntime.jsx(DescriptionWrapper, { children: jsxRuntime.jsx(Paragraph, __assign$2({ color: "darkGray", weight: "regular" }, { children: HTMLReactParser$1(props.description) })) })), jsxRuntime.jsx(FormWrapper, { children: props.fields.map(function (field, index) {
                     switch (field.type) {
                         case "text":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(InputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "password":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(PasswordInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPress: field.submitOnEnter && onSubmit }))));
                         case "date":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(DateInputField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "textarea":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(TextareaField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "radio":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(RadioGroup, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "number":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(NumberField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "checkbox":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(Checkboxes, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "select":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(SelectField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "toggle":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(ToggleField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                         case "range":
-                            return (r$1.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
+                            return (React$3.createElement(WithValidation, __assign$2({}, feedback[field.name], { key: "field-".concat(index) }),
                                 jsxRuntime.jsx(RangeField, __assign$2({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
                     }
                 }) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign$2({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
 });
 
-var Container$2 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject$1(["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  justify-content: space-evenly;\n\n  border-radius: 3px;\n  border-color: ", ";\n\n  background-color: ", ";\n  box-sizing: border-box;\n  border-width: ", ";\n  border-style: solid;\n\n  svg {\n    fill: ", ";\n  }\n\n  h6 {\n    color: ", ";\n    font-size: 16px;\n    line-height: 12px;\n  }\n"], ["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  justify-content: space-evenly;\n\n  border-radius: 3px;\n  border-color: ", ";\n\n  background-color: ", ";\n  box-sizing: border-box;\n  border-width: ", ";\n  border-style: solid;\n\n  svg {\n    fill: ", ";\n  }\n\n  h6 {\n    color: ", ";\n    font-size: 16px;\n    line-height: 12px;\n  }\n"])), function (_a) {
+var Container$3 = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  justify-content: space-evenly;\n\n  border-radius: 3px;\n  border-color: ", ";\n\n  background-color: ", ";\n  box-sizing: border-box;\n  border-width: ", ";\n  border-style: solid;\n\n  svg {\n    fill: ", ";\n  }\n\n  h6 {\n    color: ", ";\n    font-size: 16px;\n    line-height: 12px;\n  }\n"], ["\n  min-width: 40px;\n  max-width: 40px;\n  min-height: 40px;\n  max-height: 40px;\n\n  display: flex;\n  flex-direction: column-reverse;\n  align-items: center;\n  justify-content: space-evenly;\n\n  border-radius: 3px;\n  border-color: ", ";\n\n  background-color: ", ";\n  box-sizing: border-box;\n  border-width: ", ";\n  border-style: solid;\n\n  svg {\n    fill: ", ";\n  }\n\n  h6 {\n    color: ", ";\n    font-size: 16px;\n    line-height: 12px;\n  }\n"])), function (_a) {
     var color = _a.color, active = _a.active;
     if (active)
         return theme.colors[color].dark;
@@ -12059,25 +11385,25 @@ var Container$2 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeT
         return theme.colors[color].base;
     return "";
 });
-var templateObject_1$3;
+var templateObject_1$4;
 
 var Key = function (props) {
     var _a;
-    return (jsxRuntime.jsx(Container$2, __assign$2({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "7", viewBox: "0 0 28 7" }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) })));
+    return (jsxRuntime.jsx(Container$3, __assign$2({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "7", viewBox: "0 0 28 7" }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) })));
 };
 
-var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n  width: 720px;\n  background-color: #cacbd6;\n  box-shadow: #7b7f81 0px 8px 0px;\n  border-radius: 10px;\n  padding: 25px 20px;\n  box-sizing: border-box;\n"], ["\n  width: 720px;\n  background-color: #cacbd6;\n  box-shadow: #7b7f81 0px 8px 0px;\n  border-radius: 10px;\n  padding: 25px 20px;\n  box-sizing: border-box;\n"])));
-var SpecialRow = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n\n  > div:last-child {\n    min-width: 60px;\n    max-width: 60px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  > div:last-child {\n    min-width: 60px;\n    max-width: 60px;\n  }\n"])));
-var TopRow = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 50px;\n    max-width: 50px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 50px;\n    max-width: 50px;\n  }\n"])));
-var StartRow = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n  > div:last-child {\n    min-width: 65px;\n    max-width: 65px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n  > div:last-child {\n    min-width: 65px;\n    max-width: 65px;\n  }\n"])));
-var BottomRow = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 90px;\n    max-width: 90px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 90px;\n    max-width: 90px;\n  }\n"])));
-var SpacebarRow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n\n  > div:nth-child(5) {\n    min-width: 220px;\n    max-width: 220px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n\n  > div:nth-child(5) {\n    min-width: 220px;\n    max-width: 220px;\n  }\n"])));
-var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6;
+var Container$2 = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject$1(["\n  width: 720px;\n  background-color: #cacbd6;\n  box-shadow: #7b7f81 0px 8px 0px;\n  border-radius: 10px;\n  padding: 25px 20px;\n  box-sizing: border-box;\n"], ["\n  width: 720px;\n  background-color: #cacbd6;\n  box-shadow: #7b7f81 0px 8px 0px;\n  border-radius: 10px;\n  padding: 25px 20px;\n  box-sizing: border-box;\n"])));
+var SpecialRow = styled__default["default"].div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n\n  > div:last-child {\n    min-width: 60px;\n    max-width: 60px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n\n  > div:last-child {\n    min-width: 60px;\n    max-width: 60px;\n  }\n"])));
+var TopRow = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 50px;\n    max-width: 50px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 50px;\n    max-width: 50px;\n  }\n"])));
+var StartRow = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n  > div:last-child {\n    min-width: 65px;\n    max-width: 65px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n  > div:last-child {\n    min-width: 65px;\n    max-width: 65px;\n  }\n"])));
+var BottomRow = styled__default["default"].div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 90px;\n    max-width: 90px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 90px;\n    max-width: 90px;\n  }\n"])));
+var SpacebarRow = styled__default["default"].div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n\n  > div:nth-child(5) {\n    min-width: 220px;\n    max-width: 220px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin-top: 10px;\n\n  > div:first-child,\n  > div:last-child {\n    min-width: 70px;\n    max-width: 70px;\n  }\n\n  > div:nth-child(5) {\n    min-width: 220px;\n    max-width: 220px;\n  }\n"])));
+var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$1;
 
 var Keyboard = function (props) {
-    var _a = r$1.useState(), keys = _a[0], setKeys = _a[1];
-    var _b = r$1.useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
-    r$1.useEffect(function () {
+    var _a = React$3.useState(), keys = _a[0], setKeys = _a[1];
+    var _b = React$3.useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
+    React$3.useEffect(function () {
         if (!!props.keys) {
             var keys_1 = {};
             var shiftKeys_1 = {
@@ -12096,7 +11422,7 @@ var Keyboard = function (props) {
     }, [props.keys]);
     if (!keys)
         return null;
-    return (jsxRuntime.jsxs(Container$1, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
+    return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
                             keys[89].character === props.activeKey }, 44), jsxRuntime.jsx(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
                             keys[87].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
                             keys[85].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
@@ -12144,20 +11470,20 @@ var Keyboard = function (props) {
                             keys[76].character === props.activeKey }), jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) })] }), jsxRuntime.jsxs(SpacebarRow, { children: [jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {}), jsxRuntime.jsx(Key, {})] })] }));
 };
 
-var Mask = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  background-color: rgba(35, 41, 47, 50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n"], ["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  background-color: rgba(35, 41, 47, 50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n"])));
-var CardWrapper = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1(["\n  width: ", ";\n\n  > div:first-child {\n    padding-top: 30px;\n  }\n"], ["\n  width: ", ";\n\n  > div:first-child {\n    padding-top: 30px;\n  }\n"])), function (_a) {
+var Mask = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  background-color: rgba(35, 41, 47, 50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n"], ["\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  background-color: rgba(35, 41, 47, 50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n"])));
+var CardWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n  width: ", ";\n\n  > div:first-child {\n    padding-top: 30px;\n  }\n"], ["\n  width: ", ";\n\n  > div:first-child {\n    padding-top: 30px;\n  }\n"])), function (_a) {
     var width = _a.width;
     return (width ? "".concat(width, "px") : "720px");
 });
-var CloseIconWrapper = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  top: -10px;\n  right: 20px;\n\n  svg {\n    cursor: pointer;\n  }\n  svg:hover {\n    fill: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  top: -10px;\n  right: 20px;\n\n  svg {\n    cursor: pointer;\n  }\n  svg:hover {\n    fill: ", ";\n  }\n"])), theme.colors.darkGray.base);
-var ChildrenWrapper = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject$1(["\n  padding: 0 35px 20px;\n"], ["\n  padding: 0 35px 20px;\n"])));
-var FooterContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n  width: calc(100% + 30px);\n  box-sizing: border-box;\n  min-height: 45px;\n  margin-top: 15px;\n  margin-bottom: -15px;\n  margin-left: -15px;\n  padding: 15px 50px;\n  background-color: ", ";\n  border-top: 1px solid ", ";\n"], ["\n  width: calc(100% + 30px);\n  box-sizing: border-box;\n  min-height: 45px;\n  margin-top: 15px;\n  margin-bottom: -15px;\n  margin-left: -15px;\n  padding: 15px 50px;\n  background-color: ", ";\n  border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
-var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5;
+var CloseIconWrapper = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  top: -10px;\n  right: 20px;\n\n  svg {\n    cursor: pointer;\n  }\n  svg:hover {\n    fill: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  position: absolute;\n  top: -10px;\n  right: 20px;\n\n  svg {\n    cursor: pointer;\n  }\n  svg:hover {\n    fill: ", ";\n  }\n"])), theme.colors.darkGray.base);
+var ChildrenWrapper = styled__default["default"].div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n  padding: 0 35px 20px;\n"], ["\n  padding: 0 35px 20px;\n"])));
+var FooterContainer = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n  width: calc(100% + 30px);\n  box-sizing: border-box;\n  min-height: 45px;\n  margin-top: 15px;\n  margin-bottom: -15px;\n  margin-left: -15px;\n  padding: 15px 50px;\n  background-color: ", ";\n  border-top: 1px solid ", ";\n"], ["\n  width: calc(100% + 30px);\n  box-sizing: border-box;\n  min-height: 45px;\n  margin-top: 15px;\n  margin-bottom: -15px;\n  margin-left: -15px;\n  padding: 15px 50px;\n  background-color: ", ";\n  border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
+var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1;
 
 var Modal = function (props) {
-    var _a = r$1.useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
-    var isClosable = r$1.useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
-    r$1.useEffect(function () { return setIsVisible(props.isVisible); }, [props.isVisible]);
+    var _a = React$3.useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
+    var isClosable = React$3.useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
+    React$3.useEffect(function () { return setIsVisible(props.isVisible); }, [props.isVisible]);
     if (!isVisible)
         return null;
     var onClose = function () {
@@ -12168,30 +11494,53 @@ var Modal = function (props) {
     return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign$2({}, props, { children: jsxRuntime.jsxs(Card, { children: [isClosable && (jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }) })), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer })] }) })) }));
 };
 
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n  width: 100%;\n  min-height: 90px;\n  border-radius: 6px;\n  border-width: 3px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: ", ";\n  padding: 20px;\n  display: flex;\n  box-sizing: border-box;\n"], ["\n  width: 100%;\n  min-height: 90px;\n  border-radius: 6px;\n  border-width: 3px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: ", ";\n  padding: 20px;\n  display: flex;\n  box-sizing: border-box;\n"])), function (_a) {
+var Container$1 = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n  width: 100%;\n  min-height: 90px;\n  border-radius: 6px;\n  border-width: 3px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: ", ";\n  padding: 20px;\n  display: flex;\n  box-sizing: border-box;\n"], ["\n  width: 100%;\n  min-height: 90px;\n  border-radius: 6px;\n  border-width: 3px;\n  border-style: solid;\n  border-color: ", ";\n  background-color: ", ";\n  padding: 20px;\n  display: flex;\n  box-sizing: border-box;\n"])), function (_a) {
     var passed = _a.passed;
     return passed ? theme.colors.green.base : theme.colors.red.base;
 }, theme.colors.lightGray.light);
-var ProgressBarWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["\n  width: 50%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-top: 15px;\n  margin-left: auto;\n  position: relative;\n\n  > div:last-child {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 3px;\n  }\n"], ["\n  width: 50%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-top: 15px;\n  margin-left: auto;\n  position: relative;\n\n  > div:last-child {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 3px;\n  }\n"])));
-var Indicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject$1(["\n  width: 4px;\n  height: 22px;\n  background-color: ", ";\n  position: absolute;\n  left: ", ";\n  z-index: 1;\n  top: -4px;\n"], ["\n  width: 4px;\n  height: 22px;\n  background-color: ", ";\n  position: absolute;\n  left: ", ";\n  z-index: 1;\n  top: -4px;\n"])), theme.colors.blue.darker, function (_a) {
+var ProgressBarWrapper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject$1(["\n  width: 50%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-top: 15px;\n  margin-left: auto;\n  position: relative;\n\n  > div:last-child {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 3px;\n  }\n"], ["\n  width: 50%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-top: 15px;\n  margin-left: auto;\n  position: relative;\n\n  > div:last-child {\n    display: flex;\n    justify-content: space-between;\n    margin-top: 3px;\n  }\n"])));
+var Indicator = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject$1(["\n  width: 4px;\n  height: 22px;\n  background-color: ", ";\n  position: absolute;\n  left: ", ";\n  z-index: 1;\n  top: -4px;\n"], ["\n  width: 4px;\n  height: 22px;\n  background-color: ", ";\n  position: absolute;\n  left: ", ";\n  z-index: 1;\n  top: -4px;\n"])), theme.colors.blue.darker, function (_a) {
     var value = _a.value;
     return "".concat(value, "%");
 });
-var Target = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject$1(["\n  width: max-content;\n  position: absolute;\n  left: ", ";\n  bottom: 40px;\n\n  p {\n    color: ", ";\n  }\n"], ["\n  width: max-content;\n  position: absolute;\n  left: ", ";\n  bottom: 40px;\n\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
+var Target = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject$1(["\n  width: max-content;\n  position: absolute;\n  left: ", ";\n  bottom: 40px;\n\n  p {\n    color: ", ";\n  }\n"], ["\n  width: max-content;\n  position: absolute;\n  left: ", ";\n  bottom: 40px;\n\n  p {\n    color: ", ";\n  }\n"])), function (_a) {
     var value = _a.value, width = _a.width;
     return "calc(".concat(value, "% - ").concat(width / 2, "px)");
 }, theme.colors.blue.darker);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1;
 
 var Result = function (props) {
-    var ref = r$1.useRef(null);
-    var _a = r$1.useState(0), targetWidth = _a[0], setTargetWidth = _a[1];
+    var ref = React$3.useRef(null);
+    var _a = React$3.useState(0), targetWidth = _a[0], setTargetWidth = _a[1];
     var isPassed = props.value >= props.target;
-    r$1.useEffect(function () {
+    React$3.useEffect(function () {
         var _a;
         setTargetWidth((_a = ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth);
     }, [ref]);
-    return (jsxRuntime.jsxs(Container, __assign$2({ passed: isPassed }, { children: [jsxRuntime.jsx(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsxRuntime.jsx(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxRuntime.jsxs(ProgressBarWrapper, { children: [jsxRuntime.jsx(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsxRuntime.jsx(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsxRuntime.jsx(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
+    return (jsxRuntime.jsxs(Container$1, __assign$2({ passed: isPassed }, { children: [jsxRuntime.jsx(Icon, { type: isPassed ? "check" : "warning", color: isPassed ? "green" : "red", size: "large" }), jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: props.title })), jsxRuntime.jsx(Paragraph, { children: props.subtitle })] }), props.progressBar && (jsxRuntime.jsxs(ProgressBarWrapper, { children: [jsxRuntime.jsx(Indicator, { value: (props.target / props.progressBar.max) * 100 }), jsxRuntime.jsx(Target, __assign$2({ value: (props.target / props.progressBar.max) * 100, width: targetWidth, ref: ref }, { children: jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.target, props.progressBar.unit] })) })), jsxRuntime.jsx(ProgressBar, { percent: (props.value / props.progressBar.max) * 100, color: isPassed ? "green" : "red" }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.min, props.progressBar.unit] })), jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small" }, { children: [props.progressBar.max, props.progressBar.unit] }))] })] }))] })));
+};
+
+var Container = styled__default["default"].table(templateObject_1 || (templateObject_1 = __makeTemplateObject$1(["\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: 6px;\n  border-style: hidden;\n  box-shadow: 0 0 0 1px ", ";\n  overflow: hidden;\n"], ["\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: 6px;\n  border-style: hidden;\n  box-shadow: 0 0 0 1px ", ";\n  overflow: hidden;\n"])), theme.colors.lightGray.dark);
+var TableHead = styled__default["default"].thead(templateObject_2 || (templateObject_2 = __makeTemplateObject$1(["\n  border-bottom: 1px solid ", ";\n"], ["\n  border-bottom: 1px solid ", ";\n"])), theme.colors.lightGray.dark);
+var TableBody = styled__default["default"].tbody(templateObject_3 || (templateObject_3 = __makeTemplateObject$1([""], [""])));
+styled__default["default"].tfoot(templateObject_4 || (templateObject_4 = __makeTemplateObject$1([""], [""])));
+var ColumnTitle = styled__default["default"].th(templateObject_5 || (templateObject_5 = __makeTemplateObject$1(["\n  text-align: left;\n  padding-left: 15px;\n"], ["\n  text-align: left;\n  padding-left: 15px;\n"])));
+var TableRow = styled__default["default"].tr(templateObject_6 || (templateObject_6 = __makeTemplateObject$1(["\n  height: 50px;\n  border-bottom: 1px solid ", ";\n\n  :nth-child(even) {\n    background: ", ";\n  }\n"], ["\n  height: 50px;\n  border-bottom: 1px solid ", ";\n\n  :nth-child(even) {\n    background: ", ";\n  }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base);
+var TableCell = styled__default["default"].td(templateObject_7 || (templateObject_7 = __makeTemplateObject$1(["\n  padding: 0 15px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n"], ["\n  padding: 0 15px;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n"])), theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.darkGray.light);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+var Table = function (_a) {
+    var columns = _a.columns, data = _a.data;
+    return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableRow, { children: columns.map(function (_a) {
+                        var title = _a.title, dataIndex = _a.dataIndex;
+                        return (jsxRuntime.jsx(ColumnTitle, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h6", as: "span" }, { children: title })) }, dataIndex));
+                    }) }) }), jsxRuntime.jsx(TableBody, { children: data.map(function (row, index) {
+                    return (jsxRuntime.jsx(TableRow, { children: columns.map(function (_a, index) {
+                            var dataIndex = _a.dataIndex, render = _a.render;
+                            var data = row[dataIndex];
+                            return (jsxRuntime.jsx(TableCell, { children: render ? render(data) : data }, "col-".concat(index)));
+                        }) }, "row-".concat(index)));
+                }) })] }));
 };
 
 exports.Alert = Alert;
@@ -12234,6 +11583,7 @@ exports.SelectField = SelectField;
 exports.Spacer = Spacer;
 exports.Steps = Steps;
 exports.Subheading = Subheading;
+exports.Table = Table;
 exports.Tag = Tag;
 exports.Toggle = Toggle;
 exports.ToggleField = ToggleField;