@typeolymp/ui-components 2.2.7 → 3.0.0

package/build/index.es.js

@@ -482,7 +482,7 @@ function trim$1 (value) {
  * @param {RegExp} pattern
  * @return {string?}
  */
-function match$4 (value, pattern) {
+function match$a (value, pattern) {
 	return (value = pattern.exec(value)) ? value[0] : value
 }
 
@@ -1472,7 +1472,7 @@ var prefixer = function prefixer(element, index, children, callback) {
 
     case RULESET:
       if (element.length) return combine(element.props, function (value) {
-        switch (match$4(value, /(::plac\w+|:read-\w+)/)) {
+        switch (match$a(value, /(::plac\w+|:read-\w+)/)) {
           // :read-(only|write)
           case ':read-only':
           case ':read-write':
@@ -3436,14 +3436,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
 var React$2 = __importStar$2(React__default);
 var react_1 = require$$1;
 var helpers_1 = helpers$1;
-var beat = react_1.keyframes(templateObject_1$W || (templateObject_1$W = __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$X || (templateObject_1$X = __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$2(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$C || (templateObject_2$C = __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$D || (templateObject_2$D = __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;
     }
@@ -3458,9 +3458,9 @@ var Loader = /** @class */ (function (_super) {
     return Loader;
 }(React$2.PureComponent));
 var _default$1 = BeatLoader.default = Loader;
-var templateObject_1$W, templateObject_2$C;
+var templateObject_1$X, templateObject_2$D;
 
-var Wrapper$a = styled.div(templateObject_1$V || (templateObject_1$V = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n\n    :hover {\n      cursor: ", ";\n      fill: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n\n    :hover {\n      cursor: ", ";\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
+var Wrapper$a = styled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n\n    :hover {\n      cursor: ", ";\n      fill: ", ";\n    }\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  > svg {\n    fill: ", ";\n\n    :hover {\n      cursor: ", ";\n      fill: ", ";\n    }\n  }\n"])), function (_a) {
     var size = _a.size;
     return theme.icon[size] || theme.icon.medium;
 }, function (_a) {
@@ -3518,7 +3518,7 @@ var Wrapper$a = styled.div(templateObject_1$V || (templateObject_1$V = __makeTem
             return theme.colors.lightGray.base;
     }
 });
-var templateObject_1$V;
+var templateObject_1$W;
 
 var icons = {
     check: (jsx$1("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" })),
@@ -3571,7 +3571,7 @@ var icons = {
 };
 var Icon = function (props) { return (jsx$1(Wrapper$a, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
 
-var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __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  svg {\n    pointer-events: none;\n  }\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: ", ";\n    background-color: ", ";\n  }\n\n  :active {\n    position: relative;\n    top: 3px;\n    margin-bottom: 3px;\n    box-shadow: none;\n    height: ", "\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  svg {\n    pointer-events: none;\n  }\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: ", ";\n    background-color: ", ";\n  }\n\n  :active {\n    position: relative;\n    top: 3px;\n    margin-bottom: 3px;\n    box-shadow: none;\n    height: ", "\n"])), function (_a) {
+var StyledButton = styled.button(templateObject_1$V || (templateObject_1$V = __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  svg {\n    pointer-events: none;\n  }\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: ", ";\n    background-color: ", ";\n  }\n\n  :active {\n    position: relative;\n    top: 3px;\n    margin-bottom: 3px;\n    box-shadow: none;\n    height: ", "\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  svg {\n    pointer-events: none;\n  }\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: ", ";\n    background-color: ", ";\n  }\n\n  :active {\n    position: relative;\n    top: 3px;\n    margin-bottom: 3px;\n    box-shadow: none;\n    height: ", "\n"])), function (_a) {
     var fluid = _a.fluid;
     return (fluid ? "100%" : "fit-content");
 }, function (_a) {
@@ -3626,27 +3626,27 @@ var StyledButton = styled.button(templateObject_1$U || (templateObject_1$U = __m
         ? "calc(".concat(theme.button.medium.height, " - 3px)")
         : "calc(".concat(theme.button[size].height, " - 3px)");
 });
-var DisabledButton = styled(StyledButton)(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n  background-color: ", ";\n  border: 1px 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: 1px 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(StyledButton)(templateObject_2$C || (templateObject_2$C = __makeTemplateObject$1(["\n  background-color: ", ";\n  border: 1px 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: 1px 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 LoaderWrapper = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject$1(["\n  width: ", ";\n  margin-top: ", ";\n"], ["\n  width: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+var LoaderWrapper = styled.div(templateObject_3$g || (templateObject_3$g = __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$U, templateObject_2$B, templateObject_3$f;
+var templateObject_1$V, templateObject_2$C, templateObject_3$g;
 
-var StyledSpacer = styled.div(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n  min-width: ", ";\n  min-height: ", ";\n"], ["\n  min-width: ", ";\n  min-height: ", ";\n"])), function (_a) {
+var StyledSpacer = styled.div(templateObject_1$U || (templateObject_1$U = __makeTemplateObject$1(["\n  min-width: ", ";\n  min-height: ", ";\n"], ["\n  min-width: ", ";\n  min-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$T;
+var templateObject_1$U;
 
 var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
 
@@ -3693,7 +3693,7 @@ var Button$1 = forwardRef(function (_a, ref) {
                     renderIcon({ color: color === "white" ? "gray" : "white" }), jsx$1("span", { children: label })] })) })));
 });
 
-var StyledCheckbox = styled.div(templateObject_1$S || (templateObject_1$S = __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.div(templateObject_1$T || (templateObject_1$T = __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;
@@ -3714,7 +3714,7 @@ var StyledCheckbox = styled.div(templateObject_1$S || (templateObject_1$S = __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$S;
+var templateObject_1$T;
 
 var Checkbox = function (props) {
     var _a;
@@ -3803,8 +3803,8 @@ exports.Country = void 0;
     Country["NL"] = "Nederland";
     Country["BE"] = "Belgi\u00EB";
     Country["GB"] = "United Kingdom";
-    // FR = "France",
-    // DE = "Deutschland",
+    Country["FR"] = "France";
+    Country["DE"] = "Deutschland";
     // SP = "España",
 })(exports.Country || (exports.Country = {}));
 
@@ -3823,6 +3823,20 @@ exports.Currency = void 0;
 
 }(Currency));
 
+var Difficulty = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Difficulty = void 0;
+(function (Difficulty) {
+    Difficulty["BEGINNER"] = "beginner";
+    Difficulty["EASY"] = "easy";
+    Difficulty["NORMAL"] = "normal";
+    Difficulty["HARD"] = "hard";
+})(exports.Difficulty || (exports.Difficulty = {}));
+
+}(Difficulty));
+
 var ExerciseType = {};
 
 (function (exports) {
@@ -3890,12 +3904,24 @@ exports.KeyboardLayout = void 0;
     KeyboardLayout["QWERTY_NL"] = "qwerty-nl";
     KeyboardLayout["QWERTY_UK"] = "qwerty-uk";
     KeyboardLayout["QWERTZ_DE"] = "qwertz-de";
-    KeyboardLayout["TURKISH_Q"] = "turkish-q";
     KeyboardLayout["TURKISH_F"] = "turkish-f";
+    KeyboardLayout["TURKISH_Q"] = "turkish-q";
 })(exports.KeyboardLayout || (exports.KeyboardLayout = {}));
 
 }(KeyboardLayout));
 
+var KeyboardVariant = {};
+
+(function (exports) {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardVariant = void 0;
+(function (KeyboardVariant) {
+    KeyboardVariant["ISO"] = "ISO";
+    KeyboardVariant["ISANSI"] = "ISANSI";
+})(exports.KeyboardVariant || (exports.KeyboardVariant = {}));
+
+}(KeyboardVariant));
+
 var Locale = {};
 
 (function (exports) {
@@ -3905,9 +3931,9 @@ exports.Locale = void 0;
     Locale["NL_NL"] = "nl-NL";
     Locale["NL_BE"] = "nl-BE";
     Locale["EN_GB"] = "en-GB";
-    // FR_FR = "fr-FR",
+    Locale["FR_FR"] = "fr-FR";
     // FR_BE = "fr-BE",
-    // DE_DE = "de-DE",
+    Locale["DE_DE"] = "de-DE";
     // SP_SP = "es-ES",
 })(exports.Locale || (exports.Locale = {}));
 
@@ -4004,9 +4030,11 @@ __exportStar(AchievementType, exports);
 __exportStar(Color$1, exports);
 __exportStar(Country, exports);
 __exportStar(Currency, exports);
+__exportStar(Difficulty, exports);
 __exportStar(ExerciseType, exports);
 __exportStar(HttpStatus, exports);
 __exportStar(KeyboardLayout, exports);
+__exportStar(KeyboardVariant, exports);
 __exportStar(Locale, exports);
 __exportStar(Medal$1, exports);
 __exportStar(NodeEnv, exports);
@@ -4016,7 +4044,7 @@ __exportStar(TextTopic, exports);
 
 }(enums));
 
-var Wrapper$9 = styled.div(templateObject_1$R || (templateObject_1$R = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+var Wrapper$9 = styled.div(templateObject_1$S || (templateObject_1$S = __makeTemplateObject$1(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
     var size = _a.size;
     switch (size) {
         case "small":
@@ -4039,17 +4067,19 @@ var Wrapper$9 = styled.div(templateObject_1$R || (templateObject_1$R = __makeTem
             return "27px";
     }
 });
-var templateObject_1$R;
+var templateObject_1$S;
 
 var _a$1;
 var flags = (_a$1 = {},
     _a$1[enums.Locale.NL_NL] = (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }), jsx$1("path", { fill: "#fff", d: "M0 6H22V12H0z" }), jsx$1("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" })] }))),
     _a$1[enums.Locale.NL_BE] = (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#e62743" }), jsx$1("path", { fill: "#ffd800", d: "M7 0H15V18H7z" }), jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#23292f" })] }))),
     _a$1[enums.Locale.EN_GB] = (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { fill: "#1799D6", d: "M0 2.4L0 5.9 4.3 5.9z" }), jsx$1("path", { fill: "#1799D6", d: "M2.9 18L7 18 8.5 18 8.5 13.4z" }), jsx$1("path", { fill: "#1799D6", d: "M19.2 0L15 0 13.5 0 13.5 4.7z" }), jsx$1("path", { fill: "#1799D6", d: "M0 12.2L0 15.7 4.3 12.2z" }), jsx$1("path", { fill: "#1799D6", d: "M22 5.9L22 2.3 17.6 5.9z" }), jsx$1("path", { fill: "#1799D6", d: "M13.5 18L15 18 19.3 18 13.5 13.3z" }), jsx$1("path", { fill: "#1799D6", d: "M8.5 0L7 0 2.4 0 8.5 4.9z" }), jsx$1("path", { fill: "#1799D6", d: "M22 15.7L22 12.2 17.6 12.2z" }), jsx$1("path", { fill: "#FFF", d: "M9.5 0h-1v4.9L2.4 0H1C.7 0 .5.1.3.3L7.1 6H5.3L0 1.6v.9L4.3 6H0v1.3h9.5V0zM12.4 18h1.1v-4.7l5.8 4.7H21c.3 0 .5-.1.7-.3l-6.8-5.6h1.8l5.3 4.4v-.8l-4.4-3.6H22v-1.3h-9.6V18zM14.9 5.9h-1.4v-.3L20.4 0h-1.1l-5.7 4.7V0h-1.1v7.3H22V5.9h-4.4L22 2.3V1c0-.3-.1-.5-.2-.7l-6.9 5.6zM0 10.9v1.3h4.3L0 15.7V17c0 .3.1.6.3.7L7 12.2h1.5v.3L1.7 18h1.2l5.6-4.6V18h1.1v-7.1H0z" }), jsx$1("path", { fill: "#E94D4F", d: "M8.5 12.2H7L.3 17.8c.2.1.4.2.7.2h.7l6.8-5.5v-.3zM13.5 5.9h1.4L21.8.3c-.2-.2-.5-.3-.8-.3h-.6l-6.9 5.6v.3zM14.9 12.2l6.8 5.6c.2-.2.3-.4.3-.7v-.5l-5.3-4.4h-1.8zM7.1 5.9L.3.3C.1.4 0 .7 0 1v.6L5.3 6h1.8z" }), jsx$1("path", { fill: "#E94D4F", d: "M12.4 0L9.5 0 9.5 7.3 0 7.3 0 10.9 9.5 10.9 9.5 18 12.4 18 12.4 10.9 22 10.9 22 7.3 12.4 7.3z" })] }))),
+    _a$1[enums.Locale.DE_DE] = (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#000" }), jsx$1("path", { fill: "#e62743", d: "M0 6H22V12H0z" }), jsx$1("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#ffd800" })] }))),
+    _a$1[enums.Locale.FR_FR] = (jsxs("svg", __assign$2({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx$1("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#148cc6" }), jsx$1("path", { fill: "#fff", d: "M7 0H15V18H7z" }), jsx$1("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#e62743" })] }))),
     _a$1);
 var Flag = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: flags[props.locale] }))); };
 
-var StyledHeading = styled.span(templateObject_1$Q || (templateObject_1$Q = __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  text-decoration: ", ";\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  text-decoration: ", ";\n"])), theme.fonts.heading, function (_a) {
+var StyledHeading = styled.span(templateObject_1$R || (templateObject_1$R = __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  text-decoration: ", ";\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  text-decoration: ", ";\n"])), theme.fonts.heading, function (_a) {
     var type = _a.type;
     return theme.heading[type].fontSize;
 }, function (_a) {
@@ -4076,14 +4106,14 @@ var StyledHeading = styled.span(templateObject_1$Q || (templateObject_1$Q = __ma
     var decoration = _a.decoration;
     return decoration;
 });
-var templateObject_1$Q;
+var templateObject_1$R;
 
 var Heading = function (props) {
     var element = !!props.as ? props.as : props.type;
     return (jsx$1(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
 };
 
-var Wrapper$8 = styled.div(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\n  > svg {\n    height: ", ";\n  }\n"], ["\n  > svg {\n    height: ", ";\n  }\n"])), function (_a) {
+var Wrapper$8 = styled.div(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject$1(["\n  > svg {\n    height: ", ";\n  }\n"], ["\n  > svg {\n    height: ", ";\n  }\n"])), function (_a) {
     var size = _a.size;
     switch (size) {
         case "tiny":
@@ -4097,7 +4127,7 @@ var Wrapper$8 = styled.div(templateObject_1$P || (templateObject_1$P = __makeTem
             return "118px";
     }
 });
-var templateObject_1$P;
+var templateObject_1$Q;
 
 var illustrations = {
     keyboard: (jsxs("svg", __assign$2({ viewBox: "0 0 32.9 20.8" }, { children: [jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" }), jsx$1("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" })] }))),
@@ -4121,7 +4151,7 @@ var illustrations = {
 };
 var Illustration = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: illustrations[props.type] }))); };
 
-var StyledParagraph = styled.p(templateObject_1$O || (templateObject_1$O = __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  text-transform: ", ";\n  text-decoration: ", ";\n\n  li:not(:last-child) {\n    margin-bottom: 10px;\n  }\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  text-transform: ", ";\n  text-decoration: ", ";\n\n  li:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])), theme.fonts.paragraph, function (_a) {
+var StyledParagraph = styled.p(templateObject_1$P || (templateObject_1$P = __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  text-transform: ", ";\n  text-decoration: ", ";\n\n  li:not(:last-child) {\n    margin-bottom: 10px;\n  }\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  text-transform: ", ";\n  text-decoration: ", ";\n\n  li:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])), theme.fonts.paragraph, function (_a) {
     var size = _a.size;
     return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
 }, function (_a) {
@@ -4159,10 +4189,10 @@ var StyledParagraph = styled.p(templateObject_1$O || (templateObject_1$O = __mak
     var decoration = _a.decoration;
     return decoration;
 });
-var templateObject_1$O;
+var templateObject_1$P;
 
-var Container$o = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var InputIconWrapper = styled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject$1(["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: ", ";\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: ", ";\n    top: ", ";\n  }\n\n  svg {\n    cursor: ", ";\n    width: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: ", ";\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: ", ";\n    top: ", ";\n  }\n\n  svg {\n    cursor: ", ";\n    width: ", ";\n  }\n"])), function (_a) {
+var Container$p = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: ", ";\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: ", ";\n    top: ", ";\n  }\n\n  svg {\n    cursor: ", ";\n    width: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: ", ";\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: ", ";\n    top: ", ";\n  }\n\n  svg {\n    cursor: ", ";\n    width: ", ";\n  }\n"])), function (_a) {
     var size = _a.size;
     switch (size) {
         case "small":
@@ -4205,7 +4235,7 @@ var InputIconWrapper = styled.div(templateObject_2$A || (templateObject_2$A = __
             return "24px";
     }
 });
-var StyledInput = styled.input(templateObject_3$e || (templateObject_3$e = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  height: ", ";\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: ", ";\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.input(templateObject_3$f || (templateObject_3$f = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  height: ", ";\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: ", ";\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 size = _a.size;
     switch (size) {
         case "small":
@@ -4227,13 +4257,13 @@ var StyledInput = styled.input(templateObject_3$e || (templateObject_3$e = __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 HelperContainer = styled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n  margin-top: 5px;\n  padding-left: 5px;\n"], ["\n  margin-top: 5px;\n  padding-left: 5px;\n"])));
-var fadeIn = keyframes$1(templateObject_5$3 || (templateObject_5$3 = __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_6$3 || (templateObject_6$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 HelperContainer = styled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n  margin-top: 5px;\n  padding-left: 5px;\n"], ["\n  margin-top: 5px;\n  padding-left: 5px;\n"])));
+var fadeIn = keyframes$1(templateObject_5$4 || (templateObject_5$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_6$4 || (templateObject_6$4 = __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$N, templateObject_2$A, templateObject_3$e, templateObject_4$6, templateObject_5$3, templateObject_6$3;
+var templateObject_1$O, templateObject_2$B, templateObject_3$f, templateObject_4$7, templateObject_5$4, templateObject_6$4;
 
 var expressions = {};
 
@@ -4328,18 +4358,18 @@ __exportStar(isStrongPassword$1, exports);
 
 }(expressions));
 
-var passed$1 = "Gehaald";
-var failed$1 = "Niet gehaald";
-var accuracy$1 = "Nauwkeurigheid";
-var correct$1 = "Goed";
-var wrong$1 = "Fout";
-var kpm$1 = "Aanslagen per minuut";
-var progress$1 = "Voortgang";
-var timePractised$1 = "Tijd geoefend";
-var Accuracy$1 = "Nauwkeurigheid";
-var Keystrokes$1 = "Toetsaanslagen";
-var Today$1 = "Vandaag";
-var Edit$1 = "Bewerken";
+var passed$4 = "Gehaald";
+var failed$4 = "Niet gehaald";
+var accuracy$4 = "Nauwkeurigheid";
+var correct$4 = "Goed";
+var wrong$4 = "Fout";
+var kpm$4 = "Aanslagen per minuut";
+var progress$4 = "Voortgang";
+var timePractised$4 = "Tijd geoefend";
+var Accuracy$4 = "Nauwkeurigheid";
+var Keystrokes$4 = "Toetsaanslagen";
+var Today$4 = "Vandaag";
+var Edit$4 = "Bewerken";
 var nl_NL = {
 	"At least 1 capital letter": "Minimaal 1 hoofdletter",
 	"At least 1 number": "Minimaal 1 cijfer",
@@ -4349,40 +4379,83 @@ var nl_NL = {
 	"Select file(s)": "Bestand(en) kiezen",
 	"Upload file(s)...": "Bestand(en) uploaden...",
 	"File type not allowed": "Bestandstype niet toegestaan",
-	passed: passed$1,
-	failed: failed$1,
-	accuracy: accuracy$1,
-	correct: correct$1,
-	wrong: wrong$1,
-	kpm: kpm$1,
-	progress: progress$1,
-	timePractised: timePractised$1,
-	Accuracy: Accuracy$1,
+	passed: passed$4,
+	failed: failed$4,
+	accuracy: accuracy$4,
+	correct: correct$4,
+	wrong: wrong$4,
+	kpm: kpm$4,
+	progress: progress$4,
+	timePractised: timePractised$4,
+	Accuracy: Accuracy$4,
 	"Finished exercises": "Gemaakte oefeningen",
-	Keystrokes: Keystrokes$1,
+	Keystrokes: Keystrokes$4,
 	"Keystrokes per minute": "Aanslagen per minuut",
 	"Progress percentage": "Voortgangspercentage",
 	"Time practised": "Tijd geoefend",
-	Today: Today$1,
+	Today: Today$4,
 	"Last 7 days": "Laatste 7 dagen",
 	"Last 30 days": "Laatste 30 dagen",
 	"Last 3 months": "Laatste 3 maanden",
 	"Last 12 months": "Laatste 12 maanden",
-	Edit: Edit$1
-};
-
-var passed = "Passed";
-var failed = "Failed";
-var accuracy = "Accuracy";
-var correct = "Correct";
-var wrong = "Wrong";
-var kpm = "Keys per minute";
-var progress = "Progress";
-var timePractised = "Time practised";
-var Accuracy = "Accuracy";
-var Keystrokes = "Keystrokes";
-var Today = "Today";
-var Edit = "Edit";
+	Edit: Edit$4
+};
+
+var passed$3 = "Gehaald";
+var failed$3 = "Niet gehaald";
+var accuracy$3 = "Nauwkeurigheid";
+var correct$3 = "Goed";
+var wrong$3 = "Fout";
+var kpm$3 = "Aanslagen per minuut";
+var progress$3 = "Voortgang";
+var timePractised$3 = "Tijd geoefend";
+var Accuracy$3 = "Nauwkeurigheid";
+var Keystrokes$3 = "Toetsaanslagen";
+var Today$3 = "Vandaag";
+var Edit$3 = "Bewerken";
+var nl_BE = {
+	"At least 1 capital letter": "Minimaal 1 hoofdletter",
+	"At least 1 number": "Minimaal 1 cijfer",
+	"At least 1 special character": "Minimaal 1 leesteken",
+	"At least 8 characters": "Minimaal 8 karakters",
+	"Drag file(s) here...": "Bestand(en) hierheen slepen...",
+	"Select file(s)": "Bestand(en) kiezen",
+	"Upload file(s)...": "Bestand(en) uploaden...",
+	"File type not allowed": "Bestandstype niet toegestaan",
+	passed: passed$3,
+	failed: failed$3,
+	accuracy: accuracy$3,
+	correct: correct$3,
+	wrong: wrong$3,
+	kpm: kpm$3,
+	progress: progress$3,
+	timePractised: timePractised$3,
+	Accuracy: Accuracy$3,
+	"Finished exercises": "Gemaakte oefeningen",
+	Keystrokes: Keystrokes$3,
+	"Keystrokes per minute": "Aanslagen per minuut",
+	"Progress percentage": "Voortgangspercentage",
+	"Time practised": "Tijd geoefend",
+	Today: Today$3,
+	"Last 7 days": "Laatste 7 dagen",
+	"Last 30 days": "Laatste 30 dagen",
+	"Last 3 months": "Laatste 3 maanden",
+	"Last 12 months": "Laatste 12 maanden",
+	Edit: Edit$3
+};
+
+var passed$2 = "Passed";
+var failed$2 = "Failed";
+var accuracy$2 = "Accuracy";
+var correct$2 = "Correct";
+var wrong$2 = "Wrong";
+var kpm$2 = "Keys per minute";
+var progress$2 = "Progress";
+var timePractised$2 = "Time practised";
+var Accuracy$2 = "Accuracy";
+var Keystrokes$2 = "Keystrokes";
+var Today$2 = "Today";
+var Edit$2 = "Edit";
 var en_GB = {
 	"At least 1 capital letter": "At least 1 capital letter",
 	"At least 1 number": "At least 1 number",
@@ -4392,6 +4465,92 @@ var en_GB = {
 	"Select file(s)": "Select file(s)",
 	"Upload file(s)...": "Upload file(s)...",
 	"File type not allowed": "File type not allowed",
+	passed: passed$2,
+	failed: failed$2,
+	accuracy: accuracy$2,
+	correct: correct$2,
+	wrong: wrong$2,
+	kpm: kpm$2,
+	progress: progress$2,
+	timePractised: timePractised$2,
+	Accuracy: Accuracy$2,
+	"Finished exercises": "Finished exercises",
+	Keystrokes: Keystrokes$2,
+	"Keystrokes per minute": "Keystrokes per minute",
+	"Progress percentage": "Progress percentage",
+	"Time practised": "Time practised",
+	Today: Today$2,
+	"Last 7 days": "Last 7 days",
+	"Last 30 days": "Last 30 days",
+	"Last 3 months": "Last 3 months",
+	"Last 12 months": "Last 12 months",
+	Edit: Edit$2
+};
+
+var passed$1 = "Réussi";
+var failed$1 = "Non réussi";
+var accuracy$1 = "Précision";
+var correct$1 = "Bon";
+var wrong$1 = "Erreur";
+var kpm$1 = "Touches par minute";
+var progress$1 = "Progrès";
+var timePractised$1 = "Temps pratiqué";
+var Accuracy$1 = "Précision";
+var Keystrokes$1 = "Frappes";
+var Today$1 = "Aujourd'hui";
+var Edit$1 = "Édition";
+var fr_FR = {
+	"At least 1 capital letter": "Au moins 1 lettre majuscule",
+	"At least 1 number": "Au moins 1 chiffre",
+	"At least 1 special character": "Au moins 1 caractère spécial",
+	"At least 8 characters": "Au moins 8 caractères",
+	"Drag file(s) here...": "Faites glisser le(s) fichier(s) ici...",
+	"Select file(s)": "Choisir fichier(s)",
+	"Upload file(s)...": "Uploader fichier(s)...",
+	"File type not allowed": "Ce type de fichier n'est pas autorisé",
+	passed: passed$1,
+	failed: failed$1,
+	accuracy: accuracy$1,
+	correct: correct$1,
+	wrong: wrong$1,
+	kpm: kpm$1,
+	progress: progress$1,
+	timePractised: timePractised$1,
+	Accuracy: Accuracy$1,
+	"Finished exercises": "Exercices terminés",
+	Keystrokes: Keystrokes$1,
+	"Keystrokes per minute": "Frappes par minute",
+	"Progress percentage": "Pourcentage de progression",
+	"Time practised": "Temps pratiqué",
+	Today: Today$1,
+	"Last 7 days": "7 derniers jours",
+	"Last 30 days": "30 derniers jours",
+	"Last 3 months": "3 derniers mois",
+	"Last 12 months": "12 derniers mois",
+	Edit: Edit$1
+};
+
+var passed = "Bestanden";
+var failed = "Gescheitert";
+var accuracy = "Genauigkeit";
+var correct = "Gut";
+var wrong = "Fehler";
+var kpm = "Tastatureingaben pro Minute";
+var progress = "Fortschritt";
+var timePractised = "Geübte Zeit";
+var Accuracy = "Genauigkeit";
+var Keystrokes = "Tastatureingaben";
+var Today = "Heute";
+var Edit = "Bearbeiten";
+var de_DE = {
+	"At least 1 capital letter": "Mindestens 1 Großbuchstabe",
+	"At least 1 number": "Mindestens 1 Zahl",
+	"At least 1 special character": "Mindestens 1 Sonderzeichen",
+	"At least 8 characters": "Mindestens 8 Zeichen",
+	"Drag file(s) here...": "Datei(en) hierherziehen...",
+	"Select file(s)": "Wähle Datei(en) aus",
+	"Upload file(s)...": "Datei(en) hochladen...",
+	"File type not allowed": "Dateityp nicht zulässig",
 	passed: passed,
 	failed: failed,
 	accuracy: accuracy,
@@ -4401,26 +4560,26 @@ var en_GB = {
 	progress: progress,
 	timePractised: timePractised,
 	Accuracy: Accuracy,
-	"Finished exercises": "Finished exercises",
+	"Finished exercises": "Beendete Übungen",
 	Keystrokes: Keystrokes,
-	"Keystrokes per minute": "Keystrokes per minute",
-	"Progress percentage": "Progress percentage",
-	"Time practised": "Time practised",
+	"Keystrokes per minute": "Tastatureingaben pro Minute",
+	"Progress percentage": "Fortschrittsquote",
+	"Time practised": "Geübte Zeit",
 	Today: Today,
-	"Last 7 days": "Last 7 days",
-	"Last 30 days": "Last 30 days",
-	"Last 3 months": "Last 3 months",
-	"Last 12 months": "Last 12 months",
+	"Last 7 days": "Letzte 7 Tage",
+	"Last 30 days": "Letzte 30 Tage",
+	"Last 3 months": "Letzten 3 Monate",
+	"Last 12 months": "Letzte 12 Monate",
 	Edit: Edit
 };
 
 var _a;
-// import fr_FR from "./fr-fr.json";
-// import de_DE from "./de-de.json";
 var translations = (_a = {},
     _a[enums.Locale.NL_NL] = nl_NL,
-    _a[enums.Locale.NL_BE] = nl_NL,
+    _a[enums.Locale.NL_BE] = nl_BE,
     _a[enums.Locale.EN_GB] = en_GB,
+    _a[enums.Locale.FR_FR] = fr_FR,
+    _a[enums.Locale.DE_DE] = de_DE,
     _a);
 
 var PasswordInput = function (props) {
@@ -4439,7 +4598,7 @@ var PasswordInput = function (props) {
         if (props.onKeyPress)
             props.onKeyPress(e);
     };
-    return (jsxs(Container$o, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
+    return (jsxs(Container$p, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
 };
 
 function toInteger$2(dirtyNumber) {
@@ -6480,7 +6639,7 @@ function throwProtectedError(token, format, input) {
   }
 }
 
-var formatDistanceLocale$1 = {
+var formatDistanceLocale$4 = {
   lessThanXSeconds: {
     one: 'less than a second',
     other: 'less than {{count}} seconds'
@@ -6544,9 +6703,9 @@ var formatDistanceLocale$1 = {
   }
 };
 
-var formatDistance$2 = function formatDistance(token, count, options) {
+var formatDistance$8 = function formatDistance(token, count, options) {
   var result;
-  var tokenValue = formatDistanceLocale$1[token];
+  var tokenValue = formatDistanceLocale$4[token];
 
   if (typeof tokenValue === 'string') {
     result = tokenValue;
@@ -6567,7 +6726,7 @@ var formatDistance$2 = function formatDistance(token, count, options) {
   return result;
 };
 
-var formatDistance$3 = formatDistance$2;
+var formatDistance$9 = formatDistance$8;
 
 function buildFormatLongFn(args) {
   return function () {
@@ -6579,41 +6738,41 @@ function buildFormatLongFn(args) {
   };
 }
 
-var dateFormats$2 = {
+var dateFormats$5 = {
   full: 'EEEE, MMMM do, y',
   long: 'MMMM do, y',
   medium: 'MMM d, y',
   short: 'MM/dd/yyyy'
 };
-var timeFormats$2 = {
+var timeFormats$5 = {
   full: 'h:mm:ss a zzzz',
   long: 'h:mm:ss a z',
   medium: 'h:mm:ss a',
   short: 'h:mm a'
 };
-var dateTimeFormats$2 = {
+var dateTimeFormats$5 = {
   full: "{{date}} 'at' {{time}}",
   long: "{{date}} 'at' {{time}}",
   medium: '{{date}}, {{time}}',
   short: '{{date}}, {{time}}'
 };
-var formatLong$4 = {
+var formatLong$a = {
   date: buildFormatLongFn({
-    formats: dateFormats$2,
+    formats: dateFormats$5,
     defaultWidth: 'full'
   }),
   time: buildFormatLongFn({
-    formats: timeFormats$2,
+    formats: timeFormats$5,
     defaultWidth: 'full'
   }),
   dateTime: buildFormatLongFn({
-    formats: dateTimeFormats$2,
+    formats: dateTimeFormats$5,
     defaultWidth: 'full'
   })
 };
-var formatLong$5 = formatLong$4;
+var formatLong$b = formatLong$a;
 
-var formatRelativeLocale$1 = {
+var formatRelativeLocale$4 = {
   lastWeek: "'last' eeee 'at' p",
   yesterday: "'yesterday at' p",
   today: "'today at' p",
@@ -6622,11 +6781,11 @@ var formatRelativeLocale$1 = {
   other: 'P'
 };
 
-var formatRelative$2 = function formatRelative(token, _date, _baseDate, _options) {
-  return formatRelativeLocale$1[token];
+var formatRelative$8 = function formatRelative(token, _date, _baseDate, _options) {
+  return formatRelativeLocale$4[token];
 };
 
-var formatRelative$3 = formatRelative$2;
+var formatRelative$9 = formatRelative$8;
 
 function buildLocalizeFn(args) {
   return function (dirtyIndex, options) {
@@ -6651,12 +6810,12 @@ function buildLocalizeFn(args) {
   };
 }
 
-var eraValues$1 = {
+var eraValues$4 = {
   narrow: ['B', 'A'],
   abbreviated: ['BC', 'AD'],
   wide: ['Before Christ', 'Anno Domini']
 };
-var quarterValues$1 = {
+var quarterValues$4 = {
   narrow: ['1', '2', '3', '4'],
   abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
   wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter']
@@ -6665,18 +6824,18 @@ var quarterValues$1 = {
 // Generally, formatted dates should look like they are in the middle of a sentence,
 // e.g. in Spanish language the weekdays and months should be in the lowercase.
 
-var monthValues$1 = {
+var monthValues$4 = {
   narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
   abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
 };
-var dayValues$1 = {
+var dayValues$4 = {
   narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
   short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
   wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
 };
-var dayPeriodValues$1 = {
+var dayPeriodValues$4 = {
   narrow: {
     am: 'a',
     pm: 'p',
@@ -6708,7 +6867,7 @@ var dayPeriodValues$1 = {
     night: 'night'
   }
 };
-var formattingDayPeriodValues = {
+var formattingDayPeriodValues$1 = {
   narrow: {
     am: 'a',
     pm: 'p',
@@ -6741,7 +6900,7 @@ var formattingDayPeriodValues = {
   }
 };
 
-var ordinalNumber$1 = function ordinalNumber(dirtyNumber, _options) {
+var ordinalNumber$4 = function ordinalNumber(dirtyNumber, _options) {
   var number = Number(dirtyNumber); // If ordinal numbers depend on context, for example,
   // if they are different for different grammatical genders,
   // use `options.unit`.
@@ -6767,35 +6926,35 @@ var ordinalNumber$1 = function ordinalNumber(dirtyNumber, _options) {
   return number + 'th';
 };
 
-var localize$2 = {
-  ordinalNumber: ordinalNumber$1,
+var localize$8 = {
+  ordinalNumber: ordinalNumber$4,
   era: buildLocalizeFn({
-    values: eraValues$1,
+    values: eraValues$4,
     defaultWidth: 'wide'
   }),
   quarter: buildLocalizeFn({
-    values: quarterValues$1,
+    values: quarterValues$4,
     defaultWidth: 'wide',
     argumentCallback: function argumentCallback(quarter) {
       return quarter - 1;
     }
   }),
   month: buildLocalizeFn({
-    values: monthValues$1,
+    values: monthValues$4,
     defaultWidth: 'wide'
   }),
   day: buildLocalizeFn({
-    values: dayValues$1,
+    values: dayValues$4,
     defaultWidth: 'wide'
   }),
   dayPeriod: buildLocalizeFn({
-    values: dayPeriodValues$1,
+    values: dayPeriodValues$4,
     defaultWidth: 'wide',
-    formattingValues: formattingDayPeriodValues,
+    formattingValues: formattingDayPeriodValues$1,
     defaultFormattingWidth: 'wide'
   })
 };
-var localize$3 = localize$2;
+var localize$9 = localize$8;
 
 function buildMatchFn(args) {
   return function (string) {
@@ -6864,48 +7023,48 @@ function buildMatchPatternFn(args) {
   };
 }
 
-var matchOrdinalNumberPattern$1 = /^(\d+)(th|st|nd|rd)?/i;
-var parseOrdinalNumberPattern$1 = /\d+/i;
-var matchEraPatterns$1 = {
+var matchOrdinalNumberPattern$4 = /^(\d+)(th|st|nd|rd)?/i;
+var parseOrdinalNumberPattern$4 = /\d+/i;
+var matchEraPatterns$4 = {
   narrow: /^(b|a)/i,
   abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
   wide: /^(before christ|before common era|anno domini|common era)/i
 };
-var parseEraPatterns$1 = {
+var parseEraPatterns$4 = {
   any: [/^b/i, /^(a|c)/i]
 };
-var matchQuarterPatterns$1 = {
+var matchQuarterPatterns$4 = {
   narrow: /^[1234]/i,
   abbreviated: /^q[1234]/i,
   wide: /^[1234](th|st|nd|rd)? quarter/i
 };
-var parseQuarterPatterns$1 = {
+var parseQuarterPatterns$4 = {
   any: [/1/i, /2/i, /3/i, /4/i]
 };
-var matchMonthPatterns$1 = {
+var matchMonthPatterns$4 = {
   narrow: /^[jfmasond]/i,
   abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
   wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
 };
-var parseMonthPatterns$1 = {
+var parseMonthPatterns$4 = {
   narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
   any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
 };
-var matchDayPatterns$1 = {
+var matchDayPatterns$4 = {
   narrow: /^[smtwf]/i,
   short: /^(su|mo|tu|we|th|fr|sa)/i,
   abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
   wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
 };
-var parseDayPatterns$1 = {
+var parseDayPatterns$4 = {
   narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
   any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
 };
-var matchDayPeriodPatterns$1 = {
+var matchDayPeriodPatterns$4 = {
   narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
   any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
 };
-var parseDayPeriodPatterns$1 = {
+var parseDayPeriodPatterns$4 = {
   any: {
     am: /^a/i,
     pm: /^p/i,
@@ -6917,49 +7076,49 @@ var parseDayPeriodPatterns$1 = {
     night: /night/i
   }
 };
-var match$2 = {
+var match$8 = {
   ordinalNumber: buildMatchPatternFn({
-    matchPattern: matchOrdinalNumberPattern$1,
-    parsePattern: parseOrdinalNumberPattern$1,
+    matchPattern: matchOrdinalNumberPattern$4,
+    parsePattern: parseOrdinalNumberPattern$4,
     valueCallback: function valueCallback(value) {
       return parseInt(value, 10);
     }
   }),
   era: buildMatchFn({
-    matchPatterns: matchEraPatterns$1,
+    matchPatterns: matchEraPatterns$4,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseEraPatterns$1,
+    parsePatterns: parseEraPatterns$4,
     defaultParseWidth: 'any'
   }),
   quarter: buildMatchFn({
-    matchPatterns: matchQuarterPatterns$1,
+    matchPatterns: matchQuarterPatterns$4,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseQuarterPatterns$1,
+    parsePatterns: parseQuarterPatterns$4,
     defaultParseWidth: 'any',
     valueCallback: function valueCallback(index) {
       return index + 1;
     }
   }),
   month: buildMatchFn({
-    matchPatterns: matchMonthPatterns$1,
+    matchPatterns: matchMonthPatterns$4,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseMonthPatterns$1,
+    parsePatterns: parseMonthPatterns$4,
     defaultParseWidth: 'any'
   }),
   day: buildMatchFn({
-    matchPatterns: matchDayPatterns$1,
+    matchPatterns: matchDayPatterns$4,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseDayPatterns$1,
+    parsePatterns: parseDayPatterns$4,
     defaultParseWidth: 'any'
   }),
   dayPeriod: buildMatchFn({
-    matchPatterns: matchDayPeriodPatterns$1,
+    matchPatterns: matchDayPeriodPatterns$4,
     defaultMatchWidth: 'any',
-    parsePatterns: parseDayPeriodPatterns$1,
+    parsePatterns: parseDayPeriodPatterns$4,
     defaultParseWidth: 'any'
   })
 };
-var match$3 = match$2;
+var match$9 = match$8;
 
 /**
  * @type {Locale}
@@ -6970,13 +7129,13 @@ var match$3 = match$2;
  * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp}
  * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss}
  */
-var locale$4 = {
+var locale$7 = {
   code: 'en-US',
-  formatDistance: formatDistance$3,
-  formatLong: formatLong$5,
-  formatRelative: formatRelative$3,
-  localize: localize$3,
-  match: match$3,
+  formatDistance: formatDistance$9,
+  formatLong: formatLong$b,
+  formatRelative: formatRelative$9,
+  localize: localize$9,
+  match: match$9,
   options: {
     weekStartsOn: 0
     /* Sunday */
@@ -6984,7 +7143,7 @@ var locale$4 = {
     firstWeekContainsDate: 1
   }
 };
-var defaultLocale$2 = locale$4;
+var defaultLocale$2 = locale$7;
 
 // - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token
 //   (one of the certain letters followed by `o`)
@@ -7941,7 +8100,7 @@ var SearchInput = function (props) {
         if (value.length <= 0)
             onSearch();
     };
-    return (jsx$1(Container$o, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "text" }, rest, { onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }))] })) }));
+    return (jsx$1(Container$p, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "text" }, rest, { onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }))] })) }));
 };
 
 var Input = function (props) {
@@ -7959,7 +8118,7 @@ var Logo = function (props) {
     return props.iconOnly ? (jsxs("svg", __assign$2({ width: "89", height: "66", viewBox: "0 0 89 66", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("path", { d: "M35.2229 13.1329C34.9994 12.8535 34.72 12.5182 34.4964 12.2947L31.7581 9.61219L24.2695 2.23539C23.543 1.50889 22.7047 0.950042 21.7547 0.558848C20.8046 0.167655 19.7987 0 18.7928 0C17.7868 0 16.7809 0.223539 15.8309 0.558848C14.8808 0.950042 14.0426 1.50889 13.3161 2.23539L3.08913 12.2947C1.63612 13.7477 0.797852 15.6478 0.797852 17.7155C0.797852 19.7274 1.63612 21.6833 3.08913 23.1363L13.3161 33.1956C14.7691 34.6486 16.7809 35.431 18.7928 35.431C20.8605 35.431 22.8165 34.6486 24.2695 33.1956L31.7581 25.8188L29.0197 23.1363C28.7403 22.8569 28.5167 22.5775 28.2932 22.2981L20.7487 29.6749C20.4693 29.9543 20.1899 30.1219 19.8546 30.2896C19.5193 30.4014 19.1281 30.5131 18.7928 30.5131C18.4016 30.5131 18.0663 30.4572 17.731 30.2896C17.3956 30.1778 17.0603 29.9543 16.8368 29.6749L6.60988 19.6156C6.10691 19.1126 5.7716 18.3861 5.7716 17.6596C5.7716 16.9331 6.05103 16.2625 6.60988 15.7036L16.8368 5.64437C17.1162 5.36495 17.3956 5.19729 17.731 5.02964C18.0663 4.91787 18.4575 4.8061 18.7928 4.8061C19.184 4.8061 19.5193 4.86198 19.8546 5.02964C20.1899 5.14141 20.5252 5.36495 20.7487 5.64437L28.2932 13.0771L30.9757 15.7036C31.2551 15.9272 31.4227 16.2625 31.5904 16.5978C31.7022 16.9331 31.8139 17.2684 31.8139 17.6596V17.7155C31.8139 18.442 32.0934 19.1126 32.6522 19.6156L35.3347 22.2422C36.3406 20.9009 36.8436 19.3362 36.8436 17.7155C36.7877 16.039 36.2288 14.4742 35.2229 13.1329Z", fill: "#E62743" }), jsx$1("path", { d: "M86.4691 12.2947L76.2421 2.23539C75.5156 1.50889 74.6774 0.950042 73.7273 0.558848C72.7773 0.167655 71.7714 0 70.7654 0C69.7595 0 68.7536 0.223539 67.8035 0.558848C66.8535 0.950042 66.0152 1.50889 65.2887 2.23539L57.8001 9.61219L55.0618 12.2947C54.7824 12.5741 54.5588 12.8535 54.3353 13.1329C53.3294 14.4742 52.7705 16.039 52.7705 17.7155C52.7705 19.3362 53.3294 20.9568 54.2794 22.2422L56.9619 19.6156C57.4648 19.1126 57.7443 18.442 57.8001 17.7155C57.8001 17.3802 57.856 16.989 58.0237 16.6537C58.1355 16.3184 58.359 16.039 58.6384 15.7595L61.3209 13.1329L68.8653 5.70025C69.1448 5.42083 69.4242 5.25318 69.7595 5.08552C70.0948 4.97375 70.4301 4.86198 70.8213 4.86198C71.2125 4.86198 71.5478 4.91787 71.8831 5.08552C72.2184 5.19729 72.4979 5.42083 72.7773 5.70025L83.0042 15.7595C83.2836 16.039 83.4513 16.3184 83.6189 16.6537C83.7866 16.989 83.8425 17.3243 83.8425 17.7155C83.8425 18.0508 83.7866 18.442 83.6189 18.7773C83.4513 19.1126 83.2836 19.392 83.0042 19.6715L72.7773 29.7307C72.4979 30.0102 72.2184 30.1778 71.8831 30.3455C71.5478 30.4572 71.2125 30.569 70.8213 30.569C70.4301 30.569 70.0948 30.5131 69.7595 30.3455C69.4242 30.2337 69.1448 30.0102 68.8653 29.7307L61.3209 22.2981C61.0974 22.5775 60.8738 22.9128 60.5944 23.1363L57.856 25.8188L65.3446 33.1956C66.0711 33.9221 66.9094 34.4809 67.8594 34.8721C68.8095 35.2633 69.8154 35.431 70.8213 35.431C71.8272 35.431 72.8332 35.2075 73.7832 34.8721C74.7333 34.4809 75.5715 33.9221 76.298 33.1956L86.525 23.1363C87.2515 22.4098 87.8103 21.5716 88.2015 20.6215C88.5927 19.6715 88.8162 18.6655 88.8162 17.6596C88.8162 16.6537 88.5927 15.6478 88.2015 14.6977C87.7544 13.8594 87.1956 13.0212 86.4691 12.2947Z", fill: "#53B476" }), jsx$1("path", { d: "M35.3904 13.0212L35.2228 13.1888C34.9993 12.9094 34.7198 12.5741 34.4963 12.3506L31.7579 9.66808L39.2465 2.23539C39.973 1.50889 40.8113 0.950042 41.7613 0.558848C42.7114 0.167655 43.7173 0 44.7232 0C45.7291 0 46.7351 0.223539 47.6851 0.558848C48.6352 0.950042 49.4734 1.50889 50.1999 2.23539L57.6885 9.55631L55.0619 12.2947C54.7825 12.5741 54.5589 12.8535 54.3354 13.1329L46.7351 5.70025C46.4556 5.42083 46.1762 5.25318 45.8409 5.08552C45.5056 4.97375 45.1144 4.86198 44.7791 4.86198C44.3879 4.86198 44.0526 4.91787 43.7173 5.08552C43.382 5.19729 43.0467 5.42083 42.8231 5.70025L35.3904 13.0212ZM58.5827 15.7595L61.2651 13.1329C62.2711 14.4742 62.774 16.039 62.774 17.7155C62.774 19.3362 62.2152 20.9568 61.2651 22.2981C61.0416 22.5775 60.8181 22.9128 60.5386 23.1363L57.8003 25.8188L50.2558 33.1956C48.8028 34.6486 46.791 35.431 44.7791 35.431C42.7672 35.431 40.7554 34.6486 39.3024 33.1956L31.7579 25.7629L29.0196 23.0804C28.7401 22.801 28.5166 22.5216 28.2931 22.2422C27.2871 20.9009 26.7842 19.3362 26.7842 17.7155C26.7842 16.0948 27.343 14.4742 28.2931 13.1888L30.9755 15.8154C31.255 16.0389 31.4226 16.3743 31.5903 16.7096C31.702 17.0449 31.8138 17.3802 31.8138 17.7714V17.8273C31.8138 18.5538 32.0932 19.2244 32.6521 19.7273L35.3346 22.3539L42.879 29.7866C43.1584 30.066 43.4379 30.2337 43.7732 30.4014C44.1085 30.569 44.4997 30.6249 44.835 30.6249C45.1703 30.6249 45.5615 30.569 45.8968 30.4014C46.2321 30.2337 46.5674 30.066 46.791 29.7866L54.3354 22.3539L57.0179 19.7273C57.5208 19.2244 57.8003 18.5538 57.8562 17.8273C57.8562 17.492 57.912 17.1008 58.0797 16.7655C58.0797 16.3184 58.3032 16.039 58.5827 15.7595Z", fill: "#FFD800" }), jsx$1("path", { d: "M73.4483 42.8078L63.2214 32.7485C61.7684 31.2955 59.7566 30.5131 57.7447 30.5131C55.677 30.5131 53.721 31.2955 52.268 32.7485L44.7794 40.1812L42.0411 42.8637C41.7616 43.1431 41.5381 43.4225 41.3146 43.7019C40.3086 45.0432 39.8057 46.608 39.8057 48.2286C39.8057 49.8493 40.3645 51.4699 41.3146 52.7553L43.997 50.1287C44.5 49.6257 44.7794 48.9551 44.8353 48.2286C44.8353 47.5021 45.1147 46.8315 45.6736 46.3285L48.356 43.7019L55.9005 36.2693C56.4035 35.7663 57.13 35.4869 57.8565 35.4869C58.583 35.4869 59.3095 35.7663 59.8124 36.2693L70.0394 46.3285C70.5423 46.8315 70.8776 47.558 70.8776 48.2845C70.8776 49.011 70.5982 49.6816 70.0394 50.2405L59.8124 60.2997C59.3095 60.8027 58.583 61.0821 57.8565 61.0821C57.13 61.0821 56.4035 60.8027 55.9005 60.2997L48.2443 52.8112C48.0207 53.1465 47.7972 53.4259 47.5178 53.6494L44.7794 56.3319L52.268 63.7087C53.721 65.1617 55.7328 65.9441 57.7447 65.9441C59.8124 65.9441 61.7684 65.1617 63.2214 63.7087L73.4483 53.6494C74.1748 52.9229 74.7337 52.0847 75.1249 51.1346C75.5161 50.1846 75.7396 49.1787 75.7396 48.1727C75.7396 47.1668 75.5161 46.1609 75.1249 45.2108C74.7896 44.3726 74.1748 43.5343 73.4483 42.8078Z", fill: "#8C5CA2" }), jsx$1("path", { d: "M48.2436 43.7019L45.5612 46.3285C45.0582 46.8315 44.7788 47.5021 44.7229 48.2286C44.7229 48.9551 44.4435 49.6257 43.8846 50.1287L41.2022 52.7553L33.6577 60.188C33.1547 60.6909 32.4282 60.9704 31.7017 60.9704C30.9752 60.9704 30.2487 60.6909 29.7458 60.188L19.5188 50.1287C19.0159 49.6257 18.7364 48.8992 18.7364 48.1727C18.7364 47.4462 19.0159 46.7756 19.5188 46.2168L29.7458 36.1575C30.2487 35.6545 30.9752 35.3751 31.7017 35.3751C32.4282 35.3751 33.1547 35.6545 33.6577 36.1575L41.2022 43.5902C41.4257 43.3107 41.6492 42.9754 41.9287 42.7519L44.667 40.0694L37.2343 32.8044C35.7813 31.3514 33.7695 30.569 31.7576 30.569C29.6899 30.569 27.7339 31.3514 26.2809 32.8044L16.054 42.8637C14.601 44.3167 13.7627 46.2726 13.7627 48.2845C13.7627 50.2964 14.601 52.2523 16.054 53.7053L26.2809 63.7646C27.7339 65.2176 29.7458 66 31.7576 66C33.8254 66 35.7813 65.2176 37.2343 63.7646L44.7229 56.3878L47.4613 53.7053C47.7407 53.4259 47.9642 53.1465 48.1878 52.8671C49.1937 51.5258 49.6967 49.961 49.6967 48.3404C49.7525 46.608 49.1937 45.0432 48.2436 43.7019Z", fill: "#3DA9E1" })] }))) : (jsxs("svg", __assign$2({ width: "372", height: "66", viewBox: "0 0 372 66", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx$1("path", { d: "M35.2229 13.1329C34.9994 12.8535 34.72 12.5182 34.4964 12.2947L31.7581 9.61219L24.2695 2.23539C23.543 1.50889 22.7047 0.950042 21.7547 0.558848C20.8046 0.167655 19.7987 0 18.7928 0C17.7868 0 16.7809 0.223539 15.8309 0.558848C14.8808 0.950042 14.0426 1.50889 13.3161 2.23539L3.08913 12.2947C1.63612 13.7477 0.797852 15.6478 0.797852 17.7155C0.797852 19.7274 1.63612 21.6833 3.08913 23.1363L13.3161 33.1956C14.7691 34.6486 16.7809 35.431 18.7928 35.431C20.8605 35.431 22.8165 34.6486 24.2695 33.1956L31.7581 25.8188L29.0197 23.1363C28.7403 22.8569 28.5167 22.5775 28.2932 22.2981L20.7487 29.6749C20.4693 29.9543 20.1899 30.1219 19.8546 30.2896C19.5193 30.4014 19.1281 30.5131 18.7928 30.5131C18.4016 30.5131 18.0663 30.4572 17.731 30.2896C17.3956 30.1778 17.0603 29.9543 16.8368 29.6749L6.60988 19.6156C6.10691 19.1126 5.7716 18.3861 5.7716 17.6596C5.7716 16.9331 6.05103 16.2625 6.60988 15.7036L16.8368 5.64437C17.1162 5.36495 17.3956 5.19729 17.731 5.02964C18.0663 4.91787 18.4575 4.8061 18.7928 4.8061C19.184 4.8061 19.5193 4.86198 19.8546 5.02964C20.1899 5.14141 20.5252 5.36495 20.7487 5.64437L28.2932 13.0771L30.9757 15.7036C31.2551 15.9272 31.4227 16.2625 31.5904 16.5978C31.7022 16.9331 31.8139 17.2684 31.8139 17.6596V17.7155C31.8139 18.442 32.0934 19.1126 32.6522 19.6156L35.3347 22.2422C36.3406 20.9009 36.8436 19.3362 36.8436 17.7155C36.7877 16.039 36.2288 14.4742 35.2229 13.1329Z", fill: "#E62743" }), jsx$1("path", { d: "M86.4691 12.2947L76.2421 2.23539C75.5156 1.50889 74.6774 0.950042 73.7273 0.558848C72.7773 0.167655 71.7714 0 70.7654 0C69.7595 0 68.7536 0.223539 67.8035 0.558848C66.8535 0.950042 66.0152 1.50889 65.2887 2.23539L57.8001 9.61219L55.0618 12.2947C54.7824 12.5741 54.5588 12.8535 54.3353 13.1329C53.3294 14.4742 52.7705 16.039 52.7705 17.7155C52.7705 19.3362 53.3294 20.9568 54.2794 22.2422L56.9619 19.6156C57.4648 19.1126 57.7443 18.442 57.8001 17.7155C57.8001 17.3802 57.856 16.989 58.0237 16.6537C58.1355 16.3184 58.359 16.039 58.6384 15.7595L61.3209 13.1329L68.8653 5.70025C69.1448 5.42083 69.4242 5.25318 69.7595 5.08552C70.0948 4.97375 70.4301 4.86198 70.8213 4.86198C71.2125 4.86198 71.5478 4.91787 71.8831 5.08552C72.2184 5.19729 72.4979 5.42083 72.7773 5.70025L83.0042 15.7595C83.2836 16.039 83.4513 16.3184 83.6189 16.6537C83.7866 16.989 83.8425 17.3243 83.8425 17.7155C83.8425 18.0508 83.7866 18.442 83.6189 18.7773C83.4513 19.1126 83.2836 19.392 83.0042 19.6715L72.7773 29.7307C72.4979 30.0102 72.2184 30.1778 71.8831 30.3455C71.5478 30.4572 71.2125 30.569 70.8213 30.569C70.4301 30.569 70.0948 30.5131 69.7595 30.3455C69.4242 30.2337 69.1448 30.0102 68.8653 29.7307L61.3209 22.2981C61.0974 22.5775 60.8738 22.9128 60.5944 23.1363L57.856 25.8188L65.3446 33.1956C66.0711 33.9221 66.9094 34.4809 67.8594 34.8721C68.8095 35.2633 69.8154 35.431 70.8213 35.431C71.8272 35.431 72.8332 35.2075 73.7832 34.8721C74.7333 34.4809 75.5715 33.9221 76.298 33.1956L86.525 23.1363C87.2515 22.4098 87.8103 21.5716 88.2015 20.6215C88.5927 19.6715 88.8162 18.6655 88.8162 17.6596C88.8162 16.6537 88.5927 15.6478 88.2015 14.6977C87.7544 13.8594 87.1956 13.0212 86.4691 12.2947Z", fill: "#53B476" }), jsx$1("path", { d: "M35.3904 13.0212L35.2228 13.1888C34.9993 12.9094 34.7198 12.5741 34.4963 12.3506L31.7579 9.66808L39.2465 2.23539C39.973 1.50889 40.8113 0.950042 41.7613 0.558848C42.7114 0.167655 43.7173 0 44.7232 0C45.7291 0 46.7351 0.223539 47.6851 0.558848C48.6352 0.950042 49.4734 1.50889 50.1999 2.23539L57.6885 9.55631L55.0619 12.2947C54.7825 12.5741 54.5589 12.8535 54.3354 13.1329L46.7351 5.70025C46.4556 5.42083 46.1762 5.25318 45.8409 5.08552C45.5056 4.97375 45.1144 4.86198 44.7791 4.86198C44.3879 4.86198 44.0526 4.91787 43.7173 5.08552C43.382 5.19729 43.0467 5.42083 42.8231 5.70025L35.3904 13.0212ZM58.5827 15.7595L61.2651 13.1329C62.2711 14.4742 62.774 16.039 62.774 17.7155C62.774 19.3362 62.2152 20.9568 61.2651 22.2981C61.0416 22.5775 60.8181 22.9128 60.5386 23.1363L57.8003 25.8188L50.2558 33.1956C48.8028 34.6486 46.791 35.431 44.7791 35.431C42.7672 35.431 40.7554 34.6486 39.3024 33.1956L31.7579 25.7629L29.0196 23.0804C28.7401 22.801 28.5166 22.5216 28.2931 22.2422C27.2871 20.9009 26.7842 19.3362 26.7842 17.7155C26.7842 16.0948 27.343 14.4742 28.2931 13.1888L30.9755 15.8154C31.255 16.0389 31.4226 16.3743 31.5903 16.7096C31.702 17.0449 31.8138 17.3802 31.8138 17.7714V17.8273C31.8138 18.5538 32.0932 19.2244 32.6521 19.7273L35.3346 22.3539L42.879 29.7866C43.1584 30.066 43.4379 30.2337 43.7732 30.4014C44.1085 30.569 44.4997 30.6249 44.835 30.6249C45.1703 30.6249 45.5615 30.569 45.8968 30.4014C46.2321 30.2337 46.5674 30.066 46.791 29.7866L54.3354 22.3539L57.0179 19.7273C57.5208 19.2244 57.8003 18.5538 57.8562 17.8273C57.8562 17.492 57.912 17.1008 58.0797 16.7655C58.0797 16.3184 58.3032 16.039 58.5827 15.7595Z", fill: "#FFD800" }), jsx$1("path", { d: "M73.4483 42.8078L63.2214 32.7485C61.7684 31.2955 59.7566 30.5131 57.7447 30.5131C55.677 30.5131 53.721 31.2955 52.268 32.7485L44.7794 40.1812L42.0411 42.8637C41.7616 43.1431 41.5381 43.4225 41.3146 43.7019C40.3086 45.0432 39.8057 46.608 39.8057 48.2286C39.8057 49.8493 40.3645 51.4699 41.3146 52.7553L43.997 50.1287C44.5 49.6257 44.7794 48.9551 44.8353 48.2286C44.8353 47.5021 45.1147 46.8315 45.6736 46.3285L48.356 43.7019L55.9005 36.2693C56.4035 35.7663 57.13 35.4869 57.8565 35.4869C58.583 35.4869 59.3095 35.7663 59.8124 36.2693L70.0394 46.3285C70.5423 46.8315 70.8776 47.558 70.8776 48.2845C70.8776 49.011 70.5982 49.6816 70.0394 50.2405L59.8124 60.2997C59.3095 60.8027 58.583 61.0821 57.8565 61.0821C57.13 61.0821 56.4035 60.8027 55.9005 60.2997L48.2443 52.8112C48.0207 53.1465 47.7972 53.4259 47.5178 53.6494L44.7794 56.3319L52.268 63.7087C53.721 65.1617 55.7328 65.9441 57.7447 65.9441C59.8124 65.9441 61.7684 65.1617 63.2214 63.7087L73.4483 53.6494C74.1748 52.9229 74.7337 52.0847 75.1249 51.1346C75.5161 50.1846 75.7396 49.1787 75.7396 48.1727C75.7396 47.1668 75.5161 46.1609 75.1249 45.2108C74.7896 44.3726 74.1748 43.5343 73.4483 42.8078Z", fill: "#8C5CA2" }), jsx$1("path", { d: "M48.2436 43.7019L45.5612 46.3285C45.0582 46.8315 44.7788 47.5021 44.7229 48.2286C44.7229 48.9551 44.4435 49.6257 43.8846 50.1287L41.2022 52.7553L33.6577 60.188C33.1547 60.6909 32.4282 60.9704 31.7017 60.9704C30.9752 60.9704 30.2487 60.6909 29.7458 60.188L19.5188 50.1287C19.0159 49.6257 18.7364 48.8992 18.7364 48.1727C18.7364 47.4462 19.0159 46.7756 19.5188 46.2168L29.7458 36.1575C30.2487 35.6545 30.9752 35.3751 31.7017 35.3751C32.4282 35.3751 33.1547 35.6545 33.6577 36.1575L41.2022 43.5902C41.4257 43.3107 41.6492 42.9754 41.9287 42.7519L44.667 40.0694L37.2343 32.8044C35.7813 31.3514 33.7695 30.569 31.7576 30.569C29.6899 30.569 27.7339 31.3514 26.2809 32.8044L16.054 42.8637C14.601 44.3167 13.7627 46.2726 13.7627 48.2845C13.7627 50.2964 14.601 52.2523 16.054 53.7053L26.2809 63.7646C27.7339 65.2176 29.7458 66 31.7576 66C33.8254 66 35.7813 65.2176 37.2343 63.7646L44.7229 56.3878L47.4613 53.7053C47.7407 53.4259 47.9642 53.1465 48.1878 52.8671C49.1937 51.5258 49.6967 49.961 49.6967 48.3404C49.7525 46.608 49.1937 45.0432 48.2436 43.7019Z", fill: "#3DA9E1" }), jsx$1("path", { d: "M133.022 12.0152C132.407 11.4564 131.68 11.1769 130.842 11.1769H108.376C107.482 11.1769 106.756 11.4564 106.197 11.9593C105.582 12.4623 105.303 13.1888 105.303 14.083C105.303 14.9771 105.582 15.6477 106.197 16.2066C106.812 16.7654 107.538 17.0448 108.376 17.0448H116.312V43.5902C116.312 44.4843 116.591 45.2108 117.206 45.7697C117.821 46.3844 118.603 46.6638 119.553 46.6638C120.559 46.6638 121.342 46.3844 121.956 45.7697C122.571 45.1549 122.906 44.4284 122.906 43.5902V16.989H130.842C131.736 16.989 132.463 16.7095 133.022 16.2066C133.636 15.7036 133.916 14.9771 133.916 14.083C133.916 13.2447 133.636 12.5182 133.022 12.0152Z", fill: "#23292F" }), jsx$1("path", { d: "M152.022 20.4538C151.464 19.8391 150.737 19.5597 149.843 19.5597C148.949 19.5597 148.222 19.8391 147.663 20.4538C147.105 21.0686 146.825 21.7951 146.825 22.6333V35.5986C146.825 36.884 146.602 37.9458 146.155 38.84C145.707 39.7341 145.093 40.4047 144.254 40.8518C143.416 41.2989 142.466 41.5224 141.293 41.5224C139.56 41.5224 138.219 41.0753 137.269 40.1812C136.319 39.287 135.816 37.7223 135.816 35.5427V22.6333C135.816 21.7392 135.536 21.0127 134.978 20.4538C134.419 19.8391 133.692 19.5597 132.798 19.5597C131.904 19.5597 131.177 19.8391 130.619 20.4538C130.06 21.0686 129.78 21.7951 129.78 22.6333V37.4428C129.78 39.3429 130.171 41.0195 130.898 42.4725C131.624 43.9255 132.686 45.0991 134.028 45.9373C135.369 46.7756 136.934 47.1668 138.722 47.1668C140.231 47.1668 141.572 46.9991 142.801 46.6079C143.975 46.2168 144.981 45.7138 145.875 44.9873C146.266 44.652 146.602 44.2608 146.937 43.8696V44.4284C146.937 46.1609 146.657 47.5021 146.155 48.508C145.652 49.514 144.869 50.2405 143.807 50.6317C142.801 51.0787 141.46 51.2464 139.951 51.2464C138.778 51.2464 137.772 51.0787 136.934 50.6875C136.039 50.3522 135.369 50.0728 134.81 49.9052C134.083 49.6257 133.357 49.6816 132.686 50.0169C132.016 50.3522 131.513 51.0228 131.233 52.0288C131.01 52.7553 131.066 53.4818 131.457 54.1524C131.848 54.823 132.519 55.3819 133.58 55.7731C134.363 56.1084 135.369 56.3878 136.542 56.5554C137.772 56.7231 138.89 56.8349 140.007 56.8349C142.466 56.8349 144.646 56.4437 146.602 55.6054C148.558 54.823 150.122 53.4818 151.296 51.6376C152.47 49.7934 153.028 47.3344 153.028 44.2049V22.6333C152.861 21.7392 152.581 21.0127 152.022 20.4538ZM183.821 25.7629C182.703 23.6952 181.25 22.0186 179.35 20.845C177.45 19.6715 175.382 19.0567 172.979 19.0567C171.806 19.0567 170.688 19.2803 169.626 19.6715C168.564 20.0626 167.614 20.5656 166.832 21.2362C166.105 21.7951 165.491 22.3539 165.044 22.9687V22.6892C165.044 21.7951 164.764 21.0686 164.205 20.5097C163.646 19.895 162.92 19.6156 162.026 19.6156C161.132 19.6156 160.405 19.895 159.846 20.5097C159.287 21.1245 159.008 21.851 159.008 22.6892V53.7612C159.008 54.6554 159.287 55.4377 159.846 55.9966C160.405 56.5554 161.132 56.8349 162.026 56.8349C162.92 56.8349 163.646 56.5554 164.205 55.9407C164.764 55.326 165.044 54.5995 165.044 53.7612V43.7578C165.379 44.0931 165.826 44.4843 166.273 44.8196C167.167 45.4902 168.229 46.0491 169.403 46.4962C170.576 46.9433 171.862 47.1668 173.203 47.1668C175.494 47.1668 177.562 46.5521 179.406 45.3785C181.25 44.2049 182.703 42.5284 183.821 40.4047C184.939 38.2811 185.442 35.8781 185.442 33.0838C185.442 30.2896 184.883 27.8865 183.821 25.7629ZM178.68 37.3869C178.065 38.6723 177.171 39.7341 176.109 40.4606C174.991 41.1871 173.706 41.5783 172.253 41.5783C170.8 41.5783 169.459 41.1871 168.341 40.4606C167.223 39.7341 166.329 38.6723 165.714 37.3869C165.099 36.1016 164.764 34.6486 164.764 33.0279C164.764 31.4073 165.099 29.9543 165.714 28.6689C166.329 27.3836 167.223 26.3776 168.341 25.6511C169.459 24.9246 170.744 24.5334 172.253 24.5334C173.762 24.5334 175.047 24.9246 176.109 25.6511C177.227 26.3776 178.065 27.3836 178.68 28.6689C179.294 29.9543 179.63 31.3514 179.63 33.0279C179.63 34.6486 179.294 36.1016 178.68 37.3869ZM213.384 34.425C213.999 33.9221 214.334 33.2515 214.334 32.4691C214.334 30.6249 213.999 28.9483 213.272 27.3277C212.602 25.707 211.652 24.254 210.478 23.0245C209.304 21.7951 207.963 20.845 206.398 20.1185C204.834 19.392 203.213 19.0567 201.536 19.0567C199.301 19.0567 197.177 19.6156 195.221 20.7891C193.21 21.9627 191.589 23.5834 190.359 25.707C189.13 27.8306 188.515 30.4572 188.515 33.475C188.515 36.1016 189.074 38.3929 190.192 40.4606C191.309 42.5284 192.93 44.149 195.054 45.3226C197.177 46.4962 199.636 47.1109 202.542 47.1109C204.219 47.1109 205.895 46.8315 207.46 46.2726C209.025 45.7138 210.254 45.0432 211.149 44.3167C212.099 43.5902 212.546 42.7519 212.546 41.8577C212.546 41.1871 212.322 40.5724 211.819 40.0694C211.316 39.5665 210.702 39.287 209.975 39.287C209.416 39.287 208.857 39.4547 208.243 39.7341C207.851 39.9576 207.46 40.1812 207.013 40.4606C206.566 40.74 205.951 41.0195 205.225 41.1871C204.498 41.4107 203.492 41.4665 202.263 41.4665C200.922 41.4665 199.636 41.1312 198.463 40.4606C197.289 39.79 196.283 38.8399 195.501 37.5546C195.054 36.8281 194.774 35.9898 194.551 35.0398H211.26C212.043 35.2074 212.769 34.928 213.384 34.425ZM196.395 26.3776C197.01 25.7629 197.792 25.2599 198.686 25.0364C199.58 24.757 200.53 24.6452 201.536 24.6452C202.598 24.6452 203.548 24.8687 204.498 25.3158C205.448 25.7629 206.231 26.3776 206.845 27.16C207.46 27.9424 207.796 28.8366 207.907 29.7866V30.1219H194.663C194.718 29.7307 194.83 29.2836 194.942 28.9483C195.221 27.8865 195.78 27.0483 196.395 26.3776ZM250.771 21.851C249.933 19.6715 248.759 17.7155 247.194 16.0389C245.63 14.3624 243.841 13.077 241.718 12.127C239.594 11.177 237.303 10.7299 234.788 10.7299C232.273 10.7299 229.982 11.177 227.914 12.127C225.846 13.077 224.002 14.3624 222.493 16.0389C220.928 17.7155 219.755 19.6715 218.917 21.851C218.078 24.0305 217.631 26.4335 217.631 28.9483C217.631 31.4632 218.078 33.8662 218.917 36.0457C219.755 38.2252 220.928 40.1812 222.493 41.8577C224.002 43.5343 225.846 44.8196 227.914 45.7697C229.982 46.7197 232.329 47.1668 234.788 47.1668C237.303 47.1668 239.594 46.7197 241.718 45.7697C243.841 44.8196 245.63 43.5343 247.194 41.8577C248.759 40.1812 249.933 38.2252 250.771 36.0457C251.609 33.8662 252.056 31.4632 252.056 28.9483C252 26.3776 251.609 24.0305 250.771 21.851ZM244.065 35.0957C243.171 36.9399 241.885 38.3929 240.32 39.4547C238.756 40.5165 236.912 41.0753 234.788 41.0753C232.72 41.0753 230.876 40.5165 229.255 39.4547C227.691 38.3929 226.405 36.9399 225.511 35.0957C224.617 33.2515 224.17 31.1837 224.17 28.9483C224.17 26.6571 224.617 24.5893 225.511 22.7451C226.405 20.9009 227.635 19.4479 229.255 18.3861C230.82 17.3243 232.664 16.7654 234.788 16.7654C236.856 16.7654 238.7 17.3243 240.32 18.3861C241.885 19.4479 243.171 20.9009 244.065 22.7451C244.959 24.5893 245.406 26.6571 245.406 28.8925C245.462 31.1837 244.959 33.2515 244.065 35.0957ZM262.563 10.0593C262.004 9.44452 261.277 9.1651 260.383 9.1651C259.489 9.1651 258.762 9.44452 258.204 10.0593C257.589 10.674 257.309 11.4005 257.309 12.2388V43.5343C257.309 44.4284 257.589 45.1549 258.148 45.7138C258.707 46.3285 259.433 46.6079 260.271 46.6079C261.166 46.6079 261.892 46.3285 262.451 45.7138C263.066 45.0991 263.345 44.3726 263.345 43.5343V12.2388C263.401 11.4005 263.122 10.6181 262.563 10.0593ZM291.511 20.4538C290.952 19.8391 290.226 19.5597 289.332 19.5597C288.437 19.5597 287.711 19.8391 287.152 20.4538C286.593 21.0686 286.314 21.7951 286.314 22.6333V35.5986C286.314 36.884 286.09 37.9458 285.643 38.84C285.196 39.7341 284.581 40.4047 283.743 40.8518C282.961 41.2989 281.955 41.5224 280.781 41.5224C279.049 41.5224 277.707 41.0753 276.757 40.1812C275.807 39.287 275.304 37.7223 275.304 35.5427V22.6333C275.304 21.7392 275.025 21.0127 274.466 20.4538C273.907 19.8391 273.181 19.5597 272.287 19.5597C271.392 19.5597 270.666 19.8391 270.107 20.4538C269.548 21.0686 269.269 21.7951 269.269 22.6333V37.4428C269.269 39.3429 269.66 41.0195 270.387 42.4725C271.113 43.9255 272.175 45.0991 273.516 45.9373C274.857 46.7756 276.422 47.1668 278.21 47.1668C279.719 47.1668 281.061 46.9991 282.29 46.6079C283.464 46.2168 284.47 45.7138 285.364 44.9873C285.755 44.652 286.09 44.2608 286.425 43.8696V44.4284C286.425 46.1609 286.146 47.5021 285.643 48.508C285.14 49.514 284.358 50.2405 283.296 50.6317C282.29 51.0787 280.949 51.2464 279.44 51.2464C278.266 51.2464 277.26 51.0787 276.422 50.6875C275.528 50.3522 274.857 50.0728 274.298 49.9052C273.572 49.6257 272.845 49.6816 272.175 50.0169C271.504 50.3522 271.001 51.0228 270.722 52.0288C270.498 52.7553 270.554 53.4818 270.945 54.1524C271.337 54.823 272.007 55.3819 273.069 55.7731C273.851 56.1084 274.857 56.3878 276.031 56.5554C277.26 56.7231 278.378 56.8349 279.496 56.8349C281.955 56.8349 284.134 56.4437 286.09 55.6054C288.046 54.823 289.611 53.4818 290.785 51.6376C291.958 49.7934 292.517 47.3344 292.517 44.2049V22.6333C292.405 21.7392 292.126 21.0127 291.511 20.4538ZM337.895 24.8129C337.448 23.0804 336.554 21.6833 335.269 20.6215C333.984 19.5597 332.139 19.0567 329.736 19.0567C328.227 19.0567 326.886 19.392 325.713 20.0068C324.539 20.6215 323.477 21.4039 322.639 22.298C321.857 23.1363 321.242 23.9187 320.851 24.6452C320.403 23.1922 319.677 22.0186 318.671 21.0127C317.386 19.7273 315.374 19.0567 312.691 19.0567C311.574 19.0567 310.568 19.2244 309.618 19.6156C308.668 19.9509 307.829 20.4538 307.047 21.0127C306.265 21.5715 305.594 22.1863 305.091 22.8569L304.588 23.5275V22.6892C304.588 21.7951 304.309 21.0686 303.75 20.5097C303.191 19.895 302.464 19.6156 301.57 19.6156C300.676 19.6156 299.95 19.895 299.391 20.5097C298.832 21.1245 298.553 21.851 298.553 22.6892V43.5902C298.553 44.4843 298.832 45.2108 299.391 45.7697C299.95 46.3844 300.676 46.6638 301.57 46.6638C302.464 46.6638 303.191 46.3844 303.75 45.7697C304.309 45.1549 304.588 44.4284 304.588 43.5902V30.569C304.588 29.4513 304.812 28.4454 305.259 27.5512C305.706 26.6571 306.376 25.9306 307.326 25.3717C308.221 24.8129 309.338 24.5893 310.624 24.5893C311.965 24.5893 312.971 24.8687 313.641 25.3717C314.368 25.9306 314.815 26.6571 315.094 27.5512C315.374 28.4454 315.486 29.4513 315.486 30.569V43.5343C315.486 44.4284 315.765 45.1549 316.324 45.7138C316.883 46.3285 317.609 46.6079 318.503 46.6079C319.398 46.6079 320.124 46.3285 320.683 45.7138C321.242 45.0991 321.521 44.3726 321.521 43.5343V30.569C321.521 29.4513 321.745 28.4454 322.192 27.5512C322.639 26.6571 323.309 25.9306 324.26 25.3717C325.154 24.8129 326.271 24.5893 327.557 24.5893C328.898 24.5893 329.904 24.8687 330.575 25.3717C331.301 25.9306 331.748 26.6571 332.028 27.5512C332.307 28.4454 332.419 29.4513 332.419 30.569V43.5343C332.419 44.4284 332.698 45.1549 333.257 45.7138C333.816 46.3285 334.542 46.6079 335.436 46.6079C336.331 46.6079 337.057 46.3285 337.616 45.7138C338.175 45.0991 338.454 44.3726 338.454 43.5343V30.569C338.622 28.4454 338.343 26.5453 337.895 24.8129ZM369.526 25.7629C368.409 23.6952 366.956 22.0186 365.055 20.845C363.155 19.6715 361.088 19.0567 358.685 19.0567C357.511 19.0567 356.393 19.2803 355.332 19.6715C354.27 20.0626 353.32 20.5656 352.537 21.2362C351.811 21.7951 351.196 22.3539 350.749 22.9687V22.6892C350.749 21.7951 350.47 21.0686 349.911 20.5097C349.352 19.895 348.625 19.6156 347.731 19.6156C346.837 19.6156 346.111 19.895 345.552 20.5097C344.993 21.1245 344.713 21.851 344.713 22.6892V53.7612C344.713 54.6554 344.993 55.4377 345.552 55.9966C346.111 56.5554 346.837 56.8349 347.731 56.8349C348.625 56.8349 349.352 56.5554 349.911 55.9407C350.47 55.326 350.749 54.5995 350.749 53.7612V43.7578C351.084 44.0931 351.531 44.4843 351.978 44.8196C352.873 45.4902 353.934 46.0491 355.108 46.4962C356.282 46.9433 357.567 47.1668 358.908 47.1668C361.199 47.1668 363.267 46.5521 365.111 45.3785C366.956 44.2049 368.409 42.5284 369.526 40.4047C370.644 38.2811 371.147 35.8781 371.147 33.0838C371.203 30.2896 370.644 27.8865 369.526 25.7629ZM364.441 37.3869C363.826 38.6723 362.932 39.7341 361.87 40.4606C360.752 41.1871 359.467 41.5783 358.014 41.5783C356.561 41.5783 355.22 41.1871 354.102 40.4606C352.984 39.7341 352.146 38.6723 351.475 37.3869C350.861 36.1016 350.525 34.6486 350.525 33.0279C350.525 31.4073 350.861 29.9543 351.475 28.6689C352.09 27.3836 352.984 26.3776 354.102 25.6511C355.22 24.9246 356.505 24.5334 358.014 24.5334C359.523 24.5334 360.808 24.9246 361.87 25.6511C362.988 26.3776 363.826 27.3836 364.441 28.6689C365.055 29.9543 365.391 31.3514 365.391 33.0279C365.335 34.6486 365.055 36.1016 364.441 37.3869Z", fill: "#23292F" })] })));
 };
 
-var Wrapper$7 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
+var Wrapper$7 = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
     var size = _a.size;
     switch (size) {
         default:
@@ -7969,7 +8128,7 @@ var Wrapper$7 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTem
             return "116px";
     }
 });
-var templateObject_1$M;
+var templateObject_1$N;
 
 var medals = {
     small: {
@@ -7985,11 +8144,11 @@ var medals = {
 };
 var Medal = function (props) { return (jsx$1(Wrapper$7, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
 
-var Wrapper$6 = styled.div(templateObject_1$L || (templateObject_1$L = __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$6 = styled.div(templateObject_1$M || (templateObject_1$M = __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$z || (templateObject_2$z = __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.input(templateObject_2$A || (templateObject_2$A = __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) {
@@ -8002,7 +8161,7 @@ var StyledInputNumber = styled.input(templateObject_2$z || (templateObject_2$z =
     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$L, templateObject_2$z;
+var templateObject_1$M, templateObject_2$A;
 
 var Number$1 = function (props) {
     var inputRef = useRef(null);
@@ -8046,7 +8205,7 @@ var Number$1 = function (props) {
 
 var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
 
-var StyledRadio = styled.div(templateObject_1$K || (templateObject_1$K = __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.div(templateObject_1$L || (templateObject_1$L = __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;
@@ -8074,7 +8233,7 @@ var StyledRadio = styled.div(templateObject_1$K || (templateObject_1$K = __makeT
         return theme.colors.green.base;
     return "";
 }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
-var templateObject_1$K;
+var templateObject_1$L;
 
 var Radio = function (props) {
     var _a, _b;
@@ -8106,7 +8265,7 @@ var Radio = function (props) {
     return (jsx$1(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: jsx$1("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }) })));
 };
 
-var StyledRange = styled.div(templateObject_1$J || (templateObject_1$J = __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.div(templateObject_1$K || (templateObject_1$K = __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) {
@@ -8116,7 +8275,7 @@ var StyledRange = styled.div(templateObject_1$J || (templateObject_1$J = __makeT
     var disabled = _a.disabled;
     return disabled ? "not-allowed" : "pointer";
 });
-var templateObject_1$J;
+var templateObject_1$K;
 
 var Range = function (props) {
     var _a;
@@ -8145,11 +8304,11 @@ var Range = function (props) {
     return (jsx$1(StyledRange, __assign$2({ value: value, disabled: props.disabled }, { children: jsx$1("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$5 = styled.div(templateObject_1$I || (templateObject_1$I = __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$5 = styled.div(templateObject_1$J || (templateObject_1$J = __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$y || (templateObject_2$y = __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 13px 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 13px 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.select(templateObject_2$z || (templateObject_2$z = __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 13px 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 13px 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) {
@@ -8162,7 +8321,7 @@ var StyledSelect = styled.select(templateObject_2$y || (templateObject_2$y = __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$I, templateObject_2$y;
+var templateObject_1$J, templateObject_2$z;
 
 var Select = function (props) {
     var _a;
@@ -8184,7 +8343,7 @@ var Select = function (props) {
     return (jsxs(Wrapper$5, { children: [jsx$1(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxs(StyledSelect, __assign$2({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx$1("option", __assign$2({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
 };
 
-var StyledSubheading = styled.p(templateObject_1$H || (templateObject_1$H = __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.p(templateObject_1$I || (templateObject_1$I = __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) {
@@ -8212,11 +8371,11 @@ var StyledSubheading = styled.p(templateObject_1$H || (templateObject_1$H = __ma
             return theme.colors.darkGray.dark;
     }
 });
-var templateObject_1$H;
+var templateObject_1$I;
 
 var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
 
-var Container$n = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"])), function (_a) {
+var Container$o = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"])), function (_a) {
     var color = _a.color;
     if (!color)
         return theme.colors.lightGray.base;
@@ -8237,14 +8396,14 @@ var Container$n = styled.div(templateObject_1$G || (templateObject_1$G = __makeT
         return theme.colors.darkGray.light;
     return theme.colors[color].darker;
 });
-var templateObject_1$G;
+var templateObject_1$H;
 
 var Tag = function (_a) {
     var color = _a.color, children = _a.children;
-    return jsx$1(Container$n, __assign$2({ color: color }, { children: children }));
+    return jsx$1(Container$o, __assign$2({ color: color }, { children: children }));
 };
 
-var StyledTextarea = styled.textarea(templateObject_1$F || (templateObject_1$F = __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.textarea(templateObject_1$G || (templateObject_1$G = __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) {
@@ -8257,7 +8416,7 @@ var StyledTextarea = styled.textarea(templateObject_1$F || (templateObject_1$F =
     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$F;
+var templateObject_1$G;
 
 var Textarea = function (props) {
     var onChange = function (e) {
@@ -8267,7 +8426,7 @@ var Textarea = function (props) {
     return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
 };
 
-var Container$m = styled.div(templateObject_1$E || (templateObject_1$E = __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$n = styled.div(templateObject_1$F || (templateObject_1$F = __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) {
@@ -8285,7 +8444,7 @@ var Container$m = styled.div(templateObject_1$E || (templateObject_1$E = __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$E;
+var templateObject_1$F;
 
 var Toggle = function (props) {
     var _a;
@@ -8313,10 +8472,10 @@ var Toggle = function (props) {
                 props.onChange(newValue);
         }
     };
-    return (jsx$1(Container$m, __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: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
+    return (jsx$1(Container$n, __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: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
 };
 
-var Wrapper$4 = styled.div(templateObject_1$D || (templateObject_1$D = __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$4 = styled.div(templateObject_1$E || (templateObject_1$E = __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:
@@ -8327,7 +8486,7 @@ var Wrapper$4 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTem
             return "70px";
     }
 });
-var templateObject_1$D;
+var templateObject_1$E;
 
 var trophies = {
     1: {
@@ -8363,7 +8522,7 @@ var trophies = {
 };
 var Trophy = function (props) { return (jsx$1(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
 
-var Container$l = styled.div(templateObject_1$C || (templateObject_1$C = __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  gap: 10px;\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  gap: 10px;\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$m = styled.div(templateObject_1$D || (templateObject_1$D = __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  gap: 10px;\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  gap: 10px;\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":
@@ -8384,7 +8543,7 @@ var Container$l = styled.div(templateObject_1$C || (templateObject_1$C = __makeT
             return theme.colors.blue.base;
     }
 });
-var Action = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n  margin-left: 15px;\n  cursor: pointer;\n\n  :hover p {\n    color: ", ";\n  }\n"], ["\n  margin-left: 15px;\n  cursor: pointer;\n\n  :hover p {\n    color: ", ";\n  }\n"])), function (_a) {
+var Action = styled.div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n  flex-shrink: 0;\n  margin-left: 15px;\n  cursor: pointer;\n\n  :hover p {\n    color: ", ";\n  }\n"], ["\n  flex-shrink: 0;\n  margin-left: 15px;\n  cursor: pointer;\n\n  :hover p {\n    color: ", ";\n  }\n"])), function (_a) {
     var type = _a.type;
     switch (type) {
         default:
@@ -8396,7 +8555,7 @@ var Action = styled.div(templateObject_2$x || (templateObject_2$x = __makeTempla
             return theme.colors.blue.dark;
     }
 });
-var templateObject_1$C, templateObject_2$x;
+var templateObject_1$D, templateObject_2$y;
 
 var Alert = function (props) {
     var _a = useState(true), isOpen = _a[0], setIsOpen = _a[1];
@@ -8416,10 +8575,10 @@ var Alert = function (props) {
         icon = "infoCircle";
     if (!isOpen)
         return null;
-    return (jsxs(Container$l, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: icon, color: color }), jsx$1(Paragraph, { children: props.message }), props.action && (jsx$1(Action, __assign$2({ type: props.type, onClick: props.action.onClick }, { children: jsx$1(Paragraph, __assign$2({ decoration: "underline" }, { children: props.action.label })) }))), props.isClosable && (jsx$1("div", __assign$2({ style: { marginLeft: "auto" } }, { children: jsx$1(Icon, { size: "tiny", type: "cross", color: color, onClick: function () { return setIsOpen(false); } }) })))] })));
+    return (jsxs(Container$m, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: icon, color: color }), jsx$1(Paragraph, { children: props.message }), props.action && (jsx$1(Action, __assign$2({ type: props.type, onClick: props.action.onClick }, { children: jsx$1(Paragraph, __assign$2({ decoration: "underline" }, { children: props.action.label })) }))), props.isClosable && (jsx$1("div", __assign$2({ style: { marginLeft: "auto" } }, { children: jsx$1(Icon, { size: "tiny", type: "cross", color: color, onClick: function () { return setIsOpen(false); } }) })))] })));
 };
 
-var StyledCard = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n  background-color: ", ";\n  border: ", ";\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  border: ", ";\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.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n  background-color: ", ";\n  border: ", ";\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  border: ", ";\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 bordered = _a.bordered;
     return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
 }, function (_a) {
@@ -8431,12 +8590,12 @@ var StyledCard = styled.div(templateObject_1$B || (templateObject_1$B = __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$w || (templateObject_2$w = __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.div(templateObject_2$x || (templateObject_2$x = __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$d || (templateObject_3$d = __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$B, templateObject_2$w, templateObject_3$d;
+var Content = styled.div(templateObject_3$e || (templateObject_3$e = __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$C, templateObject_2$x, templateObject_3$e;
 
 var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
 
@@ -14685,14 +14844,14 @@ htmlReactParser.Element;
 htmlReactParser.ProcessingInstruction;
 htmlReactParser.Text;
 
-var Fieldset$1 = styled.fieldset(templateObject_1$A || (templateObject_1$A = __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$v || (templateObject_2$v = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
-var CheckboxWrapper = styled.div(templateObject_3$c || (templateObject_3$c = __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$b = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"])), function (_a) {
+var Fieldset$1 = styled.fieldset(templateObject_1$B || (templateObject_1$B = __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$w || (templateObject_2$w = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
+var CheckboxWrapper = styled.div(templateObject_3$d || (templateObject_3$d = __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$b = styled(StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"], ["\n  font-weight: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0 6px;\n  align-items: center;\n  cursor: pointer;\n\n  a {\n    color: ", ";\n  }\n"])), function (_a) {
     var weight = _a.weight;
     return weight || 500;
 }, theme.colors.darkGray.base, theme.colors.blue.base);
-var templateObject_1$A, templateObject_2$v, templateObject_3$c, templateObject_4$5;
+var templateObject_1$B, templateObject_2$w, templateObject_3$d, templateObject_4$6;
 
 var Checkboxes = function (props) {
     var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
@@ -14715,12 +14874,12 @@ var Checkboxes = function (props) {
                 }) })] }));
 };
 
-var Container$k = styled.div(templateObject_1$z || (templateObject_1$z = __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$u || (templateObject_2$u = __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, > div:last-child {\n    display: ", ";\n    margin: 0;\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, > div:last-child {\n    display: ", ";\n    margin: 0;\n  }\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
+var Container$l = styled.div(templateObject_1$A || (templateObject_1$A = __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$v || (templateObject_2$v = __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, > div:last-child {\n    display: ", ";\n    margin: 0;\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, > div:last-child {\n    display: ", ";\n    margin: 0;\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.dark);
-var templateObject_1$z, templateObject_2$u;
+var templateObject_1$A, templateObject_2$v;
 
 var Collapse = function (props) {
     var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
@@ -14732,18 +14891,18 @@ var Collapse = function (props) {
             setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
         }
     };
-    return (jsx$1(Container$k, __assign$2({}, props, { children: props.items.map(function (item, index) {
+    return (jsx$1(Container$l, __assign$2({}, props, { children: props.items.map(function (item, index) {
             var isOpen = openItems.includes(index);
             return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
         }) })));
 };
 
-var Wrapper$3 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var Value = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 6px;\n\n  h5 {\n    color: ", ";\n  }\n\n  :first-child {\n    margin-left: 0;\n  }\n"], ["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 6px;\n\n  h5 {\n    color: ", ";\n  }\n\n  :first-child {\n    margin-left: 0;\n  }\n"])), function (_a) {
+var Wrapper$3 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var Value = styled.div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 6px;\n\n  h5 {\n    color: ", ";\n  }\n\n  :first-child {\n    margin-left: 0;\n  }\n"], ["\n  width: 40px;\n  height: 32px;\n  background-color: ", ";\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 6px;\n\n  h5 {\n    color: ", ";\n  }\n\n  :first-child {\n    margin-left: 0;\n  }\n"])), function (_a) {
     var contrast = _a.contrast;
     return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
 }, theme.colors.darkGray.base);
-var templateObject_1$y, templateObject_2$t;
+var templateObject_1$z, templateObject_2$u;
 
 var Countdown = function (_a) {
     var till = _a.till, contrast = _a.contrast;
@@ -14770,20 +14929,20 @@ var Countdown = function (_a) {
     return (jsxs(Wrapper$3, { children: [jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: HH })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: MM })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: SS })) }))] }));
 };
 
-var Container$j = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n  width: fill-available;\n  padding: 15px;\n  border: 1px solid;\n  border-radius: 6px;\n  border-color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 50px;\n    margin-bottom: 15px;\n\n    h6 {\n      font-size: 14px;\n\n      :hover {\n        color: ", ";\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  width: fill-available;\n  padding: 15px;\n  border: 1px solid;\n  border-radius: 6px;\n  border-color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 50px;\n    margin-bottom: 15px;\n\n    h6 {\n      font-size: 14px;\n\n      :hover {\n        color: ", ";\n        cursor: pointer;\n      }\n    }\n  }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.light, theme.colors.blue.base);
-var Data = styled.div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  > div {\n    width: 100%;\n    display: flex;\n    align-items: end;\n    gap: 10px;\n\n    > p {\n      width: 50%;\n    }\n  }\n"], ["\n  > div {\n    width: 100%;\n    display: flex;\n    align-items: end;\n    gap: 10px;\n\n    > p {\n      width: 50%;\n    }\n  }\n"])));
-var templateObject_1$x, templateObject_2$s;
+var Container$k = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n  width: fill-available;\n  padding: 15px;\n  border: 1px solid;\n  border-radius: 6px;\n  border-color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 50px;\n    margin-bottom: 15px;\n\n    h6 {\n      font-size: 14px;\n\n      :hover {\n        color: ", ";\n        cursor: pointer;\n      }\n    }\n  }\n"], ["\n  width: fill-available;\n  padding: 15px;\n  border: 1px solid;\n  border-radius: 6px;\n  border-color: ", ";\n  background-color: ", ";\n  position: relative;\n\n  > div:first-child {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 50px;\n    margin-bottom: 15px;\n\n    h6 {\n      font-size: 14px;\n\n      :hover {\n        color: ", ";\n        cursor: pointer;\n      }\n    }\n  }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.light, theme.colors.blue.base);
+var Data = styled.div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n  > div {\n    width: 100%;\n    display: flex;\n    align-items: end;\n    gap: 10px;\n\n    > p {\n      width: 50%;\n    }\n  }\n"], ["\n  > div {\n    width: 100%;\n    display: flex;\n    align-items: end;\n    gap: 10px;\n\n    > p {\n      width: 50%;\n    }\n  }\n"])));
+var templateObject_1$y, templateObject_2$t;
 
 var DataSummary = function (_a) {
     var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
-    return (jsx$1(Fragment$1, { children: jsxs(Container$j, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsx$1("div", __assign$2({ onClick: onEdit }, { children: jsx$1(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsx$1(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
+    return (jsx$1(Fragment$1, { children: jsxs(Container$k, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsx$1("div", __assign$2({ onClick: onEdit }, { children: jsx$1(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsx$1(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
                         return item instanceof Object ? (jsxs("div", { children: [jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value, "-").concat(index))) : (jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item }), "".concat(item, "-").concat(index)));
                     }) })] }) }));
 };
 
-var Container$i = styled.div(templateObject_1$w || (templateObject_1$w = __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$a = styled(StyledParagraph)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$w, templateObject_2$r;
+var Container$j = styled.div(templateObject_1$x || (templateObject_1$x = __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$a = styled(StyledParagraph)(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$x, templateObject_2$s;
 
 var DateInputField = function (props) {
     var onChange = function (value) {
@@ -14794,7 +14953,7 @@ var DateInputField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$i, { children: [jsx$1(Label$a, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 (jsxs(Container$j, { children: [jsx$1(Label$a, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 generateRandomString = function (length) {
@@ -14807,8 +14966,8 @@ var generateRandomString = function (length) {
     return string;
 };
 
-var ButtonWrapper$1 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n  > button {\n    flex-direction: row-reverse;\n    padding-right: 14px;\n  }\n"], ["\n  > button {\n    flex-direction: row-reverse;\n    padding-right: 14px;\n  }\n"])));
-var Container$h = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n  width: max-content;\n  position: fixed;\n  z-index: 9;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n  pointer-events: ", ";\n"], ["\n  width: max-content;\n  position: fixed;\n  z-index: 9;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n  pointer-events: ", ";\n"])), function (_a) {
+var ButtonWrapper$1 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n  > button {\n    flex-direction: row-reverse;\n    padding-right: 14px;\n  }\n"], ["\n  > button {\n    flex-direction: row-reverse;\n    padding-right: 14px;\n  }\n"])));
+var Container$i = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n  width: max-content;\n  position: fixed;\n  z-index: 9;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n  pointer-events: ", ";\n"], ["\n  width: max-content;\n  position: fixed;\n  z-index: 9;\n  opacity: ", ";\n  top: ", ";\n  left: ", ";\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n  pointer-events: ", ";\n"])), function (_a) {
     var isVisible = _a.isVisible;
     return (isVisible ? "100%" : "0%");
 }, function (_a) {
@@ -14821,8 +14980,8 @@ var Container$h = styled.div(templateObject_2$q || (templateObject_2$q = __makeT
     var isVisible = _a.isVisible;
     return (isVisible ? "all" : "none");
 });
-var MenuItem = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n  padding: 10px 15px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  p {\n    margin-top: 2px;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  padding: 10px 15px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  p {\n    margin-top: 2px;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n  }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
-var templateObject_1$v, templateObject_2$q, templateObject_3$b;
+var MenuItem = styled.div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\n  padding: 10px 15px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  p {\n    margin-top: 2px;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n  }\n"], ["\n  padding: 10px 15px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  :not(:last-child) {\n    border-bottom: 1px solid ", ";\n  }\n\n  p {\n    margin-top: 2px;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n\n    p {\n      color: ", ";\n    }\n\n    svg {\n      fill: ", ";\n    }\n  }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
+var templateObject_1$w, templateObject_2$r, templateObject_3$c;
 
 var DropdownButton = function (props) {
     return (jsx$1(Fragment$1, { children: jsx$1("div", { children: jsx$1(Dropdown, __assign$2({}, props, { yOffset: props.yOffset || 10, trigger: ["click"] }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button$1, { label: props.label, color: props.color, size: props.size, disabled: props.disabled, icon: "chevronDown" }) }) })) }) }));
@@ -14886,7 +15045,7 @@ var Dropdown = function (_a) {
             return React__default.cloneElement(child, props_1);
         }
     });
-    return (jsxs(Fragment$1, { children: [children, jsx$1(Container$h, __assign$2({}, position, { isVisible: isVisible && menu.length > 0, ref: dropwdownRef, onMouseLeave: function () { return setIsVisible(false); } }, { children: menu.map(function (_a, index) {
+    return (jsxs(Fragment$1, { children: [children, jsx$1(Container$i, __assign$2({}, position, { isVisible: isVisible && menu.length > 0, ref: dropwdownRef, onMouseLeave: function () { return setIsVisible(false); } }, { children: menu.map(function (_a, index) {
                     var label = _a.label, icon = _a.icon, onClick = _a.onClick;
                     return (jsx$1(MenuItem, __assign$2({ onClick: function () {
                             onClick();
@@ -17413,8 +17572,8 @@ function reducer$1(state, action) {
 
 function noop$3() {}
 
-var Container$g = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
-var DropZone = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n  min-height: 250px;\n  border-width: 2px;\n  border-style: dashed;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  background-color: ", ";\n  padding: 25px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  min-height: 250px;\n  border-width: 2px;\n  border-style: dashed;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  background-color: ", ";\n  padding: 25px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
+var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
+var DropZone = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n  min-height: 250px;\n  border-width: 2px;\n  border-style: dashed;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  background-color: ", ";\n  padding: 25px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"], ["\n  min-height: 250px;\n  border-width: 2px;\n  border-style: dashed;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  background-color: ", ";\n  padding: 25px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), function (_a) {
     _a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
     // if (isDragActive) return theme.colors.blue.base;
     if (isDragAccept)
@@ -17433,8 +17592,8 @@ var DropZone = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemp
     else
         return theme.colors.lightGray.base;
 });
-var FileList = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var templateObject_1$u, templateObject_2$p, templateObject_3$a;
+var FileList = styled.div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var templateObject_1$v, templateObject_2$q, templateObject_3$b;
 
 var FileUpload = function (_a) {
     var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
@@ -17447,14 +17606,14 @@ var FileUpload = function (_a) {
         // Max number of files: 1
         maxFiles: 1,
     }), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
-    return (jsx$1(Fragment$1, { children: jsxs(Container$g, { children: [jsxs(DropZone, __assign$2({}, getRootProps({
+    return (jsx$1(Fragment$1, { children: jsxs(Container$h, { children: [jsxs(DropZone, __assign$2({}, getRootProps({
                     isDragActive: isDragActive,
                     isDragAccept: isDragAccept,
                     isDragReject: isDragReject,
                 }), { children: [jsx$1("input", __assign$2({}, getInputProps())), jsx$1(Icon, { type: "fileArrow", size: "large" }), jsx$1(Spacer, { vertical: 15 }), !isDragActive && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, { children: translations[locale]["or"] }), jsx$1(Spacer, { vertical: 10 }), jsx$1(Button$1, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsx$1(FileList, { children: files.map(function (file, index) { return (jsx$1(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
 };
 
-var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n    pointer-events: none;\n  }\n\n  :active {\n    min-height: ", ";\n    max-height: ", ";\n  }\n"], ["\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n    pointer-events: none;\n  }\n\n  :active {\n    min-height: ", ";\n    max-height: ", ";\n  }\n"])), function (_a) {
+var StyledIconButton = styled(StyledButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n    pointer-events: none;\n  }\n\n  :active {\n    min-height: ", ";\n    max-height: ", ";\n  }\n"], ["\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  padding: 2px 0 0 0;\n\n  > div:first-child {\n    margin-top: -2px;\n    pointer-events: none;\n  }\n\n  :active {\n    min-height: ", ";\n    max-height: ", ";\n  }\n"])), function (_a) {
     var size = _a.size;
     return (size === "small" ? "30px" : "40px");
 }, function (_a) {
@@ -17473,15 +17632,15 @@ var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObjec
     var size = _a.size;
     return (size === "small" ? "27px" : "37px");
 });
-var templateObject_1$t;
+var templateObject_1$u;
 
 var IconButton = function (props) {
     return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: props.color === "white" ? "gray" : "white" }) })));
 };
 
-var Container$f = styled.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$9 = styled(StyledParagraph)(templateObject_2$o || (templateObject_2$o = __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$o;
+var Container$g = styled.div(templateObject_1$t || (templateObject_1$t = __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$9 = styled(StyledParagraph)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$t, templateObject_2$p;
 
 var InputField = function (props) {
     var onChange = function (value) {
@@ -17492,10 +17651,10 @@ var InputField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$f, { children: [jsx$1(Label$9, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
+    return (jsxs(Container$g, { children: [jsx$1(Label$9, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
 };
 
-var Container$e = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n  min-width: 74px;\n  max-width: ", ";\n  min-height: 74px;\n  max-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: ", ";\n  min-height: 74px;\n  max-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$f = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\n  min-width: 74px;\n  max-width: ", ";\n  min-height: 74px;\n  max-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: ", ";\n  min-height: 74px;\n  max-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 char = _a.char;
     return (char.length === 1 ? "74px" : "");
 }, function (_a) {
@@ -17542,23 +17701,23 @@ var Container$e = styled.div(templateObject_1$r || (templateObject_1$r = __makeT
             return theme.colors.darkGray.light;
     }
 });
-var CheckIconWrapper = styled.div(templateObject_2$n || (templateObject_2$n = __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$r, templateObject_2$n;
+var CheckIconWrapper = styled.div(templateObject_2$o || (templateObject_2$o = __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$s, templateObject_2$o;
 
-var Key$1 = function (props) { return (jsxs(Container$e, __assign$2({}, props, { children: [props.status === "passed" && (jsx$1(CheckIconWrapper, { children: jsx$1(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx$1("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
+var Key$2 = function (props) { return (jsxs(Container$f, __assign$2({}, props, { children: [props.status === "passed" && (jsx$1(CheckIconWrapper, { children: jsx$1(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx$1("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
                 marginTop: "13px",
                 transform: "scale(2)",
             } }, { children: jsx$1("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" }) }))) : (jsx$1(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
 
-var Wrapper$2 = styled.a(templateObject_1$q || (templateObject_1$q = __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-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-right: ", ";\n    margin-left: ", ";\n  }\n"])), function (_a) {
+var Wrapper$2 = styled.a(templateObject_1$r || (templateObject_1$r = __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-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-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$m || (templateObject_2$m = __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$q, templateObject_2$m;
+var StyledLink = styled(StyledParagraph)(templateObject_2$n || (templateObject_2$n = __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$r, templateObject_2$n;
 
 var Link = function (props) {
     var onClick = function (e) {
@@ -17570,13 +17729,13 @@ var Link = function (props) {
     return (jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx$1(Icon, { type: "chevronLeft", color: "green" }), jsx$1(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx$1(Icon, { type: "chevronRight", color: "green" }))] })));
 };
 
-var Container$d = styled.div(templateObject_1$p || (templateObject_1$p = __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$e = styled.div(templateObject_1$q || (templateObject_1$q = __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$p;
+var templateObject_1$q;
 
-var Loading = function (props) { return (jsxs(Container$d, __assign$2({}, props, { children: [jsx$1(_default$1, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { vertical: 20 }), jsx$1(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
+var Loading = function (props) { return (jsxs(Container$e, __assign$2({}, props, { children: [jsx$1(_default$1, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { vertical: 20 }), jsx$1(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
 
 var mappers = {};
 
@@ -17584,13 +17743,15 @@ var getCountryByLocale$1 = {};
 
 Object.defineProperty(getCountryByLocale$1, "__esModule", { value: true });
 getCountryByLocale$1.getCountryByLocale = void 0;
-var enums_1$4 = enums;
+var enums_1$3 = enums;
 var getCountryByLocale = function (locale) {
     var _a;
     var countries = (_a = {},
-        _a[enums_1$4.Locale.NL_NL] = enums_1$4.Country.NL,
-        _a[enums_1$4.Locale.NL_BE] = enums_1$4.Country.BE,
-        _a[enums_1$4.Locale.EN_GB] = enums_1$4.Country.GB,
+        _a[enums_1$3.Locale.NL_NL] = enums_1$3.Country.NL,
+        _a[enums_1$3.Locale.NL_BE] = enums_1$3.Country.BE,
+        _a[enums_1$3.Locale.EN_GB] = enums_1$3.Country.GB,
+        _a[enums_1$3.Locale.FR_FR] = enums_1$3.Country.FR,
+        _a[enums_1$3.Locale.DE_DE] = enums_1$3.Country.DE,
         _a);
     return countries[locale];
 };
@@ -17600,13 +17761,15 @@ var getCurrencyByLocale$1 = {};
 
 Object.defineProperty(getCurrencyByLocale$1, "__esModule", { value: true });
 getCurrencyByLocale$1.getCurrencyByLocale = void 0;
-var enums_1$3 = enums;
+var enums_1$2 = enums;
 var getCurrencyByLocale = function (locale) {
     var _a;
     var currencies = (_a = {},
-        _a[enums_1$3.Locale.NL_NL] = enums_1$3.Currency.EUR,
-        _a[enums_1$3.Locale.NL_BE] = enums_1$3.Currency.EUR,
-        _a[enums_1$3.Locale.EN_GB] = enums_1$3.Currency.GBP,
+        _a[enums_1$2.Locale.NL_NL] = enums_1$2.Currency.EUR,
+        _a[enums_1$2.Locale.NL_BE] = enums_1$2.Currency.EUR,
+        _a[enums_1$2.Locale.EN_GB] = enums_1$2.Currency.GBP,
+        _a[enums_1$2.Locale.FR_FR] = enums_1$2.Currency.EUR,
+        _a[enums_1$2.Locale.DE_DE] = enums_1$2.Currency.EUR,
         _a);
     return currencies[locale];
 };
@@ -17616,13 +17779,15 @@ var getKeyboardLayoutByLocale$1 = {};
 
 Object.defineProperty(getKeyboardLayoutByLocale$1, "__esModule", { value: true });
 getKeyboardLayoutByLocale$1.getKeyboardLayoutByLocale = void 0;
-var enums_1$2 = enums;
+var enums_1$1 = enums;
 var getKeyboardLayoutByLocale = function (locale) {
     var _a;
     var keyboardLayouts = (_a = {},
-        _a[enums_1$2.Locale.NL_NL] = enums_1$2.KeyboardLayout.QWERTY_NL,
-        _a[enums_1$2.Locale.NL_BE] = enums_1$2.KeyboardLayout.AZERTY_BE,
-        _a[enums_1$2.Locale.EN_GB] = enums_1$2.KeyboardLayout.QWERTY_UK,
+        _a[enums_1$1.Locale.NL_NL] = enums_1$1.KeyboardLayout.QWERTY_NL,
+        _a[enums_1$1.Locale.NL_BE] = enums_1$1.KeyboardLayout.AZERTY_BE,
+        _a[enums_1$1.Locale.EN_GB] = enums_1$1.KeyboardLayout.QWERTY_UK,
+        _a[enums_1$1.Locale.FR_FR] = enums_1$1.KeyboardLayout.AZERTY_FR,
+        _a[enums_1$1.Locale.DE_DE] = enums_1$1.KeyboardLayout.QWERTZ_DE,
         _a);
     return keyboardLayouts[locale];
 };
@@ -17632,45 +17797,20 @@ var getNativeLanguageByLocale$1 = {};
 
 Object.defineProperty(getNativeLanguageByLocale$1, "__esModule", { value: true });
 getNativeLanguageByLocale$1.getNativeLanguageByLocale = void 0;
-var enums_1$1 = enums;
+var enums_1 = enums;
 var getNativeLanguageByLocale = function (locale) {
     var _a;
     var nativeLanguages = (_a = {},
-        _a[enums_1$1.Locale.NL_NL] = "Nederlands",
-        _a[enums_1$1.Locale.NL_BE] = "Nederlands (BE)",
-        _a[enums_1$1.Locale.EN_GB] = "English (UK)",
+        _a[enums_1.Locale.NL_NL] = "Nederlands",
+        _a[enums_1.Locale.NL_BE] = "Nederlands (BE)",
+        _a[enums_1.Locale.EN_GB] = "English (UK)",
+        _a[enums_1.Locale.FR_FR] = "Français",
+        _a[enums_1.Locale.DE_DE] = "Deutsch",
         _a);
     return nativeLanguages[locale];
 };
 getNativeLanguageByLocale$1.getNativeLanguageByLocale = getNativeLanguageByLocale;
 
-var getPricing$1 = {};
-
-Object.defineProperty(getPricing$1, "__esModule", { value: true });
-getPricing$1.getPricing = void 0;
-var enums_1 = enums;
-var getPricing = function (currency) {
-    var _a, _b, _c, _d;
-    var plans = (_a = {},
-        _a[enums_1.Plan.HOBBY] = (_b = {},
-            _b[enums_1.Currency.EUR] = 0,
-            _b[enums_1.Currency.GBP] = 0,
-            _b[enums_1.Currency.USD] = 0,
-            _b),
-        _a[enums_1.Plan.PROFESSIONAL] = (_c = {},
-            _c[enums_1.Currency.EUR] = 14.95,
-            _c[enums_1.Currency.GBP] = 12.95,
-            _c[enums_1.Currency.USD] = 15.95,
-            _c),
-        _a);
-    var pricing = (_d = {},
-        _d[enums_1.Plan.HOBBY] = plans.hobby[currency],
-        _d[enums_1.Plan.PROFESSIONAL] = plans.professional[currency],
-        _d);
-    return pricing;
-};
-getPricing$1.getPricing = getPricing;
-
 (function (exports) {
 var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
@@ -17691,12 +17831,11 @@ __exportStar(getCountryByLocale$1, exports);
 __exportStar(getCurrencyByLocale$1, exports);
 __exportStar(getKeyboardLayoutByLocale$1, exports);
 __exportStar(getNativeLanguageByLocale$1, exports);
-__exportStar(getPricing$1, exports);
 
 }(mappers));
 
-var Button = styled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n  all: unset;\n  height: 46px;\n  box-sizing: border-box;\n  padding: 10px 15px;\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  svg {\n    pointer-events: none;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  all: unset;\n  height: 46px;\n  box-sizing: border-box;\n  padding: 10px 15px;\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  svg {\n    pointer-events: none;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark, theme.colors.lightGray.base);
-var templateObject_1$o;
+var Button = styled.button(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n  all: unset;\n  height: 46px;\n  box-sizing: border-box;\n  padding: 10px 15px;\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  svg {\n    pointer-events: none;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  all: unset;\n  height: 46px;\n  box-sizing: border-box;\n  padding: 10px 15px;\n  background-color: ", ";\n  border-radius: 6px;\n  border: 1px solid ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 10%);\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  svg {\n    pointer-events: none;\n  }\n\n  :hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark, theme.colors.lightGray.base);
+var templateObject_1$p;
 
 var LocaleSelect = function (props) {
     var _a = useState(props.defaultValue), selectedLocale = _a[0], setSelectedLocale = _a[1];
@@ -17712,17 +17851,17 @@ var LocaleSelect = function (props) {
         }); }) }, { children: jsxs(Button, { children: [jsx$1(Flag, { locale: selectedLocale }), !props.iconOnly && (jsx$1(Heading, __assign$2({ type: "h6", as: "span" }, { children: mappers.getNativeLanguageByLocale(selectedLocale) })))] }) })));
 };
 
-var Wrapper$1 = styled.div(templateObject_1$n || (templateObject_1$n = __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$n;
+var Wrapper$1 = styled.div(templateObject_1$o || (templateObject_1$o = __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$o;
 
 var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
 
-var NotificationContainer = styled.div(templateObject_1$m || (templateObject_1$m = __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.div(templateObject_1$n || (templateObject_1$n = __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$l || (templateObject_2$l = __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$m, templateObject_2$l;
+var ButtonContainer = styled.div(templateObject_2$m || (templateObject_2$m = __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$n, templateObject_2$m;
 
 var Notification = function (props) {
     if (!props.isVisible)
@@ -17730,9 +17869,9 @@ var Notification = function (props) {
     return (jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { horizontal: 15 }), jsx$1(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx$1(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button$1, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
 };
 
-var Container$c = styled.div(templateObject_1$l || (templateObject_1$l = __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$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$l, templateObject_2$k;
+var Container$d = styled.div(templateObject_1$m || (templateObject_1$m = __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$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$m, templateObject_2$l;
 
 var NumberField = function (props) {
     var onChange = function (value) {
@@ -17743,12 +17882,12 @@ var NumberField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$c, { children: [jsx$1(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 (jsxs(Container$d, { children: [jsx$1(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 Container$b = styled.div(templateObject_1$k || (templateObject_1$k = __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$j || (templateObject_2$j = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
-var templateObject_1$k, templateObject_2$j;
+var Container$c = styled.div(templateObject_1$l || (templateObject_1$l = __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$l, templateObject_2$k;
 
 var PasswordInputField = function (props) {
     var onChange = function (value) {
@@ -17764,10 +17903,10 @@ var PasswordInputField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$b, { children: [jsx$1(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, helperLocale: props.helperLocale, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur })] }));
+    return (jsxs(Container$c, { children: [jsx$1(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, helperLocale: props.helperLocale, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur })] }));
 };
 
-var PopupContainer = styled.div(templateObject_1$j || (templateObject_1$j = __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  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n\n  ", ";\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  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n\n  ", ";\n"])), function (_a) {
+var PopupContainer = styled.div(templateObject_1$k || (templateObject_1$k = __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  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n\n  ", ";\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  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n  pointer-events: none;\n  z-index: 9;\n\n  ", ";\n"])), function (_a) {
     var isVisible = _a.isVisible;
     return (isVisible ? "100%" : "0%");
 }, function (_a) {
@@ -17784,7 +17923,7 @@ var PopupContainer = styled.div(templateObject_1$j || (templateObject_1$j = __ma
     return noStyle &&
         "\n    max-width: 100%;\n    padding: 0;\n    border-radius: 0;\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  ";
 });
-var templateObject_1$j;
+var templateObject_1$k;
 
 var Popup = function (props) {
     var popupRef = useRef(null);
@@ -17826,25 +17965,25 @@ var Popup = function (props) {
                         props.content] }))] }));
 };
 
-var Wrapper = styled.div(templateObject_1$i || (templateObject_1$i = __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$i || (templateObject_2$i = __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.div(templateObject_1$j || (templateObject_1$j = __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$j || (templateObject_2$j = __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$9 || (templateObject_3$9 = __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.div(templateObject_3$a || (templateObject_3$a = __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$i, templateObject_2$i, templateObject_3$9;
+var templateObject_1$j, templateObject_2$j, templateObject_3$a;
 
 var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx$1(StyledProgressBar, __assign$2({}, props, { children: jsx$1(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsx$1(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
 
-var Container$a = styled.ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  position: relative;\n\n  :after {\n    content: \"\";\n    height: 4px;\n    width: 100%;\n    background-color: ", ";\n    position: absolute;\n    top: 14px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  position: relative;\n\n  :after {\n    content: \"\";\n    height: 4px;\n    width: 100%;\n    background-color: ", ";\n    position: absolute;\n    top: 14px;\n  }\n"])), theme.colors.lightGray.dark);
-var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n  z-index: 1;\n\n  p {\n    margin-top: 10px;\n  }\n"], ["\n  z-index: 1;\n\n  p {\n    margin-top: 10px;\n  }\n"])));
-var Dot$2 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  outline: 10px solid ", ";\n  cursor: ", ";\n\n  background-color: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  > div {\n    pointer-events: none;\n  }\n"], ["\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  outline: 10px solid ", ";\n  cursor: ", ";\n\n  background-color: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  > div {\n    pointer-events: none;\n  }\n"])), theme.colors.lightGray.light, function (_a) {
+var Container$b = styled.ol(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  position: relative;\n\n  :after {\n    content: \"\";\n    height: 4px;\n    width: 100%;\n    background-color: ", ";\n    position: absolute;\n    top: 14px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  list-style-type: none;\n  position: relative;\n\n  :after {\n    content: \"\";\n    height: 4px;\n    width: 100%;\n    background-color: ", ";\n    position: absolute;\n    top: 14px;\n  }\n"])), theme.colors.lightGray.dark);
+var Step$2 = styled.li(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n  z-index: 1;\n\n  p {\n    margin-top: 10px;\n  }\n"], ["\n  z-index: 1;\n\n  p {\n    margin-top: 10px;\n  }\n"])));
+var Dot$2 = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  outline: 10px solid ", ";\n  cursor: ", ";\n\n  background-color: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  > div {\n    pointer-events: none;\n  }\n"], ["\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  outline: 10px solid ", ";\n  cursor: ", ";\n\n  background-color: ", ";\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  :hover {\n    background-color: ", ";\n  }\n\n  > div {\n    pointer-events: none;\n  }\n"])), theme.colors.lightGray.light, function (_a) {
     var status = _a.status;
     return status === "passed" ? "pointer" : "not-allowed";
 }, function (_a) {
@@ -17868,9 +18007,9 @@ var Dot$2 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplat
             return theme.colors.lightGray.base;
     }
 });
-var templateObject_1$h, templateObject_2$h, templateObject_3$8;
+var templateObject_1$i, templateObject_2$i, templateObject_3$9;
 
-var Steps$2 = function (props) { return (jsx$1(Container$a, { children: props.steps.map(function (_a, index) {
+var Steps$2 = function (props) { return (jsx$1(Container$b, { children: props.steps.map(function (_a, index) {
         var title = _a.title, onClick = _a.onClick;
         var step = index + 1;
         var status = props.current > step
@@ -17885,8 +18024,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$a, { children: props.st
         return (jsxs(Step$2, { children: [jsx$1(Dot$2, __assign$2({ status: status, onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6", color: status === "active" ? "white" : "gray" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }, "step-".concat(step)));
     }) })); };
 
-var Container$9 = styled.ol(templateObject_1$g || (templateObject_1$g = __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$1 = styled.li(templateObject_2$g || (templateObject_2$g = __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  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  p {\n    color: ", ";\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n"])), theme.colors.lightGray.dark, function (_a) {
+var Container$a = styled.ol(templateObject_1$h || (templateObject_1$h = __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$1 = styled.li(templateObject_2$h || (templateObject_2$h = __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  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  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) {
@@ -17900,9 +18039,9 @@ var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplat
             return theme.colors.lightGray.dark;
     }
 }, theme.colors.darkGray.base, theme.colors.lightGray.base);
-var templateObject_1$g, templateObject_2$g;
+var templateObject_1$h, templateObject_2$h;
 
-var Steps$1 = function (props) { return (jsx$1(Container$9, { children: props.steps.map(function (_a, index) {
+var Steps$1 = function (props) { return (jsx$1(Container$a, { children: props.steps.map(function (_a, index) {
         var title = _a.title, onClick = _a.onClick;
         var step = index + 1;
         var status = props.current > step
@@ -17921,15 +18060,15 @@ var Steps = function (props) {
     return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
 };
 
-var TabsContainer$1 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n  border-bottom: 1px solid ", ";\n  display: flex;\n  gap: 20px;\n  padding: 0 30px;\n"], ["\n  border-bottom: 1px solid ", ";\n  display: flex;\n  gap: 20px;\n  padding: 0 30px;\n"])), theme.colors.lightGray.dark);
-var Tab$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  cursor: pointer;\n  border-bottom: ", ";\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"], ["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  cursor: pointer;\n  border-bottom: ", ";\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"])), function (_a) {
+var TabsContainer$1 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n  border-bottom: 1px solid ", ";\n  display: flex;\n  gap: 20px;\n  padding: 0 30px;\n"], ["\n  border-bottom: 1px solid ", ";\n  display: flex;\n  gap: 20px;\n  padding: 0 30px;\n"])), theme.colors.lightGray.dark);
+var Tab$1 = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  cursor: pointer;\n  border-bottom: ", ";\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"], ["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  cursor: pointer;\n  border-bottom: ", ";\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"])), function (_a) {
     var isActive = _a.isActive;
     return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
 }, function (_a) {
     var isActive = _a.isActive;
     return isActive ? theme.colors.blue.base : "";
 }, theme.colors.blue.base);
-var templateObject_1$f, templateObject_2$f;
+var templateObject_1$g, templateObject_2$g;
 
 var Tabs$2 = function (_a) {
     var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
@@ -17949,15 +18088,15 @@ var Tabs$2 = function (_a) {
         }) }));
 };
 
-var TabsContainer = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n  width: fit-content;\n  border-right: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  padding: 30px 0 30px 30px;\n"], ["\n  width: fit-content;\n  border-right: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  padding: 30px 0 30px 30px;\n"])), theme.colors.lightGray.dark);
-var Tab = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 30px 0 10px;\n  cursor: pointer;\n  position: relative;\n\n  :after {\n    content: \"\";\n    width: 3px;\n    height: 100%;\n    display: ", ";\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"], ["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 30px 0 10px;\n  cursor: pointer;\n  position: relative;\n\n  :after {\n    content: \"\";\n    width: 3px;\n    height: 100%;\n    display: ", ";\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"])), function (_a) {
+var TabsContainer = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n  width: fit-content;\n  border-right: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  padding: 30px 0 30px 30px;\n"], ["\n  width: fit-content;\n  border-right: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  padding: 30px 0 30px 30px;\n"])), theme.colors.lightGray.dark);
+var Tab = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 30px 0 10px;\n  cursor: pointer;\n  position: relative;\n\n  :after {\n    content: \"\";\n    width: 3px;\n    height: 100%;\n    display: ", ";\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"], ["\n  height: 50px;\n  display: flex;\n  align-items: center;\n  padding: 0 30px 0 10px;\n  cursor: pointer;\n  position: relative;\n\n  :after {\n    content: \"\";\n    width: 3px;\n    height: 100%;\n    display: ", ";\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  p {\n    color: ", ";\n  }\n\n  :hover p {\n    color: ", ";\n  }\n"])), function (_a) {
     var isActive = _a.isActive;
     return (isActive ? "block" : "none");
 }, theme.colors.blue.base, function (_a) {
     var isActive = _a.isActive;
     return isActive ? theme.colors.blue.base : "";
 }, theme.colors.blue.base);
-var templateObject_1$e, templateObject_2$e;
+var templateObject_1$f, templateObject_2$f;
 
 var Tabs$1 = function (_a) {
     var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
@@ -17981,14 +18120,14 @@ var Tabs = function (props) {
     return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
 };
 
-var Fieldset = styled.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.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
-var RadioWrapper = styled.div(templateObject_3$7 || (templateObject_3$7 = __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$6 = styled(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 Fieldset = styled.fieldset(templateObject_1$e || (templateObject_1$e = __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$e || (templateObject_2$e = __makeTemplateObject$1(["\n  margin-top: 5px;\n"], ["\n  margin-top: 5px;\n"])));
+var RadioWrapper = 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$6 = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __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$d, templateObject_2$d, templateObject_3$7, templateObject_4$4;
+var templateObject_1$e, templateObject_2$e, templateObject_3$8, templateObject_4$5;
 
 var RadioGroup = function (props) {
     var onChange = function (value) {
@@ -18005,9 +18144,9 @@ var RadioGroup = function (props) {
                 }) })] }));
 };
 
-var Container$8 = styled.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$5 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __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$c;
+var Container$9 = styled.div(templateObject_1$d || (templateObject_1$d = __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$5 = styled(StyledParagraph)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n  font-weight: 500;\n  color: ", ";\n"], ["\n  font-weight: 500;\n  color: ", ";\n"])), theme.colors.darkGray.base);
+var templateObject_1$d, templateObject_2$d;
 
 var SelectField = function (props) {
     var onChange = function (value) {
@@ -18018,15 +18157,15 @@ var SelectField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$8, { children: [jsx$1(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 (jsxs(Container$9, { children: [jsx$1(Label$5, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 (jsx$1("option", __assign$2({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
                 }) }))] }));
 };
 
-var Container$7 = 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$4 = styled(StyledParagraph)(templateObject_2$b || (templateObject_2$b = __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$b;
+var Container$8 = styled.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$4 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __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$c;
 
 var ToggleField = function (props) {
     var onChange = function (value) {
@@ -18037,10 +18176,10 @@ var ToggleField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$7, { children: [jsx$1(Label$4, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
+    return (jsxs(Container$8, { children: [jsx$1(Label$4, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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$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 TooltipContainer = styled.div(templateObject_1$b || (templateObject_1$b = __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) {
@@ -18050,7 +18189,7 @@ var TooltipContainer = styled.div(templateObject_1$a || (templateObject_1$a = __
     var x = _a.x;
     return (x ? "".concat(x, "px") : "");
 });
-var TooltipTitle = styled.div(templateObject_2$a || (templateObject_2$a = __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.div(templateObject_2$b || (templateObject_2$b = __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:
@@ -18060,7 +18199,7 @@ var TooltipTitle = styled.div(templateObject_2$a || (templateObject_2$a = __make
             return theme.colors.lightGray.dark;
     }
 });
-var templateObject_1$a, templateObject_2$a;
+var templateObject_1$b, templateObject_2$b;
 
 var Tooltip$2 = function (props) {
     var tooltipRef = useRef(null);
@@ -34128,7 +34267,7 @@ function formatLocale$1(locale) {
   };
 }
 
-var locale$3;
+var locale$6;
 var format;
 var formatPrefix;
 
@@ -34139,10 +34278,10 @@ defaultLocale$1({
 });
 
 function defaultLocale$1(definition) {
-  locale$3 = formatLocale$1(definition);
-  format = locale$3.format;
-  formatPrefix = locale$3.formatPrefix;
-  return locale$3;
+  locale$6 = formatLocale$1(definition);
+  format = locale$6.format;
+  formatPrefix = locale$6.formatPrefix;
+  return locale$6;
 }
 
 function precisionFixed(step) {
@@ -35768,7 +35907,7 @@ function formatUnixTimestampSeconds(d) {
   return Math.floor(+d / 1000);
 }
 
-var locale$2;
+var locale$5;
 var timeFormat;
 var utcFormat;
 
@@ -35784,12 +35923,12 @@ defaultLocale({
 });
 
 function defaultLocale(definition) {
-  locale$2 = formatLocale(definition);
-  timeFormat = locale$2.format;
-  locale$2.parse;
-  utcFormat = locale$2.utcFormat;
-  locale$2.utcParse;
-  return locale$2;
+  locale$5 = formatLocale(definition);
+  timeFormat = locale$5.format;
+  locale$5.parse;
+  utcFormat = locale$5.utcFormat;
+  locale$5.utcParse;
+  return locale$5;
 }
 
 function date(t) {
@@ -47342,132 +47481,166 @@ var AreaChart = generateCategoricalChart({
   formatAxisMap: formatAxisMap
 });
 
-var dateFormats$1 = {
-  full: 'EEEE, d MMMM yyyy',
-  long: 'd MMMM yyyy',
-  medium: 'd MMM yyyy',
-  short: 'dd/MM/yyyy'
-};
-var timeFormats$1 = {
-  full: 'HH:mm:ss zzzz',
-  long: 'HH:mm:ss z',
-  medium: 'HH:mm:ss',
-  short: 'HH:mm'
-};
-var dateTimeFormats$1 = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: '{{date}}, {{time}}',
-  short: '{{date}}, {{time}}'
-};
-var formatLong$2 = {
-  date: buildFormatLongFn({
-    formats: dateFormats$1,
-    defaultWidth: 'full'
-  }),
-  time: buildFormatLongFn({
-    formats: timeFormats$1,
-    defaultWidth: 'full'
-  }),
-  dateTime: buildFormatLongFn({
-    formats: dateTimeFormats$1,
-    defaultWidth: 'full'
-  })
-};
-var formatLong$3 = formatLong$2;
-
-/**
- * @type {Locale}
- * @category Locales
- * @summary English locale (United Kingdom).
- * @language English
- * @iso-639-2 eng
- * @author Alex [@glintik]{@link https://github.com/glintik}
- */
-
-var locale$1 = {
-  code: 'en-GB',
-  formatDistance: formatDistance$3,
-  formatLong: formatLong$3,
-  formatRelative: formatRelative$3,
-  localize: localize$3,
-  match: match$3,
-  options: {
-    weekStartsOn: 1
-    /* Monday */
-    ,
-    firstWeekContainsDate: 4
-  }
-};
-var enGB = locale$1;
-
-var formatDistanceLocale = {
+var formatDistanceLocale$3 = {
   lessThanXSeconds: {
-    one: 'minder dan een seconde',
-    other: 'minder dan {{count}} seconden'
+    standalone: {
+      one: 'weniger als 1 Sekunde',
+      other: 'weniger als {{count}} Sekunden'
+    },
+    withPreposition: {
+      one: 'weniger als 1 Sekunde',
+      other: 'weniger als {{count}} Sekunden'
+    }
   },
   xSeconds: {
-    one: '1 seconde',
-    other: '{{count}} seconden'
+    standalone: {
+      one: '1 Sekunde',
+      other: '{{count}} Sekunden'
+    },
+    withPreposition: {
+      one: '1 Sekunde',
+      other: '{{count}} Sekunden'
+    }
+  },
+  halfAMinute: {
+    standalone: 'halbe Minute',
+    withPreposition: 'halben Minute'
   },
-  halfAMinute: 'een halve minuut',
   lessThanXMinutes: {
-    one: 'minder dan een minuut',
-    other: 'minder dan {{count}} minuten'
+    standalone: {
+      one: 'weniger als 1 Minute',
+      other: 'weniger als {{count}} Minuten'
+    },
+    withPreposition: {
+      one: 'weniger als 1 Minute',
+      other: 'weniger als {{count}} Minuten'
+    }
   },
   xMinutes: {
-    one: 'een minuut',
-    other: '{{count}} minuten'
+    standalone: {
+      one: '1 Minute',
+      other: '{{count}} Minuten'
+    },
+    withPreposition: {
+      one: '1 Minute',
+      other: '{{count}} Minuten'
+    }
   },
   aboutXHours: {
-    one: 'ongeveer 1 uur',
-    other: 'ongeveer {{count}} uur'
+    standalone: {
+      one: 'etwa 1 Stunde',
+      other: 'etwa {{count}} Stunden'
+    },
+    withPreposition: {
+      one: 'etwa 1 Stunde',
+      other: 'etwa {{count}} Stunden'
+    }
   },
   xHours: {
-    one: '1 uur',
-    other: '{{count}} uur'
+    standalone: {
+      one: '1 Stunde',
+      other: '{{count}} Stunden'
+    },
+    withPreposition: {
+      one: '1 Stunde',
+      other: '{{count}} Stunden'
+    }
   },
   xDays: {
-    one: '1 dag',
-    other: '{{count}} dagen'
+    standalone: {
+      one: '1 Tag',
+      other: '{{count}} Tage'
+    },
+    withPreposition: {
+      one: '1 Tag',
+      other: '{{count}} Tagen'
+    }
   },
   aboutXWeeks: {
-    one: 'ongeveer 1 week',
-    other: 'ongeveer {{count}} weken'
+    standalone: {
+      one: 'etwa 1 Woche',
+      other: 'etwa {{count}} Wochen'
+    },
+    withPreposition: {
+      one: 'etwa 1 Woche',
+      other: 'etwa {{count}} Wochen'
+    }
   },
   xWeeks: {
-    one: '1 week',
-    other: '{{count}} weken'
+    standalone: {
+      one: '1 Woche',
+      other: '{{count}} Wochen'
+    },
+    withPreposition: {
+      one: '1 Woche',
+      other: '{{count}} Wochen'
+    }
   },
   aboutXMonths: {
-    one: 'ongeveer 1 maand',
-    other: 'ongeveer {{count}} maanden'
+    standalone: {
+      one: 'etwa 1 Monat',
+      other: 'etwa {{count}} Monate'
+    },
+    withPreposition: {
+      one: 'etwa 1 Monat',
+      other: 'etwa {{count}} Monaten'
+    }
   },
   xMonths: {
-    one: '1 maand',
-    other: '{{count}} maanden'
+    standalone: {
+      one: '1 Monat',
+      other: '{{count}} Monate'
+    },
+    withPreposition: {
+      one: '1 Monat',
+      other: '{{count}} Monaten'
+    }
   },
   aboutXYears: {
-    one: 'ongeveer 1 jaar',
-    other: 'ongeveer {{count}} jaar'
+    standalone: {
+      one: 'etwa 1 Jahr',
+      other: 'etwa {{count}} Jahre'
+    },
+    withPreposition: {
+      one: 'etwa 1 Jahr',
+      other: 'etwa {{count}} Jahren'
+    }
   },
   xYears: {
-    one: '1 jaar',
-    other: '{{count}} jaar'
+    standalone: {
+      one: '1 Jahr',
+      other: '{{count}} Jahre'
+    },
+    withPreposition: {
+      one: '1 Jahr',
+      other: '{{count}} Jahren'
+    }
   },
   overXYears: {
-    one: 'meer dan 1 jaar',
-    other: 'meer dan {{count}} jaar'
+    standalone: {
+      one: 'mehr als 1 Jahr',
+      other: 'mehr als {{count}} Jahre'
+    },
+    withPreposition: {
+      one: 'mehr als 1 Jahr',
+      other: 'mehr als {{count}} Jahren'
+    }
   },
   almostXYears: {
-    one: 'bijna 1 jaar',
-    other: 'bijna {{count}} jaar'
+    standalone: {
+      one: 'fast 1 Jahr',
+      other: 'fast {{count}} Jahre'
+    },
+    withPreposition: {
+      one: 'fast 1 Jahr',
+      other: 'fast {{count}} Jahren'
+    }
   }
 };
 
-var formatDistance = function formatDistance(token, count, options) {
+var formatDistance$6 = function formatDistance(token, count, options) {
   var result;
-  var tokenValue = formatDistanceLocale[token];
+  var tokenValue = options !== null && options !== void 0 && options.addSuffix ? formatDistanceLocale$3[token].withPreposition : formatDistanceLocale$3[token].standalone;
 
   if (typeof tokenValue === 'string') {
     result = tokenValue;
@@ -47479,270 +47652,322 @@ var formatDistance = function formatDistance(token, count, options) {
 
   if (options !== null && options !== void 0 && options.addSuffix) {
     if (options.comparison && options.comparison > 0) {
-      return 'over ' + result;
+      return 'in ' + result;
     } else {
-      return result + ' geleden';
+      return 'vor ' + result;
     }
   }
 
   return result;
 };
 
-var formatDistance$1 = formatDistance;
+var formatDistance$7 = formatDistance$6;
+
+// DIN 5008: https://de.wikipedia.org/wiki/Datumsformat#DIN_5008
+var dateFormats$4 = {
+  full: 'EEEE, do MMMM y',
+  // Montag, 7. Januar 2018
+  long: 'do MMMM y',
+  // 7. Januar 2018
+  medium: 'do MMM y',
+  // 7. Jan. 2018
+  short: 'dd.MM.y' // 07.01.2018
 
-var dateFormats = {
-  full: 'EEEE d MMMM y',
-  long: 'd MMMM y',
-  medium: 'd MMM y',
-  short: 'dd-MM-y'
 };
-var timeFormats = {
+var timeFormats$4 = {
   full: 'HH:mm:ss zzzz',
   long: 'HH:mm:ss z',
   medium: 'HH:mm:ss',
   short: 'HH:mm'
 };
-var dateTimeFormats = {
-  full: "{{date}} 'om' {{time}}",
-  long: "{{date}} 'om' {{time}}",
-  medium: '{{date}}, {{time}}',
-  short: '{{date}}, {{time}}'
+var dateTimeFormats$4 = {
+  full: "{{date}} 'um' {{time}}",
+  long: "{{date}} 'um' {{time}}",
+  medium: '{{date}} {{time}}',
+  short: '{{date}} {{time}}'
 };
-var formatLong = {
+var formatLong$8 = {
   date: buildFormatLongFn({
-    formats: dateFormats,
+    formats: dateFormats$4,
     defaultWidth: 'full'
   }),
   time: buildFormatLongFn({
-    formats: timeFormats,
+    formats: timeFormats$4,
     defaultWidth: 'full'
   }),
   dateTime: buildFormatLongFn({
-    formats: dateTimeFormats,
+    formats: dateTimeFormats$4,
     defaultWidth: 'full'
   })
 };
-var formatLong$1 = formatLong;
+var formatLong$9 = formatLong$8;
 
-var formatRelativeLocale = {
-  lastWeek: "'afgelopen' eeee 'om' p",
-  yesterday: "'gisteren om' p",
-  today: "'vandaag om' p",
-  tomorrow: "'morgen om' p",
-  nextWeek: "eeee 'om' p",
+var formatRelativeLocale$3 = {
+  lastWeek: "'letzten' eeee 'um' p",
+  yesterday: "'gestern um' p",
+  today: "'heute um' p",
+  tomorrow: "'morgen um' p",
+  nextWeek: "eeee 'um' p",
   other: 'P'
 };
 
-var formatRelative = function formatRelative(token, _date, _baseDate, _options) {
-  return formatRelativeLocale[token];
+var formatRelative$6 = function formatRelative(token, _date, _baseDate, _options) {
+  return formatRelativeLocale$3[token];
 };
 
-var formatRelative$1 = formatRelative;
+var formatRelative$7 = formatRelative$6;
 
-var eraValues = {
-  narrow: ['v.C.', 'n.C.'],
+var eraValues$3 = {
+  narrow: ['v.Chr.', 'n.Chr.'],
   abbreviated: ['v.Chr.', 'n.Chr.'],
-  wide: ['voor Christus', 'na Christus']
+  wide: ['vor Christus', 'nach Christus']
 };
-var quarterValues = {
+var quarterValues$3 = {
   narrow: ['1', '2', '3', '4'],
-  abbreviated: ['K1', 'K2', 'K3', 'K4'],
-  wide: ['1e kwartaal', '2e kwartaal', '3e kwartaal', '4e kwartaal']
-};
-var monthValues = {
+  abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'],
+  wide: ['1. Quartal', '2. Quartal', '3. Quartal', '4. Quartal']
+}; // Note: in German, the names of days of the week and months are capitalized.
+// If you are making a new locale based on this one, check if the same is true for the language you're working on.
+// Generally, formatted dates should look like they are in the middle of a sentence,
+// e.g. in Spanish language the weekdays and months should be in the lowercase.
+
+var monthValues$3 = {
   narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
-  abbreviated: ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
-  wide: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december']
-};
-var dayValues = {
-  narrow: ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'],
-  short: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
-  abbreviated: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
-  wide: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag']
+  abbreviated: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+  wide: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+}; // https://st.unicode.org/cldr-apps/v#/de/Gregorian/
+
+var formattingMonthValues = {
+  narrow: monthValues$3.narrow,
+  abbreviated: ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sep.', 'Okt.', 'Nov.', 'Dez.'],
+  wide: monthValues$3.wide
+};
+var dayValues$3 = {
+  narrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
+  short: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+  abbreviated: ['So.', 'Mo.', 'Di.', 'Mi.', 'Do.', 'Fr.', 'Sa.'],
+  wide: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag']
+}; // https://www.unicode.org/cldr/charts/32/summary/de.html#1881
+
+var dayPeriodValues$3 = {
+  narrow: {
+    am: 'vm.',
+    pm: 'nm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'Morgen',
+    afternoon: 'Nachm.',
+    evening: 'Abend',
+    night: 'Nacht'
+  },
+  abbreviated: {
+    am: 'vorm.',
+    pm: 'nachm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'Morgen',
+    afternoon: 'Nachmittag',
+    evening: 'Abend',
+    night: 'Nacht'
+  },
+  wide: {
+    am: 'vormittags',
+    pm: 'nachmittags',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'Morgen',
+    afternoon: 'Nachmittag',
+    evening: 'Abend',
+    night: 'Nacht'
+  }
 };
-var dayPeriodValues = {
+var formattingDayPeriodValues = {
   narrow: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'middernacht',
-    noon: 'het middaguur',
-    morning: "'s ochtends",
-    afternoon: "'s middags",
-    evening: "'s avonds",
-    night: "'s nachts"
+    am: 'vm.',
+    pm: 'nm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'morgens',
+    afternoon: 'nachm.',
+    evening: 'abends',
+    night: 'nachts'
   },
   abbreviated: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'middernacht',
-    noon: 'het middaguur',
-    morning: "'s ochtends",
-    afternoon: "'s middags",
-    evening: "'s avonds",
-    night: "'s nachts"
+    am: 'vorm.',
+    pm: 'nachm.',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'morgens',
+    afternoon: 'nachmittags',
+    evening: 'abends',
+    night: 'nachts'
   },
   wide: {
-    am: 'AM',
-    pm: 'PM',
-    midnight: 'middernacht',
-    noon: 'het middaguur',
-    morning: "'s ochtends",
-    afternoon: "'s middags",
-    evening: "'s avonds",
-    night: "'s nachts"
+    am: 'vormittags',
+    pm: 'nachmittags',
+    midnight: 'Mitternacht',
+    noon: 'Mittag',
+    morning: 'morgens',
+    afternoon: 'nachmittags',
+    evening: 'abends',
+    night: 'nachts'
   }
 };
 
-var ordinalNumber = function ordinalNumber(dirtyNumber, _options) {
+var ordinalNumber$3 = function ordinalNumber(dirtyNumber) {
   var number = Number(dirtyNumber);
-  return number + 'e';
+  return number + '.';
 };
 
-var localize = {
-  ordinalNumber: ordinalNumber,
+var localize$6 = {
+  ordinalNumber: ordinalNumber$3,
   era: buildLocalizeFn({
-    values: eraValues,
+    values: eraValues$3,
     defaultWidth: 'wide'
   }),
   quarter: buildLocalizeFn({
-    values: quarterValues,
+    values: quarterValues$3,
     defaultWidth: 'wide',
     argumentCallback: function argumentCallback(quarter) {
       return quarter - 1;
     }
   }),
   month: buildLocalizeFn({
-    values: monthValues,
+    values: monthValues$3,
+    formattingValues: formattingMonthValues,
     defaultWidth: 'wide'
   }),
   day: buildLocalizeFn({
-    values: dayValues,
+    values: dayValues$3,
     defaultWidth: 'wide'
   }),
   dayPeriod: buildLocalizeFn({
-    values: dayPeriodValues,
-    defaultWidth: 'wide'
+    values: dayPeriodValues$3,
+    defaultWidth: 'wide',
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: 'wide'
   })
 };
-var localize$1 = localize;
+var localize$7 = localize$6;
 
-var matchOrdinalNumberPattern = /^(\d+)e?/i;
-var parseOrdinalNumberPattern = /\d+/i;
-var matchEraPatterns = {
-  narrow: /^([vn]\.? ?C\.?)/,
-  abbreviated: /^([vn]\. ?Chr\.?)/,
-  wide: /^((voor|na) Christus)/
+var matchOrdinalNumberPattern$3 = /^(\d+)(\.)?/i;
+var parseOrdinalNumberPattern$3 = /\d+/i;
+var matchEraPatterns$3 = {
+  narrow: /^(v\.? ?Chr\.?|n\.? ?Chr\.?)/i,
+  abbreviated: /^(v\.? ?Chr\.?|n\.? ?Chr\.?)/i,
+  wide: /^(vor Christus|vor unserer Zeitrechnung|nach Christus|unserer Zeitrechnung)/i
 };
-var parseEraPatterns = {
-  any: [/^v/, /^n/]
+var parseEraPatterns$3 = {
+  any: [/^v/i, /^n/i]
 };
-var matchQuarterPatterns = {
+var matchQuarterPatterns$3 = {
   narrow: /^[1234]/i,
-  abbreviated: /^K[1234]/i,
-  wide: /^[1234]e kwartaal/i
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](\.)? Quartal/i
 };
-var parseQuarterPatterns = {
+var parseQuarterPatterns$3 = {
   any: [/1/i, /2/i, /3/i, /4/i]
 };
-var matchMonthPatterns = {
+var matchMonthPatterns$3 = {
   narrow: /^[jfmasond]/i,
-  abbreviated: /^(jan.|feb.|mrt.|apr.|mei|jun.|jul.|aug.|sep.|okt.|nov.|dec.)/i,
-  wide: /^(januari|februari|maart|april|mei|juni|juli|augustus|september|oktober|november|december)/i
+  abbreviated: /^(j[aä]n|feb|mär[z]?|apr|mai|jun[i]?|jul[i]?|aug|sep|okt|nov|dez)\.?/i,
+  wide: /^(januar|februar|märz|april|mai|juni|juli|august|september|oktober|november|dezember)/i
 };
-var parseMonthPatterns = {
+var parseMonthPatterns$3 = {
   narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
-  any: [/^jan/i, /^feb/i, /^m(r|a)/i, /^apr/i, /^mei/i, /^jun/i, /^jul/i, /^aug/i, /^sep/i, /^okt/i, /^nov/i, /^dec/i]
+  any: [/^j[aä]/i, /^f/i, /^mär/i, /^ap/i, /^mai/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i]
 };
-var matchDayPatterns = {
-  narrow: /^[zmdwv]/i,
-  short: /^(zo|ma|di|wo|do|vr|za)/i,
-  abbreviated: /^(zon|maa|din|woe|don|vri|zat)/i,
-  wide: /^(zondag|maandag|dinsdag|woensdag|donderdag|vrijdag|zaterdag)/i
+var matchDayPatterns$3 = {
+  narrow: /^[smdmf]/i,
+  short: /^(so|mo|di|mi|do|fr|sa)/i,
+  abbreviated: /^(son?|mon?|die?|mit?|don?|fre?|sam?)\.?/i,
+  wide: /^(sonntag|montag|dienstag|mittwoch|donnerstag|freitag|samstag)/i
 };
-var parseDayPatterns = {
-  narrow: [/^z/i, /^m/i, /^d/i, /^w/i, /^d/i, /^v/i, /^z/i],
-  any: [/^zo/i, /^ma/i, /^di/i, /^wo/i, /^do/i, /^vr/i, /^za/i]
+var parseDayPatterns$3 = {
+  any: [/^so/i, /^mo/i, /^di/i, /^mi/i, /^do/i, /^f/i, /^sa/i]
 };
-var matchDayPeriodPatterns = {
-  any: /^(am|pm|middernacht|het middaguur|'s (ochtends|middags|avonds|nachts))/i
+var matchDayPeriodPatterns$3 = {
+  narrow: /^(vm\.?|nm\.?|Mitternacht|Mittag|morgens|nachm\.?|abends|nachts)/i,
+  abbreviated: /^(vorm\.?|nachm\.?|Mitternacht|Mittag|morgens|nachm\.?|abends|nachts)/i,
+  wide: /^(vormittags|nachmittags|Mitternacht|Mittag|morgens|nachmittags|abends|nachts)/i
 };
-var parseDayPeriodPatterns = {
+var parseDayPeriodPatterns$3 = {
   any: {
-    am: /^am/i,
-    pm: /^pm/i,
-    midnight: /^middernacht/i,
-    noon: /^het middaguur/i,
-    morning: /ochtend/i,
-    afternoon: /middag/i,
-    evening: /avond/i,
-    night: /nacht/i
+    am: /^v/i,
+    pm: /^n/i,
+    midnight: /^Mitte/i,
+    noon: /^Mitta/i,
+    morning: /morgens/i,
+    afternoon: /nachmittags/i,
+    // will never be matched. Afternoon is matched by `pm`
+    evening: /abends/i,
+    night: /nachts/i // will never be matched. Night is matched by `pm`
+
   }
 };
-var match = {
+var match$6 = {
   ordinalNumber: buildMatchPatternFn({
-    matchPattern: matchOrdinalNumberPattern,
-    parsePattern: parseOrdinalNumberPattern,
+    matchPattern: matchOrdinalNumberPattern$3,
+    parsePattern: parseOrdinalNumberPattern$3,
     valueCallback: function valueCallback(value) {
-      return parseInt(value, 10);
+      return parseInt(value);
     }
   }),
   era: buildMatchFn({
-    matchPatterns: matchEraPatterns,
+    matchPatterns: matchEraPatterns$3,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseEraPatterns,
+    parsePatterns: parseEraPatterns$3,
     defaultParseWidth: 'any'
   }),
   quarter: buildMatchFn({
-    matchPatterns: matchQuarterPatterns,
+    matchPatterns: matchQuarterPatterns$3,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseQuarterPatterns,
+    parsePatterns: parseQuarterPatterns$3,
     defaultParseWidth: 'any',
     valueCallback: function valueCallback(index) {
       return index + 1;
     }
   }),
   month: buildMatchFn({
-    matchPatterns: matchMonthPatterns,
+    matchPatterns: matchMonthPatterns$3,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseMonthPatterns,
+    parsePatterns: parseMonthPatterns$3,
     defaultParseWidth: 'any'
   }),
   day: buildMatchFn({
-    matchPatterns: matchDayPatterns,
+    matchPatterns: matchDayPatterns$3,
     defaultMatchWidth: 'wide',
-    parsePatterns: parseDayPatterns,
+    parsePatterns: parseDayPatterns$3,
     defaultParseWidth: 'any'
   }),
   dayPeriod: buildMatchFn({
-    matchPatterns: matchDayPeriodPatterns,
-    defaultMatchWidth: 'any',
-    parsePatterns: parseDayPeriodPatterns,
+    matchPatterns: matchDayPeriodPatterns$3,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPeriodPatterns$3,
     defaultParseWidth: 'any'
   })
 };
-var match$1 = match;
+var match$7 = match$6;
 
 /**
  * @type {Locale}
  * @category Locales
- * @summary Dutch locale.
- * @language Dutch
- * @iso-639-2 nld
- * @author Jorik Tangelder [@jtangelder]{@link https://github.com/jtangelder}
- * @author Ruben Stolk [@rubenstolk]{@link https://github.com/rubenstolk}
- * @author Lode Vanhove [@bitcrumb]{@link https://github.com/bitcrumb}
- * @author Edo Rivai [@edorivai]{@link https://github.com/edorivai}
- * @author Niels Keurentjes [@curry684]{@link https://github.com/curry684}
- * @author Stefan Vermaas [@stefanvermaas]{@link https://github.com/stefanvermaas}
+ * @summary German locale.
+ * @language German
+ * @iso-639-2 deu
+ * @author Thomas Eilmsteiner [@DeMuu]{@link https://github.com/DeMuu}
+ * @author Asia [@asia-t]{@link https://github.com/asia-t}
+ * @author Van Vuong Ngo [@vanvuongngo]{@link https://github.com/vanvuongngo}
+ * @author RomanErnst [@pex]{@link https://github.com/pex}
+ * @author Philipp Keck [@Philipp91]{@link https://github.com/Philipp91}
  */
-
-var locale = {
-  code: 'nl',
-  formatDistance: formatDistance$1,
-  formatLong: formatLong$1,
-  formatRelative: formatRelative$1,
-  localize: localize$1,
-  match: match$1,
+var locale$4 = {
+  code: 'de',
+  formatDistance: formatDistance$7,
+  formatLong: formatLong$9,
+  formatRelative: formatRelative$7,
+  localize: localize$7,
+  match: match$7,
   options: {
     weekStartsOn: 1
     /* Monday */
@@ -47750,26 +47975,1144 @@ var locale = {
     firstWeekContainsDate: 4
   }
 };
-var nl = locale;
-
-var Period;
-(function (Period) {
-    Period["TODAY"] = "today";
-    Period["LAST_7_DAYS"] = "7d";
-    Period["LAST_30_DAYS"] = "30d";
-    Period["LAST_3_MONTHS"] = "90d";
-    Period["LAST_12_MONTHS"] = "1y";
-})(Period || (Period = {}));
+var de = locale$4;
 
-var getInterval = function (period) {
-    var start = undefined;
-    switch (period) {
-        case Period.TODAY:
-            start = startOfToday();
-            break;
-        case Period.LAST_7_DAYS:
-            start = startOfDay(subDays(new Date(), 7));
-            break;
+var dateFormats$3 = {
+  full: 'EEEE, d MMMM yyyy',
+  long: 'd MMMM yyyy',
+  medium: 'd MMM yyyy',
+  short: 'dd/MM/yyyy'
+};
+var timeFormats$3 = {
+  full: 'HH:mm:ss zzzz',
+  long: 'HH:mm:ss z',
+  medium: 'HH:mm:ss',
+  short: 'HH:mm'
+};
+var dateTimeFormats$3 = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{time}}",
+  medium: '{{date}}, {{time}}',
+  short: '{{date}}, {{time}}'
+};
+var formatLong$6 = {
+  date: buildFormatLongFn({
+    formats: dateFormats$3,
+    defaultWidth: 'full'
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats$3,
+    defaultWidth: 'full'
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats$3,
+    defaultWidth: 'full'
+  })
+};
+var formatLong$7 = formatLong$6;
+
+/**
+ * @type {Locale}
+ * @category Locales
+ * @summary English locale (United Kingdom).
+ * @language English
+ * @iso-639-2 eng
+ * @author Alex [@glintik]{@link https://github.com/glintik}
+ */
+
+var locale$3 = {
+  code: 'en-GB',
+  formatDistance: formatDistance$9,
+  formatLong: formatLong$7,
+  formatRelative: formatRelative$9,
+  localize: localize$9,
+  match: match$9,
+  options: {
+    weekStartsOn: 1
+    /* Monday */
+    ,
+    firstWeekContainsDate: 4
+  }
+};
+var enGB = locale$3;
+
+var formatDistanceLocale$2 = {
+  lessThanXSeconds: {
+    one: 'moins d’une seconde',
+    other: 'moins de {{count}} secondes'
+  },
+  xSeconds: {
+    one: '1 seconde',
+    other: '{{count}} secondes'
+  },
+  halfAMinute: '30 secondes',
+  lessThanXMinutes: {
+    one: 'moins d’une minute',
+    other: 'moins de {{count}} minutes'
+  },
+  xMinutes: {
+    one: '1 minute',
+    other: '{{count}} minutes'
+  },
+  aboutXHours: {
+    one: 'environ 1 heure',
+    other: 'environ {{count}} heures'
+  },
+  xHours: {
+    one: '1 heure',
+    other: '{{count}} heures'
+  },
+  xDays: {
+    one: '1 jour',
+    other: '{{count}} jours'
+  },
+  aboutXWeeks: {
+    one: 'environ 1 semaine',
+    other: 'environ {{count}} semaines'
+  },
+  xWeeks: {
+    one: '1 semaine',
+    other: '{{count}} semaines'
+  },
+  aboutXMonths: {
+    one: 'environ 1 mois',
+    other: 'environ {{count}} mois'
+  },
+  xMonths: {
+    one: '1 mois',
+    other: '{{count}} mois'
+  },
+  aboutXYears: {
+    one: 'environ 1 an',
+    other: 'environ {{count}} ans'
+  },
+  xYears: {
+    one: '1 an',
+    other: '{{count}} ans'
+  },
+  overXYears: {
+    one: 'plus d’un an',
+    other: 'plus de {{count}} ans'
+  },
+  almostXYears: {
+    one: 'presqu’un an',
+    other: 'presque {{count}} ans'
+  }
+};
+
+var formatDistance$4 = function formatDistance(token, count, options) {
+  var result;
+  var form = formatDistanceLocale$2[token];
+
+  if (typeof form === 'string') {
+    result = form;
+  } else if (count === 1) {
+    result = form.one;
+  } else {
+    result = form.other.replace('{{count}}', String(count));
+  }
+
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return 'dans ' + result;
+    } else {
+      return 'il y a ' + result;
+    }
+  }
+
+  return result;
+};
+
+var formatDistance$5 = formatDistance$4;
+
+var dateFormats$2 = {
+  full: 'EEEE d MMMM y',
+  long: 'd MMMM y',
+  medium: 'd MMM y',
+  short: 'dd/MM/y'
+};
+var timeFormats$2 = {
+  full: 'HH:mm:ss zzzz',
+  long: 'HH:mm:ss z',
+  medium: 'HH:mm:ss',
+  short: 'HH:mm'
+};
+var dateTimeFormats$2 = {
+  full: "{{date}} 'à' {{time}}",
+  long: "{{date}} 'à' {{time}}",
+  medium: '{{date}}, {{time}}',
+  short: '{{date}}, {{time}}'
+};
+var formatLong$4 = {
+  date: buildFormatLongFn({
+    formats: dateFormats$2,
+    defaultWidth: 'full'
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats$2,
+    defaultWidth: 'full'
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats$2,
+    defaultWidth: 'full'
+  })
+};
+var formatLong$5 = formatLong$4;
+
+var formatRelativeLocale$2 = {
+  lastWeek: "eeee 'dernier à' p",
+  yesterday: "'hier à' p",
+  today: "'aujourd’hui à' p",
+  tomorrow: "'demain à' p'",
+  nextWeek: "eeee 'prochain à' p",
+  other: 'P'
+};
+
+var formatRelative$4 = function formatRelative(token, _date, _baseDate, _options) {
+  return formatRelativeLocale$2[token];
+};
+
+var formatRelative$5 = formatRelative$4;
+
+var eraValues$2 = {
+  narrow: ['av. J.-C', 'ap. J.-C'],
+  abbreviated: ['av. J.-C', 'ap. J.-C'],
+  wide: ['avant Jésus-Christ', 'après Jésus-Christ']
+};
+var quarterValues$2 = {
+  narrow: ['T1', 'T2', 'T3', 'T4'],
+  abbreviated: ['1er trim.', '2ème trim.', '3ème trim.', '4ème trim.'],
+  wide: ['1er trimestre', '2ème trimestre', '3ème trimestre', '4ème trimestre']
+};
+var monthValues$2 = {
+  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+  abbreviated: ['janv.', 'févr.', 'mars', 'avr.', 'mai', 'juin', 'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
+  wide: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre']
+};
+var dayValues$2 = {
+  narrow: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
+  short: ['di', 'lu', 'ma', 'me', 'je', 've', 'sa'],
+  abbreviated: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
+  wide: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi']
+};
+var dayPeriodValues$2 = {
+  narrow: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'minuit',
+    noon: 'midi',
+    morning: 'mat.',
+    afternoon: 'ap.m.',
+    evening: 'soir',
+    night: 'mat.'
+  },
+  abbreviated: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'minuit',
+    noon: 'midi',
+    morning: 'matin',
+    afternoon: 'après-midi',
+    evening: 'soir',
+    night: 'matin'
+  },
+  wide: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'minuit',
+    noon: 'midi',
+    morning: 'du matin',
+    afternoon: 'de l’après-midi',
+    evening: 'du soir',
+    night: 'du matin'
+  }
+};
+
+var ordinalNumber$2 = function ordinalNumber(dirtyNumber, options) {
+  var number = Number(dirtyNumber);
+  var unit = options === null || options === void 0 ? void 0 : options.unit;
+  if (number === 0) return '0';
+  var feminineUnits = ['year', 'week', 'hour', 'minute', 'second'];
+  var suffix;
+
+  if (number === 1) {
+    suffix = unit && feminineUnits.includes(unit) ? 'ère' : 'er';
+  } else {
+    suffix = 'ème';
+  }
+
+  return number + suffix;
+};
+
+var localize$4 = {
+  ordinalNumber: ordinalNumber$2,
+  era: buildLocalizeFn({
+    values: eraValues$2,
+    defaultWidth: 'wide'
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues$2,
+    defaultWidth: 'wide',
+    argumentCallback: function argumentCallback(quarter) {
+      return quarter - 1;
+    }
+  }),
+  month: buildLocalizeFn({
+    values: monthValues$2,
+    defaultWidth: 'wide'
+  }),
+  day: buildLocalizeFn({
+    values: dayValues$2,
+    defaultWidth: 'wide'
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues$2,
+    defaultWidth: 'wide'
+  })
+};
+var localize$5 = localize$4;
+
+var matchOrdinalNumberPattern$2 = /^(\d+)(ième|ère|ème|er|e)?/i;
+var parseOrdinalNumberPattern$2 = /\d+/i;
+var matchEraPatterns$2 = {
+  narrow: /^(av\.J\.C|ap\.J\.C|ap\.J\.-C)/i,
+  abbreviated: /^(av\.J\.-C|av\.J-C|apr\.J\.-C|apr\.J-C|ap\.J-C)/i,
+  wide: /^(avant Jésus-Christ|après Jésus-Christ)/i
+};
+var parseEraPatterns$2 = {
+  any: [/^av/i, /^ap/i]
+};
+var matchQuarterPatterns$2 = {
+  narrow: /^T?[1234]/i,
+  abbreviated: /^[1234](er|ème|e)? trim\.?/i,
+  wide: /^[1234](er|ème|e)? trimestre/i
+};
+var parseQuarterPatterns$2 = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns$2 = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(janv|févr|mars|avr|mai|juin|juill|juil|août|sept|oct|nov|déc)\.?/i,
+  wide: /^(janvier|février|mars|avril|mai|juin|juillet|août|septembre|octobre|novembre|décembre)/i
+};
+var parseMonthPatterns$2 = {
+  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
+  any: [/^ja/i, /^f/i, /^mar/i, /^av/i, /^ma/i, /^juin/i, /^juil/i, /^ao/i, /^s/i, /^o/i, /^n/i, /^d/i]
+};
+var matchDayPatterns$2 = {
+  narrow: /^[lmjvsd]/i,
+  short: /^(di|lu|ma|me|je|ve|sa)/i,
+  abbreviated: /^(dim|lun|mar|mer|jeu|ven|sam)\.?/i,
+  wide: /^(dimanche|lundi|mardi|mercredi|jeudi|vendredi|samedi)/i
+};
+var parseDayPatterns$2 = {
+  narrow: [/^d/i, /^l/i, /^m/i, /^m/i, /^j/i, /^v/i, /^s/i],
+  any: [/^di/i, /^lu/i, /^ma/i, /^me/i, /^je/i, /^ve/i, /^sa/i]
+};
+var matchDayPeriodPatterns$2 = {
+  narrow: /^(a|p|minuit|midi|mat\.?|ap\.?m\.?|soir|nuit)/i,
+  any: /^([ap]\.?\s?m\.?|du matin|de l'après[-\s]midi|du soir|de la nuit)/i
+};
+var parseDayPeriodPatterns$2 = {
+  any: {
+    am: /^a/i,
+    pm: /^p/i,
+    midnight: /^min/i,
+    noon: /^mid/i,
+    morning: /mat/i,
+    afternoon: /ap/i,
+    evening: /soir/i,
+    night: /nuit/i
+  }
+};
+var match$4 = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern$2,
+    parsePattern: parseOrdinalNumberPattern$2,
+    valueCallback: function valueCallback(value) {
+      return parseInt(value);
+    }
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns$2,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseEraPatterns$2,
+    defaultParseWidth: 'any'
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns$2,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseQuarterPatterns$2,
+    defaultParseWidth: 'any',
+    valueCallback: function valueCallback(index) {
+      return index + 1;
+    }
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns$2,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseMonthPatterns$2,
+    defaultParseWidth: 'any'
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns$2,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPatterns$2,
+    defaultParseWidth: 'any'
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns$2,
+    defaultMatchWidth: 'any',
+    parsePatterns: parseDayPeriodPatterns$2,
+    defaultParseWidth: 'any'
+  })
+};
+var match$5 = match$4;
+
+/**
+ * @type {Locale}
+ * @category Locales
+ * @summary French locale.
+ * @language French
+ * @iso-639-2 fra
+ * @author Jean Dupouy [@izeau]{@link https://github.com/izeau}
+ * @author François B [@fbonzon]{@link https://github.com/fbonzon}
+ */
+
+var locale$2 = {
+  code: 'fr',
+  formatDistance: formatDistance$5,
+  formatLong: formatLong$5,
+  formatRelative: formatRelative$5,
+  localize: localize$5,
+  match: match$5,
+  options: {
+    weekStartsOn: 1
+    /* Monday */
+    ,
+    firstWeekContainsDate: 4
+  }
+};
+var fr = locale$2;
+
+var formatDistanceLocale$1 = {
+  lessThanXSeconds: {
+    one: 'minder dan een seconde',
+    other: 'minder dan {{count}} seconden'
+  },
+  xSeconds: {
+    one: '1 seconde',
+    other: '{{count}} seconden'
+  },
+  halfAMinute: 'een halve minuut',
+  lessThanXMinutes: {
+    one: 'minder dan een minuut',
+    other: 'minder dan {{count}} minuten'
+  },
+  xMinutes: {
+    one: 'een minuut',
+    other: '{{count}} minuten'
+  },
+  aboutXHours: {
+    one: 'ongeveer 1 uur',
+    other: 'ongeveer {{count}} uur'
+  },
+  xHours: {
+    one: '1 uur',
+    other: '{{count}} uur'
+  },
+  xDays: {
+    one: '1 dag',
+    other: '{{count}} dagen'
+  },
+  aboutXWeeks: {
+    one: 'ongeveer 1 week',
+    other: 'ongeveer {{count}} weken'
+  },
+  xWeeks: {
+    one: '1 week',
+    other: '{{count}} weken'
+  },
+  aboutXMonths: {
+    one: 'ongeveer 1 maand',
+    other: 'ongeveer {{count}} maanden'
+  },
+  xMonths: {
+    one: '1 maand',
+    other: '{{count}} maanden'
+  },
+  aboutXYears: {
+    one: 'ongeveer 1 jaar',
+    other: 'ongeveer {{count}} jaar'
+  },
+  xYears: {
+    one: '1 jaar',
+    other: '{{count}} jaar'
+  },
+  overXYears: {
+    one: 'meer dan 1 jaar',
+    other: 'meer dan {{count}} jaar'
+  },
+  almostXYears: {
+    one: 'bijna 1 jaar',
+    other: 'bijna {{count}} jaar'
+  }
+};
+
+var formatDistance$2 = function formatDistance(token, count, options) {
+  var result;
+  var tokenValue = formatDistanceLocale$1[token];
+
+  if (typeof tokenValue === 'string') {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace('{{count}}', String(count));
+  }
+
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return 'over ' + result;
+    } else {
+      return result + ' geleden';
+    }
+  }
+
+  return result;
+};
+
+var formatDistance$3 = formatDistance$2;
+
+var dateFormats$1 = {
+  full: 'EEEE d MMMM y',
+  long: 'd MMMM y',
+  medium: 'd MMM y',
+  short: 'dd-MM-y'
+};
+var timeFormats$1 = {
+  full: 'HH:mm:ss zzzz',
+  long: 'HH:mm:ss z',
+  medium: 'HH:mm:ss',
+  short: 'HH:mm'
+};
+var dateTimeFormats$1 = {
+  full: "{{date}} 'om' {{time}}",
+  long: "{{date}} 'om' {{time}}",
+  medium: '{{date}}, {{time}}',
+  short: '{{date}}, {{time}}'
+};
+var formatLong$2 = {
+  date: buildFormatLongFn({
+    formats: dateFormats$1,
+    defaultWidth: 'full'
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats$1,
+    defaultWidth: 'full'
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats$1,
+    defaultWidth: 'full'
+  })
+};
+var formatLong$3 = formatLong$2;
+
+var formatRelativeLocale$1 = {
+  lastWeek: "'afgelopen' eeee 'om' p",
+  yesterday: "'gisteren om' p",
+  today: "'vandaag om' p",
+  tomorrow: "'morgen om' p",
+  nextWeek: "eeee 'om' p",
+  other: 'P'
+};
+
+var formatRelative$2 = function formatRelative(token, _date, _baseDate, _options) {
+  return formatRelativeLocale$1[token];
+};
+
+var formatRelative$3 = formatRelative$2;
+
+var eraValues$1 = {
+  narrow: ['v.C.', 'n.C.'],
+  abbreviated: ['v.Chr.', 'n.Chr.'],
+  wide: ['voor Christus', 'na Christus']
+};
+var quarterValues$1 = {
+  narrow: ['1', '2', '3', '4'],
+  abbreviated: ['K1', 'K2', 'K3', 'K4'],
+  wide: ['1e kwartaal', '2e kwartaal', '3e kwartaal', '4e kwartaal']
+};
+var monthValues$1 = {
+  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+  abbreviated: ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+  wide: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december']
+};
+var dayValues$1 = {
+  narrow: ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'],
+  short: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+  abbreviated: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
+  wide: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag']
+};
+var dayPeriodValues$1 = {
+  narrow: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'middernacht',
+    noon: 'het middaguur',
+    morning: "'s ochtends",
+    afternoon: "'s middags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  },
+  abbreviated: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'middernacht',
+    noon: 'het middaguur',
+    morning: "'s ochtends",
+    afternoon: "'s middags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  },
+  wide: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'middernacht',
+    noon: 'het middaguur',
+    morning: "'s ochtends",
+    afternoon: "'s middags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  }
+};
+
+var ordinalNumber$1 = function ordinalNumber(dirtyNumber, _options) {
+  var number = Number(dirtyNumber);
+  return number + 'e';
+};
+
+var localize$2 = {
+  ordinalNumber: ordinalNumber$1,
+  era: buildLocalizeFn({
+    values: eraValues$1,
+    defaultWidth: 'wide'
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues$1,
+    defaultWidth: 'wide',
+    argumentCallback: function argumentCallback(quarter) {
+      return quarter - 1;
+    }
+  }),
+  month: buildLocalizeFn({
+    values: monthValues$1,
+    defaultWidth: 'wide'
+  }),
+  day: buildLocalizeFn({
+    values: dayValues$1,
+    defaultWidth: 'wide'
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues$1,
+    defaultWidth: 'wide'
+  })
+};
+var localize$3 = localize$2;
+
+var matchOrdinalNumberPattern$1 = /^(\d+)e?/i;
+var parseOrdinalNumberPattern$1 = /\d+/i;
+var matchEraPatterns$1 = {
+  narrow: /^([vn]\.? ?C\.?)/,
+  abbreviated: /^([vn]\. ?Chr\.?)/,
+  wide: /^((voor|na) Christus)/
+};
+var parseEraPatterns$1 = {
+  any: [/^v/, /^n/]
+};
+var matchQuarterPatterns$1 = {
+  narrow: /^[1234]/i,
+  abbreviated: /^K[1234]/i,
+  wide: /^[1234]e kwartaal/i
+};
+var parseQuarterPatterns$1 = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns$1 = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan.|feb.|mrt.|apr.|mei|jun.|jul.|aug.|sep.|okt.|nov.|dec.)/i,
+  wide: /^(januari|februari|maart|april|mei|juni|juli|augustus|september|oktober|november|december)/i
+};
+var parseMonthPatterns$1 = {
+  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
+  any: [/^jan/i, /^feb/i, /^m(r|a)/i, /^apr/i, /^mei/i, /^jun/i, /^jul/i, /^aug/i, /^sep/i, /^okt/i, /^nov/i, /^dec/i]
+};
+var matchDayPatterns$1 = {
+  narrow: /^[zmdwv]/i,
+  short: /^(zo|ma|di|wo|do|vr|za)/i,
+  abbreviated: /^(zon|maa|din|woe|don|vri|zat)/i,
+  wide: /^(zondag|maandag|dinsdag|woensdag|donderdag|vrijdag|zaterdag)/i
+};
+var parseDayPatterns$1 = {
+  narrow: [/^z/i, /^m/i, /^d/i, /^w/i, /^d/i, /^v/i, /^z/i],
+  any: [/^zo/i, /^ma/i, /^di/i, /^wo/i, /^do/i, /^vr/i, /^za/i]
+};
+var matchDayPeriodPatterns$1 = {
+  any: /^(am|pm|middernacht|het middaguur|'s (ochtends|middags|avonds|nachts))/i
+};
+var parseDayPeriodPatterns$1 = {
+  any: {
+    am: /^am/i,
+    pm: /^pm/i,
+    midnight: /^middernacht/i,
+    noon: /^het middaguur/i,
+    morning: /ochtend/i,
+    afternoon: /middag/i,
+    evening: /avond/i,
+    night: /nacht/i
+  }
+};
+var match$2 = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern$1,
+    parsePattern: parseOrdinalNumberPattern$1,
+    valueCallback: function valueCallback(value) {
+      return parseInt(value, 10);
+    }
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseEraPatterns$1,
+    defaultParseWidth: 'any'
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseQuarterPatterns$1,
+    defaultParseWidth: 'any',
+    valueCallback: function valueCallback(index) {
+      return index + 1;
+    }
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseMonthPatterns$1,
+    defaultParseWidth: 'any'
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns$1,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPatterns$1,
+    defaultParseWidth: 'any'
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns$1,
+    defaultMatchWidth: 'any',
+    parsePatterns: parseDayPeriodPatterns$1,
+    defaultParseWidth: 'any'
+  })
+};
+var match$3 = match$2;
+
+/**
+ * @type {Locale}
+ * @category Locales
+ * @summary Dutch locale.
+ * @language Dutch
+ * @iso-639-2 nld
+ * @author Jorik Tangelder [@jtangelder]{@link https://github.com/jtangelder}
+ * @author Ruben Stolk [@rubenstolk]{@link https://github.com/rubenstolk}
+ * @author Lode Vanhove [@bitcrumb]{@link https://github.com/bitcrumb}
+ * @author Edo Rivai [@edorivai]{@link https://github.com/edorivai}
+ * @author Niels Keurentjes [@curry684]{@link https://github.com/curry684}
+ * @author Stefan Vermaas [@stefanvermaas]{@link https://github.com/stefanvermaas}
+ */
+
+var locale$1 = {
+  code: 'nl',
+  formatDistance: formatDistance$3,
+  formatLong: formatLong$3,
+  formatRelative: formatRelative$3,
+  localize: localize$3,
+  match: match$3,
+  options: {
+    weekStartsOn: 1
+    /* Monday */
+    ,
+    firstWeekContainsDate: 4
+  }
+};
+var nl = locale$1;
+
+var formatDistanceLocale = {
+  lessThanXSeconds: {
+    one: 'minder dan een seconde',
+    other: 'minder dan {{count}} seconden'
+  },
+  xSeconds: {
+    one: '1 seconde',
+    other: '{{count}} seconden'
+  },
+  halfAMinute: 'een halve minuut',
+  lessThanXMinutes: {
+    one: 'minder dan een minuut',
+    other: 'minder dan {{count}} minuten'
+  },
+  xMinutes: {
+    one: 'een minuut',
+    other: '{{count}} minuten'
+  },
+  aboutXHours: {
+    one: 'ongeveer 1 uur',
+    other: 'ongeveer {{count}} uur'
+  },
+  xHours: {
+    one: '1 uur',
+    other: '{{count}} uur'
+  },
+  xDays: {
+    one: '1 dag',
+    other: '{{count}} dagen'
+  },
+  aboutXWeeks: {
+    one: 'ongeveer 1 week',
+    other: 'ongeveer {{count}} weken'
+  },
+  xWeeks: {
+    one: '1 week',
+    other: '{{count}} weken'
+  },
+  aboutXMonths: {
+    one: 'ongeveer 1 maand',
+    other: 'ongeveer {{count}} maanden'
+  },
+  xMonths: {
+    one: '1 maand',
+    other: '{{count}} maanden'
+  },
+  aboutXYears: {
+    one: 'ongeveer 1 jaar',
+    other: 'ongeveer {{count}} jaar'
+  },
+  xYears: {
+    one: '1 jaar',
+    other: '{{count}} jaar'
+  },
+  overXYears: {
+    one: 'meer dan 1 jaar',
+    other: 'meer dan {{count}} jaar'
+  },
+  almostXYears: {
+    one: 'bijna 1 jaar',
+    other: 'bijna {{count}} jaar'
+  }
+};
+
+var formatDistance = function formatDistance(token, count, options) {
+  var result;
+  var tokenValue = formatDistanceLocale[token];
+
+  if (typeof tokenValue === 'string') {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace('{{count}}', String(count));
+  }
+
+  if (options !== null && options !== void 0 && options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return 'over ' + result;
+    } else {
+      return result + ' geleden';
+    }
+  }
+
+  return result;
+};
+
+var formatDistance$1 = formatDistance;
+
+var dateFormats = {
+  full: 'EEEE d MMMM y',
+  long: 'd MMMM y',
+  medium: 'd MMM y',
+  short: 'dd.MM.y'
+};
+var timeFormats = {
+  full: 'HH:mm:ss zzzz',
+  long: 'HH:mm:ss z',
+  medium: 'HH:mm:ss',
+  short: 'HH:mm'
+};
+var dateTimeFormats = {
+  full: "{{date}} 'om' {{time}}",
+  long: "{{date}} 'om' {{time}}",
+  medium: '{{date}}, {{time}}',
+  short: '{{date}}, {{time}}'
+};
+var formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: 'full'
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: 'full'
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: 'full'
+  })
+};
+var formatLong$1 = formatLong;
+
+var formatRelativeLocale = {
+  lastWeek: "'vorige' eeee 'om' p",
+  yesterday: "'gisteren om' p",
+  today: "'vandaag om' p",
+  tomorrow: "'morgen om' p",
+  nextWeek: "eeee 'om' p",
+  other: 'P'
+};
+
+var formatRelative = function formatRelative(token, _date, _baseDate, _options) {
+  return formatRelativeLocale[token];
+};
+
+var formatRelative$1 = formatRelative;
+
+var eraValues = {
+  narrow: ['v.C.', 'n.C.'],
+  abbreviated: ['v.Chr.', 'n.Chr.'],
+  wide: ['voor Christus', 'na Christus']
+};
+var quarterValues = {
+  narrow: ['1', '2', '3', '4'],
+  abbreviated: ['K1', 'K2', 'K3', 'K4'],
+  wide: ['1e kwartaal', '2e kwartaal', '3e kwartaal', '4e kwartaal']
+};
+var monthValues = {
+  narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+  abbreviated: ['jan.', 'feb.', 'mrt.', 'apr.', 'mei', 'jun.', 'jul.', 'aug.', 'sep.', 'okt.', 'nov.', 'dec.'],
+  wide: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december']
+};
+var dayValues = {
+  narrow: ['Z', 'M', 'D', 'W', 'D', 'V', 'Z'],
+  short: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
+  abbreviated: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
+  wide: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag']
+};
+var dayPeriodValues = {
+  narrow: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'middernacht',
+    noon: 'het middag',
+    morning: "'s ochtends",
+    afternoon: "'s namiddags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  },
+  abbreviated: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'middernacht',
+    noon: 'het middag',
+    morning: "'s ochtends",
+    afternoon: "'s namiddags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  },
+  wide: {
+    am: 'AM',
+    pm: 'PM',
+    midnight: 'middernacht',
+    noon: 'het middag',
+    morning: "'s ochtends",
+    afternoon: "'s namiddags",
+    evening: "'s avonds",
+    night: "'s nachts"
+  }
+};
+
+var ordinalNumber = function ordinalNumber(dirtyNumber, _options) {
+  var number = Number(dirtyNumber);
+  return number + 'e';
+};
+
+var localize = {
+  ordinalNumber: ordinalNumber,
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: 'wide'
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: 'wide',
+    argumentCallback: function argumentCallback(quarter) {
+      return quarter - 1;
+    }
+  }),
+  month: buildLocalizeFn({
+    values: monthValues,
+    defaultWidth: 'wide'
+  }),
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: 'wide'
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: 'wide'
+  })
+};
+var localize$1 = localize;
+
+var matchOrdinalNumberPattern = /^(\d+)e?/i;
+var parseOrdinalNumberPattern = /\d+/i;
+var matchEraPatterns = {
+  narrow: /^([vn]\.? ?C\.?)/,
+  abbreviated: /^([vn]\. ?Chr\.?)/,
+  wide: /^((voor|na) Christus)/
+};
+var parseEraPatterns = {
+  any: [/^v/, /^n/]
+};
+var matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^K[1234]/i,
+  wide: /^[1234]e kwartaal/i
+};
+var parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan.|feb.|mrt.|apr.|mei|jun.|jul.|aug.|sep.|okt.|nov.|dec.)/i,
+  wide: /^(januari|februari|maart|april|mei|juni|juli|augustus|september|oktober|november|december)/i
+};
+var parseMonthPatterns = {
+  narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i],
+  any: [/^jan/i, /^feb/i, /^m(r|a)/i, /^apr/i, /^mei/i, /^jun/i, /^jul/i, /^aug/i, /^sep/i, /^okt/i, /^nov/i, /^dec/i]
+};
+var matchDayPatterns = {
+  narrow: /^[zmdwv]/i,
+  short: /^(zo|ma|di|wo|do|vr|za)/i,
+  abbreviated: /^(zon|maa|din|woe|don|vri|zat)/i,
+  wide: /^(zondag|maandag|dinsdag|woensdag|donderdag|vrijdag|zaterdag)/i
+};
+var parseDayPatterns = {
+  narrow: [/^z/i, /^m/i, /^d/i, /^w/i, /^d/i, /^v/i, /^z/i],
+  any: [/^zo/i, /^ma/i, /^di/i, /^wo/i, /^do/i, /^vr/i, /^za/i]
+};
+var matchDayPeriodPatterns = {
+  any: /^(am|pm|middernacht|het middaguur|'s (ochtends|middags|avonds|nachts))/i
+};
+var parseDayPeriodPatterns = {
+  any: {
+    am: /^am/i,
+    pm: /^pm/i,
+    midnight: /^middernacht/i,
+    noon: /^het middaguur/i,
+    morning: /ochtend/i,
+    afternoon: /middag/i,
+    evening: /avond/i,
+    night: /nacht/i
+  }
+};
+var match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: function valueCallback(value) {
+      return parseInt(value, 10);
+    }
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: 'any'
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: 'any',
+    valueCallback: function valueCallback(index) {
+      return index + 1;
+    }
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: 'any'
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: 'wide',
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: 'any'
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: 'any',
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: 'any'
+  })
+};
+var match$1 = match;
+
+/**
+ * @type {Locale}
+ * @category Locales
+ * @summary Dutch locale.
+ * @language Dutch
+ * @iso-639-2 nld
+ * @author Jorik Tangelder [@jtangelder]{@link https://github.com/jtangelder}
+ * @author Ruben Stolk [@rubenstolk]{@link https://github.com/rubenstolk}
+ * @author Lode Vanhove [@bitcrumb]{@link https://github.com/bitcrumb}
+ * @author Alex Hoeing [@dcbn]{@link https://github.com/dcbn}
+ */
+
+var locale = {
+  code: 'nl-BE',
+  formatDistance: formatDistance$1,
+  formatLong: formatLong$1,
+  formatRelative: formatRelative$1,
+  localize: localize$1,
+  match: match$1,
+  options: {
+    weekStartsOn: 1
+    /* Monday */
+    ,
+    firstWeekContainsDate: 4
+  }
+};
+var nlBE = locale;
+
+var Period;
+(function (Period) {
+    Period["TODAY"] = "today";
+    Period["LAST_7_DAYS"] = "7d";
+    Period["LAST_30_DAYS"] = "30d";
+    Period["LAST_3_MONTHS"] = "90d";
+    Period["LAST_12_MONTHS"] = "1y";
+})(Period || (Period = {}));
+
+var getInterval = function (period) {
+    var start = undefined;
+    switch (period) {
+        case Period.TODAY:
+            start = startOfToday();
+            break;
+        case Period.LAST_7_DAYS:
+            start = startOfDay(subDays(new Date(), 7));
+            break;
         case Period.LAST_30_DAYS:
             start = startOfDay(subDays(new Date(), 30));
             break;
@@ -47818,8 +49161,10 @@ var tickFormatter = function (value, period, locale) {
     var _a;
     var dateFnsLocales = (_a = {},
         _a[enums.Locale.NL_NL] = nl,
-        _a[enums.Locale.NL_BE] = nl,
+        _a[enums.Locale.NL_BE] = nlBE,
         _a[enums.Locale.EN_GB] = enGB,
+        _a[enums.Locale.FR_FR] = fr,
+        _a[enums.Locale.DE_DE] = de,
         _a);
     var options = {
         locale: dateFnsLocales[locale],
@@ -47880,13 +49225,13 @@ var xAxis = {
     domain: ["dataMin", "dataMax"],
 };
 
-var Container$6 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject$1(["\n  padding: 10px 15px 6px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n  border-radius: 4px;\n  box-sizing: border-box;\n"], ["\n  padding: 10px 15px 6px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n  border-radius: 4px;\n  box-sizing: border-box;\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark);
-var Label$2 = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 15px;\n\n  > div:first-child {\n    display: flex;\n    gap: 10px;\n    align-items: baseline;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 15px;\n\n  > div:first-child {\n    display: flex;\n    gap: 10px;\n    align-items: baseline;\n  }\n"])));
-var Dot = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n  width: 10px;\n  min-width: 10px;\n  height: 10px;\n  min-height: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 10px;\n  min-width: 10px;\n  height: 10px;\n  min-height: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
+var Container$7 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n  padding: 10px 15px 6px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n  border-radius: 4px;\n  box-sizing: border-box;\n"], ["\n  padding: 10px 15px 6px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n  border-radius: 4px;\n  box-sizing: border-box;\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark);
+var Label$2 = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject$1(["\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 15px;\n\n  > div:first-child {\n    display: flex;\n    gap: 10px;\n    align-items: baseline;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  gap: 15px;\n\n  > div:first-child {\n    display: flex;\n    gap: 10px;\n    align-items: baseline;\n  }\n"])));
+var Dot = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n  width: 10px;\n  min-width: 10px;\n  height: 10px;\n  min-height: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"], ["\n  width: 10px;\n  min-width: 10px;\n  height: 10px;\n  min-height: 10px;\n  border-radius: 50%;\n  background-color: ", ";\n"])), function (_a) {
     var color = _a.color;
     return color;
 });
-var templateObject_1$9, templateObject_2$9, templateObject_3$6;
+var templateObject_1$a, templateObject_2$a, templateObject_3$7;
 
 var Tooltip = function (_a) {
     var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
@@ -47895,8 +49240,10 @@ var Tooltip = function (_a) {
             var _a, _b;
             var dateFnsLocales = (_a = {},
                 _a[enums.Locale.NL_NL] = nl,
-                _a[enums.Locale.NL_BE] = nl,
+                _a[enums.Locale.NL_BE] = nlBE,
                 _a[enums.Locale.EN_GB] = enGB,
+                _a[enums.Locale.FR_FR] = fr,
+                _a[enums.Locale.DE_DE] = de,
                 _a);
             var options = {
                 locale: dateFnsLocales[locale],
@@ -47910,6 +49257,8 @@ var Tooltip = function (_a) {
                         _b[enums.Locale.NL_NL] = "iiii, d MMMM",
                         _b[enums.Locale.NL_BE] = "iiii, d MMMM",
                         _b[enums.Locale.EN_GB] = "iiii, MMMM d",
+                        _b[enums.Locale.FR_FR] = "iiii d MMMM",
+                        _b[enums.Locale.DE_DE] = "iiii, d. MMMM",
                         _b);
                     return "".concat(format$1(fromUnixTime(label), formats[locale], options));
                 case Period.LAST_3_MONTHS:
@@ -47917,7 +49266,7 @@ var Tooltip = function (_a) {
                     return "".concat(format$1(fromUnixTime(label), "MMMM", options));
             }
         };
-        return (jsxs(Container$6, { children: [payload.map(function (_a, index) {
+        return (jsxs(Container$7, { children: [payload.map(function (_a, index) {
                     var name = _a.name, value = _a.value, stroke = _a.stroke;
                     return (jsxs(Label$2, { children: [jsxs("div", { children: [jsx$1(Dot, { color: stroke }), jsx$1(Paragraph, __assign$2({ size: "small" }, { children: translations[locale][name] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", color: "darkGray" }, { children: valueFormatter ? valueFormatter(parseInt("".concat(value))) : value }))] }, "".concat(name, "-").concat(value, "-").concat(index)));
                 }), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: renderLabel() }))] }));
@@ -48123,9 +49472,9 @@ var Chart = function (_a) {
                         }) }), period))] }))), renderChart()] }));
 };
 
-var Container$5 = styled.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(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$8, templateObject_2$8;
+var Container$6 = styled.div(templateObject_1$9 || (templateObject_1$9 = __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$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$9, templateObject_2$9;
 
 var TextareaField = function (props) {
     var onChange = function (value) {
@@ -48136,12 +49485,12 @@ var TextareaField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$5, { children: [jsx$1(Label$1, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
+    return (jsxs(Container$6, { children: [jsx$1(Label$1, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
 };
 
-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 = styled(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$7, templateObject_2$7;
+var Container$5 = styled.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 = 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$8, templateObject_2$8;
 
 var RangeField = function (props) {
     var onChange = function (value) {
@@ -48152,25 +49501,25 @@ var RangeField = function (props) {
         if (props.onBlur)
             props.onBlur(props.name);
     };
-    return (jsxs(Container$4, { children: [jsx$1(Label, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
+    return (jsxs(Container$5, { children: [jsx$1(Label, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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$6 || (templateObject_1$6 = __makeTemplateObject$1(["\n  input, textarea, select {\n    border-color: ", ";\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  input, textarea, select {\n    border-color: ", ";\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"])), function (_a) {
+var FieldWrapper = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject$1(["\n  input, textarea, select {\n    border-color: ", ";\n  }\n\n  :not(:last-child) {\n    margin-bottom: 20px;\n  }\n"], ["\n  input, textarea, 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$6 || (templateObject_2$6 = __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.div(templateObject_2$7 || (templateObject_2$7 = __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$6, templateObject_2$6;
+var templateObject_1$7, templateObject_2$7;
 
 var WithValidation = function (_a) {
     var status = _a.status, message = _a.message, children = _a.children;
@@ -48183,10 +49532,10 @@ var WithValidation = function (_a) {
     return (jsxs(FieldWrapper, __assign$2({ status: status }, { children: [children, jsxs(FeedbackWrapper, __assign$2({ status: status }, { children: [jsx$1(Icon, { type: icons[status], size: "small" }), jsx$1(Paragraph, __assign$2({ size: "small" }, { children: message }))] }))] })));
 };
 
-var FormWrapper = styled.form(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1([""], [""])));
-var DescriptionWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __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$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n  padding-top: 30px;\n"], ["\n  padding-top: 30px;\n"])));
-var templateObject_1$5, templateObject_2$5, templateObject_3$5;
+var FormWrapper = styled.form(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject$1([""], [""])));
+var DescriptionWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __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$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n  padding-top: 30px;\n"], ["\n  padding-top: 30px;\n"])));
+var templateObject_1$6, templateObject_2$6, templateObject_3$6;
 
 var Form = forwardRef(function (props, ref) {
     var _a = useState({}), values = _a[0], setValues = _a[1];
@@ -48415,11 +49764,224 @@ var Form = forwardRef(function (props, ref) {
                 }) })), props.button && (jsx$1(ButtonWrapper, { children: jsx$1(Button$1, __assign$2({}, props.button, { onClick: onSubmit, type: "button" })) }))] }));
 });
 
+var Container$4 = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject$1(["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
+var Row$1 = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject$1(["\n  min-height: 40px;\n  display: grid;\n  gap: 7px;\n"], ["\n  min-height: 40px;\n  display: grid;\n  gap: 7px;\n"])));
+var Row1$1 = styled(Row$1)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n  grid-template-columns: repeat(13, 1fr) 1.75fr;\n"], ["\n  grid-template-columns: repeat(13, 1fr) 1.75fr;\n"])));
+var Row2$1 = styled(Row$1)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject$1(["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n  > div:last-child {\n    border-radius: 6px 6px 0;\n  }\n"], ["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n  > div:last-child {\n    border-radius: 6px 6px 0;\n  }\n"])));
+var Row3$1 = styled(Row$1)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n  grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n  > div:last-child {\n    margin-top: -11px;\n    border-top: none;\n    border-radius: 0 0 6px 6px;\n  }\n"], ["\n  grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n  > div:last-child {\n    margin-top: -11px;\n    border-top: none;\n    border-radius: 0 0 6px 6px;\n  }\n"])));
+var Row4$1 = styled(Row$1)(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject$1(["\n  grid-template-columns: 1.5fr repeat(11, 1fr) 2.5fr;\n"], ["\n  grid-template-columns: 1.5fr repeat(11, 1fr) 2.5fr;\n"])));
+var Row5$1 = styled(Row$1)(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject$1(["\n  grid-template-columns: 1.75fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.85fr;\n"], ["\n  grid-template-columns: 1.75fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.85fr;\n"])));
+var Key$1 = styled.div(templateObject_8$2 || (templateObject_8$2 = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: ", ";\n\n  border: 1px solid;\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  padding: 0 10px;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", ";\n  border-color: ", ";\n\n  svg {\n    fill: ", ";\n    stroke: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: ", ";\n\n  border: 1px solid;\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  padding: 0 10px;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", ";\n  border-color: ", ";\n\n  svg {\n    fill: ", ";\n    stroke: ", ";\n  }\n"])), function (_a) {
+    var align = _a.align;
+    if (!align)
+        return "center";
+    else if (align === "left")
+        return "flex-start";
+    else
+        return "flex-end";
+}, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, function (_a) {
+    var color = _a.color, isActive = _a.isActive;
+    if (isActive && color)
+        return theme.colors[color].light;
+    else if (color)
+        return theme.colors.lightGray.light;
+    else
+        return theme.colors.lightGray.base;
+}, function (_a) {
+    var color = _a.color, isActive = _a.isActive;
+    if (isActive && color)
+        return theme.colors[color].darker;
+    else if (color)
+        return theme.colors[color].dark;
+    else
+        return theme.colors.lightGray.darker;
+}, function (_a) {
+    var color = _a.color, isActive = _a.isActive;
+    if (isActive)
+        return "0 2px 0 ".concat(theme.colors[color].dark);
+    else if (color)
+        return "0 2px 0 ".concat(theme.colors[color].base);
+    else
+        return "0 2px 0 ".concat(theme.colors.lightGray.darker);
+}, function (_a) {
+    var color = _a.color, isActive = _a.isActive;
+    if (isActive)
+        return theme.colors[color].dark;
+    else if (color)
+        return theme.colors[color].base;
+    else
+        return theme.colors.lightGray.darker;
+}, function (_a) {
+    var color = _a.color, isActive = _a.isActive;
+    if (isActive && color)
+        return theme.colors[color].darker;
+    else if (color)
+        return theme.colors[color].dark;
+    else
+        return theme.colors.lightGray.darker;
+}, function (_a) {
+    var color = _a.color, isActive = _a.isActive;
+    if (isActive && color)
+        return theme.colors[color].darker;
+    else if (color)
+        return theme.colors[color].dark;
+    else
+        return theme.colors.lightGray.darker;
+});
+var templateObject_1$5, templateObject_2$5, templateObject_3$5, templateObject_4$4, templateObject_5$3, templateObject_6$3, templateObject_7$2, templateObject_8$2;
+
+var ISOKeyboard = function (_a) {
+    var keys = _a.keys, shiftKeys = _a.shiftKeys, activeKeys = _a.activeKeys;
+    var containsAny = function (arr1, arr2) {
+        return arr1.some(function (v) { return arr2.includes(v); });
+    };
+    return (jsxs(Container$4, { children: [jsxs(Row1$1, { children: [jsx$1(Key$1, {}), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[91].character,
+                            keys[45].character,
+                        ]) }, { children: [keys[91].character, jsx$1("br", {}), keys[45].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[89].character,
+                            keys[43].character,
+                        ]) }, { children: [keys[89].character, jsx$1("br", {}), keys[43].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[87].character,
+                            keys[41].character,
+                        ]) }, { children: [keys[87].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[85].character,
+                            keys[39].character,
+                        ]) }, { children: [keys[85].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[83].character,
+                            keys[37].character,
+                        ]) }, { children: [keys[83].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[93].character,
+                            keys[47].character,
+                        ]) }, { children: [keys[93].character, jsx$1("br", {}), keys[47].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[92].character,
+                            keys[46].character,
+                        ]) }, { children: [keys[92].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[82].character,
+                            keys[36].character,
+                        ]) }, { children: [keys[82].character, jsx$1("br", {}), keys[36].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[84].character,
+                            keys[38].character,
+                        ]) }, { children: [keys[84].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[86].character,
+                            keys[40].character,
+                        ]) }, { children: [keys[86].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[88].character,
+                            keys[42].character,
+                        ]) }, { children: [keys[88].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[90].character,
+                            keys[44].character,
+                        ]) }, { children: [keys[90].character, jsx$1("br", {}), keys[44].character] })), jsx$1(Key$1, {})] }), jsxs(Row2$1, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[67].character,
+                            keys[21].character,
+                        ]) }, { children: keys[67].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[65].character,
+                            keys[19].character,
+                        ]) }, { children: keys[65].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[63].character,
+                            keys[17].character,
+                        ]) }, { children: keys[63].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[61].character,
+                            keys[15].character,
+                        ]) }, { children: keys[61].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[71].character,
+                            keys[25].character,
+                        ]) }, { children: keys[71].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[70].character,
+                            keys[24].character,
+                        ]) }, { children: keys[70].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[60].character,
+                            keys[14].character,
+                        ]) }, { children: keys[60].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[62].character,
+                            keys[16].character,
+                        ]) }, { children: keys[62].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[64].character,
+                            keys[18].character,
+                        ]) }, { children: keys[64].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[66].character,
+                            keys[20].character,
+                        ]) }, { children: keys[66].character })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[69].character,
+                            keys[23].character,
+                        ]) }, { children: [keys[69].character, jsx$1("br", {}), !["ğ", "q", "ü"].includes(keys[23].character) && keys[23].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[68].character,
+                            keys[22].character,
+                        ]) }, { children: [keys[68].character, jsx$1("br", {}), !["ü", "w"].includes(keys[22].character) && keys[22].character] })), jsx$1(Key$1, {})] }), jsxs(Row3$1, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[55].character,
+                            keys[9].character,
+                        ]) }, { children: keys[55].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[53].character,
+                            keys[7].character,
+                        ]) }, { children: keys[53].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[51].character,
+                            keys[5].character,
+                        ]) }, { children: keys[51].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[49].character,
+                            keys[3].character,
+                        ]) }, { children: keys[49].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[59].character,
+                            keys[13].character,
+                        ]) }, { children: keys[59].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[58].character,
+                            keys[12].character,
+                        ]) }, { children: keys[58].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[48].character,
+                            keys[2].character,
+                        ]) }, { children: keys[48].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[50].character,
+                            keys[4].character,
+                        ]) }, { children: keys[50].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[52].character,
+                            keys[6].character,
+                        ]) }, { children: keys[52].character })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[54].character,
+                            keys[8].character,
+                        ]) }, { children: [keys[54].character, jsx$1("br", {}), !["ş", "y", "ö", "m"].includes(keys[8].character) &&
+                                keys[8].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[56].character,
+                            keys[10].character,
+                        ]) }, { children: [keys[56].character, jsx$1("br", {}), !["i", "ş", "ä"].includes(keys[10].character) && keys[10].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[57].character,
+                            keys[11].character,
+                        ]) }, { children: [keys[57].character, jsx$1("br", {}), !["x"].includes(keys[11].character) && keys[11].character] })), jsx$1(Key$1, {})] }), jsxs(Row4$1, { children: [jsx$1(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, shiftKeys.right), align: "left" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) })), jsx$1(Key$1, {}), jsx$1(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[79].character,
+                            keys[33].character,
+                        ]) }, { children: keys[79].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[77].character,
+                            keys[31].character,
+                        ]) }, { children: keys[77].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[75].character,
+                            keys[29].character,
+                        ]) }, { children: keys[75].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[73].character,
+                            keys[27].character,
+                        ]) }, { children: keys[73].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[81].character,
+                            keys[35].character,
+                        ]) }, { children: keys[81].character })), jsx$1(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[80].character,
+                            keys[34].character,
+                        ]) }, { children: keys[80].character })), jsxs(Key$1, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
+                            keys[72].character,
+                            keys[26].character,
+                        ]) }, { children: [keys[72].character, jsx$1("br", {}), !["m", "s"].includes(keys[26].character) && keys[26].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
+                            keys[74].character,
+                            keys[28].character,
+                        ]) }, { children: [keys[74].character, jsx$1("br", {}), !["ö", "b"].includes(keys[28].character) && keys[28].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
+                            keys[76].character,
+                            keys[30].character,
+                        ]) }, { children: [keys[76].character, jsx$1("br", {}), !["ç"].includes(keys[30].character) && keys[30].character] })), jsxs(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[78].character,
+                            keys[32].character,
+                        ]) }, { children: [keys[78].character, jsx$1("br", {}), keys[32].character] })), jsx$1(Key$1, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, shiftKeys.left), align: "right" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) }))] }), jsxs(Row5$1, { children: [jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, __assign$2({ color: enums.Color.PINK, isActive: containsAny(activeKeys, [keys[1].character]) }, { children: jsx$1("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { children: jsx$1("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" }) })) })), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {}), jsx$1(Key$1, {})] })] }));
+};
+
 var Container$3 = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject$1(["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"], ["\n  min-width: 720px;\n  width: 100%;\n  border-radius: 10px;\n  padding: 15px;\n  box-sizing: border-box;\n  border: 1px solid ", ";\n  background-color: ", ";\n  box-shadow: 0 4px 0 ", ";\n\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.lightGray.darker);
 var Row = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject$1(["\n  min-height: 40px;\n  display: grid;\n  gap: 7px;\n"], ["\n  min-height: 40px;\n  display: grid;\n  gap: 7px;\n"])));
 var Row1 = styled(Row)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject$1(["\n  grid-template-columns: repeat(13, 1fr) 1.75fr;\n"], ["\n  grid-template-columns: repeat(13, 1fr) 1.75fr;\n"])));
-var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n  > div:last-child {\n    border-radius: 6px 6px 0;\n  }\n"], ["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n\n  > div:last-child {\n    border-radius: 6px 6px 0;\n  }\n"])));
-var Row3 = styled(Row)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n  grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n  > div:last-child {\n    margin-top: -11px;\n    border-top: none;\n    border-radius: 0 0 6px 6px;\n  }\n"], ["\n  grid-template-columns: 2fr repeat(12, 1fr) 0.75fr;\n\n  > div:last-child {\n    margin-top: -11px;\n    border-top: none;\n    border-radius: 0 0 6px 6px;\n  }\n"])));
+var Row2 = styled(Row)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n"], ["\n  grid-template-columns: 1.5fr repeat(12, 1fr) 1.25fr;\n"])));
+var Row3 = styled(Row)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n  grid-template-columns: 2fr repeat(11, 1fr) 2fr;\n"], ["\n  grid-template-columns: 2fr repeat(11, 1fr) 2fr;\n"])));
 var Row4 = styled(Row)(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n  grid-template-columns: 1.5fr repeat(11, 1fr) 2.5fr;\n"], ["\n  grid-template-columns: 1.5fr repeat(11, 1fr) 2.5fr;\n"])));
 var Row5 = styled(Row)(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject$1(["\n  grid-template-columns: 1.75fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.85fr;\n"], ["\n  grid-template-columns: 1.75fr repeat(3, 1fr) 6fr repeat(3, 1fr) 1.85fr;\n"])));
 var Key = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject$1(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: ", ";\n\n  border: 1px solid;\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  padding: 0 10px;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", ";\n  border-color: ", ";\n\n  svg {\n    fill: ", ";\n    stroke: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: ", ";\n\n  border: 1px solid;\n  border-radius: 6px;\n  box-sizing: border-box;\n  text-decoration: none;\n  padding: 0 10px;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", ";\n  border-color: ", ";\n\n  svg {\n    fill: ", ";\n    stroke: ", ";\n  }\n"])), function (_a) {
@@ -48481,168 +50043,179 @@ var Key = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateO
 });
 var templateObject_1$4, templateObject_2$4, templateObject_3$4, templateObject_4$3, templateObject_5$2, templateObject_6$2, templateObject_7$1, templateObject_8$1;
 
-var Keyboard = function (props) {
-    var _a = useState(), keys = _a[0], setKeys = _a[1];
-    var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
-    useEffect(function () {
-        if (!!props.keys) {
-            var keys_1 = {};
-            var shiftKeys_1 = { left: [], right: [] };
-            for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
-                var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
-                keys_1[index] = { character: key, color: color };
-                if (isShiftKey)
-                    shiftKeys_1[hand].push(key);
-            }
-            setKeys(keys_1);
-            setShiftKeys(shiftKeys_1);
-        }
-    }, [props.keys]);
+var ISANSIKeyboard = function (_a) {
+    var keys = _a.keys, shiftKeys = _a.shiftKeys, activeKeys = _a.activeKeys;
     var containsAny = function (arr1, arr2) {
         return arr1.some(function (v) { return arr2.includes(v); });
     };
-    if (!keys)
-        return jsx$1(Fragment$1, {});
-    return (jsxs(Container$3, { children: [jsxs(Row1, { children: [jsx$1(Key, {}), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+    return (jsxs(Container$3, { children: [jsxs(Row1, { children: [jsx$1(Key, {}), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[91].character,
                             keys[45].character,
-                        ]) }, { children: [keys[91].character, jsx$1("br", {}), keys[45].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[91].character, jsx$1("br", {}), keys[45].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[89].character,
                             keys[43].character,
-                        ]) }, { children: [keys[89].character, jsx$1("br", {}), keys[43].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[89].character, jsx$1("br", {}), keys[43].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[87].character,
                             keys[41].character,
-                        ]) }, { children: [keys[87].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[87].character, jsx$1("br", {}), keys[41].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[85].character,
                             keys[39].character,
-                        ]) }, { children: [keys[85].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[85].character, jsx$1("br", {}), keys[39].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[83].character,
                             keys[37].character,
-                        ]) }, { children: [keys[83].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[83].character, jsx$1("br", {}), keys[37].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[93].character,
                             keys[47].character,
-                        ]) }, { children: [keys[93].character, jsx$1("br", {}), keys[47].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[93].character, jsx$1("br", {}), keys[47].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[92].character,
                             keys[46].character,
-                        ]) }, { children: [keys[92].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[92].character, jsx$1("br", {}), keys[46].character] })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[82].character,
                             keys[36].character,
-                        ]) }, { children: [keys[82].character, jsx$1("br", {}), keys[36].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[82].character, jsx$1("br", {}), keys[36].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[84].character,
                             keys[38].character,
-                        ]) }, { children: [keys[84].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[84].character, jsx$1("br", {}), keys[38].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[86].character,
                             keys[40].character,
-                        ]) }, { children: [keys[86].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[86].character, jsx$1("br", {}), keys[40].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[88].character,
                             keys[42].character,
-                        ]) }, { children: [keys[88].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[88].character, jsx$1("br", {}), keys[42].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[90].character,
                             keys[44].character,
-                        ]) }, { children: [keys[90].character, jsx$1("br", {}), keys[44].character] })), jsx$1(Key, {})] }), jsxs(Row2, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[90].character, jsx$1("br", {}), keys[44].character] })), jsx$1(Key, {})] }), jsxs(Row2, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[67].character,
                             keys[21].character,
-                        ]) }, { children: keys[67].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[67].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[65].character,
                             keys[19].character,
-                        ]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[65].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[63].character,
                             keys[17].character,
-                        ]) }, { children: keys[63].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[63].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[61].character,
                             keys[15].character,
-                        ]) }, { children: keys[61].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[61].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[71].character,
                             keys[25].character,
-                        ]) }, { children: keys[71].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[71].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[70].character,
                             keys[24].character,
-                        ]) }, { children: keys[70].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[70].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[60].character,
                             keys[14].character,
-                        ]) }, { children: keys[60].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[60].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[62].character,
                             keys[16].character,
-                        ]) }, { children: keys[62].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[62].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[64].character,
                             keys[18].character,
-                        ]) }, { children: keys[64].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[64].character })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[66].character,
                             keys[20].character,
-                        ]) }, { children: keys[66].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[66].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[69].character,
                             keys[23].character,
-                        ]) }, { children: [keys[69].character, jsx$1("br", {}), !["ğ", "q", "ü"].includes(keys[23].character) && keys[23].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[69].character, jsx$1("br", {}), !["ğ", "q", "ü"].includes(keys[23].character) && keys[23].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[68].character,
                             keys[22].character,
-                        ]) }, { children: [keys[68].character, jsx$1("br", {}), !["ü", "w"].includes(keys[22].character) && keys[22].character] })), jsx$1(Key, {})] }), jsxs(Row3, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[68].character, jsx$1("br", {}), !["ü", "w"].includes(keys[22].character) && keys[22].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
+                            keys[57].character,
+                            keys[11].character,
+                        ]) }, { children: [keys[57].character, jsx$1("br", {}), !["x"].includes(keys[11].character) && keys[11].character] }))] }), jsxs(Row3, { children: [jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[55].character,
                             keys[9].character,
-                        ]) }, { children: keys[55].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[55].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[53].character,
                             keys[7].character,
-                        ]) }, { children: keys[53].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[53].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[51].character,
                             keys[5].character,
-                        ]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[51].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[49].character,
                             keys[3].character,
-                        ]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[49].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[59].character,
                             keys[13].character,
-                        ]) }, { children: keys[59].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[59].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[58].character,
                             keys[12].character,
-                        ]) }, { children: keys[58].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[58].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[48].character,
                             keys[2].character,
-                        ]) }, { children: keys[48].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[48].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[50].character,
                             keys[4].character,
-                        ]) }, { children: keys[50].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[50].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[52].character,
                             keys[6].character,
-                        ]) }, { children: keys[52].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[52].character })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[54].character,
                             keys[8].character,
                         ]) }, { children: [keys[54].character, jsx$1("br", {}), !["ş", "y", "ö", "m"].includes(keys[8].character) &&
-                                keys[8].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                                keys[8].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[56].character,
                             keys[10].character,
-                        ]) }, { children: [keys[56].character, jsx$1("br", {}), !["i", "ş", "ä"].includes(keys[10].character) && keys[10].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
-                            keys[57].character,
-                            keys[11].character,
-                        ]) }, { children: [keys[57].character, jsx$1("br", {}), !["x"].includes(keys[11].character) && keys[11].character] })), jsx$1(Key, {})] }), jsxs(Row4, { children: [jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.right), align: "left" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) })), jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[56].character, jsx$1("br", {}), !["i", "ş", "ä"].includes(keys[10].character) && keys[10].character] })), jsx$1(Key, {})] }), jsxs(Row4, { children: [jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, shiftKeys.right), align: "left" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) })), jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[79].character,
                             keys[33].character,
-                        ]) }, { children: keys[79].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[79].character })), jsx$1(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[77].character,
                             keys[31].character,
-                        ]) }, { children: keys[77].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[77].character })), jsx$1(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[75].character,
                             keys[29].character,
-                        ]) }, { children: keys[75].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[75].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[73].character,
                             keys[27].character,
-                        ]) }, { children: keys[73].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[73].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[81].character,
                             keys[35].character,
-                        ]) }, { children: keys[81].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[81].character })), jsx$1(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[80].character,
                             keys[34].character,
-                        ]) }, { children: keys[80].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: keys[80].character })), jsxs(Key, __assign$2({ color: enums.Color.YELLOW, isActive: containsAny(activeKeys, [
                             keys[72].character,
                             keys[26].character,
-                        ]) }, { children: [keys[72].character, jsx$1("br", {}), !["m", "s"].includes(keys[26].character) && keys[26].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[72].character, jsx$1("br", {}), !["m", "s"].includes(keys[26].character) && keys[26].character] })), jsxs(Key, __assign$2({ color: enums.Color.PURPLE, isActive: containsAny(activeKeys, [
                             keys[74].character,
                             keys[28].character,
-                        ]) }, { children: [keys[74].character, jsx$1("br", {}), !["ö", "b"].includes(keys[28].character) && keys[28].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[74].character, jsx$1("br", {}), !["ö", "b"].includes(keys[28].character) && keys[28].character] })), jsxs(Key, __assign$2({ color: enums.Color.GREEN, isActive: containsAny(activeKeys, [
                             keys[76].character,
                             keys[30].character,
-                        ]) }, { children: [keys[76].character, jsx$1("br", {}), !["ç"].includes(keys[30].character) && keys[30].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, [
+                        ]) }, { children: [keys[76].character, jsx$1("br", {}), !["ç"].includes(keys[30].character) && keys[30].character] })), jsxs(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, [
                             keys[78].character,
                             keys[32].character,
-                        ]) }, { children: [keys[78].character, jsx$1("br", {}), keys[32].character] })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(props.activeKeys, shiftKeys.left), align: "right" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) }))] }), jsxs(Row5, { children: [jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.PINK, isActive: containsAny(props.activeKeys, [keys[1].character]) }, { children: jsx$1("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { children: jsx$1("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" }) })) })), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {})] })] }));
+                        ]) }, { children: [keys[78].character, jsx$1("br", {}), keys[32].character] })), jsx$1(Key, __assign$2({ color: enums.Color.BLUE, isActive: containsAny(activeKeys, shiftKeys.left), align: "right" }, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 50 50", width: 20, height: 20 }, { children: jsx$1("path", { d: "M22.7202 6.39735C23.9548 5.08044 26.0452 5.08044 27.2798 6.39735L47.1107 27.5503C48.9818 29.5461 47.5666 32.8126 44.8309 32.8126H35.9375V42.1876C35.9375 43.9135 34.5384 45.3126 32.8125 45.3126H17.1875C15.4616 45.3126 14.0625 43.9135 14.0625 42.1876V32.8126H5.1691C2.43335 32.8126 1.0182 29.5461 2.8893 27.5503L22.7202 6.39735ZM44.8309 29.6876L25 8.53467L5.1691 29.6876H14.0625C15.7884 29.6876 17.1875 31.0867 17.1875 32.8126V42.1876H32.8125V32.8126C32.8125 31.0867 34.2116 29.6876 35.9375 29.6876L44.8309 29.6876Z" }) })) }))] }), jsxs(Row5, { children: [jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, __assign$2({ color: enums.Color.PINK, isActive: containsAny(activeKeys, [keys[1].character]) }, { children: jsx$1("svg", __assign$2({ width: "24", height: "6", viewBox: "0 0 28 7", style: { marginTop: 10 }, fill: theme.colors.pink.dark }, { children: jsx$1("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" }) })) })), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {}), jsx$1(Key, {})] })] }));
+};
+
+var Keyboard = function (props) {
+    var _a = useState(), keys = _a[0], setKeys = _a[1];
+    var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
+    useEffect(function () {
+        if (!!props.keys) {
+            var keys_1 = {};
+            var shiftKeys_1 = { left: [], right: [] };
+            for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
+                var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
+                keys_1[index] = { character: key, color: color };
+                if (isShiftKey)
+                    shiftKeys_1[hand].push(key);
+            }
+            setKeys(keys_1);
+            setShiftKeys(shiftKeys_1);
+        }
+    }, [props.keys]);
+    if (!keys)
+        return jsx$1(Fragment$1, {});
+    switch (props.variant) {
+        default:
+        case enums.KeyboardVariant.ISO:
+            return (jsx$1(ISOKeyboard, { keys: keys, shiftKeys: shiftKeys, activeKeys: props.activeKeys }));
+        case enums.KeyboardVariant.ISANSI:
+            return (jsx$1(ISANSIKeyboard, { keys: keys, shiftKeys: shiftKeys, activeKeys: props.activeKeys }));
+    }
 };
 
 var Mask = styled.div(templateObject_1$3 || (templateObject_1$3 = __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  overflow: auto;\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  overflow: auto;\n"])));
@@ -48851,5 +50424,5 @@ var Transfer = function (props) {
                             }) }) }, selectedTargetKeys)] }))] }));
 };
 
-export { Alert, Button$1 as Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Textarea, Toggle, ToggleField, Tooltip$2 as Tooltip, Transfer, Trophy, theme };
+export { Alert, Button$1 as Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$2 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Textarea, Toggle, ToggleField, Tooltip$2 as Tooltip, Transfer, Trophy, theme };
 //# sourceMappingURL=index.es.js.map