@typeolymp/ui-components 1.4.0 → 1.5.2

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.
Files changed (35) hide show
  1. package/build/components/atoms/Heading/index.d.ts +2 -1
  2. package/build/components/atoms/Input/Date.d.ts +2 -2
  3. package/build/components/atoms/Paragraph/index.d.ts +2 -1
  4. package/build/components/atoms/Select/index.d.ts +2 -1
  5. package/build/components/atoms/Subheading/index.d.ts +2 -1
  6. package/build/components/molecules/Card/index.d.ts +2 -1
  7. package/build/components/molecules/DateInputField/index.d.ts +2 -0
  8. package/build/components/molecules/Key/index.d.ts +2 -2
  9. package/build/components/molecules/Link/index.d.ts +2 -1
  10. package/build/components/molecules/LocaleSelect/index.d.ts +10 -0
  11. package/build/components/molecules/LocaleSelect/stories.d.ts +15 -0
  12. package/build/components/molecules/LocaleSelect/styles.d.ts +4 -0
  13. package/build/components/molecules/Notification/index.d.ts +5 -4
  14. package/build/components/molecules/Notification/styles.d.ts +1 -0
  15. package/build/components/molecules/Popup/index.d.ts +2 -1
  16. package/build/components/molecules/Steps/Horizontal/index.d.ts +4 -0
  17. package/build/components/molecules/Steps/Horizontal/styles.d.ts +2 -0
  18. package/build/components/molecules/Steps/Vertical/index.d.ts +4 -0
  19. package/build/components/molecules/Steps/Vertical/styles.d.ts +2 -0
  20. package/build/components/molecules/Steps/index.d.ts +12 -0
  21. package/build/components/molecules/Steps/stories.d.ts +8 -0
  22. package/build/components/molecules/Tooltip/index.d.ts +2 -1
  23. package/build/components/molecules/TranslationSelect/index.d.ts +8 -0
  24. package/build/components/molecules/TranslationSelect/stories.d.ts +15 -0
  25. package/build/components/molecules/TranslationSelect/styles.d.ts +4 -0
  26. package/build/components/organisms/Keyboard/index.d.ts +4 -1
  27. package/build/components/organisms/Keyboard/layouts/azerty.d.ts +1 -1
  28. package/build/components/organisms/Keyboard/layouts/qwerty.d.ts +1 -1
  29. package/build/components/organisms/Modal/index.d.ts +2 -1
  30. package/build/index.d.ts +3 -1
  31. package/build/index.es.js +436 -110
  32. package/build/index.es.js.map +1 -1
  33. package/build/index.js +437 -109
  34. package/build/index.js.map +1 -1
  35. package/package.json +3 -2
package/build/index.es.js CHANGED
@@ -188,7 +188,7 @@ function __makeTemplateObject(cooked, raw) {
188
188
  return cooked;
189
189
  }
190
190
 
191
- var StyledButton = styled.button(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\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 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 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) {
191
+ var StyledButton = styled.button(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\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 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 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) {
192
192
  var fluid = _a.fluid;
193
193
  return (fluid ? "100%" : "fit-content");
194
194
  }, function (_a) {
@@ -238,11 +238,11 @@ var StyledButton = styled.button(templateObject_1$C || (templateObject_1$C = __m
238
238
  ? theme.button.medium.heightActive
239
239
  : theme.button[size].heightActive;
240
240
  });
241
- var DisabledButton = styled(StyledButton)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\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) {
241
+ var DisabledButton = styled(StyledButton)(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\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) {
242
242
  var size = _a.size;
243
243
  return !size ? theme.button.medium.height : theme.button[size].height;
244
244
  });
245
- var GhostButton = styled(StyledButton)(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
245
+ var GhostButton = styled(StyledButton)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
246
246
  var size = _a.size;
247
247
  return !size
248
248
  ? "calc(".concat(theme.button.medium.height, " - 2.5px)")
@@ -258,7 +258,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$6 || (templateObject_3$6
258
258
  ? theme.button.medium.marginTopActive
259
259
  : theme.button[size].marginTopActive;
260
260
  });
261
- var templateObject_1$C, templateObject_2$k, templateObject_3$6;
261
+ var templateObject_1$F, templateObject_2$o, templateObject_3$7;
262
262
 
263
263
  var Button = function (props) {
264
264
  var onClick = function () {
@@ -275,7 +275,7 @@ var Button = function (props) {
275
275
  return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
276
276
  };
277
277
 
278
- var StyledCheckbox = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n height: 25px;\n 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 height: 25px;\n 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) {
278
+ var StyledCheckbox = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n height: 25px;\n 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 height: 25px;\n 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) {
279
279
  var checked = _a.checked, disabled = _a.disabled;
280
280
  if (disabled)
281
281
  return theme.colors.lightGray.darker;
@@ -296,7 +296,7 @@ var StyledCheckbox = styled.div(templateObject_1$B || (templateObject_1$B = __ma
296
296
  return theme.colors.green.base;
297
297
  return theme.colors.lightGray.darker;
298
298
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
299
- var templateObject_1$B;
299
+ var templateObject_1$E;
300
300
 
301
301
  var Checkbox = function (props) {
302
302
  var _a;
@@ -329,7 +329,7 @@ var Checkbox = function (props) {
329
329
  return (jsxs(StyledCheckbox, __assign({ 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("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
330
330
  };
331
331
 
332
- var Wrapper$9 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
332
+ var Wrapper$9 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
333
333
  var size = _a.size;
334
334
  switch (size) {
335
335
  case "small":
@@ -352,16 +352,43 @@ var Wrapper$9 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTem
352
352
  return "27px";
353
353
  }
354
354
  });
355
- var templateObject_1$A;
355
+ var templateObject_1$D;
356
+
357
+ var parsers = {};
358
+
359
+ Object.defineProperty(parsers, "__esModule", { value: true });
360
+ var getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = parsers.getLanguageCodeByLocale = getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = void 0;
361
+ var getNativeLanguageByLocale = function (locale) {
362
+ var nativeLanguages = {
363
+ "en-GB": "English (UK)",
364
+ "nl-NL": "Nederlands",
365
+ "nl-BE": "Nederlands (BE)",
366
+ "fr-BE": "Français (BE)",
367
+ "fr-FR": "Français",
368
+ "de-DE": "Deutsch",
369
+ };
370
+ return nativeLanguages[locale];
371
+ };
372
+ var getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = getNativeLanguageByLocale;
373
+ var getLanguageCodeByLocale = function (locale) {
374
+ return locale.split("-")[0];
375
+ };
376
+ parsers.getLanguageCodeByLocale = getLanguageCodeByLocale;
377
+ var getCountryCodeByLocale = function (locale) {
378
+ return locale.split("-")[1];
379
+ };
380
+ getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
356
381
 
357
382
  var flags = {
358
- "nl-NL": (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
359
- "nl-BE": (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#e62743" }, void 0), jsx("path", { fill: "#ffd800", d: "M7 0H15V18H7z" }, void 0), jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#23292f" }, void 0)] }), void 0)),
360
- "en-GB": (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { fill: "#158cc7", d: "M0 11.9L0 16 5 11.9z" }, void 0), jsx("path", { fill: "#158cc7", d: "M8.1 0L7 0 2.5 0 8.1 4.6z" }, void 0), jsx("path", { fill: "#158cc7", d: "M0 2L0 6.1 5 6.1z" }, void 0), jsx("path", { fill: "#158cc7", d: "M22 16L22 11.9 17 11.9z" }, void 0), jsx("path", { fill: "#158cc7", d: "M22 6.1L22 2 17 6.1z" }, void 0), jsx("path", { fill: "#158cc7", d: "M19.5 0L15 0 13.9 0 13.9 4.6z" }, void 0), jsx("path", { fill: "#158cc7", d: "M8.1 13.4L2.5 18 7 18 8.1 18 8.1 18z" }, void 0), jsx("path", { fill: "#158cc7", d: "M13.9 18L13.9 18 15 18 19.5 18 13.9 13.4z" }, void 0), jsx("path", { d: "M22 10.9V7.1h-7.8L22 .7c-.1-.4-.5-.7-.9-.7l-8.2 6.7V0H9.1v6.7L.9 0C.5 0 .1.3 0 .7L7.7 7H0v3.8h7.8L0 17.3c.1.4.5.7.9.7l8.2-6.7V18h3.8v-6.7l8.2 6.7c.5 0 .8-.3.9-.7L14.3 11H22z", fill: "#e62944" }, void 0), jsx("path", { d: "M21.1 18l-8.2-6.7V18H9.1v-6.7L.9 18h1.6l5.6-4.6V18h5.8v-4.6l5.6 4.6h1.6c-.1 0-.1 0 0 0zM.9 0l8.2 6.7V0h-1v4.6L2.5 0H.9C1 0 1 0 .9 0zM7.8 7.1L0 .7V2l5 4.1H0v1h7.8zM0 17.3L7.7 11H0v1h5l-5 4v1.3zM14.2 10.9l7.7 6.3v-1.3l-5-4.1h5v-1h-7.7zM22 .7L14.3 7H22V6h-5l5-4V1 .7zM12.9 6.7L21.1 0h-1.6l-5.6 4.6V0h-1v6.7z", fill: "#fff" }, void 0)] }), void 0)),
383
+ NL: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
384
+ BE: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#e62743" }, void 0), jsx("path", { fill: "#ffd800", d: "M7 0H15V18H7z" }, void 0), jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#23292f" }, void 0)] }), void 0)),
385
+ GB: (jsxs("svg", __assign({ viewBox: "0 0 24 24", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M24 3H0v18h24V3z", fill: "#1899D6" }, void 0), jsx("path", { d: "M24 3h-3.003l-6.252 4.683V3H9.238v4.875L2.63 3H0v2.434l4.74 3.514H0v6.236h4.702L0 18.722V21h3.11l6.128-4.606V21h5.507v-4.687L21.075 21H24v-2.253l-4.817-3.564H24V8.947h-4.793L24 5.347V3z", fill: "#fff" }, void 0), jsx("path", { d: "M7.726 8.947L0 3v1.57l5.772 4.378h1.954zM16.285 15.184L24 21v-1.46l-5.761-4.356h-1.954zM9.238 15.184H7.65L0 21h1.832l7.406-5.531v-.286zM14.745 8.947h1.48L24 3.146V3h-1.75l-7.505 5.58v.367z", fill: "#FF4B4B" }, void 0), jsx("path", { d: "M24 10.27H13.565V3h-3.147v7.27H0v3.59h10.418V21h3.147v-7.14H24v-3.59z", fill: "#FF4B4B" }, void 0)] }), void 0)),
386
+ FR: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#148cc6" }, void 0), jsx("path", { fill: "#fff", d: "M7 0H15V18H7z" }, void 0), jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#e62743" }, void 0)] }), void 0)),
387
+ DE: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#000" }, void 0), jsx("path", { fill: "#e62743", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#ffd800" }, void 0)] }), void 0)),
361
388
  };
362
- var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
389
+ var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
363
390
 
364
- var StyledHeading = styled.span(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\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) {
391
+ var StyledHeading = styled.span(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\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) {
365
392
  var type = _a.type;
366
393
  return theme.heading[type].fontSize;
367
394
  }, function (_a) {
@@ -385,14 +412,14 @@ var StyledHeading = styled.span(templateObject_1$z || (templateObject_1$z = __ma
385
412
  var align = _a.align;
386
413
  return align;
387
414
  });
388
- var templateObject_1$z;
415
+ var templateObject_1$C;
389
416
 
390
417
  var Heading = function (props) {
391
418
  var element = !!props.as ? props.as : props.type;
392
419
  return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
393
420
  };
394
421
 
395
- var Wrapper$8 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
422
+ var Wrapper$8 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
396
423
  var size = _a.size;
397
424
  return theme.icon[size] || theme.icon.medium;
398
425
  }, function (_a) {
@@ -422,7 +449,7 @@ var Wrapper$8 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTem
422
449
  return theme.colors.lightGray.light;
423
450
  }
424
451
  });
425
- var templateObject_1$y;
452
+ var templateObject_1$B;
426
453
 
427
454
  var icons = {
428
455
  check: (jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
@@ -446,7 +473,7 @@ var icons = {
446
473
  };
447
474
  var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] }), void 0) }), void 0)); };
448
475
 
449
- var Wrapper$7 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
476
+ var Wrapper$7 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
450
477
  var size = _a.size;
451
478
  switch (size) {
452
479
  default:
@@ -458,7 +485,7 @@ var Wrapper$7 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTem
458
485
  return "118px";
459
486
  }
460
487
  });
461
- var templateObject_1$x;
488
+ var templateObject_1$A;
462
489
 
463
490
  var illustrations = {
464
491
  keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
@@ -473,14 +500,14 @@ var illustrations = {
473
500
  };
474
501
  var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
475
502
 
476
- var InputIconWrapper = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\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) {
477
- var disabled = _a.disabled, value = _a.value;
478
- return disabled && !value ? theme.colors.lightGray.darker : "";
503
+ var InputIconWrapper = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\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) {
504
+ var value = _a.value;
505
+ return !value ? theme.colors.lightGray.darker : "";
479
506
  }, function (_a) {
480
507
  var disabled = _a.disabled;
481
508
  return (disabled ? "not-allowed" : "pointer");
482
509
  });
483
- var StyledInput = styled.input(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\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) {
510
+ var StyledInput = styled.input(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\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) {
484
511
  var disabled = _a.disabled;
485
512
  return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
486
513
  }, function (_a) {
@@ -493,7 +520,7 @@ var StyledInput = styled.input(templateObject_2$j || (templateObject_2$j = __mak
493
520
  var disabled = _a.disabled;
494
521
  return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
495
522
  }, 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));
496
- var templateObject_1$w, templateObject_2$j;
523
+ var templateObject_1$z, templateObject_2$n;
497
524
 
498
525
  var PasswordInput = function (props) {
499
526
  var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
@@ -517,6 +544,124 @@ var PasswordInput = function (props) {
517
544
  return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
518
545
  };
519
546
 
547
+ function requiredArgs(required, args) {
548
+ if (args.length < required) {
549
+ throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
550
+ }
551
+ }
552
+
553
+ /**
554
+ * @name toDate
555
+ * @category Common Helpers
556
+ * @summary Convert the given argument to an instance of Date.
557
+ *
558
+ * @description
559
+ * Convert the given argument to an instance of Date.
560
+ *
561
+ * If the argument is an instance of Date, the function returns its clone.
562
+ *
563
+ * If the argument is a number, it is treated as a timestamp.
564
+ *
565
+ * If the argument is none of the above, the function returns Invalid Date.
566
+ *
567
+ * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`.
568
+ *
569
+ * @param {Date|Number} argument - the value to convert
570
+ * @returns {Date} the parsed date in the local time zone
571
+ * @throws {TypeError} 1 argument required
572
+ *
573
+ * @example
574
+ * // Clone the date:
575
+ * const result = toDate(new Date(2014, 1, 11, 11, 30, 30))
576
+ * //=> Tue Feb 11 2014 11:30:30
577
+ *
578
+ * @example
579
+ * // Convert the timestamp to date:
580
+ * const result = toDate(1392098430000)
581
+ * //=> Tue Feb 11 2014 11:30:30
582
+ */
583
+
584
+ function toDate(argument) {
585
+ requiredArgs(1, arguments);
586
+ var argStr = Object.prototype.toString.call(argument); // Clone the date
587
+
588
+ if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') {
589
+ // Prevent the date to lose the milliseconds when passed to new Date() in IE10
590
+ return new Date(argument.getTime());
591
+ } else if (typeof argument === 'number' || argStr === '[object Number]') {
592
+ return new Date(argument);
593
+ } else {
594
+ if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') {
595
+ // eslint-disable-next-line no-console
596
+ console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://git.io/fjule"); // eslint-disable-next-line no-console
597
+
598
+ console.warn(new Error().stack);
599
+ }
600
+
601
+ return new Date(NaN);
602
+ }
603
+ }
604
+
605
+ /**
606
+ * @name isAfter
607
+ * @category Common Helpers
608
+ * @summary Is the first date after the second one?
609
+ *
610
+ * @description
611
+ * Is the first date after the second one?
612
+ *
613
+ * ### v2.0.0 breaking changes:
614
+ *
615
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
616
+ *
617
+ * @param {Date|Number} date - the date that should be after the other one to return true
618
+ * @param {Date|Number} dateToCompare - the date to compare with
619
+ * @returns {Boolean} the first date is after the second date
620
+ * @throws {TypeError} 2 arguments required
621
+ *
622
+ * @example
623
+ * // Is 10 July 1989 after 11 February 1987?
624
+ * var result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11))
625
+ * //=> true
626
+ */
627
+
628
+ function isAfter(dirtyDate, dirtyDateToCompare) {
629
+ requiredArgs(2, arguments);
630
+ var date = toDate(dirtyDate);
631
+ var dateToCompare = toDate(dirtyDateToCompare);
632
+ return date.getTime() > dateToCompare.getTime();
633
+ }
634
+
635
+ /**
636
+ * @name isBefore
637
+ * @category Common Helpers
638
+ * @summary Is the first date before the second one?
639
+ *
640
+ * @description
641
+ * Is the first date before the second one?
642
+ *
643
+ * ### v2.0.0 breaking changes:
644
+ *
645
+ * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).
646
+ *
647
+ * @param {Date|Number} date - the date that should be before the other one to return true
648
+ * @param {Date|Number} dateToCompare - the date to compare with
649
+ * @returns {Boolean} the first date is before the second date
650
+ * @throws {TypeError} 2 arguments required
651
+ *
652
+ * @example
653
+ * // Is 10 July 1989 before 11 February 1987?
654
+ * var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11))
655
+ * //=> false
656
+ */
657
+
658
+ function isBefore(dirtyDate, dirtyDateToCompare) {
659
+ requiredArgs(2, arguments);
660
+ var date = toDate(dirtyDate);
661
+ var dateToCompare = toDate(dirtyDateToCompare);
662
+ return date.getTime() < dateToCompare.getTime();
663
+ }
664
+
520
665
  var DateInput = function (props) {
521
666
  var inputRef = useRef(null);
522
667
  var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
@@ -537,7 +682,13 @@ var DateInput = function (props) {
537
682
  props.onChange(value_1);
538
683
  }
539
684
  };
540
- return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled, value: value }, { children: [jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsx(StyledInput, __assign({ type: "date" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
685
+ var onBlur = function () {
686
+ if (isAfter(new Date(value), new Date(props.max)))
687
+ setValue(props.max);
688
+ if (isBefore(new Date(value), new Date(props.min)))
689
+ setValue(props.min);
690
+ };
691
+ return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled, value: value }, { children: [jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsx(StyledInput, __assign({ type: "date" }, props, { value: value, onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
541
692
  };
542
693
 
543
694
  var Input = function (props) {
@@ -557,7 +708,7 @@ Input.Date = DateInput;
557
708
 
558
709
  var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { children: [jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsx("defs", { children: jsx("clipPath", { children: jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
559
710
 
560
- var Wrapper$6 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
711
+ var Wrapper$6 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
561
712
  var size = _a.size;
562
713
  switch (size) {
563
714
  default:
@@ -567,7 +718,7 @@ var Wrapper$6 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTem
567
718
  return "116px";
568
719
  }
569
720
  });
570
- var templateObject_1$v;
721
+ var templateObject_1$y;
571
722
 
572
723
  var medals = {
573
724
  small: {
@@ -583,11 +734,11 @@ var medals = {
583
734
  };
584
735
  var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
585
736
 
586
- var Wrapper$5 = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\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) {
737
+ var Wrapper$5 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\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) {
587
738
  var disabled = _a.disabled;
588
739
  return (disabled ? "49.5px" : "");
589
740
  });
590
- var StyledInputNumber = styled.input(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\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\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\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) {
741
+ var StyledInputNumber = styled.input(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\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\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\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) {
591
742
  var disabled = _a.disabled;
592
743
  return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
593
744
  }, function (_a) {
@@ -600,7 +751,7 @@ var StyledInputNumber = styled.input(templateObject_2$i || (templateObject_2$i =
600
751
  var disabled = _a.disabled;
601
752
  return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
602
753
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
603
- var templateObject_1$u, templateObject_2$i;
754
+ var templateObject_1$x, templateObject_2$m;
604
755
 
605
756
  var Number = function (props) {
606
757
  var ref = useRef(null);
@@ -642,7 +793,7 @@ var Number = function (props) {
642
793
  return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
643
794
  };
644
795
 
645
- var StyledParagraph = styled.p(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\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) {
796
+ var StyledParagraph = styled.p(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\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) {
646
797
  var size = _a.size;
647
798
  return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
648
799
  }, function (_a) {
@@ -674,11 +825,11 @@ var StyledParagraph = styled.p(templateObject_1$t || (templateObject_1$t = __mak
674
825
  var align = _a.align;
675
826
  return align;
676
827
  });
677
- var templateObject_1$t;
828
+ var templateObject_1$w;
678
829
 
679
830
  var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
680
831
 
681
- var StyledRadio = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n height: 25px;\n 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 height: 25px;\n 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) {
832
+ var StyledRadio = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n height: 25px;\n 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 height: 25px;\n 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) {
682
833
  var checked = _a.checked, disabled = _a.disabled;
683
834
  if (disabled)
684
835
  return theme.colors.lightGray.darker;
@@ -706,7 +857,7 @@ var StyledRadio = styled.div(templateObject_1$s || (templateObject_1$s = __makeT
706
857
  return theme.colors.green.base;
707
858
  return "";
708
859
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
709
- var templateObject_1$s;
860
+ var templateObject_1$v;
710
861
 
711
862
  var Radio = function (props) {
712
863
  var _a;
@@ -735,11 +886,11 @@ var Radio = function (props) {
735
886
  return (jsx(StyledRadio, __assign({ 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("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
736
887
  };
737
888
 
738
- var Wrapper$4 = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\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) {
889
+ var Wrapper$4 = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\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) {
739
890
  var disabled = _a.disabled;
740
891
  return (disabled ? "not-allowed" : "pointer");
741
892
  });
742
- var StyledSelect = styled.select(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\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) {
893
+ var StyledSelect = styled.select(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\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) {
743
894
  var disabled = _a.disabled;
744
895
  return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
745
896
  }, function (_a) {
@@ -752,7 +903,7 @@ var StyledSelect = styled.select(templateObject_2$h || (templateObject_2$h = __m
752
903
  var isChanged = _a.isChanged;
753
904
  return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
754
905
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
755
- var templateObject_1$r, templateObject_2$h;
906
+ var templateObject_1$u, templateObject_2$l;
756
907
 
757
908
  var Select = function (props) {
758
909
  var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
@@ -769,18 +920,18 @@ var Select = function (props) {
769
920
  return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
770
921
  };
771
922
 
772
- var StyledSpacer = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
923
+ var StyledSpacer = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
773
924
  var horizontal = _a.horizontal;
774
925
  return (horizontal ? "".concat(horizontal, "px") : "");
775
926
  }, function (_a) {
776
927
  var vertical = _a.vertical;
777
928
  return (vertical ? "".concat(vertical, "px") : "");
778
929
  });
779
- var templateObject_1$q;
930
+ var templateObject_1$t;
780
931
 
781
932
  var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
782
933
 
783
- var StyledSubheading = styled.p(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\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) {
934
+ var StyledSubheading = styled.p(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\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) {
784
935
  var size = _a.size;
785
936
  return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
786
937
  }, function (_a) {
@@ -808,11 +959,11 @@ var StyledSubheading = styled.p(templateObject_1$p || (templateObject_1$p = __ma
808
959
  return theme.colors.darkGray.dark;
809
960
  }
810
961
  });
811
- var templateObject_1$p;
962
+ var templateObject_1$s;
812
963
 
813
964
  var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
814
965
 
815
- var Container$a = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 46px;\n 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 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) {
966
+ var Container$d = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n width: 46px;\n 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 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) {
816
967
  var disabled = _a.disabled;
817
968
  return (disabled ? "not-allowed" : "pointer");
818
969
  }, function (_a) {
@@ -830,7 +981,7 @@ var Container$a = styled.div(templateObject_1$o || (templateObject_1$o = __makeT
830
981
  var disabled = _a.disabled;
831
982
  return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
832
983
  }, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
833
- var templateObject_1$o;
984
+ var templateObject_1$r;
834
985
 
835
986
  var Toggle = function (props) {
836
987
  var _a;
@@ -858,10 +1009,10 @@ var Toggle = function (props) {
858
1009
  props.onChange(newValue);
859
1010
  }
860
1011
  };
861
- return (jsx(Container$a, __assign({ 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("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
1012
+ return (jsx(Container$d, __assign({ 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("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
862
1013
  };
863
1014
 
864
- var Wrapper$3 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\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) {
1015
+ var Wrapper$3 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\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) {
865
1016
  var level = _a.level;
866
1017
  switch (level) {
867
1018
  case 1:
@@ -872,7 +1023,7 @@ var Wrapper$3 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTem
872
1023
  return "70px";
873
1024
  }
874
1025
  });
875
- var templateObject_1$n;
1026
+ var templateObject_1$q;
876
1027
 
877
1028
  var trophies = {
878
1029
  1: {
@@ -908,7 +1059,7 @@ var trophies = {
908
1059
  };
909
1060
  var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
910
1061
 
911
- var Container$9 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\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) {
1062
+ var Container$c = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\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) {
912
1063
  var type = _a.type;
913
1064
  switch (type) {
914
1065
  case "success":
@@ -925,11 +1076,11 @@ var Container$9 = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
925
1076
  return theme.colors.red.base;
926
1077
  }
927
1078
  });
928
- var templateObject_1$m;
1079
+ var templateObject_1$p;
929
1080
 
930
- var Alert = function (props) { return (jsxs(Container$9, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
1081
+ var Alert = function (props) { return (jsxs(Container$c, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
931
1082
 
932
- var StyledCard = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
1083
+ var StyledCard = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
933
1084
  var ellipse = _a.ellipse;
934
1085
  return ellipse
935
1086
  ? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
@@ -938,23 +1089,23 @@ var StyledCard = styled.div(templateObject_1$l || (templateObject_1$l = __makeTe
938
1089
  }, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
939
1090
  : "";
940
1091
  });
941
- var Ellipse = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\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) {
1092
+ var Ellipse = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\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) {
942
1093
  var color = _a.color;
943
1094
  return color ? theme.colors[color].light : "";
944
1095
  });
945
- var Content = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\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"])));
946
- var templateObject_1$l, templateObject_2$g, templateObject_3$5;
1096
+ var Content = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\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"])));
1097
+ var templateObject_1$o, templateObject_2$k, templateObject_3$6;
947
1098
 
948
1099
  var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }, void 0), jsx(Content, { children: props.children }, void 0)] }), void 0)); };
949
1100
 
950
- var Fieldset$1 = styled.fieldset(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
951
- var CheckboxContainer = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
952
- var CheckboxWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\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"])));
953
- var Label$7 = styled(StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\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) {
1101
+ var Fieldset$1 = styled.fieldset(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
1102
+ var CheckboxContainer = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
1103
+ var CheckboxWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\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"])));
1104
+ var Label$7 = styled(StyledParagraph)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\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) {
954
1105
  var weight = _a.weight;
955
1106
  return weight || 500;
956
1107
  }, theme.colors.darkGray.base);
957
- var templateObject_1$k, templateObject_2$f, templateObject_3$4, templateObject_4$3;
1108
+ var templateObject_1$n, templateObject_2$j, templateObject_3$5, templateObject_4$4;
958
1109
 
959
1110
  var Checkboxes = function (props) {
960
1111
  var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
@@ -973,13 +1124,13 @@ var Checkboxes = function (props) {
973
1124
  };
974
1125
  return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$7, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
975
1126
  var id = _a.id, value = _a.value, label = _a.label;
976
- return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
1127
+ return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
977
1128
  }) }, void 0)] }, void 0));
978
1129
  };
979
1130
 
980
- var Container$8 = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\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"])));
981
- var Label$6 = styled(StyledParagraph)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
982
- var templateObject_1$j, templateObject_2$e;
1131
+ var Container$b = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\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"])));
1132
+ var Label$6 = styled(StyledParagraph)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
1133
+ var templateObject_1$m, templateObject_2$i;
983
1134
 
984
1135
  var DateInputField = function (props) {
985
1136
  var onChange = function (value) {
@@ -990,12 +1141,12 @@ var DateInputField = function (props) {
990
1141
  if (props.onBlur)
991
1142
  props.onBlur(props.name);
992
1143
  };
993
- return (jsxs(Container$8, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Date, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1144
+ return (jsxs(Container$b, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Date, { initialValue: props.initialValue, min: props.min, max: props.max, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
994
1145
  };
995
1146
 
996
- var StyledIconButton = styled(StyledButton)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\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"])));
997
- var GhostIconButton = styled(GhostButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\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"])));
998
- var templateObject_1$i, templateObject_2$d;
1147
+ var StyledIconButton = styled(StyledButton)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\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"])));
1148
+ var GhostIconButton = styled(GhostButton)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\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"])));
1149
+ var templateObject_1$l, templateObject_2$h;
999
1150
 
1000
1151
  var IconButton = function (props) {
1001
1152
  if (props.color === "white")
@@ -1003,9 +1154,9 @@ var IconButton = function (props) {
1003
1154
  return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
1004
1155
  };
1005
1156
 
1006
- var Container$7 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\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"])));
1007
- var Label$5 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
1008
- var templateObject_1$h, templateObject_2$c;
1157
+ var Container$a = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\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"])));
1158
+ var Label$5 = styled(StyledParagraph)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
1159
+ var templateObject_1$k, templateObject_2$g;
1009
1160
 
1010
1161
  var InputField = function (props) {
1011
1162
  var onChange = function (value) {
@@ -1016,18 +1167,18 @@ var InputField = function (props) {
1016
1167
  if (props.onBlur)
1017
1168
  props.onBlur(props.name);
1018
1169
  };
1019
- return (jsxs(Container$7, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1170
+ return (jsxs(Container$a, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1020
1171
  };
1021
1172
 
1022
- var Wrapper$2 = styled.a(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
1173
+ var Wrapper$2 = styled.a(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
1023
1174
  var chevron = _a.chevron;
1024
1175
  return (chevron === "left" ? "4px" : "");
1025
1176
  }, function (_a) {
1026
1177
  var chevron = _a.chevron;
1027
1178
  return (chevron === "right" ? "4px" : "");
1028
1179
  });
1029
- var StyledLink = styled(StyledParagraph)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\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);
1030
- var templateObject_1$g, templateObject_2$b;
1180
+ var StyledLink = styled(StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\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);
1181
+ var templateObject_1$j, templateObject_2$f;
1031
1182
 
1032
1183
  var Link = function (props) {
1033
1184
  var onClick = function (e) {
@@ -1039,34 +1190,74 @@ var Link = function (props) {
1039
1190
  return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
1040
1191
  };
1041
1192
 
1042
- var Container$6 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\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) {
1193
+ var Container$9 = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\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) {
1043
1194
  var text = _a.text;
1044
1195
  return (text ? "20px" : "");
1045
1196
  });
1046
- var templateObject_1$f;
1047
-
1048
- var Loading = function (props) { return (jsxs(Container$6, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
1197
+ var templateObject_1$i;
1198
+
1199
+ var Loading = function (props) { return (jsxs(Container$9, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
1200
+
1201
+ var Container$8 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\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) {
1202
+ var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
1203
+ if (dropdownIsVisible) {
1204
+ switch (color) {
1205
+ default:
1206
+ case "light":
1207
+ return theme.colors.lightGray.light;
1208
+ case "dark":
1209
+ return theme.colors.lightGray.dark;
1210
+ }
1211
+ }
1212
+ return "";
1213
+ });
1214
+ var SelectedTranslationWrapper = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
1215
+ var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: calc(100% + 20px);\n background-color: ", ";\n border-radius: 6px 0 6px 6px;\n overflow: hidden;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 100%;\n right: 0;\n"], ["\n width: calc(100% + 20px);\n background-color: ", ";\n border-radius: 6px 0 6px 6px;\n overflow: hidden;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 100%;\n right: 0;\n"])), function (_a) {
1216
+ var color = _a.color;
1217
+ switch (color) {
1218
+ default:
1219
+ case "light":
1220
+ return theme.colors.lightGray.light;
1221
+ case "dark":
1222
+ return theme.colors.lightGray.dark;
1223
+ }
1224
+ });
1225
+ var Locale = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\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 }\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 }\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);
1226
+ var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
1227
+
1228
+ var LocaleSelect = function (props) {
1229
+ var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
1230
+ var _b = useState(props.initialValue), locale = _b[0], setLocale = _b[1];
1231
+ var onSelectLocale = function (locale) {
1232
+ setLocale(locale);
1233
+ props.onChange(locale);
1234
+ };
1235
+ return (jsxs(Container$8, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedTranslationWrapper, { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0), jsx(Spacer, { horizontal: 10 }, void 0), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
1236
+ .filter(function (l) { return l !== locale; })
1237
+ .map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
1238
+ };
1049
1239
 
1050
- var Wrapper$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\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"])));
1051
- var templateObject_1$e;
1240
+ var Wrapper$1 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\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"])));
1241
+ var templateObject_1$g;
1052
1242
 
1053
1243
  var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "silver" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "bronze" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
1054
1244
 
1055
- var NotificationContainer = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\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) {
1245
+ var NotificationContainer = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\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) {
1056
1246
  var contrast = _a.contrast;
1057
1247
  return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
1058
1248
  });
1059
- var templateObject_1$d;
1249
+ var ButtonContainer = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\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"])));
1250
+ var templateObject_1$f, templateObject_2$d;
1060
1251
 
1061
1252
  var Notification = function (props) {
1062
1253
  if (!props.isVisible)
1063
1254
  return null;
1064
- return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.button && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Button, __assign({}, props.button, { size: "small" }), void 0)] }, void 0))] }), void 0));
1255
+ return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.buttons && (jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }, void 0))] }), void 0));
1065
1256
  };
1066
1257
 
1067
- var Container$5 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\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"])));
1068
- var Label$4 = styled(StyledParagraph)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
1069
- var templateObject_1$c, templateObject_2$a;
1258
+ var Container$7 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\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"])));
1259
+ var Label$4 = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
1260
+ var templateObject_1$e, templateObject_2$c;
1070
1261
 
1071
1262
  var NumberField = function (props) {
1072
1263
  var onChange = function (value) {
@@ -1077,12 +1268,12 @@ var NumberField = function (props) {
1077
1268
  if (props.onBlur)
1078
1269
  props.onBlur(props.name);
1079
1270
  };
1080
- return (jsxs(Container$5, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autocomplete: props.autocomplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1271
+ return (jsxs(Container$7, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autocomplete: props.autocomplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1081
1272
  };
1082
1273
 
1083
- var Container$4 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\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"])));
1084
- var Label$3 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
1085
- var templateObject_1$b, templateObject_2$9;
1274
+ var Container$6 = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\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"])));
1275
+ var Label$3 = styled(StyledParagraph)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
1276
+ var templateObject_1$d, templateObject_2$b;
1086
1277
 
1087
1278
  var PasswordInputField = function (props) {
1088
1279
  var onChange = function (value) {
@@ -1098,7 +1289,7 @@ var PasswordInputField = function (props) {
1098
1289
  if (props.onBlur)
1099
1290
  props.onBlur(props.name);
1100
1291
  };
1101
- return (jsxs(Container$4, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Password, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }, void 0)] }, void 0));
1292
+ return (jsxs(Container$6, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Password, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }, void 0)] }, void 0));
1102
1293
  };
1103
1294
 
1104
1295
  var generateRandomString = function (length) {
@@ -1111,7 +1302,7 @@ var generateRandomString = function (length) {
1111
1302
  return string;
1112
1303
  };
1113
1304
 
1114
- var PopupContainer = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\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) {
1305
+ var PopupContainer = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\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) {
1115
1306
  var isVisible = _a.isVisible;
1116
1307
  return (isVisible ? "100%" : "0%");
1117
1308
  }, function (_a) {
@@ -1124,7 +1315,7 @@ var PopupContainer = styled.div(templateObject_1$a || (templateObject_1$a = __ma
1124
1315
  var contrast = _a.contrast;
1125
1316
  return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
1126
1317
  });
1127
- var templateObject_1$a;
1318
+ var templateObject_1$c;
1128
1319
 
1129
1320
  var Popup = function (props) {
1130
1321
  var popupRef = useRef(null);
@@ -1160,8 +1351,8 @@ var Popup = function (props) {
1160
1351
  return (jsxs(Fragment, { children: [children, jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
1161
1352
  };
1162
1353
 
1163
- var Wrapper = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
1164
- var StyledProgressBar = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\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) {
1354
+ var Wrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
1355
+ var StyledProgressBar = styled.div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\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) {
1165
1356
  var showInfo = _a.showInfo;
1166
1357
  return (showInfo ? "10px" : "");
1167
1358
  });
@@ -1172,10 +1363,88 @@ var Indicator = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTem
1172
1363
  var color = _a.color;
1173
1364
  return color ? theme.colors[color].base : theme.colors.green.base;
1174
1365
  });
1175
- var templateObject_1$9, templateObject_2$8, templateObject_3$3;
1366
+ var templateObject_1$b, templateObject_2$a, templateObject_3$3;
1176
1367
 
1177
1368
  var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
1178
1369
 
1370
+ var Container$5 = styled.ol(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\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"])));
1371
+ var Step$1 = styled.li(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\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 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: 30%;\n left: 50%;\n background-color: ", ";\n order: -1;\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 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: 30%;\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n"])), function (_a) {
1372
+ var status = _a.status;
1373
+ return (!!status ? "pointer" : "not-allowed");
1374
+ }, function (_a) {
1375
+ var status = _a.status;
1376
+ switch (status) {
1377
+ case "passed":
1378
+ return theme.colors.green.base;
1379
+ case "active":
1380
+ return theme.colors.blue.base;
1381
+ default:
1382
+ return theme.colors.lightGray.dark;
1383
+ }
1384
+ }, theme.colors.lightGray.light, function (_a) {
1385
+ var status = _a.status;
1386
+ return status === "active"
1387
+ ? theme.colors.lightGray.light
1388
+ : theme.colors.darkGray.light;
1389
+ }, theme.colors.darkGray.base, theme.colors.lightGray.dark);
1390
+ var templateObject_1$a, templateObject_2$9;
1391
+
1392
+ var Steps$2 = function (props) { return (jsx(Container$5, { children: props.steps.map(function (_a, index) {
1393
+ var title = _a.title, onClick = _a.onClick;
1394
+ var step = index + 1;
1395
+ var status = props.current > step
1396
+ ? "passed"
1397
+ : props.current === step
1398
+ ? "active"
1399
+ : "";
1400
+ var onClickStep = function () {
1401
+ if (onClick && props.current >= step)
1402
+ onClick(step);
1403
+ };
1404
+ return (jsxs(Step$1, __assign({ status: status }, { children: [jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1405
+ }) }, void 0)); };
1406
+
1407
+ var Container$4 = styled.ol(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\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"])));
1408
+ var Step = styled.li(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\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 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 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) {
1409
+ var status = _a.status;
1410
+ return (!!status ? "pointer" : "not-allowed");
1411
+ }, function (_a) {
1412
+ var status = _a.status;
1413
+ switch (status) {
1414
+ case "passed":
1415
+ return theme.colors.green.base;
1416
+ case "active":
1417
+ return theme.colors.blue.base;
1418
+ default:
1419
+ return theme.colors.lightGray.dark;
1420
+ }
1421
+ }, function (_a) {
1422
+ var status = _a.status;
1423
+ return status === "active"
1424
+ ? theme.colors.lightGray.light
1425
+ : theme.colors.darkGray.light;
1426
+ }, theme.colors.darkGray.base, theme.colors.lightGray.base);
1427
+ var templateObject_1$9, templateObject_2$8;
1428
+
1429
+ var Steps$1 = function (props) { return (jsx(Container$4, { children: props.steps.map(function (_a, index) {
1430
+ var title = _a.title, onClick = _a.onClick;
1431
+ var step = index + 1;
1432
+ var status = props.current > step
1433
+ ? "passed"
1434
+ : props.current === step
1435
+ ? "active"
1436
+ : "";
1437
+ var onClickStep = function () {
1438
+ if (onClick && props.current >= step)
1439
+ onClick(step);
1440
+ };
1441
+ return (jsxs(Step, __assign({ status: status, onClick: onClickStep }, { children: [jsx("div", { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }, void 0), jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1442
+ }) }, void 0)); };
1443
+
1444
+ var Steps = function (props) {
1445
+ return props.alignment === "vertical" ? (jsx(Steps$1, __assign({}, props), void 0)) : (jsx(Steps$2, __assign({}, props), void 0));
1446
+ };
1447
+
1179
1448
  var Fieldset = styled.fieldset(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
1180
1449
  var RadioContainer = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
1181
1450
  var RadioWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\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"])));
@@ -1196,7 +1465,7 @@ var RadioGroup = function (props) {
1196
1465
  };
1197
1466
  return (jsxs(Fieldset, { children: [props.legend && jsx(Label$2, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
1198
1467
  var id = _a.id, value = _a.value, label = _a.label;
1199
- return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultChecked: props.initialValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
1468
+ return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultChecked: props.initialValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
1200
1469
  }) }, void 0)] }, void 0));
1201
1470
  };
1202
1471
 
@@ -1213,9 +1482,9 @@ var SelectField = function (props) {
1213
1482
  if (props.onBlur)
1214
1483
  props.onBlur(props.name);
1215
1484
  };
1216
- return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, initialValue: props.initialValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a) {
1485
+ return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, initialValue: props.initialValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
1217
1486
  var value = _a.value, label = _a.label;
1218
- return (jsx("option", __assign({ value: value }, { children: label }), value));
1487
+ return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
1219
1488
  }) }), void 0)] }, void 0));
1220
1489
  };
1221
1490
 
@@ -1293,7 +1562,7 @@ var FeedbackColors = {
1293
1562
  success: theme.colors.green.base,
1294
1563
  error: theme.colors.red.base,
1295
1564
  };
1296
- var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 30px;\n }\n"], ["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 30px;\n }\n"])), function (_a) {
1565
+ var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
1297
1566
  var status = _a.status;
1298
1567
  return FeedbackColors[status];
1299
1568
  });
@@ -1402,19 +1671,22 @@ var Form = function (props) {
1402
1671
  }) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
1403
1672
  };
1404
1673
 
1405
- var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width: 30px;\n max-width: 30px;\n min-height: 30px;\n max-height: 30px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n border-color: ", ";\n border-width: ", ";\n border-style: solid;\n box-sizing: border-box;\n\n h6 {\n color: ", ";\n line-height: 12px;\n text-transform: uppercase;\n }\n"], ["\n min-width: 30px;\n max-width: 30px;\n min-height: 30px;\n max-height: 30px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n border-color: ", ";\n border-width: ", ";\n border-style: solid;\n box-sizing: border-box;\n\n h6 {\n color: ", ";\n line-height: 12px;\n text-transform: uppercase;\n }\n"])), function (_a) {
1406
- var active = _a.active, color = _a.color;
1407
- return active ? theme.colors[color].light : theme.colors.lightGray.light;
1408
- }, function (_a) {
1674
+ var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"])), function (_a) {
1409
1675
  var color = _a.color, active = _a.active;
1410
1676
  if (active)
1411
1677
  return theme.colors[color].dark;
1412
1678
  if (color)
1413
1679
  return theme.colors[color].base;
1414
1680
  return "";
1681
+ }, function (_a) {
1682
+ var active = _a.active, color = _a.color;
1683
+ return active ? theme.colors[color].light : theme.colors.lightGray.light;
1415
1684
  }, function (_a) {
1416
1685
  var color = _a.color;
1417
1686
  return (color ? "2px" : "0");
1687
+ }, function (_a) {
1688
+ var color = _a.color;
1689
+ return (color ? theme.colors[color].dark : "");
1418
1690
  }, function (_a) {
1419
1691
  var color = _a.color, active = _a.active;
1420
1692
  if (active)
@@ -1425,32 +1697,86 @@ var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeT
1425
1697
  });
1426
1698
  var templateObject_1$2;
1427
1699
 
1428
- var Key = function (props) { return (jsx(Container$1, __assign({ color: props.color, active: props.active }, { children: jsx(Heading, __assign({ type: "h6" }, { children: props.character }), void 0) }), void 0)); };
1700
+ var Key = function (props) {
1701
+ var _a;
1702
+ return (jsx(Container$1, __assign({ color: props.color, active: props.active }, { children: props.color === "pink" ? (jsx("svg", __assign({ width: "28", height: "7", viewBox: "0 0 28 7" }, { children: jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }, void 0) }), void 0)) : ((_a = props.characters) === null || _a === void 0 ? void 0 : _a.map(function (character, index) { return (jsx(Heading, __assign({ type: "h6" }, { children: character }), "".concat(character, "-").concat(index))); })) }), void 0));
1703
+ };
1429
1704
 
1430
- var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: 620px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"], ["\n width: 620px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"])));
1705
+ var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n width: 720px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"], ["\n width: 720px;\n background-color: #cacbd6;\n box-shadow: #7b7f81 0px 8px 0px;\n border-radius: 10px;\n padding: 25px 20px;\n box-sizing: border-box;\n"])));
1431
1706
  var SpecialRow = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"])));
1432
- var TopRow = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 60px;\n max-width: 60px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 60px;\n max-width: 60px;\n }\n"])));
1433
- var StartRow = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 75px;\n max-width: 75px;\n }\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child {\n min-width: 75px;\n max-width: 75px;\n }\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n"])));
1707
+ var TopRow = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\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"])));
1708
+ var StartRow = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\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"])));
1434
1709
  var BottomRow = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\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"])));
1435
- var SpacebarRow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n\n > div:first-child,\n > div:last-child {\n min-width: 60px;\n max-width: 60px;\n }\n\n > div:nth-child(5) {\n min-width: 210px;\n max-width: 210px;\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: 60px;\n max-width: 60px;\n }\n\n > div:nth-child(5) {\n min-width: 210px;\n max-width: 210px;\n }\n"])));
1710
+ var SpacebarRow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\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"])));
1436
1711
  var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6;
1437
1712
 
1438
1713
  var Keyboard = function (props) {
1439
1714
  var _a = useState(), keys = _a[0], setKeys = _a[1];
1715
+ var _b = useState(), shiftKeys = _b[0], setShiftKeys = _b[1];
1440
1716
  useEffect(function () {
1441
1717
  if (!!props.keys) {
1442
1718
  var keys_1 = {};
1719
+ var shiftKeys_1 = {
1720
+ left: [],
1721
+ right: [],
1722
+ };
1443
1723
  for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
1444
1724
  var k = _a[_i];
1445
- var index = k.index, key = k.key, color = k.color;
1725
+ var index = k.index, key = k.key, color = k.color, shiftKey = k.shiftKey;
1446
1726
  keys_1[index] = { character: key, color: color };
1727
+ if (shiftKey) {
1728
+ shiftKeys_1[k.hand].push(key);
1729
+ }
1447
1730
  }
1448
1731
  setKeys(keys_1);
1732
+ setShiftKeys(shiftKeys_1);
1449
1733
  }
1450
1734
  }, [props.keys]);
1451
1735
  if (!keys)
1452
1736
  return null;
1453
- return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key, __assign({}, keys[41], { active: keys[41].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[39], { active: keys[39].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[37], { active: keys[37].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[35], { active: keys[35].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[33], { active: keys[33].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[43], { active: keys[43].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[42], { active: keys[42].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[32], { active: keys[32].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[34], { active: keys[34].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[36], { active: keys[36].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[38], { active: keys[38].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[40], { active: keys[40].character === props.activeKey }), void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(TopRow, { children: [jsx(Key, {}, void 0), jsx(Key, __assign({}, keys[19], { active: keys[19].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[17], { active: keys[17].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[15], { active: keys[15].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[13], { active: keys[13].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[21], { active: keys[21].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[20], { active: keys[20].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[12], { active: keys[12].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[14], { active: keys[14].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[16], { active: keys[16].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[18], { active: keys[18].character === props.activeKey }), void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(StartRow, { children: [jsx(Key, {}, void 0), jsx(Key, __assign({}, keys[9], { active: keys[9].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[7], { active: keys[7].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[5], { active: keys[5].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[3], { active: keys[3].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[11], { active: keys[11].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[10], { active: keys[10].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[2], { active: keys[2].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[4], { active: keys[4].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[6], { active: keys[6].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[8], { active: keys[8].character === props.activeKey }), void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(BottomRow, { children: [jsx(Key, {}, void 0), jsx(Key, __assign({}, keys[29], { active: keys[29].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[27], { active: keys[27].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[25], { active: keys[25].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[23], { active: keys[23].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[31], { active: keys[31].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[30], { active: keys[30].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[22], { active: keys[22].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[24], { active: keys[24].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[26], { active: keys[26].character === props.activeKey }), void 0), jsx(Key, __assign({}, keys[28], { active: keys[28].character === props.activeKey }), void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(SpacebarRow, { children: [jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, __assign({}, keys[1], { active: keys[1].character === props.activeKey }), void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0)] }, void 0));
1737
+ return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[41].character, keys[83].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
1738
+ keys[83].character === props.activeKey }, 41), jsx(Key, { characters: [keys[39].character, keys[81].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
1739
+ keys[81].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[37].character, keys[79].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
1740
+ keys[79].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[35].character, keys[77].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
1741
+ keys[77].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[33].character, keys[75].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
1742
+ keys[75].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[43].character, keys[85].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
1743
+ keys[85].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[42].character, keys[84].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
1744
+ keys[84].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[32].character, keys[74].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
1745
+ keys[74].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[34].character, keys[76].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
1746
+ keys[76].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[36].character, keys[78].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
1747
+ keys[78].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[38].character, keys[80].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
1748
+ keys[80].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[40].character, keys[82].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
1749
+ keys[82].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(TopRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[61].character], color: keys[19].color, active: keys[19].character === props.activeKey ||
1750
+ keys[61].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[59].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
1751
+ keys[59].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[57].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
1752
+ keys[57].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[55].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
1753
+ keys[55].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[63].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
1754
+ keys[63].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[62].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
1755
+ keys[62].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[54].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
1756
+ keys[54].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[56].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
1757
+ keys[56].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[58].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
1758
+ keys[58].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[60].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
1759
+ keys[60].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(StartRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[51].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
1760
+ keys[51].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[49].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
1761
+ keys[49].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[47].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
1762
+ keys[47].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[45].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
1763
+ keys[45].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[53].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
1764
+ keys[53].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[52].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
1765
+ keys[52].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[44].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
1766
+ keys[44].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[46].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
1767
+ keys[46].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[48].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
1768
+ keys[48].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[8].character, keys[50].character].filter(function (k) { return k !== "m"; }), color: keys[8].color, active: keys[8].character === props.activeKey ||
1769
+ keys[50].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(BottomRow, { children: [jsx(Key, { characters: ["Shift"], color: keys[29].color, active: shiftKeys.right.includes(props.activeKey) }, void 0), jsx(Key, { characters: [keys[71].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
1770
+ keys[71].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[69].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
1771
+ keys[69].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[67].character], color: keys[25].color, active: keys[25].character === props.activeKey ||
1772
+ keys[67].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[65].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
1773
+ keys[65].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[73].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
1774
+ keys[73].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[72].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
1775
+ keys[72].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[64].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
1776
+ keys[64].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[24].character, keys[66].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
1777
+ keys[66].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[26].character, keys[68].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
1778
+ keys[68].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[28].character, keys[70].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
1779
+ keys[70].character === props.activeKey }, void 0), jsx(Key, { characters: ["Shift"], color: keys[28].color, active: shiftKeys.left.includes(props.activeKey) }, void 0)] }, void 0), jsxs(SpacebarRow, { children: [jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0)] }, void 0));
1454
1780
  };
1455
1781
 
1456
1782
  var Mask = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"])));
@@ -1476,5 +1802,5 @@ var Modal = function (props) {
1476
1802
  return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
1477
1803
  };
1478
1804
 
1479
- export { Alert, Button, Card, Checkbox, Checkboxes, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
1805
+ export { Alert, Button, Card, Checkbox, Checkboxes, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Steps, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
1480
1806
  //# sourceMappingURL=index.es.js.map