@typeolymp/ui-components 1.5.8 → 1.7.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.
- package/build/components/atoms/Button/index.d.ts +4 -2
- package/build/components/atoms/Button/stories.d.ts +1 -1
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/atoms/Input/Date.d.ts +0 -1
- package/build/components/atoms/Input/index.d.ts +1 -1
- package/build/components/atoms/Number/index.d.ts +2 -2
- package/build/components/atoms/Number/stories.d.ts +1 -1
- package/build/components/atoms/Radio/index.d.ts +2 -1
- package/build/components/atoms/Select/index.d.ts +1 -1
- package/build/components/atoms/Textarea/index.d.ts +14 -0
- package/build/components/atoms/Textarea/stories.d.ts +8 -0
- package/build/components/atoms/Textarea/styles.d.ts +1 -0
- package/build/components/atoms/Toggle/index.d.ts +1 -1
- package/build/components/molecules/Checkboxes/index.d.ts +3 -3
- package/build/components/molecules/Collapse/index.d.ts +9 -0
- package/build/components/molecules/Collapse/stories.d.ts +15 -0
- package/build/components/molecules/Collapse/styles.d.ts +2 -0
- package/build/components/molecules/DateInputField/index.d.ts +1 -1
- package/build/components/molecules/InputField/index.d.ts +2 -1
- package/build/components/molecules/LocaleSelect/index.d.ts +2 -2
- package/build/components/molecules/NumberField/index.d.ts +2 -2
- package/build/components/molecules/PasswordInputField/index.d.ts +3 -1
- package/build/components/molecules/PasswordInputField/styles.d.ts +2 -0
- package/build/components/molecules/PasswordInputField/translations.d.ts +11 -0
- package/build/components/molecules/RadioGroup/index.d.ts +1 -1
- package/build/components/molecules/SelectField/index.d.ts +1 -1
- package/build/components/molecules/Steps/index.d.ts +1 -1
- package/build/components/molecules/TextareaField/index.d.ts +16 -0
- package/build/components/molecules/TextareaField/styles.d.ts +2 -0
- package/build/components/molecules/ToggleField/index.d.ts +1 -1
- package/build/components/organisms/Form/index.d.ts +11 -4
- package/build/components/organisms/Form/stories.d.ts +3 -1
- package/build/components/organisms/Keyboard/keys.d.ts +14 -0
- package/build/components/organisms/Keyboard/stories.d.ts +1 -1
- package/build/index.d.ts +2 -1
- package/build/index.es.js +518 -252
- package/build/index.es.js.map +1 -1
- package/build/index.js +518 -251
- package/build/index.js.map +1 -1
- package/package.json +2 -2
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: "
|
|
121
|
+
lineHeight: "22px",
|
|
122
122
|
},
|
|
123
123
|
medium: {
|
|
124
124
|
fontSize: "20px",
|
|
125
125
|
fontWeight: "500",
|
|
126
|
-
lineHeight: "
|
|
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$
|
|
201
|
+
var StyledButton = styled__default["default"].button(templateObject_1$I || (templateObject_1$I = __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) {
|
|
@@ -248,11 +248,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$F || (temp
|
|
|
248
248
|
? theme.button.medium.heightActive
|
|
249
249
|
: theme.button[size].heightActive;
|
|
250
250
|
});
|
|
251
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
251
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
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$
|
|
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$
|
|
271
|
+
var templateObject_1$I, templateObject_2$q, 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$
|
|
289
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __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;
|
|
@@ -306,7 +307,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$E || (templ
|
|
|
306
307
|
return theme.colors.green.base;
|
|
307
308
|
return theme.colors.lightGray.darker;
|
|
308
309
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
309
|
-
var templateObject_1$
|
|
310
|
+
var templateObject_1$H;
|
|
310
311
|
|
|
311
312
|
var Checkbox = function (props) {
|
|
312
313
|
var _a;
|
|
@@ -339,7 +340,7 @@ var Checkbox = function (props) {
|
|
|
339
340
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
340
341
|
};
|
|
341
342
|
|
|
342
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
343
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
343
344
|
var size = _a.size;
|
|
344
345
|
switch (size) {
|
|
345
346
|
case "small":
|
|
@@ -362,20 +363,20 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$D || (templateOb
|
|
|
362
363
|
return "27px";
|
|
363
364
|
}
|
|
364
365
|
});
|
|
365
|
-
var templateObject_1$
|
|
366
|
+
var templateObject_1$G;
|
|
366
367
|
|
|
367
368
|
var parsers = {};
|
|
368
369
|
|
|
369
370
|
Object.defineProperty(parsers, "__esModule", { value: true });
|
|
370
|
-
|
|
371
|
+
parsers.getKeyboardLayoutByLocale = getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = parsers.getLanguageCodeByLocale = getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = void 0;
|
|
371
372
|
var getNativeLanguageByLocale = function (locale) {
|
|
372
373
|
var nativeLanguages = {
|
|
373
374
|
"en-GB": "English (UK)",
|
|
374
375
|
"nl-NL": "Nederlands",
|
|
375
376
|
"nl-BE": "Nederlands (BE)",
|
|
376
|
-
"fr-BE": "Français (BE)",
|
|
377
|
-
"fr-FR": "Français",
|
|
378
|
-
"de-DE": "Deutsch",
|
|
377
|
+
// "fr-BE": "Français (BE)",
|
|
378
|
+
// "fr-FR": "Français",
|
|
379
|
+
// "de-DE": "Deutsch",
|
|
379
380
|
};
|
|
380
381
|
return nativeLanguages[locale];
|
|
381
382
|
};
|
|
@@ -387,7 +388,19 @@ parsers.getLanguageCodeByLocale = getLanguageCodeByLocale;
|
|
|
387
388
|
var getCountryCodeByLocale = function (locale) {
|
|
388
389
|
return locale.split("-")[1];
|
|
389
390
|
};
|
|
390
|
-
getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
391
|
+
var getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
392
|
+
var getKeyboardLayoutByLocale = function (locale) {
|
|
393
|
+
var keyboardLayouts = {
|
|
394
|
+
"en-GB": "qwerty-uk",
|
|
395
|
+
"nl-NL": "qwerty-nl",
|
|
396
|
+
"nl-BE": "azerty-be",
|
|
397
|
+
// "fr-BE": "azerty",
|
|
398
|
+
// "fr-FR": "azerty",
|
|
399
|
+
// "de-DE": "qwerty",
|
|
400
|
+
};
|
|
401
|
+
return keyboardLayouts[locale];
|
|
402
|
+
};
|
|
403
|
+
parsers.getKeyboardLayoutByLocale = getKeyboardLayoutByLocale;
|
|
391
404
|
|
|
392
405
|
var flags = {
|
|
393
406
|
NL: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsxRuntime.jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -398,7 +411,7 @@ var flags = {
|
|
|
398
411
|
};
|
|
399
412
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
400
413
|
|
|
401
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
414
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$F || (templateObject_1$F = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
402
415
|
var type = _a.type;
|
|
403
416
|
return theme.heading[type].fontSize;
|
|
404
417
|
}, function (_a) {
|
|
@@ -422,14 +435,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$C || (templ
|
|
|
422
435
|
var align = _a.align;
|
|
423
436
|
return align;
|
|
424
437
|
});
|
|
425
|
-
var templateObject_1$
|
|
438
|
+
var templateObject_1$F;
|
|
426
439
|
|
|
427
440
|
var Heading = function (props) {
|
|
428
441
|
var element = !!props.as ? props.as : props.type;
|
|
429
442
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
430
443
|
};
|
|
431
444
|
|
|
432
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
445
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
433
446
|
var size = _a.size;
|
|
434
447
|
return theme.icon[size] || theme.icon.medium;
|
|
435
448
|
}, function (_a) {
|
|
@@ -459,7 +472,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$B || (templateOb
|
|
|
459
472
|
return theme.colors.lightGray.light;
|
|
460
473
|
}
|
|
461
474
|
});
|
|
462
|
-
var templateObject_1$
|
|
475
|
+
var templateObject_1$E;
|
|
463
476
|
|
|
464
477
|
var icons = {
|
|
465
478
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -480,10 +493,11 @@ var icons = {
|
|
|
480
493
|
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
494
|
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
495
|
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)),
|
|
496
|
+
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
497
|
};
|
|
484
498
|
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
499
|
|
|
486
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
500
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
487
501
|
var size = _a.size;
|
|
488
502
|
switch (size) {
|
|
489
503
|
default:
|
|
@@ -495,7 +509,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$A || (templateOb
|
|
|
495
509
|
return "118px";
|
|
496
510
|
}
|
|
497
511
|
});
|
|
498
|
-
var templateObject_1$
|
|
512
|
+
var templateObject_1$D;
|
|
499
513
|
|
|
500
514
|
var illustrations = {
|
|
501
515
|
keyboard: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -510,14 +524,14 @@ var illustrations = {
|
|
|
510
524
|
};
|
|
511
525
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
512
526
|
|
|
513
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
514
|
-
var
|
|
515
|
-
return !
|
|
527
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
528
|
+
var isChanged = _a.isChanged;
|
|
529
|
+
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
516
530
|
}, function (_a) {
|
|
517
531
|
var disabled = _a.disabled;
|
|
518
532
|
return (disabled ? "not-allowed" : "pointer");
|
|
519
533
|
});
|
|
520
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
534
|
+
var StyledInput = styled__default["default"].input(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
521
535
|
var disabled = _a.disabled;
|
|
522
536
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
523
537
|
}, function (_a) {
|
|
@@ -530,28 +544,23 @@ var StyledInput = styled__default["default"].input(templateObject_2$n || (templa
|
|
|
530
544
|
var disabled = _a.disabled;
|
|
531
545
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
532
546
|
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
533
|
-
var templateObject_1$
|
|
547
|
+
var templateObject_1$C, templateObject_2$p;
|
|
534
548
|
|
|
535
549
|
var PasswordInput = function (props) {
|
|
536
550
|
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
551
|
var toggle = function () {
|
|
539
552
|
if (!props.disabled)
|
|
540
553
|
setIsVisible(!isVisible);
|
|
541
554
|
};
|
|
542
555
|
var onChange = function (e) {
|
|
543
|
-
if (!props.disabled)
|
|
544
|
-
|
|
545
|
-
setValue(value_1);
|
|
546
|
-
if (!!props.onChange)
|
|
547
|
-
props.onChange(value_1);
|
|
548
|
-
}
|
|
556
|
+
if (!props.disabled && !!props.onChange)
|
|
557
|
+
props.onChange(e.target.value);
|
|
549
558
|
};
|
|
550
559
|
var onKeyPress = function (e) {
|
|
551
560
|
if (props.onKeyPress)
|
|
552
561
|
props.onKeyPress(e);
|
|
553
562
|
};
|
|
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, {
|
|
563
|
+
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
564
|
};
|
|
556
565
|
|
|
557
566
|
function requiredArgs(required, args) {
|
|
@@ -673,8 +682,16 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
673
682
|
}
|
|
674
683
|
|
|
675
684
|
var DateInput = function (props) {
|
|
685
|
+
var _a;
|
|
676
686
|
var inputRef = React.useRef(null);
|
|
677
|
-
var
|
|
687
|
+
var _b = React.useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
688
|
+
React.useEffect(function () {
|
|
689
|
+
var _a;
|
|
690
|
+
if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value))
|
|
691
|
+
setIsChanged(false);
|
|
692
|
+
else
|
|
693
|
+
setIsChanged(true);
|
|
694
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
678
695
|
var showPicker = function () {
|
|
679
696
|
if (!props.disabled) {
|
|
680
697
|
inputRef.current.showPicker();
|
|
@@ -686,39 +703,35 @@ var DateInput = function (props) {
|
|
|
686
703
|
};
|
|
687
704
|
var onChange = function (e) {
|
|
688
705
|
if (!props.disabled) {
|
|
689
|
-
|
|
690
|
-
setValue(value_1);
|
|
706
|
+
setIsChanged(true);
|
|
691
707
|
if (!!props.onChange)
|
|
692
|
-
props.onChange(
|
|
708
|
+
props.onChange(e.target.value);
|
|
693
709
|
}
|
|
694
710
|
};
|
|
695
711
|
var onBlur = function () {
|
|
696
|
-
if (
|
|
697
|
-
|
|
698
|
-
if (
|
|
699
|
-
|
|
712
|
+
if (props.onBlur)
|
|
713
|
+
props.onBlur();
|
|
714
|
+
if (isAfter(new Date(inputRef.current.value), new Date(props.max)))
|
|
715
|
+
inputRef.current.value = props.max;
|
|
716
|
+
if (isBefore(new Date(inputRef.current.value), new Date(props.min)))
|
|
717
|
+
inputRef.current.value = props.min;
|
|
700
718
|
};
|
|
701
|
-
return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled,
|
|
719
|
+
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
720
|
};
|
|
703
721
|
|
|
704
722
|
var Input = function (props) {
|
|
705
|
-
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
706
723
|
var onChange = function (e) {
|
|
707
|
-
if (!props.disabled)
|
|
708
|
-
|
|
709
|
-
setValue(value_1);
|
|
710
|
-
if (!!props.onChange)
|
|
711
|
-
props.onChange(value_1);
|
|
712
|
-
}
|
|
724
|
+
if (!props.disabled && !!props.onChange)
|
|
725
|
+
props.onChange(e.target.value);
|
|
713
726
|
};
|
|
714
|
-
return
|
|
727
|
+
return jsxRuntime.jsx(StyledInput, __assign({ type: "text" }, props, { onChange: onChange }), void 0);
|
|
715
728
|
};
|
|
716
729
|
Input.Password = PasswordInput;
|
|
717
730
|
Input.Date = DateInput;
|
|
718
731
|
|
|
719
732
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsxRuntime.jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsxRuntime.jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsxRuntime.jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsxRuntime.jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsxRuntime.jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { children: jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
720
733
|
|
|
721
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
734
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
722
735
|
var size = _a.size;
|
|
723
736
|
switch (size) {
|
|
724
737
|
default:
|
|
@@ -728,7 +741,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$y || (templateOb
|
|
|
728
741
|
return "116px";
|
|
729
742
|
}
|
|
730
743
|
});
|
|
731
|
-
var templateObject_1$
|
|
744
|
+
var templateObject_1$B;
|
|
732
745
|
|
|
733
746
|
var medals = {
|
|
734
747
|
small: {
|
|
@@ -744,11 +757,11 @@ var medals = {
|
|
|
744
757
|
};
|
|
745
758
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
746
759
|
|
|
747
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
760
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"])), function (_a) {
|
|
748
761
|
var disabled = _a.disabled;
|
|
749
762
|
return (disabled ? "49.5px" : "");
|
|
750
763
|
});
|
|
751
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
764
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
752
765
|
var disabled = _a.disabled;
|
|
753
766
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
754
767
|
}, function (_a) {
|
|
@@ -761,49 +774,44 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$m || (
|
|
|
761
774
|
var disabled = _a.disabled;
|
|
762
775
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
763
776
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
764
|
-
var templateObject_1$
|
|
777
|
+
var templateObject_1$A, templateObject_2$o;
|
|
765
778
|
|
|
766
779
|
var Number = function (props) {
|
|
767
|
-
var
|
|
768
|
-
var _a = React.useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
780
|
+
var inputRef = React.useRef(null);
|
|
769
781
|
var onChange = function (e) {
|
|
770
|
-
if (!props.disabled)
|
|
771
|
-
|
|
772
|
-
setValue(value_1);
|
|
773
|
-
if (!!props.onChange)
|
|
774
|
-
props.onChange(e.target.value);
|
|
775
|
-
}
|
|
782
|
+
if (!props.disabled && !!props.onChange)
|
|
783
|
+
props.onChange(parseInt(e.target.value));
|
|
776
784
|
};
|
|
777
785
|
var decrease = function () {
|
|
778
|
-
var _a;
|
|
779
|
-
|
|
786
|
+
var _a, _b;
|
|
787
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
788
|
+
var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) - 1;
|
|
780
789
|
if (props.min && newValue < props.min) {
|
|
781
|
-
|
|
790
|
+
inputRef.current.value = "".concat(props.min);
|
|
782
791
|
}
|
|
783
792
|
else {
|
|
784
|
-
|
|
793
|
+
inputRef.current.value = "".concat(newValue);
|
|
785
794
|
if (!!props.onChange)
|
|
786
|
-
props.onChange(
|
|
787
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
795
|
+
props.onChange(newValue);
|
|
788
796
|
}
|
|
789
797
|
};
|
|
790
798
|
var increase = function () {
|
|
791
|
-
var _a;
|
|
792
|
-
|
|
799
|
+
var _a, _b;
|
|
800
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
801
|
+
var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) + 1;
|
|
793
802
|
if (props.max && newValue > props.max) {
|
|
794
|
-
|
|
803
|
+
inputRef.current.value = "".concat(props.max);
|
|
795
804
|
}
|
|
796
805
|
else {
|
|
797
|
-
|
|
806
|
+
inputRef.current.value = "".concat(newValue);
|
|
798
807
|
if (!!props.onChange)
|
|
799
|
-
props.onChange(
|
|
800
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
808
|
+
props.onChange(newValue);
|
|
801
809
|
}
|
|
802
810
|
};
|
|
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, {
|
|
811
|
+
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
812
|
};
|
|
805
813
|
|
|
806
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
814
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$z || (templateObject_1$z = __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) {
|
|
807
815
|
var size = _a.size;
|
|
808
816
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
809
817
|
}, function (_a) {
|
|
@@ -835,11 +843,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$w || (templa
|
|
|
835
843
|
var align = _a.align;
|
|
836
844
|
return align;
|
|
837
845
|
});
|
|
838
|
-
var templateObject_1$
|
|
846
|
+
var templateObject_1$z;
|
|
839
847
|
|
|
840
848
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
841
849
|
|
|
842
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
850
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __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
851
|
var checked = _a.checked, disabled = _a.disabled;
|
|
844
852
|
if (disabled)
|
|
845
853
|
return theme.colors.lightGray.darker;
|
|
@@ -867,22 +875,25 @@ var StyledRadio = styled__default["default"].div(templateObject_1$v || (template
|
|
|
867
875
|
return theme.colors.green.base;
|
|
868
876
|
return "";
|
|
869
877
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
870
|
-
var templateObject_1$
|
|
878
|
+
var templateObject_1$y;
|
|
871
879
|
|
|
872
880
|
var Radio = function (props) {
|
|
873
|
-
var _a;
|
|
881
|
+
var _a, _b;
|
|
874
882
|
var wrapperRef = React.useRef(null);
|
|
875
883
|
var inputRef = React.useRef(null);
|
|
876
|
-
var
|
|
884
|
+
var _c = React.useState((_a = props.checked) !== null && _a !== void 0 ? _a : props.defaultValue), checked = _c[0], setChecked = _c[1];
|
|
877
885
|
React.useEffect(function () {
|
|
878
886
|
if (props.autoFocus)
|
|
879
887
|
wrapperRef.current.focus();
|
|
880
|
-
if (props.
|
|
888
|
+
if (props.defaultValue)
|
|
881
889
|
inputRef.current.checked = true;
|
|
882
890
|
}, []);
|
|
883
891
|
React.useEffect(function () {
|
|
884
892
|
setChecked(inputRef.current.checked);
|
|
885
|
-
}, [(
|
|
893
|
+
}, [(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.checked]);
|
|
894
|
+
React.useEffect(function () {
|
|
895
|
+
setChecked(props.checked);
|
|
896
|
+
}, [props.checked]);
|
|
886
897
|
var toggle = function () {
|
|
887
898
|
var _a;
|
|
888
899
|
if (!props.disabled) {
|
|
@@ -896,11 +907,11 @@ var Radio = function (props) {
|
|
|
896
907
|
return (jsxRuntime.jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
897
908
|
};
|
|
898
909
|
|
|
899
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
910
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
900
911
|
var disabled = _a.disabled;
|
|
901
912
|
return (disabled ? "not-allowed" : "pointer");
|
|
902
913
|
});
|
|
903
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
914
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
904
915
|
var disabled = _a.disabled;
|
|
905
916
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
906
917
|
}, function (_a) {
|
|
@@ -913,35 +924,40 @@ var StyledSelect = styled__default["default"].select(templateObject_2$l || (temp
|
|
|
913
924
|
var isChanged = _a.isChanged;
|
|
914
925
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
915
926
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
916
|
-
var templateObject_1$
|
|
927
|
+
var templateObject_1$x, templateObject_2$n;
|
|
917
928
|
|
|
918
929
|
var Select = function (props) {
|
|
919
|
-
var _a
|
|
930
|
+
var _a;
|
|
931
|
+
var inputRef = React.useRef(null);
|
|
920
932
|
var _b = React.useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
933
|
+
React.useEffect(function () {
|
|
934
|
+
var _a, _b;
|
|
935
|
+
if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) ||
|
|
936
|
+
((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) === props.placeholder)
|
|
937
|
+
setIsChanged(false);
|
|
938
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
921
939
|
var onChange = function (e) {
|
|
922
940
|
if (!props.disabled) {
|
|
923
|
-
var value_1 = e.target.value;
|
|
924
|
-
setValue(value_1);
|
|
925
941
|
setIsChanged(true);
|
|
926
942
|
if (!!props.onChange)
|
|
927
|
-
props.onChange(
|
|
943
|
+
props.onChange(e.target.value);
|
|
928
944
|
}
|
|
929
945
|
};
|
|
930
|
-
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, {
|
|
946
|
+
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
947
|
};
|
|
932
948
|
|
|
933
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
949
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
934
950
|
var horizontal = _a.horizontal;
|
|
935
951
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
936
952
|
}, function (_a) {
|
|
937
953
|
var vertical = _a.vertical;
|
|
938
954
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
939
955
|
});
|
|
940
|
-
var templateObject_1$
|
|
956
|
+
var templateObject_1$w;
|
|
941
957
|
|
|
942
958
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
943
959
|
|
|
944
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
960
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"], ["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
945
961
|
var size = _a.size;
|
|
946
962
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
947
963
|
}, function (_a) {
|
|
@@ -969,11 +985,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$s || (templ
|
|
|
969
985
|
return theme.colors.darkGray.dark;
|
|
970
986
|
}
|
|
971
987
|
});
|
|
972
|
-
var templateObject_1$
|
|
988
|
+
var templateObject_1$v;
|
|
973
989
|
|
|
974
990
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
975
991
|
|
|
976
|
-
var Container$
|
|
992
|
+
var Container$f = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
977
993
|
var disabled = _a.disabled;
|
|
978
994
|
return (disabled ? "not-allowed" : "pointer");
|
|
979
995
|
}, function (_a) {
|
|
@@ -991,18 +1007,18 @@ var Container$d = styled__default["default"].div(templateObject_1$r || (template
|
|
|
991
1007
|
var disabled = _a.disabled;
|
|
992
1008
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
993
1009
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
994
|
-
var templateObject_1$
|
|
1010
|
+
var templateObject_1$u;
|
|
995
1011
|
|
|
996
1012
|
var Toggle = function (props) {
|
|
997
1013
|
var _a;
|
|
998
1014
|
var containerRef = React.useRef(null);
|
|
999
1015
|
var inputRef = React.useRef(null);
|
|
1000
|
-
var _b = React.useState(props.
|
|
1016
|
+
var _b = React.useState(props.defaultValue), checked = _b[0], setChecked = _b[1];
|
|
1001
1017
|
React.useEffect(function () {
|
|
1002
1018
|
var _a;
|
|
1003
1019
|
if (props.autoFocus)
|
|
1004
1020
|
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1005
|
-
if (props.
|
|
1021
|
+
if (props.defaultValue)
|
|
1006
1022
|
inputRef.current.checked = true;
|
|
1007
1023
|
}, []);
|
|
1008
1024
|
React.useEffect(function () {
|
|
@@ -1019,10 +1035,10 @@ var Toggle = function (props) {
|
|
|
1019
1035
|
props.onChange(newValue);
|
|
1020
1036
|
}
|
|
1021
1037
|
};
|
|
1022
|
-
return (jsxRuntime.jsx(Container$
|
|
1038
|
+
return (jsxRuntime.jsx(Container$f, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
1023
1039
|
};
|
|
1024
1040
|
|
|
1025
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
1041
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
1026
1042
|
var level = _a.level;
|
|
1027
1043
|
switch (level) {
|
|
1028
1044
|
case 1:
|
|
@@ -1033,7 +1049,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$q || (templateOb
|
|
|
1033
1049
|
return "70px";
|
|
1034
1050
|
}
|
|
1035
1051
|
});
|
|
1036
|
-
var templateObject_1$
|
|
1052
|
+
var templateObject_1$t;
|
|
1037
1053
|
|
|
1038
1054
|
var trophies = {
|
|
1039
1055
|
1: {
|
|
@@ -1069,7 +1085,7 @@ var trophies = {
|
|
|
1069
1085
|
};
|
|
1070
1086
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
1071
1087
|
|
|
1072
|
-
var Container$
|
|
1088
|
+
var Container$e = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
1073
1089
|
var type = _a.type;
|
|
1074
1090
|
switch (type) {
|
|
1075
1091
|
case "success":
|
|
@@ -1086,11 +1102,11 @@ var Container$c = styled__default["default"].div(templateObject_1$p || (template
|
|
|
1086
1102
|
return theme.colors.red.base;
|
|
1087
1103
|
}
|
|
1088
1104
|
});
|
|
1089
|
-
var templateObject_1$
|
|
1105
|
+
var templateObject_1$s;
|
|
1090
1106
|
|
|
1091
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1107
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$e, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
1092
1108
|
|
|
1093
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
1109
|
+
var StyledCard = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
1094
1110
|
var ellipse = _a.ellipse;
|
|
1095
1111
|
return ellipse
|
|
1096
1112
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1099,26 +1115,26 @@ var StyledCard = styled__default["default"].div(templateObject_1$o || (templateO
|
|
|
1099
1115
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1100
1116
|
: "";
|
|
1101
1117
|
});
|
|
1102
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
1118
|
+
var Ellipse = styled__default["default"].div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
1103
1119
|
var color = _a.color;
|
|
1104
1120
|
return color ? theme.colors[color].light : "";
|
|
1105
1121
|
});
|
|
1106
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
1107
|
-
var templateObject_1$
|
|
1122
|
+
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"])));
|
|
1123
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$7;
|
|
1108
1124
|
|
|
1109
1125
|
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
1126
|
|
|
1111
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
1112
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
1113
|
-
var CheckboxWrapper = styled__default["default"].div(templateObject_3$
|
|
1114
|
-
var Label$
|
|
1127
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1128
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1129
|
+
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"])));
|
|
1130
|
+
var Label$8 = 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
1131
|
var weight = _a.weight;
|
|
1116
1132
|
return weight || 500;
|
|
1117
1133
|
}, theme.colors.darkGray.base);
|
|
1118
|
-
var templateObject_1$
|
|
1134
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$6, templateObject_4$5;
|
|
1119
1135
|
|
|
1120
1136
|
var Checkboxes = function (props) {
|
|
1121
|
-
var _a = React.useState(props.
|
|
1137
|
+
var _a = React.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
1122
1138
|
var onChange = function (value) {
|
|
1123
1139
|
if (props.onChange) {
|
|
1124
1140
|
var newValues = values.includes(value)
|
|
@@ -1132,15 +1148,38 @@ var Checkboxes = function (props) {
|
|
|
1132
1148
|
if (props.onBlur)
|
|
1133
1149
|
props.onBlur(props.name);
|
|
1134
1150
|
};
|
|
1135
|
-
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1151
|
+
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$8, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1136
1152
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1137
|
-
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$
|
|
1153
|
+
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$8, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1138
1154
|
}) }, void 0)] }, void 0));
|
|
1139
1155
|
};
|
|
1140
1156
|
|
|
1141
|
-
var Container$
|
|
1142
|
-
var
|
|
1143
|
-
var
|
|
1157
|
+
var Container$d = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
1158
|
+
var Item = styled__default["default"].div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
1159
|
+
var isOpen = _a.isOpen;
|
|
1160
|
+
return (isOpen ? "" : "none");
|
|
1161
|
+
}, theme.colors.lightGray.darker);
|
|
1162
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1163
|
+
|
|
1164
|
+
var Collapse = function (props) {
|
|
1165
|
+
var _a = React.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
1166
|
+
var onClickItem = function (index, isOpen) {
|
|
1167
|
+
if (isOpen) {
|
|
1168
|
+
setOpenItems(function (prevState) { return prevState.filter(function (item) { return item !== index; }); });
|
|
1169
|
+
}
|
|
1170
|
+
else {
|
|
1171
|
+
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1172
|
+
}
|
|
1173
|
+
};
|
|
1174
|
+
return (jsxRuntime.jsx(Container$d, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1175
|
+
var isOpen = openItems.includes(index);
|
|
1176
|
+
return (jsxRuntime.jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: item.title }), void 0), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" }, void 0)] }, void 0), jsxRuntime.jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }), void 0)] }), "".concat(item.title, "-").concat(index)));
|
|
1177
|
+
}) }), void 0));
|
|
1178
|
+
};
|
|
1179
|
+
|
|
1180
|
+
var Container$c = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __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"])));
|
|
1181
|
+
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1182
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1144
1183
|
|
|
1145
1184
|
var DateInputField = function (props) {
|
|
1146
1185
|
var onChange = function (value) {
|
|
@@ -1151,12 +1190,12 @@ var DateInputField = function (props) {
|
|
|
1151
1190
|
if (props.onBlur)
|
|
1152
1191
|
props.onBlur(props.name);
|
|
1153
1192
|
};
|
|
1154
|
-
return (jsxRuntime.jsxs(Container$
|
|
1193
|
+
return (jsxRuntime.jsxs(Container$c, { children: [jsxRuntime.jsx(Label$7, __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
1194
|
};
|
|
1156
1195
|
|
|
1157
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
1158
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
1159
|
-
var templateObject_1$
|
|
1196
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$n || (templateObject_1$n = __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"])));
|
|
1197
|
+
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
|
|
1198
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1160
1199
|
|
|
1161
1200
|
var IconButton = function (props) {
|
|
1162
1201
|
if (props.color === "white")
|
|
@@ -1164,9 +1203,9 @@ var IconButton = function (props) {
|
|
|
1164
1203
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1165
1204
|
};
|
|
1166
1205
|
|
|
1167
|
-
var Container$
|
|
1168
|
-
var Label$
|
|
1169
|
-
var templateObject_1$
|
|
1206
|
+
var Container$b = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1207
|
+
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1208
|
+
var templateObject_1$m, templateObject_2$h;
|
|
1170
1209
|
|
|
1171
1210
|
var InputField = function (props) {
|
|
1172
1211
|
var onChange = function (value) {
|
|
@@ -1177,18 +1216,18 @@ var InputField = function (props) {
|
|
|
1177
1216
|
if (props.onBlur)
|
|
1178
1217
|
props.onBlur(props.name);
|
|
1179
1218
|
};
|
|
1180
|
-
return (jsxRuntime.jsxs(Container$
|
|
1219
|
+
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, { 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
1220
|
};
|
|
1182
1221
|
|
|
1183
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
1222
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$l || (templateObject_1$l = __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) {
|
|
1184
1223
|
var chevron = _a.chevron;
|
|
1185
1224
|
return (chevron === "left" ? "4px" : "");
|
|
1186
1225
|
}, function (_a) {
|
|
1187
1226
|
var chevron = _a.chevron;
|
|
1188
1227
|
return (chevron === "right" ? "4px" : "");
|
|
1189
1228
|
});
|
|
1190
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1191
|
-
var templateObject_1$
|
|
1229
|
+
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
1230
|
+
var templateObject_1$l, templateObject_2$g;
|
|
1192
1231
|
|
|
1193
1232
|
var Link = function (props) {
|
|
1194
1233
|
var onClick = function (e) {
|
|
@@ -1200,15 +1239,15 @@ var Link = function (props) {
|
|
|
1200
1239
|
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsxRuntime.jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
1201
1240
|
};
|
|
1202
1241
|
|
|
1203
|
-
var Container$
|
|
1242
|
+
var Container$a = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
|
|
1204
1243
|
var text = _a.text;
|
|
1205
1244
|
return (text ? "20px" : "");
|
|
1206
1245
|
});
|
|
1207
|
-
var templateObject_1$
|
|
1246
|
+
var templateObject_1$k;
|
|
1208
1247
|
|
|
1209
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1248
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$a, __assign({}, props, { children: [jsxRuntime.jsx(BeatLoader__default["default"], { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1210
1249
|
|
|
1211
|
-
var Container$
|
|
1250
|
+
var Container$9 = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
|
|
1212
1251
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1213
1252
|
if (dropdownIsVisible) {
|
|
1214
1253
|
switch (color) {
|
|
@@ -1221,8 +1260,8 @@ var Container$8 = styled__default["default"].div(templateObject_1$h || (template
|
|
|
1221
1260
|
}
|
|
1222
1261
|
return "";
|
|
1223
1262
|
});
|
|
1224
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
1225
|
-
var DropdownContainer = styled__default["default"].div(templateObject_3$
|
|
1263
|
+
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __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"])));
|
|
1264
|
+
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
1265
|
var color = _a.color;
|
|
1227
1266
|
switch (color) {
|
|
1228
1267
|
default:
|
|
@@ -1232,32 +1271,32 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$4 || (te
|
|
|
1232
1271
|
return theme.colors.lightGray.dark;
|
|
1233
1272
|
}
|
|
1234
1273
|
});
|
|
1235
|
-
var Locale = styled__default["default"].div(templateObject_4$
|
|
1236
|
-
var templateObject_1$
|
|
1274
|
+
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);
|
|
1275
|
+
var templateObject_1$j, templateObject_2$f, templateObject_3$5, templateObject_4$4;
|
|
1237
1276
|
|
|
1238
1277
|
var LocaleSelect = function (props) {
|
|
1239
1278
|
var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
1240
|
-
var _b = React.useState(props.
|
|
1279
|
+
var _b = React.useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
|
|
1241
1280
|
var onSelectLocale = function (locale) {
|
|
1242
1281
|
setLocale(locale);
|
|
1243
1282
|
props.onChange(locale);
|
|
1244
1283
|
};
|
|
1245
|
-
return (jsxRuntime.jsxs(Container$
|
|
1284
|
+
return (jsxRuntime.jsxs(Container$9, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1246
1285
|
.filter(function (l) { return l !== locale; })
|
|
1247
1286
|
.map(function (locale) { return (jsxRuntime.jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
|
|
1248
1287
|
};
|
|
1249
1288
|
|
|
1250
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
1251
|
-
var templateObject_1$
|
|
1289
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
|
|
1290
|
+
var templateObject_1$i;
|
|
1252
1291
|
|
|
1253
1292
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "gold" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "silver" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "bronze" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
1254
1293
|
|
|
1255
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1294
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"], ["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"])), function (_a) {
|
|
1256
1295
|
var contrast = _a.contrast;
|
|
1257
1296
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1258
1297
|
});
|
|
1259
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
1260
|
-
var templateObject_1$
|
|
1298
|
+
var ButtonContainer = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"])));
|
|
1299
|
+
var templateObject_1$h, templateObject_2$e;
|
|
1261
1300
|
|
|
1262
1301
|
var Notification = function (props) {
|
|
1263
1302
|
if (!props.isVisible)
|
|
@@ -1265,9 +1304,9 @@ var Notification = function (props) {
|
|
|
1265
1304
|
return (jsxRuntime.jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }, void 0), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React.createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }, void 0))] }), void 0));
|
|
1266
1305
|
};
|
|
1267
1306
|
|
|
1268
|
-
var Container$
|
|
1269
|
-
var Label$
|
|
1270
|
-
var templateObject_1$
|
|
1307
|
+
var Container$8 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __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"])));
|
|
1308
|
+
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1309
|
+
var templateObject_1$g, templateObject_2$d;
|
|
1271
1310
|
|
|
1272
1311
|
var NumberField = function (props) {
|
|
1273
1312
|
var onChange = function (value) {
|
|
@@ -1278,15 +1317,110 @@ var NumberField = function (props) {
|
|
|
1278
1317
|
if (props.onBlur)
|
|
1279
1318
|
props.onBlur(props.name);
|
|
1280
1319
|
};
|
|
1281
|
-
return (jsxRuntime.jsxs(Container$
|
|
1320
|
+
return (jsxRuntime.jsxs(Container$8, { 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(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
1321
|
};
|
|
1283
1322
|
|
|
1284
|
-
var
|
|
1285
|
-
|
|
1286
|
-
|
|
1323
|
+
var expressions = {};
|
|
1324
|
+
|
|
1325
|
+
(function (exports) {
|
|
1326
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1327
|
+
exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
|
|
1328
|
+
var hasNumber = function (input) {
|
|
1329
|
+
var regex = new RegExp(/\d/g);
|
|
1330
|
+
return regex.test(input);
|
|
1331
|
+
};
|
|
1332
|
+
exports.hasNumber = hasNumber;
|
|
1333
|
+
var hasSpecialCharacter = function (input) {
|
|
1334
|
+
var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
|
|
1335
|
+
return regex.test(input);
|
|
1336
|
+
};
|
|
1337
|
+
exports.hasSpecialCharacter = hasSpecialCharacter;
|
|
1338
|
+
var hasCapitalLetter = function (input) {
|
|
1339
|
+
var regex = new RegExp(/[A-Z]/g);
|
|
1340
|
+
return regex.test(input);
|
|
1341
|
+
};
|
|
1342
|
+
exports.hasCapitalLetter = hasCapitalLetter;
|
|
1343
|
+
var isValidEmail = function (email) {
|
|
1344
|
+
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,}))$/);
|
|
1345
|
+
return regex.test(email);
|
|
1346
|
+
};
|
|
1347
|
+
exports.isValidEmail = isValidEmail;
|
|
1348
|
+
var isValidUsername = function (username) {
|
|
1349
|
+
if (username.length > 5 &&
|
|
1350
|
+
username.length <= 15 &&
|
|
1351
|
+
username.indexOf(" ") < 0 &&
|
|
1352
|
+
!(0, exports.isValidEmail)(username)) {
|
|
1353
|
+
return true;
|
|
1354
|
+
}
|
|
1355
|
+
else {
|
|
1356
|
+
return false;
|
|
1357
|
+
}
|
|
1358
|
+
};
|
|
1359
|
+
exports.isValidUsername = isValidUsername;
|
|
1360
|
+
var isStrongPassword = function (password) {
|
|
1361
|
+
return password.length >= 8 &&
|
|
1362
|
+
(0, exports.hasNumber)(password) &&
|
|
1363
|
+
(0, exports.hasSpecialCharacter)(password) &&
|
|
1364
|
+
(0, exports.hasCapitalLetter)(password)
|
|
1365
|
+
? true
|
|
1366
|
+
: false;
|
|
1367
|
+
};
|
|
1368
|
+
exports.isStrongPassword = isStrongPassword;
|
|
1369
|
+
}(expressions));
|
|
1370
|
+
|
|
1371
|
+
var Container$7 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
1372
|
+
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1373
|
+
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"])));
|
|
1374
|
+
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"])));
|
|
1375
|
+
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) {
|
|
1376
|
+
var isOk = _a.isOk;
|
|
1377
|
+
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1378
|
+
}, fadeIn);
|
|
1379
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$4, templateObject_4$3, templateObject_5$2;
|
|
1380
|
+
|
|
1381
|
+
var translations = {
|
|
1382
|
+
"nl-NL": {
|
|
1383
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
1384
|
+
number: "Minimaal 1 getal",
|
|
1385
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
1386
|
+
length: "Minimaal 8 karakters",
|
|
1387
|
+
},
|
|
1388
|
+
"nl-BE": {
|
|
1389
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
1390
|
+
number: "Minimaal 1 getal",
|
|
1391
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
1392
|
+
length: "Minimaal 8 karakters",
|
|
1393
|
+
},
|
|
1394
|
+
"en-GB": {
|
|
1395
|
+
capitalLetter: "At least 1 capital letter",
|
|
1396
|
+
number: "At least 1 number",
|
|
1397
|
+
specialCharacter: "At least 1 special character",
|
|
1398
|
+
length: "At least 8 characters",
|
|
1399
|
+
},
|
|
1400
|
+
// "fr-FR": {
|
|
1401
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1402
|
+
// number: "Au moins un chiffre",
|
|
1403
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1404
|
+
// length: "Au moins 8 caractères",
|
|
1405
|
+
// },
|
|
1406
|
+
// "fr-BE": {
|
|
1407
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1408
|
+
// number: "Au moins un chiffre",
|
|
1409
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1410
|
+
// length: "Au moins 8 caractères",
|
|
1411
|
+
// },
|
|
1412
|
+
// "de-DE": {
|
|
1413
|
+
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
1414
|
+
// number: "Mindestens 1 Zahl",
|
|
1415
|
+
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
1416
|
+
// length: "Mindestens 8 Zeichen",
|
|
1417
|
+
// },
|
|
1418
|
+
};
|
|
1287
1419
|
|
|
1288
1420
|
var PasswordInputField = function (props) {
|
|
1421
|
+
var _a = React.useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
|
|
1289
1422
|
var onChange = function (value) {
|
|
1423
|
+
setValue(value);
|
|
1290
1424
|
if (props.onChange)
|
|
1291
1425
|
props.onChange(props.name, value);
|
|
1292
1426
|
};
|
|
@@ -1299,7 +1433,7 @@ var PasswordInputField = function (props) {
|
|
|
1299
1433
|
if (props.onBlur)
|
|
1300
1434
|
props.onBlur(props.name);
|
|
1301
1435
|
};
|
|
1302
|
-
return (jsxRuntime.jsxs(Container$
|
|
1436
|
+
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(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
1437
|
};
|
|
1304
1438
|
|
|
1305
1439
|
var generateRandomString = function (length) {
|
|
@@ -1312,7 +1446,7 @@ var generateRandomString = function (length) {
|
|
|
1312
1446
|
return string;
|
|
1313
1447
|
};
|
|
1314
1448
|
|
|
1315
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
1449
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
1316
1450
|
var isVisible = _a.isVisible;
|
|
1317
1451
|
return (isVisible ? "100%" : "0%");
|
|
1318
1452
|
}, function (_a) {
|
|
@@ -1325,7 +1459,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$c || (templ
|
|
|
1325
1459
|
var contrast = _a.contrast;
|
|
1326
1460
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1327
1461
|
});
|
|
1328
|
-
var templateObject_1$
|
|
1462
|
+
var templateObject_1$e;
|
|
1329
1463
|
|
|
1330
1464
|
var Popup = function (props) {
|
|
1331
1465
|
var popupRef = React.useRef(null);
|
|
@@ -1361,8 +1495,8 @@ var Popup = function (props) {
|
|
|
1361
1495
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsxRuntime.jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
1362
1496
|
};
|
|
1363
1497
|
|
|
1364
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1365
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
1498
|
+
var Wrapper = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1499
|
+
var StyledProgressBar = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
1366
1500
|
var showInfo = _a.showInfo;
|
|
1367
1501
|
return (showInfo ? "10px" : "");
|
|
1368
1502
|
});
|
|
@@ -1373,12 +1507,12 @@ var Indicator = styled__default["default"].div(templateObject_3$3 || (templateOb
|
|
|
1373
1507
|
var color = _a.color;
|
|
1374
1508
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1375
1509
|
});
|
|
1376
|
-
var templateObject_1$
|
|
1510
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$3;
|
|
1377
1511
|
|
|
1378
1512
|
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
1513
|
|
|
1380
|
-
var Container$
|
|
1381
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
1514
|
+
var Container$6 = styled__default["default"].ol(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
1515
|
+
var Step$1 = styled__default["default"].li(templateObject_2$a || (templateObject_2$a = __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
1516
|
var status = _a.status;
|
|
1383
1517
|
return (!!status ? "pointer" : "not-allowed");
|
|
1384
1518
|
}, function (_a) {
|
|
@@ -1396,10 +1530,13 @@ var Step$1 = styled__default["default"].li(templateObject_2$9 || (templateObject
|
|
|
1396
1530
|
return status === "active"
|
|
1397
1531
|
? theme.colors.lightGray.light
|
|
1398
1532
|
: theme.colors.darkGray.light;
|
|
1399
|
-
}, theme.colors.darkGray.base,
|
|
1400
|
-
var
|
|
1533
|
+
}, theme.colors.darkGray.base, function (_a) {
|
|
1534
|
+
var hasTitle = _a.hasTitle;
|
|
1535
|
+
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1536
|
+
}, theme.colors.lightGray.dark);
|
|
1537
|
+
var templateObject_1$c, templateObject_2$a;
|
|
1401
1538
|
|
|
1402
|
-
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1539
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$6, { children: props.steps.map(function (_a, index) {
|
|
1403
1540
|
var title = _a.title, onClick = _a.onClick;
|
|
1404
1541
|
var step = index + 1;
|
|
1405
1542
|
var status = props.current > step
|
|
@@ -1411,11 +1548,11 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$5, { children:
|
|
|
1411
1548
|
if (onClick && props.current >= step)
|
|
1412
1549
|
onClick(step);
|
|
1413
1550
|
};
|
|
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)));
|
|
1551
|
+
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
1552
|
}) }, void 0)); };
|
|
1416
1553
|
|
|
1417
|
-
var Container$
|
|
1418
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
1554
|
+
var Container$5 = styled__default["default"].ol(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
1555
|
+
var Step = styled__default["default"].li(templateObject_2$9 || (templateObject_2$9 = __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
1556
|
var status = _a.status;
|
|
1420
1557
|
return (!!status ? "pointer" : "not-allowed");
|
|
1421
1558
|
}, function (_a) {
|
|
@@ -1434,9 +1571,9 @@ var Step = styled__default["default"].li(templateObject_2$8 || (templateObject_2
|
|
|
1434
1571
|
? theme.colors.lightGray.light
|
|
1435
1572
|
: theme.colors.darkGray.light;
|
|
1436
1573
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1437
|
-
var templateObject_1$
|
|
1574
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1438
1575
|
|
|
1439
|
-
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1576
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$5, { children: props.steps.map(function (_a, index) {
|
|
1440
1577
|
var title = _a.title, onClick = _a.onClick;
|
|
1441
1578
|
var step = index + 1;
|
|
1442
1579
|
var status = props.current > step
|
|
@@ -1448,21 +1585,21 @@ var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$4, { children:
|
|
|
1448
1585
|
if (onClick && props.current >= step)
|
|
1449
1586
|
onClick(step);
|
|
1450
1587
|
};
|
|
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)));
|
|
1588
|
+
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
1589
|
}) }, void 0)); };
|
|
1453
1590
|
|
|
1454
1591
|
var Steps = function (props) {
|
|
1455
1592
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign({}, props), void 0)) : (jsxRuntime.jsx(Steps$2, __assign({}, props), void 0));
|
|
1456
1593
|
};
|
|
1457
1594
|
|
|
1458
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
1459
|
-
var RadioContainer = styled__default["default"].div(templateObject_2$
|
|
1595
|
+
var Fieldset = styled__default["default"].fieldset(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1596
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1460
1597
|
var RadioWrapper = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
1461
|
-
var Label$
|
|
1598
|
+
var Label$3 = styled__default["default"](StyledParagraph)(templateObject_4$2 || (templateObject_4$2 = __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) {
|
|
1462
1599
|
var weight = _a.weight;
|
|
1463
1600
|
return weight || 500;
|
|
1464
1601
|
}, theme.colors.darkGray.base);
|
|
1465
|
-
var templateObject_1$
|
|
1602
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$2, templateObject_4$2;
|
|
1466
1603
|
|
|
1467
1604
|
var RadioGroup = function (props) {
|
|
1468
1605
|
var onChange = function (value) {
|
|
@@ -1473,15 +1610,15 @@ var RadioGroup = function (props) {
|
|
|
1473
1610
|
if (props.onBlur)
|
|
1474
1611
|
props.onBlur(props.name);
|
|
1475
1612
|
};
|
|
1476
|
-
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1613
|
+
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$3, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1477
1614
|
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,
|
|
1615
|
+
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$3, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1479
1616
|
}) }, void 0)] }, void 0));
|
|
1480
1617
|
};
|
|
1481
1618
|
|
|
1482
|
-
var Container$
|
|
1483
|
-
var Label$
|
|
1484
|
-
var templateObject_1$
|
|
1619
|
+
var Container$4 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1620
|
+
var Label$2 = styled__default["default"](StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1621
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1485
1622
|
|
|
1486
1623
|
var SelectField = function (props) {
|
|
1487
1624
|
var onChange = function (value) {
|
|
@@ -1492,15 +1629,15 @@ var SelectField = function (props) {
|
|
|
1492
1629
|
if (props.onBlur)
|
|
1493
1630
|
props.onBlur(props.name);
|
|
1494
1631
|
};
|
|
1495
|
-
return (jsxRuntime.jsxs(Container$
|
|
1632
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$2, __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
1633
|
var value = _a.value, label = _a.label;
|
|
1497
1634
|
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1498
1635
|
}) }), void 0)] }, void 0));
|
|
1499
1636
|
};
|
|
1500
1637
|
|
|
1501
|
-
var Container$
|
|
1502
|
-
var Label = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1503
|
-
var templateObject_1$
|
|
1638
|
+
var Container$3 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1639
|
+
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1640
|
+
var templateObject_1$8, templateObject_2$6;
|
|
1504
1641
|
|
|
1505
1642
|
var ToggleField = function (props) {
|
|
1506
1643
|
var onChange = function (value) {
|
|
@@ -1511,10 +1648,10 @@ var ToggleField = function (props) {
|
|
|
1511
1648
|
if (props.onBlur)
|
|
1512
1649
|
props.onBlur(props.name);
|
|
1513
1650
|
};
|
|
1514
|
-
return (jsxRuntime.jsxs(Container$
|
|
1651
|
+
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(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
1652
|
};
|
|
1516
1653
|
|
|
1517
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
1654
|
+
var TooltipContainer = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __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) {
|
|
1518
1655
|
var isVisible = _a.isVisible;
|
|
1519
1656
|
return (isVisible ? "100%" : "0%");
|
|
1520
1657
|
}, function (_a) {
|
|
@@ -1524,7 +1661,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$5 || (tem
|
|
|
1524
1661
|
var x = _a.x;
|
|
1525
1662
|
return (x ? "".concat(x, "px") : "");
|
|
1526
1663
|
});
|
|
1527
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
1664
|
+
var TooltipTitle = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
1528
1665
|
var color = _a.color;
|
|
1529
1666
|
switch (color) {
|
|
1530
1667
|
default:
|
|
@@ -1534,7 +1671,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$4 || (templat
|
|
|
1534
1671
|
return theme.colors.lightGray.dark;
|
|
1535
1672
|
}
|
|
1536
1673
|
});
|
|
1537
|
-
var templateObject_1$
|
|
1674
|
+
var templateObject_1$7, templateObject_2$5;
|
|
1538
1675
|
|
|
1539
1676
|
var Tooltip = function (props) {
|
|
1540
1677
|
var tooltipRef = React.useRef(null);
|
|
@@ -1568,11 +1705,50 @@ var Tooltip = function (props) {
|
|
|
1568
1705
|
theme.colors.lightGray.light }, void 0) }), void 0), jsxRuntime.jsx(TooltipTitle, __assign({ color: props.color }, { children: jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0) }), void 0)] }), void 0)] }, void 0));
|
|
1569
1706
|
};
|
|
1570
1707
|
|
|
1708
|
+
var StyledTextarea = styled__default["default"].textarea(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n min-height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n resize: vertical;\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
1709
|
+
var disabled = _a.disabled;
|
|
1710
|
+
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1711
|
+
}, function (_a) {
|
|
1712
|
+
var disabled = _a.disabled;
|
|
1713
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
1714
|
+
}, function (_a) {
|
|
1715
|
+
var disabled = _a.disabled;
|
|
1716
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
1717
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
1718
|
+
var disabled = _a.disabled;
|
|
1719
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1720
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
1721
|
+
var templateObject_1$6;
|
|
1722
|
+
|
|
1723
|
+
var Textarea = function (props) {
|
|
1724
|
+
var onChange = function (e) {
|
|
1725
|
+
if (!props.disabled && !!props.onChange)
|
|
1726
|
+
props.onChange(e.target.value);
|
|
1727
|
+
};
|
|
1728
|
+
return jsxRuntime.jsx(StyledTextarea, __assign({}, props, { onChange: onChange }), void 0);
|
|
1729
|
+
};
|
|
1730
|
+
|
|
1731
|
+
var Container$2 = styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
1732
|
+
var Label = styled__default["default"](StyledParagraph)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1733
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1734
|
+
|
|
1735
|
+
var TextareaField = function (props) {
|
|
1736
|
+
var onChange = function (value) {
|
|
1737
|
+
if (props.onChange)
|
|
1738
|
+
props.onChange(props.name, value);
|
|
1739
|
+
};
|
|
1740
|
+
var onBlur = function () {
|
|
1741
|
+
if (props.onBlur)
|
|
1742
|
+
props.onBlur(props.name);
|
|
1743
|
+
};
|
|
1744
|
+
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(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, 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));
|
|
1745
|
+
};
|
|
1746
|
+
|
|
1571
1747
|
var FeedbackColors = {
|
|
1572
1748
|
success: theme.colors.green.base,
|
|
1573
1749
|
error: theme.colors.red.base,
|
|
1574
1750
|
};
|
|
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) {
|
|
1751
|
+
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
1752
|
var status = _a.status;
|
|
1577
1753
|
return FeedbackColors[status];
|
|
1578
1754
|
});
|
|
@@ -1600,17 +1776,103 @@ var FormWrapper = styled__default["default"].form(templateObject_1$3 || (templat
|
|
|
1600
1776
|
var ButtonWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
1601
1777
|
var templateObject_1$3, templateObject_2$2;
|
|
1602
1778
|
|
|
1603
|
-
var Form = function (props) {
|
|
1779
|
+
var Form = React.forwardRef(function (props, ref) {
|
|
1604
1780
|
var _a = React.useState({}), values = _a[0], setValues = _a[1];
|
|
1605
1781
|
var _b = React.useState({}), feedback = _b[0], setFeedback = _b[1];
|
|
1782
|
+
React.useImperativeHandle(ref, function () { return ({
|
|
1783
|
+
resetForm: resetForm,
|
|
1784
|
+
}); });
|
|
1606
1785
|
React.useEffect(function () {
|
|
1607
|
-
|
|
1786
|
+
setDefaultValues();
|
|
1787
|
+
}, []);
|
|
1788
|
+
var setDefaultValues = function () {
|
|
1789
|
+
var defaultValues = {};
|
|
1608
1790
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1609
1791
|
var field = _a[_i];
|
|
1610
|
-
|
|
1792
|
+
defaultValues[field.name] = field.defaultValue;
|
|
1611
1793
|
}
|
|
1612
|
-
setValues(
|
|
1613
|
-
|
|
1794
|
+
setValues(defaultValues);
|
|
1795
|
+
setFeedback({});
|
|
1796
|
+
};
|
|
1797
|
+
var resetForm = function () {
|
|
1798
|
+
setDefaultValues();
|
|
1799
|
+
var _loop_1 = function (field) {
|
|
1800
|
+
switch (field.type) {
|
|
1801
|
+
case "text":
|
|
1802
|
+
case "password":
|
|
1803
|
+
case "date": {
|
|
1804
|
+
var element = document.getElementById(field.name);
|
|
1805
|
+
if (!field.defaultValue)
|
|
1806
|
+
element.value = "";
|
|
1807
|
+
else
|
|
1808
|
+
element.value = field.defaultValue;
|
|
1809
|
+
break;
|
|
1810
|
+
}
|
|
1811
|
+
case "textarea": {
|
|
1812
|
+
var element = document.getElementById(field.name);
|
|
1813
|
+
if (!field.defaultValue)
|
|
1814
|
+
element.value = "";
|
|
1815
|
+
else
|
|
1816
|
+
element.value = field.defaultValue;
|
|
1817
|
+
break;
|
|
1818
|
+
}
|
|
1819
|
+
case "toggle": {
|
|
1820
|
+
var element = document.getElementById(field.name);
|
|
1821
|
+
if (!field.defaultValue)
|
|
1822
|
+
element.checked = false;
|
|
1823
|
+
else
|
|
1824
|
+
element.checked = !!field.defaultValue;
|
|
1825
|
+
break;
|
|
1826
|
+
}
|
|
1827
|
+
case "number": {
|
|
1828
|
+
var element = document.getElementById(field.name);
|
|
1829
|
+
if (!field.defaultValue)
|
|
1830
|
+
element.value = "0";
|
|
1831
|
+
else
|
|
1832
|
+
element.value = "".concat(field.defaultValue);
|
|
1833
|
+
break;
|
|
1834
|
+
}
|
|
1835
|
+
case "select": {
|
|
1836
|
+
var element = document.getElementById(field.name);
|
|
1837
|
+
if (!field.defaultValue)
|
|
1838
|
+
element.selectedIndex = null;
|
|
1839
|
+
else {
|
|
1840
|
+
element.selectedIndex = Array.from(element.options).findIndex(function (_a) {
|
|
1841
|
+
var value = _a.value;
|
|
1842
|
+
return value === field.defaultValue;
|
|
1843
|
+
});
|
|
1844
|
+
}
|
|
1845
|
+
break;
|
|
1846
|
+
}
|
|
1847
|
+
case "radio": {
|
|
1848
|
+
for (var _b = 0, _c = field.items; _b < _c.length; _b++) {
|
|
1849
|
+
var option = _c[_b];
|
|
1850
|
+
var element = document.getElementById(option.id);
|
|
1851
|
+
if (!field.defaultValue)
|
|
1852
|
+
element.checked = false;
|
|
1853
|
+
else
|
|
1854
|
+
element.checked = element.value === field.defaultValue;
|
|
1855
|
+
}
|
|
1856
|
+
break;
|
|
1857
|
+
}
|
|
1858
|
+
case "checkbox": {
|
|
1859
|
+
for (var _d = 0, _e = field.items; _d < _e.length; _d++) {
|
|
1860
|
+
var option = _e[_d];
|
|
1861
|
+
var element = document.getElementById(option.id);
|
|
1862
|
+
if (!field.defaultValue)
|
|
1863
|
+
element.checked = false;
|
|
1864
|
+
else
|
|
1865
|
+
element.checked = field.defaultValue.includes(element.value);
|
|
1866
|
+
}
|
|
1867
|
+
break;
|
|
1868
|
+
}
|
|
1869
|
+
}
|
|
1870
|
+
};
|
|
1871
|
+
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1872
|
+
var field = _a[_i];
|
|
1873
|
+
_loop_1(field);
|
|
1874
|
+
}
|
|
1875
|
+
};
|
|
1614
1876
|
var onChangeFormField = function (fieldName, value) {
|
|
1615
1877
|
var _a, _b, _c;
|
|
1616
1878
|
var feedbackForField = { status: undefined, message: undefined };
|
|
@@ -1662,6 +1924,9 @@ var Form = function (props) {
|
|
|
1662
1924
|
case "date":
|
|
1663
1925
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1664
1926
|
jsxRuntime.jsx(DateInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1927
|
+
case "textarea":
|
|
1928
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1929
|
+
jsxRuntime.jsx(TextareaField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1665
1930
|
case "radio":
|
|
1666
1931
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1667
1932
|
jsxRuntime.jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1679,7 +1944,7 @@ var Form = function (props) {
|
|
|
1679
1944
|
jsxRuntime.jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1680
1945
|
}
|
|
1681
1946
|
}) }, 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
|
-
};
|
|
1947
|
+
});
|
|
1683
1948
|
|
|
1684
1949
|
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
1950
|
var color = _a.color, active = _a.active;
|
|
@@ -1731,12 +1996,10 @@ var Keyboard = function (props) {
|
|
|
1731
1996
|
right: [],
|
|
1732
1997
|
};
|
|
1733
1998
|
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
1734
|
-
var
|
|
1735
|
-
var index = k.index, key = k.key, color = k.color, isShiftKey = k.isShiftKey;
|
|
1999
|
+
var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
|
|
1736
2000
|
keys_1[index] = { character: key, color: color };
|
|
1737
|
-
if (isShiftKey)
|
|
1738
|
-
shiftKeys_1[
|
|
1739
|
-
}
|
|
2001
|
+
if (isShiftKey)
|
|
2002
|
+
shiftKeys_1[hand].push(key);
|
|
1740
2003
|
}
|
|
1741
2004
|
setKeys(keys_1);
|
|
1742
2005
|
setShiftKeys(shiftKeys_1);
|
|
@@ -1744,49 +2007,52 @@ var Keyboard = function (props) {
|
|
|
1744
2007
|
}, [props.keys]);
|
|
1745
2008
|
if (!keys)
|
|
1746
2009
|
return null;
|
|
1747
|
-
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[
|
|
1748
|
-
keys[
|
|
1749
|
-
keys[
|
|
1750
|
-
keys[
|
|
1751
|
-
keys[
|
|
1752
|
-
keys[
|
|
1753
|
-
keys[
|
|
1754
|
-
keys[
|
|
1755
|
-
keys[
|
|
1756
|
-
keys[
|
|
1757
|
-
keys[
|
|
1758
|
-
keys[
|
|
1759
|
-
keys[
|
|
1760
|
-
keys[
|
|
1761
|
-
keys[
|
|
1762
|
-
keys[
|
|
1763
|
-
keys[
|
|
1764
|
-
keys[
|
|
1765
|
-
keys[
|
|
1766
|
-
keys[
|
|
1767
|
-
keys[
|
|
1768
|
-
keys[
|
|
1769
|
-
keys[
|
|
1770
|
-
keys[
|
|
1771
|
-
keys[
|
|
1772
|
-
keys[
|
|
1773
|
-
keys[
|
|
1774
|
-
keys[
|
|
1775
|
-
keys[
|
|
1776
|
-
keys[
|
|
1777
|
-
keys[
|
|
1778
|
-
keys[
|
|
1779
|
-
keys[
|
|
1780
|
-
keys[
|
|
1781
|
-
keys[
|
|
1782
|
-
keys[
|
|
1783
|
-
keys[
|
|
1784
|
-
keys[
|
|
1785
|
-
keys[
|
|
1786
|
-
keys[
|
|
1787
|
-
keys[
|
|
1788
|
-
keys[
|
|
1789
|
-
keys[70].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [
|
|
2010
|
+
return (jsxRuntime.jsxs(Container, { children: [jsxRuntime.jsxs(SpecialRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
2011
|
+
keys[89].character === props.activeKey }, 44), jsxRuntime.jsx(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
2012
|
+
keys[87].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
2013
|
+
keys[85].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
2014
|
+
keys[83].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
2015
|
+
keys[81].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
2016
|
+
keys[91].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
2017
|
+
keys[90].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
2018
|
+
keys[80].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
2019
|
+
keys[82].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
2020
|
+
keys[84].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
2021
|
+
keys[86].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
2022
|
+
keys[88].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(TopRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
2023
|
+
keys[65].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
2024
|
+
keys[63].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
2025
|
+
keys[61].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
2026
|
+
keys[59].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
2027
|
+
keys[69].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
2028
|
+
keys[68].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
2029
|
+
keys[58].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
2030
|
+
keys[60].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
2031
|
+
keys[62].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[9].character === props.activeKey ||
|
|
2032
|
+
keys[64].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
2033
|
+
keys[67].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
2034
|
+
keys[66].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(StartRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
2035
|
+
keys[54].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
2036
|
+
keys[52].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
2037
|
+
keys[50].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
2038
|
+
keys[48].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
2039
|
+
keys[57].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
2040
|
+
keys[56].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
2041
|
+
keys[47].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
2042
|
+
keys[49].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
2043
|
+
keys[51].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[8].character, keys[53].character].filter(function (k) { return k !== "m"; }), color: keys[8].color, active: keys[8].character === props.activeKey ||
|
|
2044
|
+
keys[53].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
2045
|
+
keys[55].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0), jsxRuntime.jsxs(BottomRow, { children: [jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }, void 0), jsxRuntime.jsx(Key, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
2046
|
+
keys[77].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
2047
|
+
keys[75].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
2048
|
+
keys[73].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
2049
|
+
keys[71].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
2050
|
+
keys[79].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
2051
|
+
keys[78].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[70].character], color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
2052
|
+
keys[70].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
2053
|
+
keys[72].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
2054
|
+
keys[74].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
2055
|
+
keys[76].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) }, void 0)] }, void 0), jsxRuntime.jsxs(SpacebarRow, { children: [jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0), jsxRuntime.jsx(Key, {}, void 0)] }, void 0)] }, void 0));
|
|
1790
2056
|
};
|
|
1791
2057
|
|
|
1792
2058
|
var Mask = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"], ["\n width: 100vw;\n height: 100vh;\n position: fixed;\n background-color: rgba(35, 41, 47, 50%);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n"])));
|
|
@@ -1817,6 +2083,7 @@ exports.Button = Button;
|
|
|
1817
2083
|
exports.Card = Card;
|
|
1818
2084
|
exports.Checkbox = Checkbox;
|
|
1819
2085
|
exports.Checkboxes = Checkboxes;
|
|
2086
|
+
exports.Collapse = Collapse;
|
|
1820
2087
|
exports.DateInputField = DateInputField;
|
|
1821
2088
|
exports.Flag = Flag;
|
|
1822
2089
|
exports.Form = Form;
|