@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.js CHANGED
@@ -3,14 +3,14 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
- var styled = require('styled-components');
7
6
  var React = require('react');
7
+ var styled = require('styled-components');
8
8
  var BeatLoader = require('react-spinners/BeatLoader');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
11
 
12
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
14
  var BeatLoader__default = /*#__PURE__*/_interopDefaultLegacy(BeatLoader);
15
15
 
16
16
  var theme = {
@@ -118,12 +118,12 @@ var theme = {
118
118
  small: {
119
119
  fontSize: "16px",
120
120
  fontWeight: "500",
121
- lineHeight: "19px",
121
+ lineHeight: "22px",
122
122
  },
123
123
  medium: {
124
124
  fontSize: "20px",
125
125
  fontWeight: "500",
126
- lineHeight: "26px",
126
+ lineHeight: "30px",
127
127
  },
128
128
  large: {
129
129
  fontSize: "28px",
@@ -198,7 +198,7 @@ function __makeTemplateObject(cooked, raw) {
198
198
  return cooked;
199
199
  }
200
200
 
201
- var StyledButton = styled__default["default"].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) {
201
+ var StyledButton = styled__default["default"].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) {
202
202
  var fluid = _a.fluid;
203
203
  return (fluid ? "100%" : "fit-content");
204
204
  }, function (_a) {
@@ -252,7 +252,7 @@ var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$o
252
252
  var size = _a.size;
253
253
  return !size ? theme.button.medium.height : theme.button[size].height;
254
254
  });
255
- var GhostButton = styled__default["default"](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) {
255
+ var GhostButton = styled__default["default"](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) {
256
256
  var size = _a.size;
257
257
  return !size
258
258
  ? "calc(".concat(theme.button.medium.height, " - 2.5px)")
@@ -268,9 +268,10 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$7 ||
268
268
  ? theme.button.medium.marginTopActive
269
269
  : theme.button[size].marginTopActive;
270
270
  });
271
- var templateObject_1$F, templateObject_2$o, templateObject_3$7;
271
+ var templateObject_1$F, templateObject_2$o, templateObject_3$8;
272
272
 
273
- var Button = function (props) {
273
+ var Button = React.forwardRef(function (props, ref) {
274
+ var as = props.href || props.asAnchor ? "a" : "button";
274
275
  var onClick = function () {
275
276
  if (!props.disabled) {
276
277
  if (props.onClick)
@@ -278,14 +279,14 @@ var Button = function (props) {
278
279
  }
279
280
  };
280
281
  if (props.disabled) {
281
- return (jsxRuntime.jsx(DisabledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
282
+ return (jsxRuntime.jsx(DisabledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
282
283
  }
283
284
  if (props.color === "white")
284
- return (jsxRuntime.jsx(GhostButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
285
- return (jsxRuntime.jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
286
- };
285
+ return (jsxRuntime.jsx(GhostButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
286
+ return (jsxRuntime.jsx(StyledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
287
+ });
287
288
 
288
- var StyledCheckbox = styled__default["default"].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) {
289
+ var StyledCheckbox = styled__default["default"].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) {
289
290
  var checked = _a.checked, disabled = _a.disabled;
290
291
  if (disabled)
291
292
  return theme.colors.lightGray.darker;
@@ -480,6 +481,7 @@ var icons = {
480
481
  reload: (jsxRuntime.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)),
481
482
  expand: (jsxRuntime.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)),
482
483
  calendar: (jsxRuntime.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)),
484
+ menuAlt: (jsxRuntime.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)),
483
485
  };
484
486
  var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] }), void 0) }), void 0)); };
485
487
 
@@ -511,8 +513,8 @@ var illustrations = {
511
513
  var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
512
514
 
513
515
  var InputIconWrapper = styled__default["default"].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) {
514
- var value = _a.value;
515
- return !value ? theme.colors.lightGray.darker : "";
516
+ var isChanged = _a.isChanged;
517
+ return !isChanged ? theme.colors.lightGray.darker : "";
516
518
  }, function (_a) {
517
519
  var disabled = _a.disabled;
518
520
  return (disabled ? "not-allowed" : "pointer");
@@ -534,24 +536,19 @@ var templateObject_1$z, templateObject_2$n;
534
536
 
535
537
  var PasswordInput = function (props) {
536
538
  var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
537
- var _b = React.useState(props.initialValue || ""), value = _b[0], setValue = _b[1];
538
539
  var toggle = function () {
539
540
  if (!props.disabled)
540
541
  setIsVisible(!isVisible);
541
542
  };
542
543
  var onChange = function (e) {
543
- if (!props.disabled) {
544
- var value_1 = e.target.value;
545
- setValue(value_1);
546
- if (!!props.onChange)
547
- props.onChange(value_1);
548
- }
544
+ if (!props.disabled && !!props.onChange)
545
+ props.onChange(e.target.value);
549
546
  };
550
547
  var onKeyPress = function (e) {
551
548
  if (props.onKeyPress)
552
549
  props.onKeyPress(e);
553
550
  };
554
- return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
551
+ return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
555
552
  };
556
553
 
557
554
  function requiredArgs(required, args) {
@@ -673,8 +670,16 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
673
670
  }
674
671
 
675
672
  var DateInput = function (props) {
673
+ var _a;
676
674
  var inputRef = React.useRef(null);
677
- var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
675
+ var _b = React.useState(false), isChanged = _b[0], setIsChanged = _b[1];
676
+ React.useEffect(function () {
677
+ var _a;
678
+ if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value))
679
+ setIsChanged(false);
680
+ else
681
+ setIsChanged(true);
682
+ }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
678
683
  var showPicker = function () {
679
684
  if (!props.disabled) {
680
685
  inputRef.current.showPicker();
@@ -686,32 +691,28 @@ var DateInput = function (props) {
686
691
  };
687
692
  var onChange = function (e) {
688
693
  if (!props.disabled) {
689
- var value_1 = e.target.value;
690
- setValue(value_1);
694
+ setIsChanged(true);
691
695
  if (!!props.onChange)
692
- props.onChange(value_1);
696
+ props.onChange(e.target.value);
693
697
  }
694
698
  };
695
699
  var onBlur = function () {
696
- if (isAfter(new Date(value), new Date(props.max)))
697
- setValue(props.max);
698
- if (isBefore(new Date(value), new Date(props.min)))
699
- setValue(props.min);
700
+ if (props.onBlur)
701
+ props.onBlur();
702
+ if (isAfter(new Date(inputRef.current.value), new Date(props.max)))
703
+ inputRef.current.value = props.max;
704
+ if (isBefore(new Date(inputRef.current.value), new Date(props.min)))
705
+ inputRef.current.value = props.min;
700
706
  };
701
- return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled, value: value }, { children: [jsxRuntime.jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: "date" }, props, { value: value, onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
707
+ return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled, isChanged: isChanged }, { children: [jsxRuntime.jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
702
708
  };
703
709
 
704
710
  var Input = function (props) {
705
- var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
706
711
  var onChange = function (e) {
707
- if (!props.disabled) {
708
- var value_1 = e.target.value;
709
- setValue(value_1);
710
- if (!!props.onChange)
711
- props.onChange(value_1);
712
- }
712
+ if (!props.disabled && !!props.onChange)
713
+ props.onChange(e.target.value);
713
714
  };
714
- return (jsxRuntime.jsx(StyledInput, __assign({ type: "text" }, props, { value: value, onChange: onChange }), void 0));
715
+ return jsxRuntime.jsx(StyledInput, __assign({ type: "text" }, props, { onChange: onChange }), void 0);
715
716
  };
716
717
  Input.Password = PasswordInput;
717
718
  Input.Date = DateInput;
@@ -764,43 +765,38 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$m || (
764
765
  var templateObject_1$x, templateObject_2$m;
765
766
 
766
767
  var Number = function (props) {
767
- var ref = React.useRef(null);
768
- var _a = React.useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
768
+ var inputRef = React.useRef(null);
769
769
  var onChange = function (e) {
770
- if (!props.disabled) {
771
- var value_1 = parseInt(e.target.value);
772
- setValue(value_1);
773
- if (!!props.onChange)
774
- props.onChange(e.target.value);
775
- }
770
+ if (!props.disabled && !!props.onChange)
771
+ props.onChange(parseInt(e.target.value));
776
772
  };
777
773
  var decrease = function () {
778
- var _a;
779
- var newValue = value - 1;
774
+ var _a, _b;
775
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
776
+ var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) - 1;
780
777
  if (props.min && newValue < props.min) {
781
- setValue(props.min);
778
+ inputRef.current.value = "".concat(props.min);
782
779
  }
783
780
  else {
784
- setValue(newValue);
781
+ inputRef.current.value = "".concat(newValue);
785
782
  if (!!props.onChange)
786
- props.onChange("".concat(newValue));
787
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
783
+ props.onChange(newValue);
788
784
  }
789
785
  };
790
786
  var increase = function () {
791
- var _a;
792
- var newValue = value + 1;
787
+ var _a, _b;
788
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
789
+ var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) + 1;
793
790
  if (props.max && newValue > props.max) {
794
- setValue(props.max);
791
+ inputRef.current.value = "".concat(props.max);
795
792
  }
796
793
  else {
797
- setValue(newValue);
794
+ inputRef.current.value = "".concat(newValue);
798
795
  if (!!props.onChange)
799
- props.onChange("".concat(newValue));
800
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
796
+ props.onChange(newValue);
801
797
  }
802
798
  };
803
- return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
799
+ return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
804
800
  };
805
801
 
806
802
  var StyledParagraph = styled__default["default"].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) {
@@ -839,7 +835,7 @@ var templateObject_1$w;
839
835
 
840
836
  var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
841
837
 
842
- var StyledRadio = styled__default["default"].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) {
838
+ var StyledRadio = styled__default["default"].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) {
843
839
  var checked = _a.checked, disabled = _a.disabled;
844
840
  if (disabled)
845
841
  return theme.colors.lightGray.darker;
@@ -870,19 +866,22 @@ var StyledRadio = styled__default["default"].div(templateObject_1$v || (template
870
866
  var templateObject_1$v;
871
867
 
872
868
  var Radio = function (props) {
873
- var _a;
869
+ var _a, _b;
874
870
  var wrapperRef = React.useRef(null);
875
871
  var inputRef = React.useRef(null);
876
- var _b = React.useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
872
+ var _c = React.useState((_a = props.checked) !== null && _a !== void 0 ? _a : props.defaultValue), checked = _c[0], setChecked = _c[1];
877
873
  React.useEffect(function () {
878
874
  if (props.autoFocus)
879
875
  wrapperRef.current.focus();
880
- if (props.defaultChecked)
876
+ if (props.defaultValue)
881
877
  inputRef.current.checked = true;
882
878
  }, []);
883
879
  React.useEffect(function () {
884
880
  setChecked(inputRef.current.checked);
885
- }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
881
+ }, [(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.checked]);
882
+ React.useEffect(function () {
883
+ setChecked(props.checked);
884
+ }, [props.checked]);
886
885
  var toggle = function () {
887
886
  var _a;
888
887
  if (!props.disabled) {
@@ -916,18 +915,23 @@ var StyledSelect = styled__default["default"].select(templateObject_2$l || (temp
916
915
  var templateObject_1$u, templateObject_2$l;
917
916
 
918
917
  var Select = function (props) {
919
- var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
918
+ var _a;
919
+ var inputRef = React.useRef(null);
920
920
  var _b = React.useState(false), isChanged = _b[0], setIsChanged = _b[1];
921
+ React.useEffect(function () {
922
+ var _a, _b;
923
+ if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) ||
924
+ ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) === props.placeholder)
925
+ setIsChanged(false);
926
+ }, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
921
927
  var onChange = function (e) {
922
928
  if (!props.disabled) {
923
- var value_1 = e.target.value;
924
- setValue(value_1);
925
929
  setIsChanged(true);
926
930
  if (!!props.onChange)
927
- props.onChange(value_1);
931
+ props.onChange(e.target.value);
928
932
  }
929
933
  };
930
- return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
934
+ return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
931
935
  };
932
936
 
933
937
  var StyledSpacer = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
@@ -997,12 +1001,12 @@ var Toggle = function (props) {
997
1001
  var _a;
998
1002
  var containerRef = React.useRef(null);
999
1003
  var inputRef = React.useRef(null);
1000
- var _b = React.useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
1004
+ var _b = React.useState(props.defaultValue), checked = _b[0], setChecked = _b[1];
1001
1005
  React.useEffect(function () {
1002
1006
  var _a;
1003
1007
  if (props.autoFocus)
1004
1008
  (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
1005
- if (props.defaultChecked)
1009
+ if (props.defaultValue)
1006
1010
  inputRef.current.checked = true;
1007
1011
  }, []);
1008
1012
  React.useEffect(function () {
@@ -1103,22 +1107,22 @@ var Ellipse = styled__default["default"].div(templateObject_2$k || (templateObje
1103
1107
  var color = _a.color;
1104
1108
  return color ? theme.colors[color].light : "";
1105
1109
  });
1106
- var Content = styled__default["default"].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"])));
1107
- var templateObject_1$o, templateObject_2$k, templateObject_3$6;
1110
+ var Content = styled__default["default"].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"])));
1111
+ var templateObject_1$o, templateObject_2$k, templateObject_3$7;
1108
1112
 
1109
1113
  var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }, void 0), jsxRuntime.jsx(Content, { children: props.children }, void 0)] }), void 0)); };
1110
1114
 
1111
1115
  var Fieldset$1 = styled__default["default"].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"])));
1112
1116
  var CheckboxContainer = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
1113
- var CheckboxWrapper = styled__default["default"].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"])));
1114
- var Label$7 = styled__default["default"](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) {
1117
+ var CheckboxWrapper = styled__default["default"].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"])));
1118
+ var Label$7 = styled__default["default"](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) {
1115
1119
  var weight = _a.weight;
1116
1120
  return weight || 500;
1117
1121
  }, theme.colors.darkGray.base);
1118
- var templateObject_1$n, templateObject_2$j, templateObject_3$5, templateObject_4$4;
1122
+ var templateObject_1$n, templateObject_2$j, templateObject_3$6, templateObject_4$5;
1119
1123
 
1120
1124
  var Checkboxes = function (props) {
1121
- var _a = React.useState(props.initialValue || []), values = _a[0], setValues = _a[1];
1125
+ var _a = React.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
1122
1126
  var onChange = function (value) {
1123
1127
  if (props.onChange) {
1124
1128
  var newValues = values.includes(value)
@@ -1151,7 +1155,7 @@ var DateInputField = function (props) {
1151
1155
  if (props.onBlur)
1152
1156
  props.onBlur(props.name);
1153
1157
  };
1154
- return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1158
+ return (jsxRuntime.jsxs(Container$b, { children: [jsxRuntime.jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1155
1159
  };
1156
1160
 
1157
1161
  var StyledIconButton = styled__default["default"](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"])));
@@ -1177,7 +1181,7 @@ var InputField = function (props) {
1177
1181
  if (props.onBlur)
1178
1182
  props.onBlur(props.name);
1179
1183
  };
1180
- return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1184
+ return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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 && (jsxRuntime.jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
1181
1185
  };
1182
1186
 
1183
1187
  var Wrapper$2 = styled__default["default"].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) {
@@ -1222,7 +1226,7 @@ var Container$8 = styled__default["default"].div(templateObject_1$h || (template
1222
1226
  return "";
1223
1227
  });
1224
1228
  var SelectedLocaleWrapper = styled__default["default"].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"])));
1225
- var DropdownContainer = styled__default["default"].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) {
1229
+ var DropdownContainer = styled__default["default"].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) {
1226
1230
  var color = _a.color;
1227
1231
  switch (color) {
1228
1232
  default:
@@ -1232,12 +1236,12 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$4 || (te
1232
1236
  return theme.colors.lightGray.dark;
1233
1237
  }
1234
1238
  });
1235
- var Locale = styled__default["default"].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);
1236
- var templateObject_1$h, templateObject_2$e, templateObject_3$4, templateObject_4$3;
1239
+ var Locale = styled__default["default"].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);
1240
+ var templateObject_1$h, templateObject_2$e, templateObject_3$5, templateObject_4$4;
1237
1241
 
1238
1242
  var LocaleSelect = function (props) {
1239
1243
  var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
1240
- var _b = React.useState(props.initialValue), locale = _b[0], setLocale = _b[1];
1244
+ var _b = React.useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
1241
1245
  var onSelectLocale = function (locale) {
1242
1246
  setLocale(locale);
1243
1247
  props.onChange(locale);
@@ -1278,15 +1282,110 @@ var NumberField = function (props) {
1278
1282
  if (props.onBlur)
1279
1283
  props.onBlur(props.name);
1280
1284
  };
1281
- return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1285
+ return (jsxRuntime.jsxs(Container$7, { children: [jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1282
1286
  };
1283
1287
 
1288
+ var expressions = {};
1289
+
1290
+ (function (exports) {
1291
+ Object.defineProperty(exports, "__esModule", { value: true });
1292
+ exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
1293
+ var hasNumber = function (input) {
1294
+ var regex = new RegExp(/\d/g);
1295
+ return regex.test(input);
1296
+ };
1297
+ exports.hasNumber = hasNumber;
1298
+ var hasSpecialCharacter = function (input) {
1299
+ var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
1300
+ return regex.test(input);
1301
+ };
1302
+ exports.hasSpecialCharacter = hasSpecialCharacter;
1303
+ var hasCapitalLetter = function (input) {
1304
+ var regex = new RegExp(/[A-Z]/g);
1305
+ return regex.test(input);
1306
+ };
1307
+ exports.hasCapitalLetter = hasCapitalLetter;
1308
+ var isValidEmail = function (email) {
1309
+ 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,}))$/);
1310
+ return regex.test(email);
1311
+ };
1312
+ exports.isValidEmail = isValidEmail;
1313
+ var isValidUsername = function (username) {
1314
+ if (username.length > 5 &&
1315
+ username.length <= 15 &&
1316
+ username.indexOf(" ") < 0 &&
1317
+ !(0, exports.isValidEmail)(username)) {
1318
+ return true;
1319
+ }
1320
+ else {
1321
+ return false;
1322
+ }
1323
+ };
1324
+ exports.isValidUsername = isValidUsername;
1325
+ var isStrongPassword = function (password) {
1326
+ return password.length >= 8 &&
1327
+ (0, exports.hasNumber)(password) &&
1328
+ (0, exports.hasSpecialCharacter)(password) &&
1329
+ (0, exports.hasCapitalLetter)(password)
1330
+ ? true
1331
+ : false;
1332
+ };
1333
+ exports.isStrongPassword = isStrongPassword;
1334
+ }(expressions));
1335
+
1284
1336
  var Container$6 = styled__default["default"].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"])));
1285
1337
  var Label$3 = styled__default["default"](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);
1286
- var templateObject_1$d, templateObject_2$b;
1338
+ var HelperContainer = styled__default["default"].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"])));
1339
+ var fadeIn = styled.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"])));
1340
+ var Helper = styled__default["default"](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) {
1341
+ var isOk = _a.isOk;
1342
+ return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
1343
+ }, fadeIn);
1344
+ var templateObject_1$d, templateObject_2$b, templateObject_3$4, templateObject_4$3, templateObject_5$2;
1345
+
1346
+ var translations = {
1347
+ "nl-NL": {
1348
+ capitalLetter: "Minimaal 1 hoofdletter",
1349
+ number: "Minimaal 1 getal",
1350
+ specialCharacter: "Minimaal 1 leesteken",
1351
+ length: "Minimaal 8 karakters",
1352
+ },
1353
+ "nl-BE": {
1354
+ capitalLetter: "Minimaal 1 hoofdletter",
1355
+ number: "Minimaal 1 getal",
1356
+ specialCharacter: "Minimaal 1 leesteken",
1357
+ length: "Minimaal 8 karakters",
1358
+ },
1359
+ "en-GB": {
1360
+ capitalLetter: "At least 1 capital letter",
1361
+ number: "At least 1 number",
1362
+ specialCharacter: "At least 1 special character",
1363
+ length: "At least 8 characters",
1364
+ },
1365
+ "fr-FR": {
1366
+ capitalLetter: "Au moins une lettre majuscule",
1367
+ number: "Au moins un chiffre",
1368
+ specialCharacter: "Au moins un caractère spécial",
1369
+ length: "Au moins 8 caractères",
1370
+ },
1371
+ "fr-BE": {
1372
+ capitalLetter: "Au moins une lettre majuscule",
1373
+ number: "Au moins un chiffre",
1374
+ specialCharacter: "Au moins un caractère spécial",
1375
+ length: "Au moins 8 caractères",
1376
+ },
1377
+ "de-DE": {
1378
+ capitalLetter: "Mindestens 1 Großbuchstabe",
1379
+ number: "Mindestens 1 Zahl",
1380
+ specialCharacter: "Mindestens 1 Sonderzeichen",
1381
+ length: "Mindestens 8 Zeichen",
1382
+ },
1383
+ };
1287
1384
 
1288
1385
  var PasswordInputField = function (props) {
1386
+ var _a = React.useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
1289
1387
  var onChange = function (value) {
1388
+ setValue(value);
1290
1389
  if (props.onChange)
1291
1390
  props.onChange(props.name, value);
1292
1391
  };
@@ -1299,7 +1398,7 @@ var PasswordInputField = function (props) {
1299
1398
  if (props.onBlur)
1300
1399
  props.onBlur(props.name);
1301
1400
  };
1302
- return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1401
+ return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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 ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helper].capitalLetter] }), void 0), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helper].number] }), void 0), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helper].specialCharacter] }), void 0), jsxRuntime.jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helper].length] }), void 0)] }, void 0)) : null] }, void 0));
1303
1402
  };
1304
1403
 
1305
1404
  var generateRandomString = function (length) {
@@ -1378,7 +1477,7 @@ var templateObject_1$b, templateObject_2$a, templateObject_3$3;
1378
1477
  var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign({}, props, { children: jsxRuntime.jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
1379
1478
 
1380
1479
  var Container$5 = styled__default["default"].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"])));
1381
- var Step$1 = styled__default["default"].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) {
1480
+ var Step$1 = styled__default["default"].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) {
1382
1481
  var status = _a.status;
1383
1482
  return (!!status ? "pointer" : "not-allowed");
1384
1483
  }, function (_a) {
@@ -1396,7 +1495,10 @@ var Step$1 = styled__default["default"].li(templateObject_2$9 || (templateObject
1396
1495
  return status === "active"
1397
1496
  ? theme.colors.lightGray.light
1398
1497
  : theme.colors.darkGray.light;
1399
- }, theme.colors.darkGray.base, theme.colors.lightGray.dark);
1498
+ }, theme.colors.darkGray.base, function (_a) {
1499
+ var hasTitle = _a.hasTitle;
1500
+ return (hasTitle ? "calc(50% - 12px)" : "50%");
1501
+ }, theme.colors.lightGray.dark);
1400
1502
  var templateObject_1$a, templateObject_2$9;
1401
1503
 
1402
1504
  var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$5, { children: props.steps.map(function (_a, index) {
@@ -1411,11 +1513,11 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$5, { children:
1411
1513
  if (onClick && props.current >= step)
1412
1514
  onClick(step);
1413
1515
  };
1414
- return (jsxRuntime.jsxs(Step$1, __assign({ status: status }, { children: [jsxRuntime.jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), jsxRuntime.jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1516
+ return (jsxRuntime.jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), title && jsxRuntime.jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1415
1517
  }) }, void 0)); };
1416
1518
 
1417
1519
  var Container$4 = styled__default["default"].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"])));
1418
- var Step = styled__default["default"].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) {
1520
+ var Step = styled__default["default"].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) {
1419
1521
  var status = _a.status;
1420
1522
  return (!!status ? "pointer" : "not-allowed");
1421
1523
  }, function (_a) {
@@ -1448,7 +1550,7 @@ var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$4, { children:
1448
1550
  if (onClick && props.current >= step)
1449
1551
  onClick(step);
1450
1552
  };
1451
- return (jsxRuntime.jsxs(Step, __assign({ status: status, onClick: onClickStep }, { children: [jsxRuntime.jsx("div", { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }, void 0), jsxRuntime.jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1553
+ return (jsxRuntime.jsxs(Step, __assign({ status: status, onClick: onClickStep }, { children: [jsxRuntime.jsx("div", { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }, void 0), title && jsxRuntime.jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
1452
1554
  }) }, void 0)); };
1453
1555
 
1454
1556
  var Steps = function (props) {
@@ -1475,7 +1577,7 @@ var RadioGroup = function (props) {
1475
1577
  };
1476
1578
  return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$2, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(RadioContainer, { children: props.items.map(function (_a, index) {
1477
1579
  var id = _a.id, value = _a.value, label = _a.label;
1478
- return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
1580
+ return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
1479
1581
  }) }, void 0)] }, void 0));
1480
1582
  };
1481
1583
 
@@ -1492,7 +1594,7 @@ var SelectField = function (props) {
1492
1594
  if (props.onBlur)
1493
1595
  props.onBlur(props.name);
1494
1596
  };
1495
- return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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) {
1597
+ return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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) {
1496
1598
  var value = _a.value, label = _a.label;
1497
1599
  return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
1498
1600
  }) }), void 0)] }, void 0));
@@ -1511,7 +1613,7 @@ var ToggleField = function (props) {
1511
1613
  if (props.onBlur)
1512
1614
  props.onBlur(props.name);
1513
1615
  };
1514
- return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1616
+ return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
1515
1617
  };
1516
1618
 
1517
1619
  var TooltipContainer = styled__default["default"].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) {
@@ -1572,7 +1674,7 @@ var FeedbackColors = {
1572
1674
  success: theme.colors.green.base,
1573
1675
  error: theme.colors.red.base,
1574
1676
  };
1575
- var FieldWrapper = styled__default["default"].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) {
1677
+ var FieldWrapper = styled__default["default"].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) {
1576
1678
  var status = _a.status;
1577
1679
  return FeedbackColors[status];
1578
1680
  });
@@ -1600,17 +1702,95 @@ var FormWrapper = styled__default["default"].form(templateObject_1$3 || (templat
1600
1702
  var ButtonWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
1601
1703
  var templateObject_1$3, templateObject_2$2;
1602
1704
 
1603
- var Form = function (props) {
1705
+ var Form = React.forwardRef(function (props, ref) {
1604
1706
  var _a = React.useState({}), values = _a[0], setValues = _a[1];
1605
1707
  var _b = React.useState({}), feedback = _b[0], setFeedback = _b[1];
1708
+ React.useImperativeHandle(ref, function () { return ({
1709
+ resetForm: resetForm,
1710
+ }); });
1606
1711
  React.useEffect(function () {
1607
- var initialValues = {};
1712
+ setDefaultValues();
1713
+ }, []);
1714
+ var setDefaultValues = function () {
1715
+ var defaultValues = {};
1608
1716
  for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
1609
1717
  var field = _a[_i];
1610
- initialValues[field.name] = field.initialValue;
1718
+ defaultValues[field.name] = field.defaultValue;
1611
1719
  }
1612
- setValues(initialValues);
1613
- }, []);
1720
+ setValues(defaultValues);
1721
+ setFeedback({});
1722
+ };
1723
+ var resetForm = function () {
1724
+ setDefaultValues();
1725
+ var _loop_1 = function (field) {
1726
+ switch (field.type) {
1727
+ case "text":
1728
+ case "password":
1729
+ case "date": {
1730
+ var element = document.getElementById(field.name);
1731
+ if (!field.defaultValue)
1732
+ element.value = "";
1733
+ else
1734
+ element.value = field.defaultValue;
1735
+ break;
1736
+ }
1737
+ case "toggle": {
1738
+ var element = document.getElementById(field.name);
1739
+ if (!field.defaultValue)
1740
+ element.checked = false;
1741
+ else
1742
+ element.checked = !!field.defaultValue;
1743
+ break;
1744
+ }
1745
+ case "number": {
1746
+ var element = document.getElementById(field.name);
1747
+ if (!field.defaultValue)
1748
+ element.value = "0";
1749
+ else
1750
+ element.value = "".concat(field.defaultValue);
1751
+ break;
1752
+ }
1753
+ case "select": {
1754
+ var element = document.getElementById(field.name);
1755
+ if (!field.defaultValue)
1756
+ element.selectedIndex = null;
1757
+ else {
1758
+ element.selectedIndex = Array.from(element.options).findIndex(function (_a) {
1759
+ var value = _a.value;
1760
+ return value === field.defaultValue;
1761
+ });
1762
+ }
1763
+ break;
1764
+ }
1765
+ case "radio": {
1766
+ for (var _b = 0, _c = field.items; _b < _c.length; _b++) {
1767
+ var option = _c[_b];
1768
+ var element = document.getElementById(option.id);
1769
+ if (!field.defaultValue)
1770
+ element.checked = false;
1771
+ else
1772
+ element.checked = element.value === field.defaultValue;
1773
+ }
1774
+ break;
1775
+ }
1776
+ case "checkbox": {
1777
+ for (var _d = 0, _e = field.items; _d < _e.length; _d++) {
1778
+ var option = _e[_d];
1779
+ var element = document.getElementById(option.id);
1780
+ if (!field.defaultValue)
1781
+ element.checked = false;
1782
+ else
1783
+ element.checked = field.defaultValue.includes(element.value);
1784
+ }
1785
+ break;
1786
+ }
1787
+ }
1788
+ };
1789
+ for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
1790
+ var field = _a[_i];
1791
+ _loop_1(field);
1792
+ }
1793
+ };
1614
1794
  var onChangeFormField = function (fieldName, value) {
1615
1795
  var _a, _b, _c;
1616
1796
  var feedbackForField = { status: undefined, message: undefined };
@@ -1679,7 +1859,7 @@ var Form = function (props) {
1679
1859
  jsxRuntime.jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
1680
1860
  }
1681
1861
  }) }, void 0), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
1682
- };
1862
+ });
1683
1863
 
1684
1864
  var Container$1 = styled__default["default"].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) {
1685
1865
  var color = _a.color, active = _a.active;