@typeolymp/ui-components 1.5.8 → 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 -103
  26. package/build/index.es.js.map +1 -1
  27. package/build/index.js +283 -103
  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,24 +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
- 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));
545
542
  };
546
543
 
547
544
  function requiredArgs(required, args) {
@@ -663,8 +660,16 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
663
660
  }
664
661
 
665
662
  var DateInput = function (props) {
663
+ var _a;
666
664
  var inputRef = useRef(null);
667
- 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]);
668
673
  var showPicker = function () {
669
674
  if (!props.disabled) {
670
675
  inputRef.current.showPicker();
@@ -676,32 +681,28 @@ var DateInput = function (props) {
676
681
  };
677
682
  var onChange = function (e) {
678
683
  if (!props.disabled) {
679
- var value_1 = e.target.value;
680
- setValue(value_1);
684
+ setIsChanged(true);
681
685
  if (!!props.onChange)
682
- props.onChange(value_1);
686
+ props.onChange(e.target.value);
683
687
  }
684
688
  };
685
689
  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
+ 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;
690
696
  };
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));
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));
692
698
  };
693
699
 
694
700
  var Input = function (props) {
695
- var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
696
701
  var onChange = function (e) {
697
- if (!props.disabled) {
698
- var value_1 = e.target.value;
699
- setValue(value_1);
700
- if (!!props.onChange)
701
- props.onChange(value_1);
702
- }
702
+ if (!props.disabled && !!props.onChange)
703
+ props.onChange(e.target.value);
703
704
  };
704
- 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);
705
706
  };
706
707
  Input.Password = PasswordInput;
707
708
  Input.Date = DateInput;
@@ -754,43 +755,38 @@ var StyledInputNumber = styled.input(templateObject_2$m || (templateObject_2$m =
754
755
  var templateObject_1$x, templateObject_2$m;
755
756
 
756
757
  var Number = function (props) {
757
- var ref = useRef(null);
758
- var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
758
+ var inputRef = useRef(null);
759
759
  var onChange = function (e) {
760
- if (!props.disabled) {
761
- var value_1 = parseInt(e.target.value);
762
- setValue(value_1);
763
- if (!!props.onChange)
764
- props.onChange(e.target.value);
765
- }
760
+ if (!props.disabled && !!props.onChange)
761
+ props.onChange(parseInt(e.target.value));
766
762
  };
767
763
  var decrease = function () {
768
- var _a;
769
- 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;
770
767
  if (props.min && newValue < props.min) {
771
- setValue(props.min);
768
+ inputRef.current.value = "".concat(props.min);
772
769
  }
773
770
  else {
774
- setValue(newValue);
771
+ inputRef.current.value = "".concat(newValue);
775
772
  if (!!props.onChange)
776
- props.onChange("".concat(newValue));
777
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
773
+ props.onChange(newValue);
778
774
  }
779
775
  };
780
776
  var increase = function () {
781
- var _a;
782
- 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;
783
780
  if (props.max && newValue > props.max) {
784
- setValue(props.max);
781
+ inputRef.current.value = "".concat(props.max);
785
782
  }
786
783
  else {
787
- setValue(newValue);
784
+ inputRef.current.value = "".concat(newValue);
788
785
  if (!!props.onChange)
789
- props.onChange("".concat(newValue));
790
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
786
+ props.onChange(newValue);
791
787
  }
792
788
  };
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));
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));
794
790
  };
795
791
 
796
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) {
@@ -829,7 +825,7 @@ var templateObject_1$w;
829
825
 
830
826
  var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
831
827
 
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) {
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) {
833
829
  var checked = _a.checked, disabled = _a.disabled;
834
830
  if (disabled)
835
831
  return theme.colors.lightGray.darker;
@@ -860,19 +856,22 @@ var StyledRadio = styled.div(templateObject_1$v || (templateObject_1$v = __makeT
860
856
  var templateObject_1$v;
861
857
 
862
858
  var Radio = function (props) {
863
- var _a;
859
+ var _a, _b;
864
860
  var wrapperRef = useRef(null);
865
861
  var inputRef = useRef(null);
866
- 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];
867
863
  useEffect(function () {
868
864
  if (props.autoFocus)
869
865
  wrapperRef.current.focus();
870
- if (props.defaultChecked)
866
+ if (props.defaultValue)
871
867
  inputRef.current.checked = true;
872
868
  }, []);
873
869
  useEffect(function () {
874
870
  setChecked(inputRef.current.checked);
875
- }, [(_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]);
876
875
  var toggle = function () {
877
876
  var _a;
878
877
  if (!props.disabled) {
@@ -906,18 +905,23 @@ var StyledSelect = styled.select(templateObject_2$l || (templateObject_2$l = __m
906
905
  var templateObject_1$u, templateObject_2$l;
907
906
 
908
907
  var Select = function (props) {
909
- var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
908
+ var _a;
909
+ var inputRef = useRef(null);
910
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]);
911
917
  var onChange = function (e) {
912
918
  if (!props.disabled) {
913
- var value_1 = e.target.value;
914
- setValue(value_1);
915
919
  setIsChanged(true);
916
920
  if (!!props.onChange)
917
- props.onChange(value_1);
921
+ props.onChange(e.target.value);
918
922
  }
919
923
  };
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));
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));
921
925
  };
922
926
 
923
927
  var StyledSpacer = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
@@ -987,12 +991,12 @@ var Toggle = function (props) {
987
991
  var _a;
988
992
  var containerRef = useRef(null);
989
993
  var inputRef = useRef(null);
990
- var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
994
+ var _b = useState(props.defaultValue), checked = _b[0], setChecked = _b[1];
991
995
  useEffect(function () {
992
996
  var _a;
993
997
  if (props.autoFocus)
994
998
  (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
995
- if (props.defaultChecked)
999
+ if (props.defaultValue)
996
1000
  inputRef.current.checked = true;
997
1001
  }, []);
998
1002
  useEffect(function () {
@@ -1093,22 +1097,22 @@ var Ellipse = styled.div(templateObject_2$k || (templateObject_2$k = __makeTempl
1093
1097
  var color = _a.color;
1094
1098
  return color ? theme.colors[color].light : "";
1095
1099
  });
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;
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;
1098
1102
 
1099
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)); };
1100
1104
 
1101
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"])));
1102
1106
  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) {
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) {
1105
1109
  var weight = _a.weight;
1106
1110
  return weight || 500;
1107
1111
  }, theme.colors.darkGray.base);
1108
- 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;
1109
1113
 
1110
1114
  var Checkboxes = function (props) {
1111
- var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
1115
+ var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
1112
1116
  var onChange = function (value) {
1113
1117
  if (props.onChange) {
1114
1118
  var newValues = values.includes(value)
@@ -1141,7 +1145,7 @@ var DateInputField = function (props) {
1141
1145
  if (props.onBlur)
1142
1146
  props.onBlur(props.name);
1143
1147
  };
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));
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));
1145
1149
  };
1146
1150
 
1147
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"])));
@@ -1167,7 +1171,7 @@ var InputField = function (props) {
1167
1171
  if (props.onBlur)
1168
1172
  props.onBlur(props.name);
1169
1173
  };
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));
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));
1171
1175
  };
1172
1176
 
1173
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) {
@@ -1212,7 +1216,7 @@ var Container$8 = styled.div(templateObject_1$h || (templateObject_1$h = __makeT
1212
1216
  return "";
1213
1217
  });
1214
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"])));
1215
- 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) {
1216
1220
  var color = _a.color;
1217
1221
  switch (color) {
1218
1222
  default:
@@ -1222,12 +1226,12 @@ var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = _
1222
1226
  return theme.colors.lightGray.dark;
1223
1227
  }
1224
1228
  });
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 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);
1226
- 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;
1227
1231
 
1228
1232
  var LocaleSelect = function (props) {
1229
1233
  var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
1230
- var _b = useState(props.initialValue), locale = _b[0], setLocale = _b[1];
1234
+ var _b = useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
1231
1235
  var onSelectLocale = function (locale) {
1232
1236
  setLocale(locale);
1233
1237
  props.onChange(locale);
@@ -1268,15 +1272,110 @@ var NumberField = function (props) {
1268
1272
  if (props.onBlur)
1269
1273
  props.onBlur(props.name);
1270
1274
  };
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));
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));
1272
1276
  };
1273
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
+
1274
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"])));
1275
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);
1276
- 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
+ };
1277
1374
 
1278
1375
  var PasswordInputField = function (props) {
1376
+ var _a = useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
1279
1377
  var onChange = function (value) {
1378
+ setValue(value);
1280
1379
  if (props.onChange)
1281
1380
  props.onChange(props.name, value);
1282
1381
  };
@@ -1289,7 +1388,7 @@ var PasswordInputField = function (props) {
1289
1388
  if (props.onBlur)
1290
1389
  props.onBlur(props.name);
1291
1390
  };
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));
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));
1293
1392
  };
1294
1393
 
1295
1394
  var generateRandomString = function (length) {
@@ -1368,7 +1467,7 @@ var templateObject_1$b, templateObject_2$a, templateObject_3$3;
1368
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)); };
1369
1468
 
1370
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"])));
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) {
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) {
1372
1471
  var status = _a.status;
1373
1472
  return (!!status ? "pointer" : "not-allowed");
1374
1473
  }, function (_a) {
@@ -1386,7 +1485,10 @@ var Step$1 = styled.li(templateObject_2$9 || (templateObject_2$9 = __makeTemplat
1386
1485
  return status === "active"
1387
1486
  ? theme.colors.lightGray.light
1388
1487
  : theme.colors.darkGray.light;
1389
- }, 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);
1390
1492
  var templateObject_1$a, templateObject_2$9;
1391
1493
 
1392
1494
  var Steps$2 = function (props) { return (jsx(Container$5, { children: props.steps.map(function (_a, index) {
@@ -1401,11 +1503,11 @@ var Steps$2 = function (props) { return (jsx(Container$5, { children: props.step
1401
1503
  if (onClick && props.current >= step)
1402
1504
  onClick(step);
1403
1505
  };
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)));
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)));
1405
1507
  }) }, void 0)); };
1406
1508
 
1407
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"])));
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) {
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) {
1409
1511
  var status = _a.status;
1410
1512
  return (!!status ? "pointer" : "not-allowed");
1411
1513
  }, function (_a) {
@@ -1438,7 +1540,7 @@ var Steps$1 = function (props) { return (jsx(Container$4, { children: props.step
1438
1540
  if (onClick && props.current >= step)
1439
1541
  onClick(step);
1440
1542
  };
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)));
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)));
1442
1544
  }) }, void 0)); };
1443
1545
 
1444
1546
  var Steps = function (props) {
@@ -1465,7 +1567,7 @@ var RadioGroup = function (props) {
1465
1567
  };
1466
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) {
1467
1569
  var id = _a.id, value = _a.value, label = _a.label;
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)));
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)));
1469
1571
  }) }, void 0)] }, void 0));
1470
1572
  };
1471
1573
 
@@ -1482,7 +1584,7 @@ var SelectField = function (props) {
1482
1584
  if (props.onBlur)
1483
1585
  props.onBlur(props.name);
1484
1586
  };
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) {
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) {
1486
1588
  var value = _a.value, label = _a.label;
1487
1589
  return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
1488
1590
  }) }), void 0)] }, void 0));
@@ -1501,7 +1603,7 @@ var ToggleField = function (props) {
1501
1603
  if (props.onBlur)
1502
1604
  props.onBlur(props.name);
1503
1605
  };
1504
- 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));
1505
1607
  };
1506
1608
 
1507
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) {
@@ -1562,7 +1664,7 @@ var FeedbackColors = {
1562
1664
  success: theme.colors.green.base,
1563
1665
  error: theme.colors.red.base,
1564
1666
  };
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) {
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) {
1566
1668
  var status = _a.status;
1567
1669
  return FeedbackColors[status];
1568
1670
  });
@@ -1590,17 +1692,95 @@ var FormWrapper = styled.form(templateObject_1$3 || (templateObject_1$3 = __make
1590
1692
  var ButtonWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
1591
1693
  var templateObject_1$3, templateObject_2$2;
1592
1694
 
1593
- var Form = function (props) {
1695
+ var Form = forwardRef(function (props, ref) {
1594
1696
  var _a = useState({}), values = _a[0], setValues = _a[1];
1595
1697
  var _b = useState({}), feedback = _b[0], setFeedback = _b[1];
1698
+ useImperativeHandle(ref, function () { return ({
1699
+ resetForm: resetForm,
1700
+ }); });
1596
1701
  useEffect(function () {
1597
- var initialValues = {};
1702
+ setDefaultValues();
1703
+ }, []);
1704
+ var setDefaultValues = function () {
1705
+ var defaultValues = {};
1598
1706
  for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
1599
1707
  var field = _a[_i];
1600
- initialValues[field.name] = field.initialValue;
1708
+ defaultValues[field.name] = field.defaultValue;
1601
1709
  }
1602
- setValues(initialValues);
1603
- }, []);
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
+ };
1604
1784
  var onChangeFormField = function (fieldName, value) {
1605
1785
  var _a, _b, _c;
1606
1786
  var feedbackForField = { status: undefined, message: undefined };
@@ -1669,7 +1849,7 @@ var Form = function (props) {
1669
1849
  jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
1670
1850
  }
1671
1851
  }) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
1672
- };
1852
+ });
1673
1853
 
1674
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) {
1675
1855
  var color = _a.color, active = _a.active;