@typeolymp/ui-components 1.11.0 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.es.js CHANGED
@@ -3381,14 +3381,14 @@ Object.defineProperty(BeatLoader, "__esModule", { value: true });
3381
3381
  var React$2 = __importStar$2(React__default);
3382
3382
  var react_1 = require$$1;
3383
3383
  var helpers_1 = helpers$1;
3384
- var beat = react_1.keyframes(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"], ["\n 50% {transform: scale(0.75);opacity: 0.2}\n 100% {transform: scale(1);opacity: 1}\n"])));
3384
+ var beat = react_1.keyframes(templateObject_1$R || (templateObject_1$R = __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"])));
3385
3385
  var Loader = /** @class */ (function (_super) {
3386
3386
  __extends$1(Loader, _super);
3387
3387
  function Loader() {
3388
3388
  var _this = _super !== null && _super.apply(this, arguments) || this;
3389
3389
  _this.style = function (i) {
3390
3390
  var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
3391
- return react_1.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
3391
+ return react_1.css(templateObject_2$x || (templateObject_2$x = __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");
3392
3392
  };
3393
3393
  return _this;
3394
3394
  }
@@ -3403,9 +3403,9 @@ var Loader = /** @class */ (function (_super) {
3403
3403
  return Loader;
3404
3404
  }(React$2.PureComponent));
3405
3405
  var _default = BeatLoader.default = Loader;
3406
- var templateObject_1$P, templateObject_2$v;
3406
+ var templateObject_1$R, templateObject_2$x;
3407
3407
 
3408
- var StyledButton = styled.button(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
3408
+ var StyledButton = styled.button(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
3409
3409
  var fluid = _a.fluid;
3410
3410
  return (fluid ? "100%" : "fit-content");
3411
3411
  }, function (_a) {
@@ -3455,7 +3455,7 @@ var StyledButton = styled.button(templateObject_1$O || (templateObject_1$O = __m
3455
3455
  ? theme.button.medium.heightActive
3456
3456
  : theme.button[size].heightActive;
3457
3457
  });
3458
- var DisabledButton = styled(StyledButton)(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
3458
+ var DisabledButton = styled(StyledButton)(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
3459
3459
  var size = _a.size;
3460
3460
  return !size ? theme.button.medium.height : theme.button[size].height;
3461
3461
  });
@@ -3482,7 +3482,7 @@ var LoaderWrapper = styled.div(templateObject_4$8 || (templateObject_4$8 = __mak
3482
3482
  var size = _a.size;
3483
3483
  return (size === "small" ? "3px" : "");
3484
3484
  });
3485
- var templateObject_1$O, templateObject_2$u, templateObject_3$b, templateObject_4$8;
3485
+ var templateObject_1$Q, templateObject_2$w, templateObject_3$b, templateObject_4$8;
3486
3486
 
3487
3487
  var Button = forwardRef(function (_a, ref) {
3488
3488
  var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
@@ -3518,7 +3518,7 @@ var Button = forwardRef(function (_a, ref) {
3518
3518
  return (jsx$1(StyledButton, __assign$2({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsx$1(Loader, {}) : jsx$1("span", { children: label }) })));
3519
3519
  });
3520
3520
 
3521
- var StyledCheckbox = styled.div(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
3521
+ var StyledCheckbox = styled.div(templateObject_1$P || (templateObject_1$P = __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) {
3522
3522
  var checked = _a.checked, disabled = _a.disabled;
3523
3523
  if (disabled)
3524
3524
  return theme.colors.lightGray.darker;
@@ -3539,7 +3539,7 @@ var StyledCheckbox = styled.div(templateObject_1$N || (templateObject_1$N = __ma
3539
3539
  return theme.colors.green.base;
3540
3540
  return theme.colors.lightGray.darker;
3541
3541
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
3542
- var templateObject_1$N;
3542
+ var templateObject_1$P;
3543
3543
 
3544
3544
  var Checkbox = function (props) {
3545
3545
  var _a;
@@ -3572,7 +3572,7 @@ var Checkbox = function (props) {
3572
3572
  return (jsxs(StyledCheckbox, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsx$1("svg", __assign$2({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx$1("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }) }))), jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
3573
3573
  };
3574
3574
 
3575
- var Wrapper$9 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
3575
+ var Wrapper$9 = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
3576
3576
  var size = _a.size;
3577
3577
  switch (size) {
3578
3578
  case "small":
@@ -3595,7 +3595,7 @@ var Wrapper$9 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTem
3595
3595
  return "27px";
3596
3596
  }
3597
3597
  });
3598
- var templateObject_1$M;
3598
+ var templateObject_1$O;
3599
3599
 
3600
3600
  var parsers = {};
3601
3601
 
@@ -3863,7 +3863,7 @@ var flags = {
3863
3863
  };
3864
3864
  var Flag = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
3865
3865
 
3866
- var StyledHeading = styled.span(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
3866
+ var StyledHeading = styled.span(templateObject_1$N || (templateObject_1$N = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
3867
3867
  var type = _a.type;
3868
3868
  return theme.heading[type].fontSize;
3869
3869
  }, function (_a) {
@@ -3887,14 +3887,14 @@ var StyledHeading = styled.span(templateObject_1$L || (templateObject_1$L = __ma
3887
3887
  var align = _a.align;
3888
3888
  return align;
3889
3889
  });
3890
- var templateObject_1$L;
3890
+ var templateObject_1$N;
3891
3891
 
3892
3892
  var Heading = function (props) {
3893
3893
  var element = !!props.as ? props.as : props.type;
3894
3894
  return (jsx$1(StyledHeading, __assign$2({}, props, { as: element }, { children: props.children })));
3895
3895
  };
3896
3896
 
3897
- var Wrapper$8 = styled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
3897
+ var Wrapper$8 = styled.div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
3898
3898
  var size = _a.size;
3899
3899
  return theme.icon[size] || theme.icon.medium;
3900
3900
  }, function (_a) {
@@ -3924,7 +3924,7 @@ var Wrapper$8 = styled.div(templateObject_1$K || (templateObject_1$K = __makeTem
3924
3924
  return theme.colors.lightGray.light;
3925
3925
  }
3926
3926
  });
3927
- var templateObject_1$K;
3927
+ var templateObject_1$M;
3928
3928
 
3929
3929
  var icons = {
3930
3930
  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" })),
@@ -3954,7 +3954,7 @@ var icons = {
3954
3954
  };
3955
3955
  var Icon = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: jsx$1("svg", __assign$2({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
3956
3956
 
3957
- var Wrapper$7 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
3957
+ var Wrapper$7 = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject$1(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
3958
3958
  var size = _a.size;
3959
3959
  switch (size) {
3960
3960
  default:
@@ -3966,7 +3966,7 @@ var Wrapper$7 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTem
3966
3966
  return "118px";
3967
3967
  }
3968
3968
  });
3969
- var templateObject_1$J;
3969
+ var templateObject_1$L;
3970
3970
 
3971
3971
  var illustrations = {
3972
3972
  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" })] }))),
@@ -3979,17 +3979,18 @@ var illustrations = {
3979
3979
  lockOpen: (jsxs("svg", __assign$2({ viewBox: "0 0 294 483" }, { children: [jsx$1("path", { d: "M54.519 188.988a19.62 19.62 0 01-19.62-19.617v-57.75a111.53 111.53 0 0118.77-62.01 111.528 111.528 0 01171.674-16.9 19.638 19.638 0 11-27.773 27.773 72.3 72.3 0 00-122.774 51.137v58.412a19.615 19.615 0 01-20.277 18.955z", fill: "#C4C4C4" }), jsx$1("path", { d: "M269.832 190H23.574C10.68 190 .226 200.453.226 213.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V213.348c0-12.895-10.453-23.348-23.348-23.348z", fill: "#995E00" }), jsx$1("path", { d: "M269.832 169.846H23.574c-12.895 0-23.348 10.453-23.348 23.348v246.258c0 12.895 10.453 23.348 23.348 23.348h246.258c12.895 0 23.348-10.453 23.348-23.348V193.194c0-12.895-10.453-23.348-23.348-23.348z", fill: "#FF9D00" }), jsx$1("path", { d: "M196.267 289.42a49.555 49.555 0 00-19.381-39.505 49.566 49.566 0 00-43.177-8.512 48.68 48.68 0 00-21.591 12.213 48.682 48.682 0 00-12.766 21.267 47.796 47.796 0 0012.11 48.459 9.265 9.265 0 012.56 4.155 9.243 9.243 0 01.086 4.876l-14.977 53.304a5.952 5.952 0 001.017 5.154 5.943 5.943 0 004.711 2.335h83.917a5.945 5.945 0 005.727-7.269l-14.536-54.186a10.36 10.36 0 012.641-9.03 47.585 47.585 0 0013.659-33.261z", fill: "#000" })] }))),
3980
3980
  idCard: (jsxs("svg", __assign$2({ viewBox: "0 0 424 304" }, { children: [jsx$1("path", { d: "M0 82h424v182c0 22.091-17.909 40-40 40H40c-22.091 0-40-17.909-40-40V82z", fill: "#EDEDED" }), jsx$1("rect", { x: 242, y: 131, width: 149, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("rect", { x: 242, y: 179, width: 89, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("rect", { x: 242, y: 227, width: 119, height: 25, rx: 12.5, fill: "#23292F" }), jsx$1("path", { d: "M0 40C0 17.909 17.909 0 40 0h344c22.091 0 40 17.909 40 40v42H0V40z", fill: "#FF9D00" }), jsxs("g", __assign$2({ clipPath: "url(#clip0_894_47510)" }, { children: [jsx$1("path", { d: "M121 240c-18.778 0-34 15.457-34 34.523V304h68v-29.477C155 255.457 139.777 240 121 240z", fill: "#3DC478" }), jsx$1("path", { d: "M188.866 166.976a32.398 32.398 0 002.716-7.051c4.423-17.307-6.022-34.922-23.33-39.343a32.199 32.199 0 00-20.01 1.306c-3.93-8.569-11.549-15.357-21.394-17.873-14.776-3.777-29.77 3.288-36.594 16.204a32.826 32.826 0 00-2.518-.762c-17.307-4.423-34.923 6.021-39.346 23.328-2.335 9.138-.523 18.359 4.253 25.682a32.182 32.182 0 00-10.628 16.83c-4.423 17.306 6.022 34.922 23.33 39.343 14.077 3.598 28.358-2.642 35.577-14.409a32.237 32.237 0 0012.811 6.576c10.279 2.627 20.665.009 28.334-6.174 4.279 6.183 10.714 10.916 18.573 12.924 17.307 4.423 34.923-6.022 39.346-23.329 3.245-12.697-1.52-25.555-11.12-33.252z", fill: "#75301C" }), jsx$1("path", { d: "M129.851 228.557h-17.753v14.047a7.367 7.367 0 007.367 7.367h3.019a7.367 7.367 0 007.367-7.367v-14.047z", fill: "#FFB68D" }), jsx$1("path", { d: "M171.736 175.935c-.5 0-.987.052-1.464.134-5.422-22.108-25.36-38.514-49.141-38.514s-43.72 16.406-49.141 38.514a8.622 8.622 0 00-1.465-.134 8.606 8.606 0 100 17.213c.084 0 .164-.011.247-.013 2.501 25.61 24.09 45.625 50.359 45.625 26.268 0 47.858-20.015 50.359-45.625.082.002.163.013.246.013a8.606 8.606 0 008.607-8.607 8.606 8.606 0 00-8.607-8.606z", fill: "#FFB68D" }), jsx$1("path", { d: "M155.414 205.187c0-14.961-14.024-6.878-32.706-6.878-18.681 0-34.946-8.083-34.946 6.878 0 14.962 15.145 27.091 33.826 27.091s33.826-12.129 33.826-27.091z", fill: "#230F0B" }), jsx$1("path", { d: "M121.586 232.276c7.308 0 14.068-1.862 19.598-5.017-2.608-3.569-6.88-6.158-11.87-6.853a20.051 20.051 0 00-6.101.08 9.812 9.812 0 01-3.253 0 20.083 20.083 0 00-6.101-.08c-4.99.695-9.263 3.284-11.87 6.853 5.53 3.156 12.29 5.017 19.597 5.017z", fill: "#F21C40" }), jsx$1("path", { opacity: 0.37, d: "M126.804 188.238a5.217 5.217 0 10-10.434 0c0 2.881 2.336 3.523 5.217 3.523s5.217-.642 5.217-3.523z", fill: "#FFB68D" }), jsx$1("path", { d: "M94.656 157.686c-7.962 0-14.476 6.513-14.476 14.475v6.972c0 7.962 6.514 11.014 14.476 11.014 7.962 0 14.476-6.092 14.476-14.053v-3.933c.001-7.961-6.514-14.475-14.476-14.475z", fill: "#fff" }), jsx$1("path", { d: "M94.656 165.801a5.023 5.023 0 00-5.009 5.009v9.245c0 2.754 2.255 5.009 5.01 5.009 2.754 0 5.009-2.255 5.009-5.009v-9.245a5.023 5.023 0 00-5.01-5.009z", fill: "#23292F" }), jsx$1("path", { d: "M89.648 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053zM147.279 157.686c7.963 0 14.476 6.513 14.476 14.475v6.972c0 7.962-6.513 11.014-14.476 11.014-7.962 0-14.475-6.092-14.475-14.053v-3.933c0-7.961 6.513-14.475 14.475-14.475z", fill: "#fff" }), jsx$1("path", { d: "M147.28 165.801c2.754 0 5.009 2.253 5.009 5.009v9.245c0 2.754-2.255 5.009-5.009 5.009-2.755 0-5.009-2.255-5.009-5.009v-9.245a5.023 5.023 0 015.009-5.009z", fill: "#23292F" }), jsx$1("path", { d: "M152.288 173.92a3.027 3.027 0 100-6.053 3.027 3.027 0 000 6.053z", fill: "#fff" }), jsx$1("path", { d: "M148.11 130.102c-8.331 0-15.781 2.196-20.751 5.648a51.514 51.514 0 00-6.346-.392c-3.856 0-7.521.421-10.842 1.176-4.971-3.288-12.43-5.381-20.772-5.381-14.965 0-27.097 6.728-27.097 15.027s12.132 15.027 27.097 15.027c4.564 0 8.861-.628 12.634-1.734 4.889 2.493 11.588 4.032 18.981 4.032 6.294 0 12.081-1.117 16.681-2.987 3.208.781 6.725 1.213 10.418 1.213 14.965 0 27.097-7.081 27.097-15.816-.001-8.733-12.133-15.813-27.1-15.813z", fill: "#75301C" }), jsx$1("path", { opacity: 0.57, d: "M68.7 184.682l.589-.59a1.146 1.146 0 10-1.62-1.62l-.59.59-.59-.59a1.147 1.147 0 00-1.62 1.62l.59.59-.59.589a1.147 1.147 0 001.62 1.621l.589-.59.59.59a1.146 1.146 0 101.618-1.621l-.587-.589zM176.426 184.682l.589-.59a1.144 1.144 0 10-1.62-1.62l-.589.59-.59-.59a1.146 1.146 0 00-1.62 1.62l.589.59-.589.589a1.146 1.146 0 001.619 1.621l.589-.59.59.59a1.144 1.144 0 001.619 0 1.147 1.147 0 000-1.621l-.587-.589z", fill: "#FFB68D" })] })), jsx$1("defs", { children: jsx$1("clipPath", __assign$2({ id: "clip0_894_47510" }, { children: jsx$1("path", { fill: "#fff", transform: "translate(41 103)", d: "M0 0H160V201H0z" }) })) })] }))),
3981
3981
  cookie: (jsxs("svg", __assign$2({ viewBox: "0 0 867.3 871.1" }, { children: [jsx$1("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", fill: "#f49500" }), jsx$1("path", { d: "M576.6 301.2c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5 3.9-3.9 1.3-10.5-4.2-10.8-6.3-.3-12.6-.4-19-.4C189.5 24.8 0 214.2 0 447.9c0 233.7 189.5 423.2 423.2 423.2s423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1.1-171.9-74.8-173.1-168.8z", opacity: 0.2, fill: "#010202" }), jsx$1("path", { d: "M597.5 276.4c-.2-12.3 1-24.4 3.3-36 1.5-7.5-5.3-13.9-12.7-12.1-9.7 2.4-19.9 3.6-30.4 3.6-71.1 0-129.6-59.1-128.9-130.2.3-35.4 15-67.4 38.4-90.5C471.1 7.3 468.5.7 463 .4c-6.3-.3-12.6-.4-19-.4C210.4 0 20.9 189.5 20.9 423.2s189.5 423.2 423.2 423.2 423.2-189.5 423.2-423.2v-.1c0-3.8-4.3-6.1-7.5-4.1-25.9 16.3-56.4 25.9-89.2 26.3-94.1 1-171.9-74.9-173.1-168.9z", fill: "#f49500" }), jsxs("g", __assign$2({ fill: "#9e1827" }, { children: [jsx$1("circle", { cx: 277.7, cy: 259.3, r: 65 }), jsx$1("circle", { cx: 261.5, cy: 584.3, r: 81.2 }), jsx$1("circle", { cx: 624.3, cy: 543.8, r: 76.8 }), jsx$1("circle", { cx: 477, cy: 714.1, r: 32.9 }), jsx$1("circle", { cx: 415.3, cy: 443.9, r: 38.7 }), jsx$1("circle", { cx: 677.3, cy: 74.1, r: 33.1 }), jsx$1("circle", { cx: 838.9, cy: 192.3, r: 28.4 }), jsx$1("circle", { cx: 732.8, cy: 244.1, r: 51.9 })] }))] }))),
3982
+ classroom: (jsxs("svg", __assign$2({ viewBox: "0 0 165.4 116.8" }, { children: [jsx$1("path", { d: "M14.4 109.3c-3.8 0-6.9-3.1-6.9-6.9v-88c0-3.8 3.1-6.9 6.9-6.9H151c3.8 0 6.9 3.1 6.9 6.9v88c0 3.8-3.1 6.9-6.9 6.9H14.4z", fill: "#2d9d60" }), jsx$1("path", { d: "M150.4 15v86.8H15V15h135.4m.6-15H14.4C6.5 0 0 6.5 0 14.4v88c0 8 6.5 14.4 14.4 14.4H151c8 0 14.4-6.5 14.4-14.4v-88C165.4 6.5 159 0 151 0z", fill: "#FF9D00" }), jsx$1("path", { fill: "#c4c4c4", d: "M103.1 90.7H135.39999999999998V101.8H103.1z" }), jsx$1("g", { children: jsx$1("path", { d: "M82 81.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5H82c2.8 0 5 2.2 5 5s-2.2 5-5 5zM69.4 63H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h25.7c2.8 0 5 2.2 5 5s-2.2 5-5 5zM93.3 44.9H43.7c-2.8 0-5-2.2-5-5s2.2-5 5-5h49.6c2.8 0 5 2.2 5 5s-2.3 5-5 5z", fill: "#fff" }) })] }))),
3982
3983
  };
3983
3984
  var Illustration = function (props) { return (jsx$1(Wrapper$7, __assign$2({}, props, { children: illustrations[props.type] }))); };
3984
3985
 
3985
- var InputIconWrapper = styled.div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
3986
+ var InputIconWrapper = styled.div(templateObject_1$K || (templateObject_1$K = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
3986
3987
  var isChanged = _a.isChanged;
3987
3988
  return !isChanged ? theme.colors.lightGray.darker : "";
3988
3989
  }, function (_a) {
3989
3990
  var disabled = _a.disabled;
3990
3991
  return (disabled ? "not-allowed" : "pointer");
3991
3992
  });
3992
- var StyledInput = styled.input(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
3993
+ var StyledInput = styled.input(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
3993
3994
  var disabled = _a.disabled;
3994
3995
  return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
3995
3996
  }, function (_a) {
@@ -4002,7 +4003,7 @@ var StyledInput = styled.input(templateObject_2$t || (templateObject_2$t = __mak
4002
4003
  var disabled = _a.disabled;
4003
4004
  return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
4004
4005
  }, 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));
4005
- var templateObject_1$I, templateObject_2$t;
4006
+ var templateObject_1$K, templateObject_2$v;
4006
4007
 
4007
4008
  var PasswordInput = function (props) {
4008
4009
  var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
@@ -4182,7 +4183,7 @@ Input.Date = DateInput;
4182
4183
 
4183
4184
  var Logo = function (props) { return (jsxs("svg", __assign$2({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxs("g", { children: [jsx$1("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsx$1("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsx$1("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsx$1("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsx$1("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxs("g", __assign$2({ fill: "#23292f" }, { children: [jsx$1("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsx$1("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
4184
4185
 
4185
- var Wrapper$6 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
4186
+ var Wrapper$6 = styled.div(templateObject_1$J || (templateObject_1$J = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
4186
4187
  var size = _a.size;
4187
4188
  switch (size) {
4188
4189
  default:
@@ -4192,7 +4193,7 @@ var Wrapper$6 = styled.div(templateObject_1$H || (templateObject_1$H = __makeTem
4192
4193
  return "116px";
4193
4194
  }
4194
4195
  });
4195
- var templateObject_1$H;
4196
+ var templateObject_1$J;
4196
4197
 
4197
4198
  var medals = {
4198
4199
  small: {
@@ -4208,11 +4209,11 @@ var medals = {
4208
4209
  };
4209
4210
  var Medal = function (props) { return (jsx$1(Wrapper$6, __assign$2({}, props, { children: medals[props.size || "small"][props.type] }))); };
4210
4211
 
4211
- var Wrapper$5 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"])), function (_a) {
4212
+ var Wrapper$5 = styled.div(templateObject_1$I || (templateObject_1$I = __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) {
4212
4213
  var disabled = _a.disabled;
4213
4214
  return (disabled ? "49.5px" : "");
4214
4215
  });
4215
- var StyledInputNumber = styled.input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
4216
+ var StyledInputNumber = styled.input(templateObject_2$u || (templateObject_2$u = __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) {
4216
4217
  var disabled = _a.disabled;
4217
4218
  return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
4218
4219
  }, function (_a) {
@@ -4225,7 +4226,7 @@ var StyledInputNumber = styled.input(templateObject_2$s || (templateObject_2$s =
4225
4226
  var disabled = _a.disabled;
4226
4227
  return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
4227
4228
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
4228
- var templateObject_1$G, templateObject_2$s;
4229
+ var templateObject_1$I, templateObject_2$u;
4229
4230
 
4230
4231
  var Number$1 = function (props) {
4231
4232
  var inputRef = useRef(null);
@@ -4262,7 +4263,7 @@ var Number$1 = function (props) {
4262
4263
  return (jsxs(Wrapper$5, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsx$1(StyledInputNumber, __assign$2({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsx$1(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
4263
4264
  };
4264
4265
 
4265
- var StyledParagraph = styled.p(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
4266
+ var StyledParagraph = styled.p(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
4266
4267
  var size = _a.size;
4267
4268
  return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
4268
4269
  }, function (_a) {
@@ -4294,11 +4295,11 @@ var StyledParagraph = styled.p(templateObject_1$F || (templateObject_1$F = __mak
4294
4295
  var align = _a.align;
4295
4296
  return align;
4296
4297
  });
4297
- var templateObject_1$F;
4298
+ var templateObject_1$H;
4298
4299
 
4299
4300
  var Paragraph = function (props) { return (jsx$1(StyledParagraph, __assign$2({}, props, { children: props.children }))); };
4300
4301
 
4301
- var StyledRadio = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
4302
+ var StyledRadio = styled.div(templateObject_1$G || (templateObject_1$G = __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) {
4302
4303
  var checked = _a.checked, disabled = _a.disabled;
4303
4304
  if (disabled)
4304
4305
  return theme.colors.lightGray.darker;
@@ -4326,7 +4327,7 @@ var StyledRadio = styled.div(templateObject_1$E || (templateObject_1$E = __makeT
4326
4327
  return theme.colors.green.base;
4327
4328
  return "";
4328
4329
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
4329
- var templateObject_1$E;
4330
+ var templateObject_1$G;
4330
4331
 
4331
4332
  var Radio = function (props) {
4332
4333
  var _a, _b;
@@ -4358,7 +4359,7 @@ var Radio = function (props) {
4358
4359
  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 }) })));
4359
4360
  };
4360
4361
 
4361
- var StyledRange = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"], ["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
4362
+ var StyledRange = styled.div(templateObject_1$F || (templateObject_1$F = __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) {
4362
4363
  var value = _a.value, disabled = _a.disabled;
4363
4364
  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 )");
4364
4365
  }, function () { return theme.colors.lightGray.light; }, function (_a) {
@@ -4368,7 +4369,7 @@ var StyledRange = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
4368
4369
  var disabled = _a.disabled;
4369
4370
  return disabled ? "not-allowed" : "pointer";
4370
4371
  });
4371
- var templateObject_1$D;
4372
+ var templateObject_1$F;
4372
4373
 
4373
4374
  var Range = function (props) {
4374
4375
  var _a;
@@ -4397,11 +4398,11 @@ var Range = function (props) {
4397
4398
  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 }) })));
4398
4399
  };
4399
4400
 
4400
- var Wrapper$4 = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
4401
+ var Wrapper$4 = styled.div(templateObject_1$E || (templateObject_1$E = __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) {
4401
4402
  var disabled = _a.disabled;
4402
4403
  return (disabled ? "not-allowed" : "pointer");
4403
4404
  });
4404
- var StyledSelect = styled.select(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
4405
+ var StyledSelect = styled.select(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
4405
4406
  var disabled = _a.disabled;
4406
4407
  return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
4407
4408
  }, function (_a) {
@@ -4414,7 +4415,7 @@ var StyledSelect = styled.select(templateObject_2$r || (templateObject_2$r = __m
4414
4415
  var isChanged = _a.isChanged;
4415
4416
  return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
4416
4417
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
4417
- var templateObject_1$C, templateObject_2$r;
4418
+ var templateObject_1$E, templateObject_2$t;
4418
4419
 
4419
4420
  var Select = function (props) {
4420
4421
  var _a;
@@ -4436,18 +4437,18 @@ var Select = function (props) {
4436
4437
  return (jsxs(Wrapper$4, { 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] }))] }));
4437
4438
  };
4438
4439
 
4439
- var StyledSpacer = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
4440
+ var StyledSpacer = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
4440
4441
  var horizontal = _a.horizontal;
4441
4442
  return (horizontal ? "".concat(horizontal, "px") : "");
4442
4443
  }, function (_a) {
4443
4444
  var vertical = _a.vertical;
4444
4445
  return (vertical ? "".concat(vertical, "px") : "");
4445
4446
  });
4446
- var templateObject_1$B;
4447
+ var templateObject_1$D;
4447
4448
 
4448
4449
  var Spacer = function (props) { return (jsx$1(StyledSpacer, __assign$2({}, props))); };
4449
4450
 
4450
- var StyledSubheading = styled.p(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"], ["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
4451
+ var StyledSubheading = styled.p(templateObject_1$C || (templateObject_1$C = __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) {
4451
4452
  var size = _a.size;
4452
4453
  return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
4453
4454
  }, function (_a) {
@@ -4475,18 +4476,18 @@ var StyledSubheading = styled.p(templateObject_1$A || (templateObject_1$A = __ma
4475
4476
  return theme.colors.darkGray.dark;
4476
4477
  }
4477
4478
  });
4478
- var templateObject_1$A;
4479
+ var templateObject_1$C;
4479
4480
 
4480
4481
  var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
4481
4482
 
4482
- var Container$k = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
4483
- var templateObject_1$z;
4483
+ var Container$k = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
4484
+ var templateObject_1$B;
4484
4485
 
4485
4486
  var Tag = function (props) {
4486
4487
  return jsx$1(Container$k, { children: props.children });
4487
4488
  };
4488
4489
 
4489
- var Container$j = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
4490
+ var Container$j = styled.div(templateObject_1$A || (templateObject_1$A = __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) {
4490
4491
  var disabled = _a.disabled;
4491
4492
  return (disabled ? "not-allowed" : "pointer");
4492
4493
  }, function (_a) {
@@ -4504,7 +4505,7 @@ var Container$j = styled.div(templateObject_1$y || (templateObject_1$y = __makeT
4504
4505
  var disabled = _a.disabled;
4505
4506
  return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
4506
4507
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
4507
- var templateObject_1$y;
4508
+ var templateObject_1$A;
4508
4509
 
4509
4510
  var Toggle = function (props) {
4510
4511
  var _a;
@@ -4535,7 +4536,7 @@ var Toggle = function (props) {
4535
4536
  return (jsx$1(Container$j, __assign$2({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
4536
4537
  };
4537
4538
 
4538
- var Wrapper$3 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
4539
+ var Wrapper$3 = styled.div(templateObject_1$z || (templateObject_1$z = __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) {
4539
4540
  var level = _a.level;
4540
4541
  switch (level) {
4541
4542
  case 1:
@@ -4546,7 +4547,7 @@ var Wrapper$3 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTem
4546
4547
  return "70px";
4547
4548
  }
4548
4549
  });
4549
- var templateObject_1$x;
4550
+ var templateObject_1$z;
4550
4551
 
4551
4552
  var trophies = {
4552
4553
  1: {
@@ -4582,7 +4583,7 @@ var trophies = {
4582
4583
  };
4583
4584
  var Trophy = function (props) { return (jsx$1(Wrapper$3, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
4584
4585
 
4585
- var Container$i = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
4586
+ var Container$i = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
4586
4587
  var type = _a.type;
4587
4588
  switch (type) {
4588
4589
  case "success":
@@ -4599,11 +4600,11 @@ var Container$i = styled.div(templateObject_1$w || (templateObject_1$w = __makeT
4599
4600
  return theme.colors.red.base;
4600
4601
  }
4601
4602
  });
4602
- var templateObject_1$w;
4603
+ var templateObject_1$y;
4603
4604
 
4604
4605
  var Alert = function (props) { return (jsxs(Container$i, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, { children: props.message })] }))); };
4605
4606
 
4606
- var StyledCard = styled.div(templateObject_1$v || (templateObject_1$v = __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) {
4607
+ var StyledCard = styled.div(templateObject_1$x || (templateObject_1$x = __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) {
4607
4608
  var bordered = _a.bordered;
4608
4609
  return bordered ? "1px solid ".concat(theme.colors.lightGray.dark) : "none";
4609
4610
  }, function (_a) {
@@ -4615,23 +4616,23 @@ var StyledCard = styled.div(templateObject_1$v || (templateObject_1$v = __makeTe
4615
4616
  }, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
4616
4617
  : "";
4617
4618
  });
4618
- var Ellipse = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
4619
+ var Ellipse = styled.div(templateObject_2$s || (templateObject_2$s = __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) {
4619
4620
  var color = _a.color;
4620
4621
  return color ? theme.colors[color].light : "";
4621
4622
  });
4622
4623
  var Content = styled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
4623
- var templateObject_1$v, templateObject_2$q, templateObject_3$a;
4624
+ var templateObject_1$x, templateObject_2$s, templateObject_3$a;
4624
4625
 
4625
4626
  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 })] }))); };
4626
4627
 
4627
- var Fieldset$1 = styled.fieldset(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
4628
- var CheckboxContainer = styled.div(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
4628
+ var Fieldset$1 = styled.fieldset(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
4629
+ var CheckboxContainer = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
4629
4630
  var CheckboxWrapper = styled.div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
4630
4631
  var Label$9 = styled(StyledParagraph)(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
4631
4632
  var weight = _a.weight;
4632
4633
  return weight || 500;
4633
4634
  }, theme.colors.darkGray.base);
4634
- var templateObject_1$u, templateObject_2$p, templateObject_3$9, templateObject_4$7;
4635
+ var templateObject_1$w, templateObject_2$r, templateObject_3$9, templateObject_4$7;
4635
4636
 
4636
4637
  var Checkboxes = function (props) {
4637
4638
  var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
@@ -4654,12 +4655,12 @@ var Checkboxes = function (props) {
4654
4655
  }) })] }));
4655
4656
  };
4656
4657
 
4657
- var Container$h = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
4658
- var Item = styled.div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
4658
+ var Container$h = styled.div(templateObject_1$v || (templateObject_1$v = __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);
4659
+ var Item = styled.div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
4659
4660
  var isOpen = _a.isOpen;
4660
4661
  return (isOpen ? "" : "none");
4661
- }, theme.colors.lightGray.darker);
4662
- var templateObject_1$t, templateObject_2$o;
4662
+ }, theme.colors.lightGray.dark);
4663
+ var templateObject_1$v, templateObject_2$q;
4663
4664
 
4664
4665
  var Collapse = function (props) {
4665
4666
  var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
@@ -4677,9 +4678,9 @@ var Collapse = function (props) {
4677
4678
  }) })));
4678
4679
  };
4679
4680
 
4680
- var Container$g = 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"])));
4681
- var Label$8 = styled(StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
4682
- var templateObject_1$s, templateObject_2$n;
4681
+ var Container$g = styled.div(templateObject_1$u || (templateObject_1$u = __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"])));
4682
+ var Label$8 = 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);
4683
+ var templateObject_1$u, templateObject_2$p;
4683
4684
 
4684
4685
  var DateInputField = function (props) {
4685
4686
  var onChange = function (value) {
@@ -4693,9 +4694,9 @@ var DateInputField = function (props) {
4693
4694
  return (jsxs(Container$g, { children: [jsx$1(Label$8, __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 })] }));
4694
4695
  };
4695
4696
 
4696
- var StyledIconButton = styled(StyledButton)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"])));
4697
- var GhostIconButton = styled(GhostButton)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
4698
- var templateObject_1$r, templateObject_2$m;
4697
+ var StyledIconButton = styled(StyledButton)(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"])));
4698
+ var GhostIconButton = styled(GhostButton)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
4699
+ var templateObject_1$t, templateObject_2$o;
4699
4700
 
4700
4701
  var IconButton = function (props) {
4701
4702
  if (props.color === "white")
@@ -4703,9 +4704,9 @@ var IconButton = function (props) {
4703
4704
  return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: "small", color: "white" }) })));
4704
4705
  };
4705
4706
 
4706
- var Container$f = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
4707
- var Label$7 = 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);
4708
- var templateObject_1$q, templateObject_2$l;
4707
+ 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"])));
4708
+ var Label$7 = styled(StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
4709
+ var templateObject_1$s, templateObject_2$n;
4709
4710
 
4710
4711
  var InputField = function (props) {
4711
4712
  var onChange = function (value) {
@@ -4719,7 +4720,7 @@ var InputField = function (props) {
4719
4720
  return (jsxs(Container$f, { children: [jsx$1(Label$7, __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))); })] })))] }));
4720
4721
  };
4721
4722
 
4722
- var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
4723
+ var Container$e = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
4723
4724
  var status = _a.status, color = _a.color;
4724
4725
  switch (status) {
4725
4726
  case "passed":
@@ -4763,23 +4764,23 @@ var Container$e = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
4763
4764
  return theme.colors.darkGray.light;
4764
4765
  }
4765
4766
  });
4766
- var CheckIconWrapper = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
4767
- var templateObject_1$p, templateObject_2$k;
4767
+ var CheckIconWrapper = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
4768
+ var templateObject_1$r, templateObject_2$m;
4768
4769
 
4769
4770
  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: {
4770
4771
  marginTop: "13px",
4771
4772
  transform: "scale(2)",
4772
4773
  } }, { 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 })))] }))); };
4773
4774
 
4774
- var Wrapper$2 = styled.a(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
4775
+ 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-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
4775
4776
  var chevron = _a.chevron;
4776
4777
  return (chevron === "left" ? "4px" : "");
4777
4778
  }, function (_a) {
4778
4779
  var chevron = _a.chevron;
4779
4780
  return (chevron === "right" ? "4px" : "");
4780
4781
  });
4781
- var StyledLink = styled(StyledParagraph)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
4782
- var templateObject_1$o, templateObject_2$j;
4782
+ var StyledLink = styled(StyledParagraph)(templateObject_2$l || (templateObject_2$l = __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);
4783
+ var templateObject_1$q, templateObject_2$l;
4783
4784
 
4784
4785
  var Link = function (props) {
4785
4786
  var onClick = function (e) {
@@ -4791,15 +4792,15 @@ var Link = function (props) {
4791
4792
  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" }))] })));
4792
4793
  };
4793
4794
 
4794
- var Container$d = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
4795
+ 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) {
4795
4796
  var text = _a.text;
4796
4797
  return (text ? "20px" : "");
4797
4798
  });
4798
- var templateObject_1$n;
4799
+ var templateObject_1$p;
4799
4800
 
4800
4801
  var Loading = function (props) { return (jsxs(Container$d, __assign$2({}, props, { children: [jsx$1(_default, { 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 }))] }))] }))); };
4801
4802
 
4802
- var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject$1(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
4803
+ var Container$c = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
4803
4804
  var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
4804
4805
  if (dropdownIsVisible) {
4805
4806
  switch (color) {
@@ -4812,7 +4813,7 @@ var Container$c = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
4812
4813
  }
4813
4814
  return "";
4814
4815
  });
4815
- var SelectedLocaleWrapper = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
4816
+ var SelectedLocaleWrapper = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
4816
4817
  var DropdownContainer = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject$1(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
4817
4818
  var color = _a.color;
4818
4819
  switch (color) {
@@ -4824,7 +4825,7 @@ var DropdownContainer = styled.div(templateObject_3$8 || (templateObject_3$8 = _
4824
4825
  }
4825
4826
  });
4826
4827
  var LocaleWrapper = styled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
4827
- var templateObject_1$m, templateObject_2$i, templateObject_3$8, templateObject_4$6;
4828
+ var templateObject_1$o, templateObject_2$k, templateObject_3$8, templateObject_4$6;
4828
4829
 
4829
4830
  var LocaleSelect = function (props) {
4830
4831
  var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
@@ -4838,17 +4839,17 @@ var LocaleSelect = function (props) {
4838
4839
  .map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
4839
4840
  };
4840
4841
 
4841
- var Wrapper$1 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
4842
- var templateObject_1$l;
4842
+ 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"])));
4843
+ var templateObject_1$n;
4843
4844
 
4844
4845
  var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: Medal$1.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
4845
4846
 
4846
- var NotificationContainer = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"], ["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"])), function (_a) {
4847
+ 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) {
4847
4848
  var contrast = _a.contrast;
4848
4849
  return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
4849
4850
  });
4850
- var ButtonContainer = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"])));
4851
- var templateObject_1$k, templateObject_2$h;
4851
+ var ButtonContainer = styled.div(templateObject_2$j || (templateObject_2$j = __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"])));
4852
+ var templateObject_1$m, templateObject_2$j;
4852
4853
 
4853
4854
  var Notification = function (props) {
4854
4855
  if (!props.isVisible)
@@ -4856,9 +4857,9 @@ var Notification = function (props) {
4856
4857
  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, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
4857
4858
  };
4858
4859
 
4859
- var Container$b = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
4860
- var Label$6 = styled(StyledParagraph)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
4861
- var templateObject_1$j, templateObject_2$g;
4860
+ var Container$b = 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"])));
4861
+ var Label$6 = styled(StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
4862
+ var templateObject_1$l, templateObject_2$i;
4862
4863
 
4863
4864
  var NumberField = function (props) {
4864
4865
  var onChange = function (value) {
@@ -4913,15 +4914,15 @@ var isStrongPassword = function (password) {
4913
4914
  exports.isStrongPassword = isStrongPassword;
4914
4915
  }(expressions));
4915
4916
 
4916
- var Container$a = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
4917
- var Label$5 = styled(StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
4917
+ var Container$a = 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"])));
4918
+ var Label$5 = styled(StyledParagraph)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
4918
4919
  var HelperContainer = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
4919
4920
  var fadeIn = keyframes$1(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
4920
4921
  var Helper = styled(StyledParagraph)(templateObject_5$3 || (templateObject_5$3 = __makeTemplateObject$1(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
4921
4922
  var isOk = _a.isOk;
4922
4923
  return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
4923
4924
  }, fadeIn);
4924
- var templateObject_1$i, templateObject_2$f, templateObject_3$7, templateObject_4$5, templateObject_5$3;
4925
+ var templateObject_1$k, templateObject_2$h, templateObject_3$7, templateObject_4$5, templateObject_5$3;
4925
4926
 
4926
4927
  var translations = {
4927
4928
  "nl-NL": {
@@ -4991,7 +4992,7 @@ var generateRandomString = function (length) {
4991
4992
  return string;
4992
4993
  };
4993
4994
 
4994
- var PopupContainer = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
4995
+ 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 background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
4995
4996
  var isVisible = _a.isVisible;
4996
4997
  return (isVisible ? "100%" : "0%");
4997
4998
  }, function (_a) {
@@ -5004,7 +5005,7 @@ var PopupContainer = styled.div(templateObject_1$h || (templateObject_1$h = __ma
5004
5005
  var contrast = _a.contrast;
5005
5006
  return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
5006
5007
  });
5007
- var templateObject_1$h;
5008
+ var templateObject_1$j;
5008
5009
 
5009
5010
  var Popup = function (props) {
5010
5011
  var popupRef = useRef(null);
@@ -5040,8 +5041,8 @@ var Popup = function (props) {
5040
5041
  return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsx$1(Spacer, { vertical: 10 })] })), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
5041
5042
  };
5042
5043
 
5043
- var Wrapper = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
5044
- var StyledProgressBar = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
5044
+ 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"])));
5045
+ var StyledProgressBar = styled.div(templateObject_2$g || (templateObject_2$g = __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) {
5045
5046
  var showInfo = _a.showInfo;
5046
5047
  return (showInfo ? "10px" : "");
5047
5048
  });
@@ -5052,12 +5053,12 @@ var Indicator$1 = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeT
5052
5053
  var color = _a.color;
5053
5054
  return color ? theme.colors[color].base : theme.colors.green.base;
5054
5055
  });
5055
- var templateObject_1$g, templateObject_2$e, templateObject_3$6;
5056
+ var templateObject_1$i, templateObject_2$g, templateObject_3$6;
5056
5057
 
5057
5058
  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, "%") })))] })); };
5058
5059
 
5059
- var Container$9 = styled.ol(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
5060
- var Step$1 = styled.li(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
5060
+ var Container$9 = styled.ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
5061
+ var Step$1 = styled.li(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
5061
5062
  var status = _a.status;
5062
5063
  return (!!status ? "pointer" : "not-allowed");
5063
5064
  }, function (_a) {
@@ -5079,7 +5080,7 @@ var Step$1 = styled.li(templateObject_2$d || (templateObject_2$d = __makeTemplat
5079
5080
  var hasTitle = _a.hasTitle;
5080
5081
  return (hasTitle ? "calc(50% - 12px)" : "50%");
5081
5082
  }, theme.colors.lightGray.dark);
5082
- var templateObject_1$f, templateObject_2$d;
5083
+ var templateObject_1$h, templateObject_2$f;
5083
5084
 
5084
5085
  var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.steps.map(function (_a, index) {
5085
5086
  var title = _a.title, onClick = _a.onClick;
@@ -5096,8 +5097,8 @@ var Steps$2 = function (props) { return (jsx$1(Container$9, { children: props.st
5096
5097
  return (jsxs(Step$1, __assign$2({ status: status, hasTitle: !!title }, { children: [jsx$1("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
5097
5098
  }) })); };
5098
5099
 
5099
- var Container$8 = styled.ol(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
5100
- var Step = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
5100
+ var Container$8 = 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"])));
5101
+ var Step = styled.li(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
5101
5102
  var status = _a.status;
5102
5103
  return (!!status ? "pointer" : "not-allowed");
5103
5104
  }, function (_a) {
@@ -5116,7 +5117,7 @@ var Step = styled.li(templateObject_2$c || (templateObject_2$c = __makeTemplateO
5116
5117
  ? theme.colors.lightGray.light
5117
5118
  : theme.colors.darkGray.light;
5118
5119
  }, theme.colors.darkGray.base, theme.colors.lightGray.base);
5119
- var templateObject_1$e, templateObject_2$c;
5120
+ var templateObject_1$g, templateObject_2$e;
5120
5121
 
5121
5122
  var Steps$1 = function (props) { return (jsx$1(Container$8, { children: props.steps.map(function (_a, index) {
5122
5123
  var title = _a.title, onClick = _a.onClick;
@@ -5137,6 +5138,56 @@ var Steps = function (props) {
5137
5138
  return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
5138
5139
  };
5139
5140
 
5141
+ 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);
5142
+ var Tab$1 = styled.div(templateObject_2$d || (templateObject_2$d = __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) {
5143
+ var isActive = _a.isActive;
5144
+ return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
5145
+ }, function (_a) {
5146
+ var isActive = _a.isActive;
5147
+ return isActive ? theme.colors.blue.base : "";
5148
+ }, theme.colors.blue.base);
5149
+ var templateObject_1$f, templateObject_2$d;
5150
+
5151
+ var Tabs$2 = function (props) {
5152
+ var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
5153
+ var onChangeTab = function (key) {
5154
+ setActiveTab(key);
5155
+ if (props.onChange)
5156
+ props.onChange(key);
5157
+ };
5158
+ return (jsx$1(TabsContainer$1, { children: props.items.map(function (_a) {
5159
+ var key = _a.key, label = _a.label;
5160
+ return (jsx$1(Tab$1, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsx$1(Paragraph, { children: label }) }), key));
5161
+ }) }));
5162
+ };
5163
+
5164
+ 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);
5165
+ var Tab = styled.div(templateObject_2$c || (templateObject_2$c = __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) {
5166
+ var isActive = _a.isActive;
5167
+ return (isActive ? "block" : "none");
5168
+ }, theme.colors.blue.base, function (_a) {
5169
+ var isActive = _a.isActive;
5170
+ return isActive ? theme.colors.blue.base : "";
5171
+ }, theme.colors.blue.base);
5172
+ var templateObject_1$e, templateObject_2$c;
5173
+
5174
+ var Tabs$1 = function (props) {
5175
+ var _a = useState(props.items[0].key), activeTab = _a[0], setActiveTab = _a[1];
5176
+ var onChangeTab = function (key) {
5177
+ setActiveTab(key);
5178
+ if (props.onChange)
5179
+ props.onChange(key);
5180
+ };
5181
+ return (jsx$1(TabsContainer, { children: props.items.map(function (_a) {
5182
+ var key = _a.key, label = _a.label;
5183
+ return (jsx$1(Tab, __assign$2({ onClick: function () { return onChangeTab(key); }, isActive: key === activeTab }, { children: jsx$1(Paragraph, { children: label }) }), key));
5184
+ }) }));
5185
+ };
5186
+
5187
+ var Tabs = function (props) {
5188
+ return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
5189
+ };
5190
+
5140
5191
  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"])));
5141
5192
  var RadioContainer = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
5142
5193
  var RadioWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
@@ -11373,8 +11424,8 @@ var SpecialRow = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTe
11373
11424
  var TopRow = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 50px;\n max-width: 50px;\n }\n"])));
11374
11425
  var StartRow = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 70px;\n max-width: 70px;\n }\n > div:last-child {\n min-width: 65px;\n max-width: 65px;\n }\n"])));
11375
11426
  var BottomRow = styled.div(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 90px;\n max-width: 90px;\n }\n"])));
11376
- var SpacebarRow = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"])));
11377
- var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$1;
11427
+ var SpacebarRow = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 70px;\n max-width: 70px;\n }\n\n > div:nth-child(5) {\n min-width: 220px;\n max-width: 220px;\n }\n"])));
11428
+ var templateObject_1$3, templateObject_2$3, templateObject_3$3, templateObject_4$3, templateObject_5$2, templateObject_6$2;
11378
11429
 
11379
11430
  var Keyboard = function (props) {
11380
11431
  var _a = useState(), keys = _a[0], setKeys = _a[1];
@@ -11447,27 +11498,33 @@ var Keyboard = function (props) {
11447
11498
  };
11448
11499
 
11449
11500
  var Mask = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject$1(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
11450
- var CardWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n\n > div:first-child {\n padding-top: 30px;\n }\n"], ["\n width: ", ";\n\n > div:first-child {\n padding-top: 30px;\n }\n"])), function (_a) {
11501
+ var CardWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject$1(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
11451
11502
  var width = _a.width;
11452
- return (width ? "".concat(width, "px") : "720px");
11503
+ if (!width)
11504
+ return "720px";
11505
+ if (typeof width === "number")
11506
+ return "".concat(width, "px");
11507
+ return width;
11453
11508
  });
11454
- var CloseIconWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: -10px;\n right: 20px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: -10px;\n right: 20px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"])), theme.colors.darkGray.base);
11455
- var ChildrenWrapper = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
11456
- var FooterContainer = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
11457
- var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1;
11509
+ var TitleWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject$1(["\n margin: 0 25px 20px 0;\n"], ["\n margin: 0 25px 20px 0;\n"])));
11510
+ var CloseIconWrapper = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject$1(["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n position: absolute;\n top: 20px;\n right: 20px;\n\n svg {\n cursor: pointer;\n\n :hover {\n fill: ", ";\n }\n }\n"])), theme.colors.darkGray.base);
11511
+ var ChildrenWrapper = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject$1(["\n padding: 20px 35px;\n"], ["\n padding: 20px 35px;\n"])));
11512
+ var FooterContainer = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject$1(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n background-color: ", ";\n border-top: 1px solid ", ";\n margin: 15px -15px -15px;\n padding: 15px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
11513
+ var templateObject_1$2, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$1, templateObject_6$1;
11458
11514
 
11459
11515
  var Modal = function (props) {
11460
- var _a = useState(props.isVisible), isVisible = _a[0], setIsVisible = _a[1];
11516
+ var _a = useState(props.isOpen), isOpen = _a[0], setIsOpen = _a[1];
11461
11517
  var isClosable = useState(props.isClosable === undefined || props.isClosable ? true : false)[0];
11462
- useEffect(function () { return setIsVisible(props.isVisible); }, [props.isVisible]);
11463
- if (!isVisible)
11518
+ useEffect(function () {
11519
+ setIsOpen(props.isOpen);
11520
+ }, [props.isOpen]);
11521
+ useEffect(function () {
11522
+ if (!isOpen && props.afterClose)
11523
+ props.afterClose();
11524
+ }, [isOpen]);
11525
+ if (!isOpen)
11464
11526
  return null;
11465
- var onClose = function () {
11466
- if (props.onClose)
11467
- props.onClose();
11468
- setIsVisible(false);
11469
- };
11470
- return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: onClose }) })), jsx$1(ChildrenWrapper, { children: props.children }), props.footer && jsx$1(FooterContainer, { children: props.footer })] }) })) }));
11527
+ return (jsx$1(Mask, { children: jsx$1(CardWrapper, __assign$2({}, props, { children: jsxs(Card, { children: [isClosable && (jsx$1(CloseIconWrapper, { children: jsx$1(Icon, { type: "cross", onClick: function () { return setIsOpen(false); } }) })), jsxs(ChildrenWrapper, { children: [props.title && (jsx$1(TitleWrapper, { children: jsx$1(Heading, __assign$2({ type: "h2" }, { children: props.title })) })), props.children] }), !props.okButton && !props.closeButton ? null : (jsxs(FooterContainer, { children: [props.closeButton && (jsx$1(Button, { label: props.closeButton.label, onClick: props.closeButton.onClick, color: "white", size: "small" })), props.okButton && (jsx$1(Button, { label: props.okButton.label, onClick: props.okButton.onClick, size: "small" }))] }))] }) })) }));
11471
11528
  };
11472
11529
 
11473
11530
  var Container$1 = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject$1(["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"], ["\n width: 100%;\n min-height: 90px;\n border-radius: 6px;\n border-width: 3px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n padding: 20px;\n display: flex;\n box-sizing: border-box;\n"])), function (_a) {
@@ -11519,5 +11576,5 @@ var Table = function (_a) {
11519
11576
  }) })] }));
11520
11577
  };
11521
11578
 
11522
- export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, 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, Tag, Toggle, ToggleField, Tooltip, Trophy, theme };
11579
+ export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, 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, Toggle, ToggleField, Tooltip, Trophy, theme };
11523
11580
  //# sourceMappingURL=index.es.js.map