@typeolymp/ui-components 1.5.7 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/build/components/atoms/Button/index.d.ts +4 -2
  2. package/build/components/atoms/Button/stories.d.ts +1 -1
  3. package/build/components/atoms/Icon/index.d.ts +1 -1
  4. package/build/components/atoms/Input/Date.d.ts +0 -1
  5. package/build/components/atoms/Input/index.d.ts +1 -1
  6. package/build/components/atoms/Number/index.d.ts +2 -2
  7. package/build/components/atoms/Number/stories.d.ts +1 -1
  8. package/build/components/atoms/Radio/index.d.ts +2 -1
  9. package/build/components/atoms/Select/index.d.ts +1 -1
  10. package/build/components/atoms/Toggle/index.d.ts +1 -1
  11. package/build/components/molecules/Checkboxes/index.d.ts +3 -3
  12. package/build/components/molecules/DateInputField/index.d.ts +1 -1
  13. package/build/components/molecules/InputField/index.d.ts +2 -1
  14. package/build/components/molecules/LocaleSelect/index.d.ts +2 -2
  15. package/build/components/molecules/NumberField/index.d.ts +2 -2
  16. package/build/components/molecules/PasswordInputField/index.d.ts +3 -1
  17. package/build/components/molecules/PasswordInputField/styles.d.ts +2 -0
  18. package/build/components/molecules/PasswordInputField/translations.d.ts +11 -0
  19. package/build/components/molecules/RadioGroup/index.d.ts +1 -1
  20. package/build/components/molecules/SelectField/index.d.ts +1 -1
  21. package/build/components/molecules/Steps/index.d.ts +1 -1
  22. package/build/components/molecules/ToggleField/index.d.ts +1 -1
  23. package/build/components/organisms/Form/index.d.ts +6 -3
  24. package/build/components/organisms/Form/stories.d.ts +3 -1
  25. package/build/index.es.js +283 -104
  26. package/build/index.es.js.map +1 -1
  27. package/build/index.js +283 -104
  28. package/build/index.js.map +1 -1
  29. package/package.json +1 -1
package/build/index.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
- import styled from 'styled-components';
3
- import React, { useRef, useState, useEffect, createElement } from 'react';
2
+ import React, { forwardRef, useRef, useState, useEffect, createElement, useImperativeHandle } from 'react';
3
+ import styled, { keyframes } from 'styled-components';
4
4
  import BeatLoader from 'react-spinners/BeatLoader';
5
5
 
6
6
  var theme = {
@@ -108,12 +108,12 @@ var theme = {
108
108
  small: {
109
109
  fontSize: "16px",
110
110
  fontWeight: "500",
111
- lineHeight: "19px",
111
+ lineHeight: "22px",
112
112
  },
113
113
  medium: {
114
114
  fontSize: "20px",
115
115
  fontWeight: "500",
116
- lineHeight: "26px",
116
+ lineHeight: "30px",
117
117
  },
118
118
  large: {
119
119
  fontSize: "28px",
@@ -188,7 +188,7 @@ function __makeTemplateObject(cooked, raw) {
188
188
  return cooked;
189
189
  }
190
190
 
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) {
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 box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
192
192
  var fluid = _a.fluid;
193
193
  return (fluid ? "100%" : "fit-content");
194
194
  }, function (_a) {
@@ -242,7 +242,7 @@ var DisabledButton = styled(StyledButton)(templateObject_2$o || (templateObject_
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$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) {
245
+ var GhostButton = styled(StyledButton)(templateObject_3$8 || (templateObject_3$8 = __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,9 +258,10 @@ var GhostButton = styled(StyledButton)(templateObject_3$7 || (templateObject_3$7
258
258
  ? theme.button.medium.marginTopActive
259
259
  : theme.button[size].marginTopActive;
260
260
  });
261
- var templateObject_1$F, templateObject_2$o, templateObject_3$7;
261
+ var templateObject_1$F, templateObject_2$o, templateObject_3$8;
262
262
 
263
- var Button = function (props) {
263
+ var Button = forwardRef(function (props, ref) {
264
+ var as = props.href || props.asAnchor ? "a" : "button";
264
265
  var onClick = function () {
265
266
  if (!props.disabled) {
266
267
  if (props.onClick)
@@ -268,14 +269,14 @@ var Button = function (props) {
268
269
  }
269
270
  };
270
271
  if (props.disabled) {
271
- return (jsx(DisabledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
272
+ return (jsx(DisabledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
272
273
  }
273
274
  if (props.color === "white")
274
- return (jsx(GhostButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
275
- return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
276
- };
275
+ return (jsx(GhostButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
276
+ return (jsx(StyledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
277
+ });
277
278
 
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
+ var StyledCheckbox = styled.div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
279
280
  var checked = _a.checked, disabled = _a.disabled;
280
281
  if (disabled)
281
282
  return theme.colors.lightGray.darker;
@@ -470,6 +471,7 @@ var icons = {
470
471
  reload: (jsx("path", { d: "M20.6354 11.2888C20.4446 11.2757 20.253 11.2998 20.0716 11.3597C19.8903 11.4195 19.7226 11.514 19.5783 11.6377C19.434 11.7614 19.3158 11.9119 19.2306 12.0806C19.1453 12.2493 19.0947 12.4329 19.0815 12.6209C18.9739 14.1387 18.3662 15.5804 17.3506 16.7268C16.335 17.8732 14.9672 18.6615 13.4551 18.9718C11.943 19.2821 10.3695 19.0975 8.97365 18.446C7.57786 17.7945 6.43622 16.7118 5.72234 15.3626C5.00847 14.0133 4.76142 12.4713 5.01877 10.971C5.27612 9.47075 6.02378 8.09431 7.14805 7.05103C8.27233 6.00774 9.71171 5.35469 11.2473 5.19118C12.7829 5.02767 14.3307 5.36264 15.6553 6.14516L15.0687 6.1882C14.8324 6.20792 14.6055 6.28802 14.4104 6.42057C14.2152 6.55313 14.0585 6.73355 13.9558 6.94402C13.853 7.15449 13.8078 7.38773 13.8246 7.62068C13.8414 7.85363 13.9196 8.07824 14.0514 8.27231C14.1758 8.45551 14.3442 8.60561 14.5416 8.70929C14.739 8.81296 14.9594 8.867 15.1831 8.8666H15.2601L19.2729 8.58175C19.4513 8.56929 19.6255 8.52227 19.7855 8.44339C19.9455 8.36452 20.0881 8.25533 20.2052 8.12209C20.3223 7.98884 20.4116 7.83415 20.4679 7.66688C20.5242 7.4996 20.5465 7.32303 20.5335 7.14726L20.2527 3.20036C20.2154 2.85494 20.0436 2.53721 19.7735 2.31395C19.5033 2.0907 19.1558 1.9793 18.8041 2.00318C18.4523 2.02706 18.1236 2.18436 17.8871 2.44201C17.6506 2.69966 17.5247 3.0376 17.5359 3.38479L17.5754 3.9422C15.7452 2.7363 13.5624 2.1585 11.3651 2.29828C9.16781 2.43806 7.07861 3.28763 5.42104 4.71541C3.76347 6.1432 2.63001 8.06953 2.19621 10.1961C1.7624 12.3226 2.05246 14.5308 3.02144 16.4785C3.99043 18.4263 5.58428 20.0049 7.55618 20.9701C9.52807 21.9352 11.768 22.2329 13.929 21.8171C16.09 21.4013 18.0516 20.2953 19.51 18.6702C20.9683 17.0451 21.8421 14.9916 21.9959 12.8278C22.0103 12.6386 21.9865 12.4483 21.9257 12.2682C21.865 12.088 21.7685 11.9216 21.642 11.7784C21.5154 11.6353 21.3613 11.5183 21.1885 11.4342C21.0157 11.3502 20.8277 11.3008 20.6354 11.2888Z" }, void 0)),
471
472
  expand: (jsx("path", { d: "M13.1519 2.65848C12.2656 2.65848 11.5471 3.37694 11.5471 4.26321C11.5471 5.14947 12.2656 5.86793 13.1519 5.86793L15.8968 5.86793L5.82737 15.9374L5.8678 13.1752C5.88077 12.2891 5.1729 11.5602 4.28672 11.5472C3.40055 11.5342 2.67166 12.2421 2.65869 13.1283L2.56131 19.7822C2.55612 20.1373 2.66667 20.4671 2.85807 20.7358C3.13154 21.2301 3.65827 21.5648 4.26318 21.5648L11.0715 21.5648C11.9577 21.5648 12.6762 20.8463 12.6762 19.9601C12.6762 19.0738 11.9577 18.3553 11.0715 18.3553L8.1374 18.3553L18.3988 8.09397L18.3555 11.048C18.3426 11.9342 19.0504 12.6631 19.9366 12.6761C20.8228 12.689 21.5517 11.9812 21.5646 11.095L21.662 4.44109C21.6672 4.08598 21.5567 3.75612 21.3653 3.48747C21.0918 2.99317 20.5651 2.65848 19.9602 2.65848L13.1519 2.65848Z" }, void 0)),
472
473
  calendar: (jsx("path", { d: "M21 3h-2V2c0-1.1-.9-2-2-2s-2 .9-2 2v1H9V2c0-1.1-.9-2-2-2S5 .9 5 2v1H3C1.3 3 0 4.3 0 6v14c0 1.7 1.3 3 3 3h18c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3zM3 6h2v1c0 1.1.9 2 2 2s2-.9 2-2V6h6v1c0 1.1.9 2 2 2s2-.9 2-2V6h2v4H3V6zm0 14v-7h18v7H3z" }, void 0)),
474
+ menuAlt: (jsx("path", { d: "M1.5 3.4C.7 3.4 0 4.1 0 4.9s.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-21zM0 11.9c0-.8.7-1.5 1.5-1.5h21c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-21c-.8 0-1.5-.7-1.5-1.5zm0 7c0-.8.7-1.5 1.5-1.5h13c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5z" }, void 0)),
473
475
  };
474
476
  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)); };
475
477
 
@@ -501,8 +503,8 @@ var illustrations = {
501
503
  var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
502
504
 
503
505
  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 : "";
506
+ var isChanged = _a.isChanged;
507
+ return !isChanged ? theme.colors.lightGray.darker : "";
506
508
  }, function (_a) {
507
509
  var disabled = _a.disabled;
508
510
  return (disabled ? "not-allowed" : "pointer");
@@ -524,25 +526,19 @@ var templateObject_1$z, templateObject_2$n;
524
526
 
525
527
  var PasswordInput = function (props) {
526
528
  var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
527
- var _b = useState(props.initialValue || ""), value = _b[0], setValue = _b[1];
528
529
  var toggle = function () {
529
530
  if (!props.disabled)
530
531
  setIsVisible(!isVisible);
531
532
  };
532
533
  var onChange = function (e) {
533
- if (!props.disabled) {
534
- var value_1 = e.target.value;
535
- setValue(value_1);
536
- if (!!props.onChange)
537
- props.onChange(value_1);
538
- }
534
+ if (!props.disabled && !!props.onChange)
535
+ props.onChange(e.target.value);
539
536
  };
540
537
  var onKeyPress = function (e) {
541
538
  if (props.onKeyPress)
542
539
  props.onKeyPress(e);
543
540
  };
544
- console.log(props);
545
- 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));
541
+ 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, { onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
546
542
  };
547
543
 
548
544
  function requiredArgs(required, args) {
@@ -664,8 +660,16 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
664
660
  }
665
661
 
666
662
  var DateInput = function (props) {
663
+ var _a;
667
664
  var inputRef = useRef(null);
668
- var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
665
+ var _b = useState(false), isChanged = _b[0], setIsChanged = _b[1];
666
+ useEffect(function () {
667
+ var _a;
668
+ if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value))
669
+ setIsChanged(false);
670
+ else
671
+ setIsChanged(true);
672
+ }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
669
673
  var showPicker = function () {
670
674
  if (!props.disabled) {
671
675
  inputRef.current.showPicker();
@@ -677,32 +681,28 @@ var DateInput = function (props) {
677
681
  };
678
682
  var onChange = function (e) {
679
683
  if (!props.disabled) {
680
- var value_1 = e.target.value;
681
- setValue(value_1);
684
+ setIsChanged(true);
682
685
  if (!!props.onChange)
683
- props.onChange(value_1);
686
+ props.onChange(e.target.value);
684
687
  }
685
688
  };
686
689
  var onBlur = function () {
687
- if (isAfter(new Date(value), new Date(props.max)))
688
- setValue(props.max);
689
- if (isBefore(new Date(value), new Date(props.min)))
690
- setValue(props.min);
690
+ if (props.onBlur)
691
+ props.onBlur();
692
+ if (isAfter(new Date(inputRef.current.value), new Date(props.max)))
693
+ inputRef.current.value = props.max;
694
+ if (isBefore(new Date(inputRef.current.value), new Date(props.min)))
695
+ inputRef.current.value = props.min;
691
696
  };
692
- 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));
697
+ return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled, isChanged: isChanged }, { children: [jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsx(StyledInput, __assign({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
693
698
  };
694
699
 
695
700
  var Input = function (props) {
696
- var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
697
701
  var onChange = function (e) {
698
- if (!props.disabled) {
699
- var value_1 = e.target.value;
700
- setValue(value_1);
701
- if (!!props.onChange)
702
- props.onChange(value_1);
703
- }
702
+ if (!props.disabled && !!props.onChange)
703
+ props.onChange(e.target.value);
704
704
  };
705
- return (jsx(StyledInput, __assign({ type: "text" }, props, { value: value, onChange: onChange }), void 0));
705
+ return jsx(StyledInput, __assign({ type: "text" }, props, { onChange: onChange }), void 0);
706
706
  };
707
707
  Input.Password = PasswordInput;
708
708
  Input.Date = DateInput;
@@ -755,43 +755,38 @@ var StyledInputNumber = styled.input(templateObject_2$m || (templateObject_2$m =
755
755
  var templateObject_1$x, templateObject_2$m;
756
756
 
757
757
  var Number = function (props) {
758
- var ref = useRef(null);
759
- var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
758
+ var inputRef = useRef(null);
760
759
  var onChange = function (e) {
761
- if (!props.disabled) {
762
- var value_1 = parseInt(e.target.value);
763
- setValue(value_1);
764
- if (!!props.onChange)
765
- props.onChange(e.target.value);
766
- }
760
+ if (!props.disabled && !!props.onChange)
761
+ props.onChange(parseInt(e.target.value));
767
762
  };
768
763
  var decrease = function () {
769
- var _a;
770
- var newValue = value - 1;
764
+ var _a, _b;
765
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
766
+ var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) - 1;
771
767
  if (props.min && newValue < props.min) {
772
- setValue(props.min);
768
+ inputRef.current.value = "".concat(props.min);
773
769
  }
774
770
  else {
775
- setValue(newValue);
771
+ inputRef.current.value = "".concat(newValue);
776
772
  if (!!props.onChange)
777
- props.onChange("".concat(newValue));
778
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
773
+ props.onChange(newValue);
779
774
  }
780
775
  };
781
776
  var increase = function () {
782
- var _a;
783
- var newValue = value + 1;
777
+ var _a, _b;
778
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
779
+ var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) + 1;
784
780
  if (props.max && newValue > props.max) {
785
- setValue(props.max);
781
+ inputRef.current.value = "".concat(props.max);
786
782
  }
787
783
  else {
788
- setValue(newValue);
784
+ inputRef.current.value = "".concat(newValue);
789
785
  if (!!props.onChange)
790
- props.onChange("".concat(newValue));
791
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
786
+ props.onChange(newValue);
792
787
  }
793
788
  };
794
- 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));
789
+ 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, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
795
790
  };
796
791
 
797
792
  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) {
@@ -830,7 +825,7 @@ var templateObject_1$w;
830
825
 
831
826
  var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
832
827
 
833
- 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) {
828
+ var StyledRadio = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
834
829
  var checked = _a.checked, disabled = _a.disabled;
835
830
  if (disabled)
836
831
  return theme.colors.lightGray.darker;
@@ -861,19 +856,22 @@ var StyledRadio = styled.div(templateObject_1$v || (templateObject_1$v = __makeT
861
856
  var templateObject_1$v;
862
857
 
863
858
  var Radio = function (props) {
864
- var _a;
859
+ var _a, _b;
865
860
  var wrapperRef = useRef(null);
866
861
  var inputRef = useRef(null);
867
- var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
862
+ var _c = useState((_a = props.checked) !== null && _a !== void 0 ? _a : props.defaultValue), checked = _c[0], setChecked = _c[1];
868
863
  useEffect(function () {
869
864
  if (props.autoFocus)
870
865
  wrapperRef.current.focus();
871
- if (props.defaultChecked)
866
+ if (props.defaultValue)
872
867
  inputRef.current.checked = true;
873
868
  }, []);
874
869
  useEffect(function () {
875
870
  setChecked(inputRef.current.checked);
876
- }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
871
+ }, [(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.checked]);
872
+ useEffect(function () {
873
+ setChecked(props.checked);
874
+ }, [props.checked]);
877
875
  var toggle = function () {
878
876
  var _a;
879
877
  if (!props.disabled) {
@@ -907,18 +905,23 @@ var StyledSelect = styled.select(templateObject_2$l || (templateObject_2$l = __m
907
905
  var templateObject_1$u, templateObject_2$l;
908
906
 
909
907
  var Select = function (props) {
910
- var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
908
+ var _a;
909
+ var inputRef = useRef(null);
911
910
  var _b = useState(false), isChanged = _b[0], setIsChanged = _b[1];
911
+ useEffect(function () {
912
+ var _a, _b;
913
+ if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) ||
914
+ ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) === props.placeholder)
915
+ setIsChanged(false);
916
+ }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
912
917
  var onChange = function (e) {
913
918
  if (!props.disabled) {
914
- var value_1 = e.target.value;
915
- setValue(value_1);
916
919
  setIsChanged(true);
917
920
  if (!!props.onChange)
918
- props.onChange(value_1);
921
+ props.onChange(e.target.value);
919
922
  }
920
923
  };
921
- 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));
924
+ return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
922
925
  };
923
926
 
924
927
  var StyledSpacer = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
@@ -988,12 +991,12 @@ var Toggle = function (props) {
988
991
  var _a;
989
992
  var containerRef = useRef(null);
990
993
  var inputRef = useRef(null);
991
- var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
994
+ var _b = useState(props.defaultValue), checked = _b[0], setChecked = _b[1];
992
995
  useEffect(function () {
993
996
  var _a;
994
997
  if (props.autoFocus)
995
998
  (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
996
- if (props.defaultChecked)
999
+ if (props.defaultValue)
997
1000
  inputRef.current.checked = true;
998
1001
  }, []);
999
1002
  useEffect(function () {
@@ -1094,22 +1097,22 @@ var Ellipse = styled.div(templateObject_2$k || (templateObject_2$k = __makeTempl
1094
1097
  var color = _a.color;
1095
1098
  return color ? theme.colors[color].light : "";
1096
1099
  });
1097
- 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"])));
1098
- var templateObject_1$o, templateObject_2$k, templateObject_3$6;
1100
+ var Content = styled.div(templateObject_3$7 || (templateObject_3$7 = __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"])));
1101
+ var templateObject_1$o, templateObject_2$k, templateObject_3$7;
1099
1102
 
1100
1103
  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)); };
1101
1104
 
1102
1105
  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"])));
1103
1106
  var CheckboxContainer = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
1104
- 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"])));
1105
- 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) {
1107
+ var CheckboxWrapper = styled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
1108
+ var Label$7 = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __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) {
1106
1109
  var weight = _a.weight;
1107
1110
  return weight || 500;
1108
1111
  }, theme.colors.darkGray.base);
1109
- var templateObject_1$n, templateObject_2$j, templateObject_3$5, templateObject_4$4;
1112
+ var templateObject_1$n, templateObject_2$j, templateObject_3$6, templateObject_4$5;
1110
1113
 
1111
1114
  var Checkboxes = function (props) {
1112
- var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
1115
+ var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
1113
1116
  var onChange = function (value) {
1114
1117
  if (props.onChange) {
1115
1118
  var newValues = values.includes(value)
@@ -1142,7 +1145,7 @@ var DateInputField = function (props) {
1142
1145
  if (props.onBlur)
1143
1146
  props.onBlur(props.name);
1144
1147
  };
1145
- 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));
1148
+ 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, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1146
1149
  };
1147
1150
 
1148
1151
  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"])));
@@ -1168,7 +1171,7 @@ var InputField = function (props) {
1168
1171
  if (props.onBlur)
1169
1172
  props.onBlur(props.name);
1170
1173
  };
1171
- 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));
1174
+ 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, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
1172
1175
  };
1173
1176
 
1174
1177
  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) {
@@ -1213,7 +1216,7 @@ var Container$8 = styled.div(templateObject_1$h || (templateObject_1$h = __makeT
1213
1216
  return "";
1214
1217
  });
1215
1218
  var SelectedLocaleWrapper = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
1216
- var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
1219
+ var DropdownContainer = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
1217
1220
  var color = _a.color;
1218
1221
  switch (color) {
1219
1222
  default:
@@ -1223,12 +1226,12 @@ var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = _
1223
1226
  return theme.colors.lightGray.dark;
1224
1227
  }
1225
1228
  });
1226
- 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 margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
1227
- var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
1229
+ var Locale = styled.div(templateObject_4$4 || (templateObject_4$4 = __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 margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
1230
+ var templateObject_1$h, templateObject_2$e, templateObject_3$5, templateObject_4$4;
1228
1231
 
1229
1232
  var LocaleSelect = function (props) {
1230
1233
  var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
1231
- var _b = useState(props.initialValue), locale = _b[0], setLocale = _b[1];
1234
+ var _b = useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
1232
1235
  var onSelectLocale = function (locale) {
1233
1236
  setLocale(locale);
1234
1237
  props.onChange(locale);
@@ -1269,15 +1272,110 @@ var NumberField = function (props) {
1269
1272
  if (props.onBlur)
1270
1273
  props.onBlur(props.name);
1271
1274
  };
1272
- 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));
1275
+ 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, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1273
1276
  };
1274
1277
 
1278
+ var expressions = {};
1279
+
1280
+ (function (exports) {
1281
+ Object.defineProperty(exports, "__esModule", { value: true });
1282
+ exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
1283
+ var hasNumber = function (input) {
1284
+ var regex = new RegExp(/\d/g);
1285
+ return regex.test(input);
1286
+ };
1287
+ exports.hasNumber = hasNumber;
1288
+ var hasSpecialCharacter = function (input) {
1289
+ var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
1290
+ return regex.test(input);
1291
+ };
1292
+ exports.hasSpecialCharacter = hasSpecialCharacter;
1293
+ var hasCapitalLetter = function (input) {
1294
+ var regex = new RegExp(/[A-Z]/g);
1295
+ return regex.test(input);
1296
+ };
1297
+ exports.hasCapitalLetter = hasCapitalLetter;
1298
+ var isValidEmail = function (email) {
1299
+ var regex = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
1300
+ return regex.test(email);
1301
+ };
1302
+ exports.isValidEmail = isValidEmail;
1303
+ var isValidUsername = function (username) {
1304
+ if (username.length > 5 &&
1305
+ username.length <= 15 &&
1306
+ username.indexOf(" ") < 0 &&
1307
+ !(0, exports.isValidEmail)(username)) {
1308
+ return true;
1309
+ }
1310
+ else {
1311
+ return false;
1312
+ }
1313
+ };
1314
+ exports.isValidUsername = isValidUsername;
1315
+ var isStrongPassword = function (password) {
1316
+ return password.length >= 8 &&
1317
+ (0, exports.hasNumber)(password) &&
1318
+ (0, exports.hasSpecialCharacter)(password) &&
1319
+ (0, exports.hasCapitalLetter)(password)
1320
+ ? true
1321
+ : false;
1322
+ };
1323
+ exports.isStrongPassword = isStrongPassword;
1324
+ }(expressions));
1325
+
1275
1326
  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"])));
1276
1327
  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);
1277
- var templateObject_1$d, templateObject_2$b;
1328
+ var HelperContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
1329
+ var fadeIn = keyframes(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
1330
+ var Helper = styled(StyledParagraph)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
1331
+ var isOk = _a.isOk;
1332
+ return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
1333
+ }, fadeIn);
1334
+ var templateObject_1$d, templateObject_2$b, templateObject_3$4, templateObject_4$3, templateObject_5$2;
1335
+
1336
+ var translations = {
1337
+ "nl-NL": {
1338
+ capitalLetter: "Minimaal 1 hoofdletter",
1339
+ number: "Minimaal 1 getal",
1340
+ specialCharacter: "Minimaal 1 leesteken",
1341
+ length: "Minimaal 8 karakters",
1342
+ },
1343
+ "nl-BE": {
1344
+ capitalLetter: "Minimaal 1 hoofdletter",
1345
+ number: "Minimaal 1 getal",
1346
+ specialCharacter: "Minimaal 1 leesteken",
1347
+ length: "Minimaal 8 karakters",
1348
+ },
1349
+ "en-GB": {
1350
+ capitalLetter: "At least 1 capital letter",
1351
+ number: "At least 1 number",
1352
+ specialCharacter: "At least 1 special character",
1353
+ length: "At least 8 characters",
1354
+ },
1355
+ "fr-FR": {
1356
+ capitalLetter: "Au moins une lettre majuscule",
1357
+ number: "Au moins un chiffre",
1358
+ specialCharacter: "Au moins un caractère spécial",
1359
+ length: "Au moins 8 caractères",
1360
+ },
1361
+ "fr-BE": {
1362
+ capitalLetter: "Au moins une lettre majuscule",
1363
+ number: "Au moins un chiffre",
1364
+ specialCharacter: "Au moins un caractère spécial",
1365
+ length: "Au moins 8 caractères",
1366
+ },
1367
+ "de-DE": {
1368
+ capitalLetter: "Mindestens 1 Großbuchstabe",
1369
+ number: "Mindestens 1 Zahl",
1370
+ specialCharacter: "Mindestens 1 Sonderzeichen",
1371
+ length: "Mindestens 8 Zeichen",
1372
+ },
1373
+ };
1278
1374
 
1279
1375
  var PasswordInputField = function (props) {
1376
+ var _a = useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
1280
1377
  var onChange = function (value) {
1378
+ setValue(value);
1281
1379
  if (props.onChange)
1282
1380
  props.onChange(props.name, value);
1283
1381
  };
@@ -1290,7 +1388,7 @@ var PasswordInputField = function (props) {
1290
1388
  if (props.onBlur)
1291
1389
  props.onBlur(props.name);
1292
1390
  };
1293
- 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));
1391
+ 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, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }, void 0), props.helper && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helper].capitalLetter] }), void 0), jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helper].number] }), void 0), jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helper].specialCharacter] }), void 0), jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helper].length] }), void 0)] }, void 0)) : null] }, void 0));
1294
1392
  };
1295
1393
 
1296
1394
  var generateRandomString = function (length) {
@@ -1369,7 +1467,7 @@ var templateObject_1$b, templateObject_2$a, templateObject_3$3;
1369
1467
  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)); };
1370
1468
 
1371
1469
  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"])));
1372
- 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) {
1470
+ 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 box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
1373
1471
  var status = _a.status;
1374
1472
  return (!!status ? "pointer" : "not-allowed");
1375
1473
  }, function (_a) {
@@ -1387,7 +1485,10 @@ var Step$1 = styled.li(templateObject_2$9 || (templateObject_2$9 = __makeTemplat
1387
1485
  return status === "active"
1388
1486
  ? theme.colors.lightGray.light
1389
1487
  : theme.colors.darkGray.light;
1390
- }, theme.colors.darkGray.base, theme.colors.lightGray.dark);
1488
+ }, theme.colors.darkGray.base, function (_a) {
1489
+ var hasTitle = _a.hasTitle;
1490
+ return (hasTitle ? "calc(50% - 12px)" : "50%");
1491
+ }, theme.colors.lightGray.dark);
1391
1492
  var templateObject_1$a, templateObject_2$9;
1392
1493
 
1393
1494
  var Steps$2 = function (props) { return (jsx(Container$5, { children: props.steps.map(function (_a, index) {
@@ -1402,11 +1503,11 @@ var Steps$2 = function (props) { return (jsx(Container$5, { children: props.step
1402
1503
  if (onClick && props.current >= step)
1403
1504
  onClick(step);
1404
1505
  };
1405
- 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)));
1506
+ return (jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { 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), title && jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1406
1507
  }) }, void 0)); };
1407
1508
 
1408
1509
  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"])));
1409
- 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) {
1510
+ 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 box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
1410
1511
  var status = _a.status;
1411
1512
  return (!!status ? "pointer" : "not-allowed");
1412
1513
  }, function (_a) {
@@ -1439,7 +1540,7 @@ var Steps$1 = function (props) { return (jsx(Container$4, { children: props.step
1439
1540
  if (onClick && props.current >= step)
1440
1541
  onClick(step);
1441
1542
  };
1442
- 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)));
1543
+ 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), title && jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1443
1544
  }) }, void 0)); };
1444
1545
 
1445
1546
  var Steps = function (props) {
@@ -1466,7 +1567,7 @@ var RadioGroup = function (props) {
1466
1567
  };
1467
1568
  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) {
1468
1569
  var id = _a.id, value = _a.value, label = _a.label;
1469
- 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)));
1570
+ return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === 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)));
1470
1571
  }) }, void 0)] }, void 0));
1471
1572
  };
1472
1573
 
@@ -1483,7 +1584,7 @@ var SelectField = function (props) {
1483
1584
  if (props.onBlur)
1484
1585
  props.onBlur(props.name);
1485
1586
  };
1486
- 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) {
1587
+ 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, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
1487
1588
  var value = _a.value, label = _a.label;
1488
1589
  return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
1489
1590
  }) }), void 0)] }, void 0));
@@ -1502,7 +1603,7 @@ var ToggleField = function (props) {
1502
1603
  if (props.onBlur)
1503
1604
  props.onBlur(props.name);
1504
1605
  };
1505
- return (jsxs(Container$2, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultChecked: props.initialValue, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1606
+ return (jsxs(Container$2, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
1506
1607
  };
1507
1608
 
1508
1609
  var TooltipContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
@@ -1563,7 +1664,7 @@ var FeedbackColors = {
1563
1664
  success: theme.colors.green.base,
1564
1665
  error: theme.colors.red.base,
1565
1666
  };
1566
- 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) {
1667
+ var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
1567
1668
  var status = _a.status;
1568
1669
  return FeedbackColors[status];
1569
1670
  });
@@ -1591,17 +1692,95 @@ var FormWrapper = styled.form(templateObject_1$3 || (templateObject_1$3 = __make
1591
1692
  var ButtonWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
1592
1693
  var templateObject_1$3, templateObject_2$2;
1593
1694
 
1594
- var Form = function (props) {
1695
+ var Form = forwardRef(function (props, ref) {
1595
1696
  var _a = useState({}), values = _a[0], setValues = _a[1];
1596
1697
  var _b = useState({}), feedback = _b[0], setFeedback = _b[1];
1698
+ useImperativeHandle(ref, function () { return ({
1699
+ resetForm: resetForm,
1700
+ }); });
1597
1701
  useEffect(function () {
1598
- var initialValues = {};
1702
+ setDefaultValues();
1703
+ }, []);
1704
+ var setDefaultValues = function () {
1705
+ var defaultValues = {};
1599
1706
  for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
1600
1707
  var field = _a[_i];
1601
- initialValues[field.name] = field.initialValue;
1708
+ defaultValues[field.name] = field.defaultValue;
1602
1709
  }
1603
- setValues(initialValues);
1604
- }, []);
1710
+ setValues(defaultValues);
1711
+ setFeedback({});
1712
+ };
1713
+ var resetForm = function () {
1714
+ setDefaultValues();
1715
+ var _loop_1 = function (field) {
1716
+ switch (field.type) {
1717
+ case "text":
1718
+ case "password":
1719
+ case "date": {
1720
+ var element = document.getElementById(field.name);
1721
+ if (!field.defaultValue)
1722
+ element.value = "";
1723
+ else
1724
+ element.value = field.defaultValue;
1725
+ break;
1726
+ }
1727
+ case "toggle": {
1728
+ var element = document.getElementById(field.name);
1729
+ if (!field.defaultValue)
1730
+ element.checked = false;
1731
+ else
1732
+ element.checked = !!field.defaultValue;
1733
+ break;
1734
+ }
1735
+ case "number": {
1736
+ var element = document.getElementById(field.name);
1737
+ if (!field.defaultValue)
1738
+ element.value = "0";
1739
+ else
1740
+ element.value = "".concat(field.defaultValue);
1741
+ break;
1742
+ }
1743
+ case "select": {
1744
+ var element = document.getElementById(field.name);
1745
+ if (!field.defaultValue)
1746
+ element.selectedIndex = null;
1747
+ else {
1748
+ element.selectedIndex = Array.from(element.options).findIndex(function (_a) {
1749
+ var value = _a.value;
1750
+ return value === field.defaultValue;
1751
+ });
1752
+ }
1753
+ break;
1754
+ }
1755
+ case "radio": {
1756
+ for (var _b = 0, _c = field.items; _b < _c.length; _b++) {
1757
+ var option = _c[_b];
1758
+ var element = document.getElementById(option.id);
1759
+ if (!field.defaultValue)
1760
+ element.checked = false;
1761
+ else
1762
+ element.checked = element.value === field.defaultValue;
1763
+ }
1764
+ break;
1765
+ }
1766
+ case "checkbox": {
1767
+ for (var _d = 0, _e = field.items; _d < _e.length; _d++) {
1768
+ var option = _e[_d];
1769
+ var element = document.getElementById(option.id);
1770
+ if (!field.defaultValue)
1771
+ element.checked = false;
1772
+ else
1773
+ element.checked = field.defaultValue.includes(element.value);
1774
+ }
1775
+ break;
1776
+ }
1777
+ }
1778
+ };
1779
+ for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
1780
+ var field = _a[_i];
1781
+ _loop_1(field);
1782
+ }
1783
+ };
1605
1784
  var onChangeFormField = function (fieldName, value) {
1606
1785
  var _a, _b, _c;
1607
1786
  var feedbackForField = { status: undefined, message: undefined };
@@ -1670,7 +1849,7 @@ var Form = function (props) {
1670
1849
  jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
1671
1850
  }
1672
1851
  }) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
1673
- };
1852
+ });
1674
1853
 
1675
1854
  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) {
1676
1855
  var color = _a.color, active = _a.active;