@typeolymp/ui-components 1.5.7 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/build/components/atoms/Button/index.d.ts +4 -2
  2. package/build/components/atoms/Button/stories.d.ts +1 -1
  3. package/build/components/atoms/Icon/index.d.ts +1 -1
  4. package/build/components/atoms/Input/Date.d.ts +0 -1
  5. package/build/components/atoms/Input/index.d.ts +1 -1
  6. package/build/components/atoms/Number/index.d.ts +2 -2
  7. package/build/components/atoms/Number/stories.d.ts +1 -1
  8. package/build/components/atoms/Radio/index.d.ts +2 -1
  9. package/build/components/atoms/Select/index.d.ts +1 -1
  10. package/build/components/atoms/Toggle/index.d.ts +1 -1
  11. package/build/components/molecules/Checkboxes/index.d.ts +3 -3
  12. package/build/components/molecules/DateInputField/index.d.ts +1 -1
  13. package/build/components/molecules/InputField/index.d.ts +2 -1
  14. package/build/components/molecules/LocaleSelect/index.d.ts +2 -2
  15. package/build/components/molecules/NumberField/index.d.ts +2 -2
  16. package/build/components/molecules/PasswordInputField/index.d.ts +3 -1
  17. package/build/components/molecules/PasswordInputField/styles.d.ts +2 -0
  18. package/build/components/molecules/PasswordInputField/translations.d.ts +11 -0
  19. package/build/components/molecules/RadioGroup/index.d.ts +1 -1
  20. package/build/components/molecules/SelectField/index.d.ts +1 -1
  21. package/build/components/molecules/Steps/index.d.ts +1 -1
  22. package/build/components/molecules/ToggleField/index.d.ts +1 -1
  23. package/build/components/organisms/Form/index.d.ts +6 -3
  24. package/build/components/organisms/Form/stories.d.ts +3 -1
  25. package/build/index.es.js +283 -104
  26. package/build/index.es.js.map +1 -1
  27. package/build/index.js +283 -104
  28. package/build/index.js.map +1 -1
  29. package/package.json +1 -1
package/build/index.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,25 +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
- console.log(props);
555
- 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));
556
552
  };
557
553
 
558
554
  function requiredArgs(required, args) {
@@ -674,8 +670,16 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
674
670
  }
675
671
 
676
672
  var DateInput = function (props) {
673
+ var _a;
677
674
  var inputRef = React.useRef(null);
678
- 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]);
679
683
  var showPicker = function () {
680
684
  if (!props.disabled) {
681
685
  inputRef.current.showPicker();
@@ -687,32 +691,28 @@ var DateInput = function (props) {
687
691
  };
688
692
  var onChange = function (e) {
689
693
  if (!props.disabled) {
690
- var value_1 = e.target.value;
691
- setValue(value_1);
694
+ setIsChanged(true);
692
695
  if (!!props.onChange)
693
- props.onChange(value_1);
696
+ props.onChange(e.target.value);
694
697
  }
695
698
  };
696
699
  var onBlur = function () {
697
- if (isAfter(new Date(value), new Date(props.max)))
698
- setValue(props.max);
699
- if (isBefore(new Date(value), new Date(props.min)))
700
- 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;
701
706
  };
702
- 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));
703
708
  };
704
709
 
705
710
  var Input = function (props) {
706
- var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
707
711
  var onChange = function (e) {
708
- if (!props.disabled) {
709
- var value_1 = e.target.value;
710
- setValue(value_1);
711
- if (!!props.onChange)
712
- props.onChange(value_1);
713
- }
712
+ if (!props.disabled && !!props.onChange)
713
+ props.onChange(e.target.value);
714
714
  };
715
- 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);
716
716
  };
717
717
  Input.Password = PasswordInput;
718
718
  Input.Date = DateInput;
@@ -765,43 +765,38 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$m || (
765
765
  var templateObject_1$x, templateObject_2$m;
766
766
 
767
767
  var Number = function (props) {
768
- var ref = React.useRef(null);
769
- var _a = React.useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
768
+ var inputRef = React.useRef(null);
770
769
  var onChange = function (e) {
771
- if (!props.disabled) {
772
- var value_1 = parseInt(e.target.value);
773
- setValue(value_1);
774
- if (!!props.onChange)
775
- props.onChange(e.target.value);
776
- }
770
+ if (!props.disabled && !!props.onChange)
771
+ props.onChange(parseInt(e.target.value));
777
772
  };
778
773
  var decrease = function () {
779
- var _a;
780
- 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;
781
777
  if (props.min && newValue < props.min) {
782
- setValue(props.min);
778
+ inputRef.current.value = "".concat(props.min);
783
779
  }
784
780
  else {
785
- setValue(newValue);
781
+ inputRef.current.value = "".concat(newValue);
786
782
  if (!!props.onChange)
787
- props.onChange("".concat(newValue));
788
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
783
+ props.onChange(newValue);
789
784
  }
790
785
  };
791
786
  var increase = function () {
792
- var _a;
793
- 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;
794
790
  if (props.max && newValue > props.max) {
795
- setValue(props.max);
791
+ inputRef.current.value = "".concat(props.max);
796
792
  }
797
793
  else {
798
- setValue(newValue);
794
+ inputRef.current.value = "".concat(newValue);
799
795
  if (!!props.onChange)
800
- props.onChange("".concat(newValue));
801
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
796
+ props.onChange(newValue);
802
797
  }
803
798
  };
804
- 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));
805
800
  };
806
801
 
807
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) {
@@ -840,7 +835,7 @@ var templateObject_1$w;
840
835
 
841
836
  var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
842
837
 
843
- 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) {
844
839
  var checked = _a.checked, disabled = _a.disabled;
845
840
  if (disabled)
846
841
  return theme.colors.lightGray.darker;
@@ -871,19 +866,22 @@ var StyledRadio = styled__default["default"].div(templateObject_1$v || (template
871
866
  var templateObject_1$v;
872
867
 
873
868
  var Radio = function (props) {
874
- var _a;
869
+ var _a, _b;
875
870
  var wrapperRef = React.useRef(null);
876
871
  var inputRef = React.useRef(null);
877
- 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];
878
873
  React.useEffect(function () {
879
874
  if (props.autoFocus)
880
875
  wrapperRef.current.focus();
881
- if (props.defaultChecked)
876
+ if (props.defaultValue)
882
877
  inputRef.current.checked = true;
883
878
  }, []);
884
879
  React.useEffect(function () {
885
880
  setChecked(inputRef.current.checked);
886
- }, [(_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]);
887
885
  var toggle = function () {
888
886
  var _a;
889
887
  if (!props.disabled) {
@@ -917,18 +915,23 @@ var StyledSelect = styled__default["default"].select(templateObject_2$l || (temp
917
915
  var templateObject_1$u, templateObject_2$l;
918
916
 
919
917
  var Select = function (props) {
920
- var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
918
+ var _a;
919
+ var inputRef = React.useRef(null);
921
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]);
922
927
  var onChange = function (e) {
923
928
  if (!props.disabled) {
924
- var value_1 = e.target.value;
925
- setValue(value_1);
926
929
  setIsChanged(true);
927
930
  if (!!props.onChange)
928
- props.onChange(value_1);
931
+ props.onChange(e.target.value);
929
932
  }
930
933
  };
931
- 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));
932
935
  };
933
936
 
934
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) {
@@ -998,12 +1001,12 @@ var Toggle = function (props) {
998
1001
  var _a;
999
1002
  var containerRef = React.useRef(null);
1000
1003
  var inputRef = React.useRef(null);
1001
- 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];
1002
1005
  React.useEffect(function () {
1003
1006
  var _a;
1004
1007
  if (props.autoFocus)
1005
1008
  (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
1006
- if (props.defaultChecked)
1009
+ if (props.defaultValue)
1007
1010
  inputRef.current.checked = true;
1008
1011
  }, []);
1009
1012
  React.useEffect(function () {
@@ -1104,22 +1107,22 @@ var Ellipse = styled__default["default"].div(templateObject_2$k || (templateObje
1104
1107
  var color = _a.color;
1105
1108
  return color ? theme.colors[color].light : "";
1106
1109
  });
1107
- 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"])));
1108
- 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;
1109
1112
 
1110
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)); };
1111
1114
 
1112
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"])));
1113
1116
  var CheckboxContainer = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
1114
- 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"])));
1115
- 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) {
1116
1119
  var weight = _a.weight;
1117
1120
  return weight || 500;
1118
1121
  }, theme.colors.darkGray.base);
1119
- 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;
1120
1123
 
1121
1124
  var Checkboxes = function (props) {
1122
- 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];
1123
1126
  var onChange = function (value) {
1124
1127
  if (props.onChange) {
1125
1128
  var newValues = values.includes(value)
@@ -1152,7 +1155,7 @@ var DateInputField = function (props) {
1152
1155
  if (props.onBlur)
1153
1156
  props.onBlur(props.name);
1154
1157
  };
1155
- 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));
1156
1159
  };
1157
1160
 
1158
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"])));
@@ -1178,7 +1181,7 @@ var InputField = function (props) {
1178
1181
  if (props.onBlur)
1179
1182
  props.onBlur(props.name);
1180
1183
  };
1181
- 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));
1182
1185
  };
1183
1186
 
1184
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) {
@@ -1223,7 +1226,7 @@ var Container$8 = styled__default["default"].div(templateObject_1$h || (template
1223
1226
  return "";
1224
1227
  });
1225
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"])));
1226
- 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) {
1227
1230
  var color = _a.color;
1228
1231
  switch (color) {
1229
1232
  default:
@@ -1233,12 +1236,12 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$4 || (te
1233
1236
  return theme.colors.lightGray.dark;
1234
1237
  }
1235
1238
  });
1236
- 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);
1237
- 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;
1238
1241
 
1239
1242
  var LocaleSelect = function (props) {
1240
1243
  var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
1241
- 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];
1242
1245
  var onSelectLocale = function (locale) {
1243
1246
  setLocale(locale);
1244
1247
  props.onChange(locale);
@@ -1279,15 +1282,110 @@ var NumberField = function (props) {
1279
1282
  if (props.onBlur)
1280
1283
  props.onBlur(props.name);
1281
1284
  };
1282
- 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));
1283
1286
  };
1284
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
+
1285
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"])));
1286
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);
1287
- 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
+ };
1288
1384
 
1289
1385
  var PasswordInputField = function (props) {
1386
+ var _a = React.useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
1290
1387
  var onChange = function (value) {
1388
+ setValue(value);
1291
1389
  if (props.onChange)
1292
1390
  props.onChange(props.name, value);
1293
1391
  };
@@ -1300,7 +1398,7 @@ var PasswordInputField = function (props) {
1300
1398
  if (props.onBlur)
1301
1399
  props.onBlur(props.name);
1302
1400
  };
1303
- 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));
1304
1402
  };
1305
1403
 
1306
1404
  var generateRandomString = function (length) {
@@ -1379,7 +1477,7 @@ var templateObject_1$b, templateObject_2$a, templateObject_3$3;
1379
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)); };
1380
1478
 
1381
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"])));
1382
- 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) {
1383
1481
  var status = _a.status;
1384
1482
  return (!!status ? "pointer" : "not-allowed");
1385
1483
  }, function (_a) {
@@ -1397,7 +1495,10 @@ var Step$1 = styled__default["default"].li(templateObject_2$9 || (templateObject
1397
1495
  return status === "active"
1398
1496
  ? theme.colors.lightGray.light
1399
1497
  : theme.colors.darkGray.light;
1400
- }, 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);
1401
1502
  var templateObject_1$a, templateObject_2$9;
1402
1503
 
1403
1504
  var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$5, { children: props.steps.map(function (_a, index) {
@@ -1412,11 +1513,11 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$5, { children:
1412
1513
  if (onClick && props.current >= step)
1413
1514
  onClick(step);
1414
1515
  };
1415
- 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)));
1416
1517
  }) }, void 0)); };
1417
1518
 
1418
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"])));
1419
- 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) {
1420
1521
  var status = _a.status;
1421
1522
  return (!!status ? "pointer" : "not-allowed");
1422
1523
  }, function (_a) {
@@ -1449,7 +1550,7 @@ var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$4, { children:
1449
1550
  if (onClick && props.current >= step)
1450
1551
  onClick(step);
1451
1552
  };
1452
- 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)));
1453
1554
  }) }, void 0)); };
1454
1555
 
1455
1556
  var Steps = function (props) {
@@ -1476,7 +1577,7 @@ var RadioGroup = function (props) {
1476
1577
  };
1477
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) {
1478
1579
  var id = _a.id, value = _a.value, label = _a.label;
1479
- 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)));
1480
1581
  }) }, void 0)] }, void 0));
1481
1582
  };
1482
1583
 
@@ -1493,7 +1594,7 @@ var SelectField = function (props) {
1493
1594
  if (props.onBlur)
1494
1595
  props.onBlur(props.name);
1495
1596
  };
1496
- 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) {
1497
1598
  var value = _a.value, label = _a.label;
1498
1599
  return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
1499
1600
  }) }), void 0)] }, void 0));
@@ -1512,7 +1613,7 @@ var ToggleField = function (props) {
1512
1613
  if (props.onBlur)
1513
1614
  props.onBlur(props.name);
1514
1615
  };
1515
- 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));
1516
1617
  };
1517
1618
 
1518
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) {
@@ -1573,7 +1674,7 @@ var FeedbackColors = {
1573
1674
  success: theme.colors.green.base,
1574
1675
  error: theme.colors.red.base,
1575
1676
  };
1576
- 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) {
1577
1678
  var status = _a.status;
1578
1679
  return FeedbackColors[status];
1579
1680
  });
@@ -1601,17 +1702,95 @@ var FormWrapper = styled__default["default"].form(templateObject_1$3 || (templat
1601
1702
  var ButtonWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
1602
1703
  var templateObject_1$3, templateObject_2$2;
1603
1704
 
1604
- var Form = function (props) {
1705
+ var Form = React.forwardRef(function (props, ref) {
1605
1706
  var _a = React.useState({}), values = _a[0], setValues = _a[1];
1606
1707
  var _b = React.useState({}), feedback = _b[0], setFeedback = _b[1];
1708
+ React.useImperativeHandle(ref, function () { return ({
1709
+ resetForm: resetForm,
1710
+ }); });
1607
1711
  React.useEffect(function () {
1608
- var initialValues = {};
1712
+ setDefaultValues();
1713
+ }, []);
1714
+ var setDefaultValues = function () {
1715
+ var defaultValues = {};
1609
1716
  for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
1610
1717
  var field = _a[_i];
1611
- initialValues[field.name] = field.initialValue;
1718
+ defaultValues[field.name] = field.defaultValue;
1612
1719
  }
1613
- setValues(initialValues);
1614
- }, []);
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
+ };
1615
1794
  var onChangeFormField = function (fieldName, value) {
1616
1795
  var _a, _b, _c;
1617
1796
  var feedbackForField = { status: undefined, message: undefined };
@@ -1680,7 +1859,7 @@ var Form = function (props) {
1680
1859
  jsxRuntime.jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
1681
1860
  }
1682
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));
1683
- };
1862
+ });
1684
1863
 
1685
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) {
1686
1865
  var color = _a.color, active = _a.active;