@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.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
2
|
+
import React, { forwardRef, useRef, useState, useEffect, createElement, useImperativeHandle } from 'react';
|
|
3
|
+
import styled, { keyframes } from 'styled-components';
|
|
4
4
|
import BeatLoader from 'react-spinners/BeatLoader';
|
|
5
5
|
|
|
6
6
|
var theme = {
|
|
@@ -108,12 +108,12 @@ var theme = {
|
|
|
108
108
|
small: {
|
|
109
109
|
fontSize: "16px",
|
|
110
110
|
fontWeight: "500",
|
|
111
|
-
lineHeight: "
|
|
111
|
+
lineHeight: "22px",
|
|
112
112
|
},
|
|
113
113
|
medium: {
|
|
114
114
|
fontSize: "20px",
|
|
115
115
|
fontWeight: "500",
|
|
116
|
-
lineHeight: "
|
|
116
|
+
lineHeight: "30px",
|
|
117
117
|
},
|
|
118
118
|
large: {
|
|
119
119
|
fontSize: "28px",
|
|
@@ -188,7 +188,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
188
188
|
return cooked;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
var StyledButton = styled.button(templateObject_1$
|
|
191
|
+
var StyledButton = styled.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) {
|
|
192
192
|
var fluid = _a.fluid;
|
|
193
193
|
return (fluid ? "100%" : "fit-content");
|
|
194
194
|
}, function (_a) {
|
|
@@ -238,11 +238,11 @@ var StyledButton = styled.button(templateObject_1$F || (templateObject_1$F = __m
|
|
|
238
238
|
? theme.button.medium.heightActive
|
|
239
239
|
: theme.button[size].heightActive;
|
|
240
240
|
});
|
|
241
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
241
|
+
var DisabledButton = styled(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) {
|
|
242
242
|
var size = _a.size;
|
|
243
243
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
244
244
|
});
|
|
245
|
-
var GhostButton = styled(StyledButton)(templateObject_3$
|
|
245
|
+
var GhostButton = styled(StyledButton)(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
|
|
246
246
|
var size = _a.size;
|
|
247
247
|
return !size
|
|
248
248
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -258,9 +258,10 @@ var GhostButton = styled(StyledButton)(templateObject_3$7 || (templateObject_3$7
|
|
|
258
258
|
? theme.button.medium.marginTopActive
|
|
259
259
|
: theme.button[size].marginTopActive;
|
|
260
260
|
});
|
|
261
|
-
var templateObject_1$
|
|
261
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$8;
|
|
262
262
|
|
|
263
|
-
var Button = function (props) {
|
|
263
|
+
var Button = forwardRef(function (props, ref) {
|
|
264
|
+
var as = props.href || props.asAnchor ? "a" : "button";
|
|
264
265
|
var onClick = function () {
|
|
265
266
|
if (!props.disabled) {
|
|
266
267
|
if (props.onClick)
|
|
@@ -268,14 +269,14 @@ var Button = function (props) {
|
|
|
268
269
|
}
|
|
269
270
|
};
|
|
270
271
|
if (props.disabled) {
|
|
271
|
-
return (jsx(DisabledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
272
|
+
return (jsx(DisabledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
272
273
|
}
|
|
273
274
|
if (props.color === "white")
|
|
274
|
-
return (jsx(GhostButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
275
|
-
return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
276
|
-
};
|
|
275
|
+
return (jsx(GhostButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
276
|
+
return (jsx(StyledButton, __assign({}, props, { as: as, ref: ref, onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
277
|
+
});
|
|
277
278
|
|
|
278
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
279
|
+
var StyledCheckbox = styled.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) {
|
|
279
280
|
var checked = _a.checked, disabled = _a.disabled;
|
|
280
281
|
if (disabled)
|
|
281
282
|
return theme.colors.lightGray.darker;
|
|
@@ -296,7 +297,7 @@ var StyledCheckbox = styled.div(templateObject_1$E || (templateObject_1$E = __ma
|
|
|
296
297
|
return theme.colors.green.base;
|
|
297
298
|
return theme.colors.lightGray.darker;
|
|
298
299
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
299
|
-
var templateObject_1$
|
|
300
|
+
var templateObject_1$H;
|
|
300
301
|
|
|
301
302
|
var Checkbox = function (props) {
|
|
302
303
|
var _a;
|
|
@@ -329,7 +330,7 @@ var Checkbox = function (props) {
|
|
|
329
330
|
return (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 && (jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: 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)), jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
330
331
|
};
|
|
331
332
|
|
|
332
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
333
|
+
var Wrapper$9 = styled.div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
333
334
|
var size = _a.size;
|
|
334
335
|
switch (size) {
|
|
335
336
|
case "small":
|
|
@@ -352,20 +353,20 @@ var Wrapper$9 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTem
|
|
|
352
353
|
return "27px";
|
|
353
354
|
}
|
|
354
355
|
});
|
|
355
|
-
var templateObject_1$
|
|
356
|
+
var templateObject_1$G;
|
|
356
357
|
|
|
357
358
|
var parsers = {};
|
|
358
359
|
|
|
359
360
|
Object.defineProperty(parsers, "__esModule", { value: true });
|
|
360
|
-
|
|
361
|
+
parsers.getKeyboardLayoutByLocale = getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = parsers.getLanguageCodeByLocale = getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = void 0;
|
|
361
362
|
var getNativeLanguageByLocale = function (locale) {
|
|
362
363
|
var nativeLanguages = {
|
|
363
364
|
"en-GB": "English (UK)",
|
|
364
365
|
"nl-NL": "Nederlands",
|
|
365
366
|
"nl-BE": "Nederlands (BE)",
|
|
366
|
-
"fr-BE": "Français (BE)",
|
|
367
|
-
"fr-FR": "Français",
|
|
368
|
-
"de-DE": "Deutsch",
|
|
367
|
+
// "fr-BE": "Français (BE)",
|
|
368
|
+
// "fr-FR": "Français",
|
|
369
|
+
// "de-DE": "Deutsch",
|
|
369
370
|
};
|
|
370
371
|
return nativeLanguages[locale];
|
|
371
372
|
};
|
|
@@ -377,7 +378,19 @@ parsers.getLanguageCodeByLocale = getLanguageCodeByLocale;
|
|
|
377
378
|
var getCountryCodeByLocale = function (locale) {
|
|
378
379
|
return locale.split("-")[1];
|
|
379
380
|
};
|
|
380
|
-
getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
381
|
+
var getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
382
|
+
var getKeyboardLayoutByLocale = function (locale) {
|
|
383
|
+
var keyboardLayouts = {
|
|
384
|
+
"en-GB": "qwerty-uk",
|
|
385
|
+
"nl-NL": "qwerty-nl",
|
|
386
|
+
"nl-BE": "azerty-be",
|
|
387
|
+
// "fr-BE": "azerty",
|
|
388
|
+
// "fr-FR": "azerty",
|
|
389
|
+
// "de-DE": "qwerty",
|
|
390
|
+
};
|
|
391
|
+
return keyboardLayouts[locale];
|
|
392
|
+
};
|
|
393
|
+
parsers.getKeyboardLayoutByLocale = getKeyboardLayoutByLocale;
|
|
381
394
|
|
|
382
395
|
var flags = {
|
|
383
396
|
NL: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -388,7 +401,7 @@ var flags = {
|
|
|
388
401
|
};
|
|
389
402
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
390
403
|
|
|
391
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
404
|
+
var StyledHeading = styled.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) {
|
|
392
405
|
var type = _a.type;
|
|
393
406
|
return theme.heading[type].fontSize;
|
|
394
407
|
}, function (_a) {
|
|
@@ -412,14 +425,14 @@ var StyledHeading = styled.span(templateObject_1$C || (templateObject_1$C = __ma
|
|
|
412
425
|
var align = _a.align;
|
|
413
426
|
return align;
|
|
414
427
|
});
|
|
415
|
-
var templateObject_1$
|
|
428
|
+
var templateObject_1$F;
|
|
416
429
|
|
|
417
430
|
var Heading = function (props) {
|
|
418
431
|
var element = !!props.as ? props.as : props.type;
|
|
419
432
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
420
433
|
};
|
|
421
434
|
|
|
422
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
435
|
+
var Wrapper$8 = styled.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) {
|
|
423
436
|
var size = _a.size;
|
|
424
437
|
return theme.icon[size] || theme.icon.medium;
|
|
425
438
|
}, function (_a) {
|
|
@@ -449,7 +462,7 @@ var Wrapper$8 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTem
|
|
|
449
462
|
return theme.colors.lightGray.light;
|
|
450
463
|
}
|
|
451
464
|
});
|
|
452
|
-
var templateObject_1$
|
|
465
|
+
var templateObject_1$E;
|
|
453
466
|
|
|
454
467
|
var icons = {
|
|
455
468
|
check: (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)),
|
|
@@ -470,10 +483,11 @@ var icons = {
|
|
|
470
483
|
reload: (jsx("path", { d: "M20.6354 11.2888C20.4446 11.2757 20.253 11.2998 20.0716 11.3597C19.8903 11.4195 19.7226 11.514 19.5783 11.6377C19.434 11.7614 19.3158 11.9119 19.2306 12.0806C19.1453 12.2493 19.0947 12.4329 19.0815 12.6209C18.9739 14.1387 18.3662 15.5804 17.3506 16.7268C16.335 17.8732 14.9672 18.6615 13.4551 18.9718C11.943 19.2821 10.3695 19.0975 8.97365 18.446C7.57786 17.7945 6.43622 16.7118 5.72234 15.3626C5.00847 14.0133 4.76142 12.4713 5.01877 10.971C5.27612 9.47075 6.02378 8.09431 7.14805 7.05103C8.27233 6.00774 9.71171 5.35469 11.2473 5.19118C12.7829 5.02767 14.3307 5.36264 15.6553 6.14516L15.0687 6.1882C14.8324 6.20792 14.6055 6.28802 14.4104 6.42057C14.2152 6.55313 14.0585 6.73355 13.9558 6.94402C13.853 7.15449 13.8078 7.38773 13.8246 7.62068C13.8414 7.85363 13.9196 8.07824 14.0514 8.27231C14.1758 8.45551 14.3442 8.60561 14.5416 8.70929C14.739 8.81296 14.9594 8.867 15.1831 8.8666H15.2601L19.2729 8.58175C19.4513 8.56929 19.6255 8.52227 19.7855 8.44339C19.9455 8.36452 20.0881 8.25533 20.2052 8.12209C20.3223 7.98884 20.4116 7.83415 20.4679 7.66688C20.5242 7.4996 20.5465 7.32303 20.5335 7.14726L20.2527 3.20036C20.2154 2.85494 20.0436 2.53721 19.7735 2.31395C19.5033 2.0907 19.1558 1.9793 18.8041 2.00318C18.4523 2.02706 18.1236 2.18436 17.8871 2.44201C17.6506 2.69966 17.5247 3.0376 17.5359 3.38479L17.5754 3.9422C15.7452 2.7363 13.5624 2.1585 11.3651 2.29828C9.16781 2.43806 7.07861 3.28763 5.42104 4.71541C3.76347 6.1432 2.63001 8.06953 2.19621 10.1961C1.7624 12.3226 2.05246 14.5308 3.02144 16.4785C3.99043 18.4263 5.58428 20.0049 7.55618 20.9701C9.52807 21.9352 11.768 22.2329 13.929 21.8171C16.09 21.4013 18.0516 20.2953 19.51 18.6702C20.9683 17.0451 21.8421 14.9916 21.9959 12.8278C22.0103 12.6386 21.9865 12.4483 21.9257 12.2682C21.865 12.088 21.7685 11.9216 21.642 11.7784C21.5154 11.6353 21.3613 11.5183 21.1885 11.4342C21.0157 11.3502 20.8277 11.3008 20.6354 11.2888Z" }, void 0)),
|
|
471
484
|
expand: (jsx("path", { d: "M13.1519 2.65848C12.2656 2.65848 11.5471 3.37694 11.5471 4.26321C11.5471 5.14947 12.2656 5.86793 13.1519 5.86793L15.8968 5.86793L5.82737 15.9374L5.8678 13.1752C5.88077 12.2891 5.1729 11.5602 4.28672 11.5472C3.40055 11.5342 2.67166 12.2421 2.65869 13.1283L2.56131 19.7822C2.55612 20.1373 2.66667 20.4671 2.85807 20.7358C3.13154 21.2301 3.65827 21.5648 4.26318 21.5648L11.0715 21.5648C11.9577 21.5648 12.6762 20.8463 12.6762 19.9601C12.6762 19.0738 11.9577 18.3553 11.0715 18.3553L8.1374 18.3553L18.3988 8.09397L18.3555 11.048C18.3426 11.9342 19.0504 12.6631 19.9366 12.6761C20.8228 12.689 21.5517 11.9812 21.5646 11.095L21.662 4.44109C21.6672 4.08598 21.5567 3.75612 21.3653 3.48747C21.0918 2.99317 20.5651 2.65848 19.9602 2.65848L13.1519 2.65848Z" }, void 0)),
|
|
472
485
|
calendar: (jsx("path", { d: "M21 3h-2V2c0-1.1-.9-2-2-2s-2 .9-2 2v1H9V2c0-1.1-.9-2-2-2S5 .9 5 2v1H3C1.3 3 0 4.3 0 6v14c0 1.7 1.3 3 3 3h18c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3zM3 6h2v1c0 1.1.9 2 2 2s2-.9 2-2V6h6v1c0 1.1.9 2 2 2s2-.9 2-2V6h2v4H3V6zm0 14v-7h18v7H3z" }, void 0)),
|
|
486
|
+
menuAlt: (jsx("path", { d: "M1.5 3.4C.7 3.4 0 4.1 0 4.9s.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-21zM0 11.9c0-.8.7-1.5 1.5-1.5h21c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-21c-.8 0-1.5-.7-1.5-1.5zm0 7c0-.8.7-1.5 1.5-1.5h13c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-13c-.8 0-1.5-.7-1.5-1.5z" }, void 0)),
|
|
473
487
|
};
|
|
474
488
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
475
489
|
|
|
476
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
490
|
+
var Wrapper$7 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
477
491
|
var size = _a.size;
|
|
478
492
|
switch (size) {
|
|
479
493
|
default:
|
|
@@ -485,7 +499,7 @@ var Wrapper$7 = styled.div(templateObject_1$A || (templateObject_1$A = __makeTem
|
|
|
485
499
|
return "118px";
|
|
486
500
|
}
|
|
487
501
|
});
|
|
488
|
-
var templateObject_1$
|
|
502
|
+
var templateObject_1$D;
|
|
489
503
|
|
|
490
504
|
var illustrations = {
|
|
491
505
|
keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [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), 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), 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), 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), 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), 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)),
|
|
@@ -500,14 +514,14 @@ var illustrations = {
|
|
|
500
514
|
};
|
|
501
515
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
502
516
|
|
|
503
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
504
|
-
var
|
|
505
|
-
return !
|
|
517
|
+
var InputIconWrapper = styled.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) {
|
|
518
|
+
var isChanged = _a.isChanged;
|
|
519
|
+
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
506
520
|
}, function (_a) {
|
|
507
521
|
var disabled = _a.disabled;
|
|
508
522
|
return (disabled ? "not-allowed" : "pointer");
|
|
509
523
|
});
|
|
510
|
-
var StyledInput = styled.input(templateObject_2$
|
|
524
|
+
var StyledInput = styled.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) {
|
|
511
525
|
var disabled = _a.disabled;
|
|
512
526
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
513
527
|
}, function (_a) {
|
|
@@ -520,28 +534,23 @@ var StyledInput = styled.input(templateObject_2$n || (templateObject_2$n = __mak
|
|
|
520
534
|
var disabled = _a.disabled;
|
|
521
535
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
522
536
|
}, 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));
|
|
523
|
-
var templateObject_1$
|
|
537
|
+
var templateObject_1$C, templateObject_2$p;
|
|
524
538
|
|
|
525
539
|
var PasswordInput = function (props) {
|
|
526
540
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
527
|
-
var _b = useState(props.initialValue || ""), value = _b[0], setValue = _b[1];
|
|
528
541
|
var toggle = function () {
|
|
529
542
|
if (!props.disabled)
|
|
530
543
|
setIsVisible(!isVisible);
|
|
531
544
|
};
|
|
532
545
|
var onChange = function (e) {
|
|
533
|
-
if (!props.disabled)
|
|
534
|
-
|
|
535
|
-
setValue(value_1);
|
|
536
|
-
if (!!props.onChange)
|
|
537
|
-
props.onChange(value_1);
|
|
538
|
-
}
|
|
546
|
+
if (!props.disabled && !!props.onChange)
|
|
547
|
+
props.onChange(e.target.value);
|
|
539
548
|
};
|
|
540
549
|
var onKeyPress = function (e) {
|
|
541
550
|
if (props.onKeyPress)
|
|
542
551
|
props.onKeyPress(e);
|
|
543
552
|
};
|
|
544
|
-
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, {
|
|
553
|
+
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
|
|
545
554
|
};
|
|
546
555
|
|
|
547
556
|
function requiredArgs(required, args) {
|
|
@@ -663,8 +672,16 @@ function isBefore(dirtyDate, dirtyDateToCompare) {
|
|
|
663
672
|
}
|
|
664
673
|
|
|
665
674
|
var DateInput = function (props) {
|
|
675
|
+
var _a;
|
|
666
676
|
var inputRef = useRef(null);
|
|
667
|
-
var
|
|
677
|
+
var _b = useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
678
|
+
useEffect(function () {
|
|
679
|
+
var _a;
|
|
680
|
+
if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value))
|
|
681
|
+
setIsChanged(false);
|
|
682
|
+
else
|
|
683
|
+
setIsChanged(true);
|
|
684
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
668
685
|
var showPicker = function () {
|
|
669
686
|
if (!props.disabled) {
|
|
670
687
|
inputRef.current.showPicker();
|
|
@@ -676,39 +693,35 @@ var DateInput = function (props) {
|
|
|
676
693
|
};
|
|
677
694
|
var onChange = function (e) {
|
|
678
695
|
if (!props.disabled) {
|
|
679
|
-
|
|
680
|
-
setValue(value_1);
|
|
696
|
+
setIsChanged(true);
|
|
681
697
|
if (!!props.onChange)
|
|
682
|
-
props.onChange(
|
|
698
|
+
props.onChange(e.target.value);
|
|
683
699
|
}
|
|
684
700
|
};
|
|
685
701
|
var onBlur = function () {
|
|
686
|
-
if (
|
|
687
|
-
|
|
688
|
-
if (
|
|
689
|
-
|
|
702
|
+
if (props.onBlur)
|
|
703
|
+
props.onBlur();
|
|
704
|
+
if (isAfter(new Date(inputRef.current.value), new Date(props.max)))
|
|
705
|
+
inputRef.current.value = props.max;
|
|
706
|
+
if (isBefore(new Date(inputRef.current.value), new Date(props.min)))
|
|
707
|
+
inputRef.current.value = props.min;
|
|
690
708
|
};
|
|
691
|
-
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled,
|
|
709
|
+
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled, isChanged: isChanged }, { children: [jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsx(StyledInput, __assign({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
|
|
692
710
|
};
|
|
693
711
|
|
|
694
712
|
var Input = function (props) {
|
|
695
|
-
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
696
713
|
var onChange = function (e) {
|
|
697
|
-
if (!props.disabled)
|
|
698
|
-
|
|
699
|
-
setValue(value_1);
|
|
700
|
-
if (!!props.onChange)
|
|
701
|
-
props.onChange(value_1);
|
|
702
|
-
}
|
|
714
|
+
if (!props.disabled && !!props.onChange)
|
|
715
|
+
props.onChange(e.target.value);
|
|
703
716
|
};
|
|
704
|
-
return
|
|
717
|
+
return jsx(StyledInput, __assign({ type: "text" }, props, { onChange: onChange }), void 0);
|
|
705
718
|
};
|
|
706
719
|
Input.Password = PasswordInput;
|
|
707
720
|
Input.Date = DateInput;
|
|
708
721
|
|
|
709
722
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { children: [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), 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), 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), 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), 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), 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), jsx("defs", { children: jsx("clipPath", { children: jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
710
723
|
|
|
711
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
724
|
+
var Wrapper$6 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
712
725
|
var size = _a.size;
|
|
713
726
|
switch (size) {
|
|
714
727
|
default:
|
|
@@ -718,7 +731,7 @@ var Wrapper$6 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTem
|
|
|
718
731
|
return "116px";
|
|
719
732
|
}
|
|
720
733
|
});
|
|
721
|
-
var templateObject_1$
|
|
734
|
+
var templateObject_1$B;
|
|
722
735
|
|
|
723
736
|
var medals = {
|
|
724
737
|
small: {
|
|
@@ -734,11 +747,11 @@ var medals = {
|
|
|
734
747
|
};
|
|
735
748
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
736
749
|
|
|
737
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
750
|
+
var Wrapper$5 = styled.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) {
|
|
738
751
|
var disabled = _a.disabled;
|
|
739
752
|
return (disabled ? "49.5px" : "");
|
|
740
753
|
});
|
|
741
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
754
|
+
var StyledInputNumber = styled.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) {
|
|
742
755
|
var disabled = _a.disabled;
|
|
743
756
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
744
757
|
}, function (_a) {
|
|
@@ -751,49 +764,44 @@ var StyledInputNumber = styled.input(templateObject_2$m || (templateObject_2$m =
|
|
|
751
764
|
var disabled = _a.disabled;
|
|
752
765
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
753
766
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
754
|
-
var templateObject_1$
|
|
767
|
+
var templateObject_1$A, templateObject_2$o;
|
|
755
768
|
|
|
756
769
|
var Number = function (props) {
|
|
757
|
-
var
|
|
758
|
-
var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
770
|
+
var inputRef = useRef(null);
|
|
759
771
|
var onChange = function (e) {
|
|
760
|
-
if (!props.disabled)
|
|
761
|
-
|
|
762
|
-
setValue(value_1);
|
|
763
|
-
if (!!props.onChange)
|
|
764
|
-
props.onChange(e.target.value);
|
|
765
|
-
}
|
|
772
|
+
if (!props.disabled && !!props.onChange)
|
|
773
|
+
props.onChange(parseInt(e.target.value));
|
|
766
774
|
};
|
|
767
775
|
var decrease = function () {
|
|
768
|
-
var _a;
|
|
769
|
-
|
|
776
|
+
var _a, _b;
|
|
777
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
778
|
+
var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) - 1;
|
|
770
779
|
if (props.min && newValue < props.min) {
|
|
771
|
-
|
|
780
|
+
inputRef.current.value = "".concat(props.min);
|
|
772
781
|
}
|
|
773
782
|
else {
|
|
774
|
-
|
|
783
|
+
inputRef.current.value = "".concat(newValue);
|
|
775
784
|
if (!!props.onChange)
|
|
776
|
-
props.onChange(
|
|
777
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
785
|
+
props.onChange(newValue);
|
|
778
786
|
}
|
|
779
787
|
};
|
|
780
788
|
var increase = function () {
|
|
781
|
-
var _a;
|
|
782
|
-
|
|
789
|
+
var _a, _b;
|
|
790
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
791
|
+
var newValue = parseInt((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) + 1;
|
|
783
792
|
if (props.max && newValue > props.max) {
|
|
784
|
-
|
|
793
|
+
inputRef.current.value = "".concat(props.max);
|
|
785
794
|
}
|
|
786
795
|
else {
|
|
787
|
-
|
|
796
|
+
inputRef.current.value = "".concat(newValue);
|
|
788
797
|
if (!!props.onChange)
|
|
789
|
-
props.onChange(
|
|
790
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
798
|
+
props.onChange(newValue);
|
|
791
799
|
}
|
|
792
800
|
};
|
|
793
|
-
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, {
|
|
801
|
+
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
794
802
|
};
|
|
795
803
|
|
|
796
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
804
|
+
var StyledParagraph = styled.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) {
|
|
797
805
|
var size = _a.size;
|
|
798
806
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
799
807
|
}, function (_a) {
|
|
@@ -825,11 +833,11 @@ var StyledParagraph = styled.p(templateObject_1$w || (templateObject_1$w = __mak
|
|
|
825
833
|
var align = _a.align;
|
|
826
834
|
return align;
|
|
827
835
|
});
|
|
828
|
-
var templateObject_1$
|
|
836
|
+
var templateObject_1$z;
|
|
829
837
|
|
|
830
838
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
831
839
|
|
|
832
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
840
|
+
var StyledRadio = styled.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) {
|
|
833
841
|
var checked = _a.checked, disabled = _a.disabled;
|
|
834
842
|
if (disabled)
|
|
835
843
|
return theme.colors.lightGray.darker;
|
|
@@ -857,22 +865,25 @@ var StyledRadio = styled.div(templateObject_1$v || (templateObject_1$v = __makeT
|
|
|
857
865
|
return theme.colors.green.base;
|
|
858
866
|
return "";
|
|
859
867
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
860
|
-
var templateObject_1$
|
|
868
|
+
var templateObject_1$y;
|
|
861
869
|
|
|
862
870
|
var Radio = function (props) {
|
|
863
|
-
var _a;
|
|
871
|
+
var _a, _b;
|
|
864
872
|
var wrapperRef = useRef(null);
|
|
865
873
|
var inputRef = useRef(null);
|
|
866
|
-
var
|
|
874
|
+
var _c = useState((_a = props.checked) !== null && _a !== void 0 ? _a : props.defaultValue), checked = _c[0], setChecked = _c[1];
|
|
867
875
|
useEffect(function () {
|
|
868
876
|
if (props.autoFocus)
|
|
869
877
|
wrapperRef.current.focus();
|
|
870
|
-
if (props.
|
|
878
|
+
if (props.defaultValue)
|
|
871
879
|
inputRef.current.checked = true;
|
|
872
880
|
}, []);
|
|
873
881
|
useEffect(function () {
|
|
874
882
|
setChecked(inputRef.current.checked);
|
|
875
|
-
}, [(
|
|
883
|
+
}, [(_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.checked]);
|
|
884
|
+
useEffect(function () {
|
|
885
|
+
setChecked(props.checked);
|
|
886
|
+
}, [props.checked]);
|
|
876
887
|
var toggle = function () {
|
|
877
888
|
var _a;
|
|
878
889
|
if (!props.disabled) {
|
|
@@ -886,11 +897,11 @@ var Radio = function (props) {
|
|
|
886
897
|
return (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: jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
887
898
|
};
|
|
888
899
|
|
|
889
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
900
|
+
var Wrapper$4 = styled.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) {
|
|
890
901
|
var disabled = _a.disabled;
|
|
891
902
|
return (disabled ? "not-allowed" : "pointer");
|
|
892
903
|
});
|
|
893
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
904
|
+
var StyledSelect = styled.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) {
|
|
894
905
|
var disabled = _a.disabled;
|
|
895
906
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
896
907
|
}, function (_a) {
|
|
@@ -903,35 +914,40 @@ var StyledSelect = styled.select(templateObject_2$l || (templateObject_2$l = __m
|
|
|
903
914
|
var isChanged = _a.isChanged;
|
|
904
915
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
905
916
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
906
|
-
var templateObject_1$
|
|
917
|
+
var templateObject_1$x, templateObject_2$n;
|
|
907
918
|
|
|
908
919
|
var Select = function (props) {
|
|
909
|
-
var _a
|
|
920
|
+
var _a;
|
|
921
|
+
var inputRef = useRef(null);
|
|
910
922
|
var _b = useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
923
|
+
useEffect(function () {
|
|
924
|
+
var _a, _b;
|
|
925
|
+
if (!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) ||
|
|
926
|
+
((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.value) === props.placeholder)
|
|
927
|
+
setIsChanged(false);
|
|
928
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
911
929
|
var onChange = function (e) {
|
|
912
930
|
if (!props.disabled) {
|
|
913
|
-
var value_1 = e.target.value;
|
|
914
|
-
setValue(value_1);
|
|
915
931
|
setIsChanged(true);
|
|
916
932
|
if (!!props.onChange)
|
|
917
|
-
props.onChange(
|
|
933
|
+
props.onChange(e.target.value);
|
|
918
934
|
}
|
|
919
935
|
};
|
|
920
|
-
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, {
|
|
936
|
+
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
921
937
|
};
|
|
922
938
|
|
|
923
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
939
|
+
var StyledSpacer = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
924
940
|
var horizontal = _a.horizontal;
|
|
925
941
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
926
942
|
}, function (_a) {
|
|
927
943
|
var vertical = _a.vertical;
|
|
928
944
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
929
945
|
});
|
|
930
|
-
var templateObject_1$
|
|
946
|
+
var templateObject_1$w;
|
|
931
947
|
|
|
932
948
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
933
949
|
|
|
934
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
950
|
+
var StyledSubheading = styled.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) {
|
|
935
951
|
var size = _a.size;
|
|
936
952
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
937
953
|
}, function (_a) {
|
|
@@ -959,11 +975,11 @@ var StyledSubheading = styled.p(templateObject_1$s || (templateObject_1$s = __ma
|
|
|
959
975
|
return theme.colors.darkGray.dark;
|
|
960
976
|
}
|
|
961
977
|
});
|
|
962
|
-
var templateObject_1$
|
|
978
|
+
var templateObject_1$v;
|
|
963
979
|
|
|
964
980
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
965
981
|
|
|
966
|
-
var Container$
|
|
982
|
+
var Container$f = styled.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) {
|
|
967
983
|
var disabled = _a.disabled;
|
|
968
984
|
return (disabled ? "not-allowed" : "pointer");
|
|
969
985
|
}, function (_a) {
|
|
@@ -981,18 +997,18 @@ var Container$d = styled.div(templateObject_1$r || (templateObject_1$r = __makeT
|
|
|
981
997
|
var disabled = _a.disabled;
|
|
982
998
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
983
999
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
984
|
-
var templateObject_1$
|
|
1000
|
+
var templateObject_1$u;
|
|
985
1001
|
|
|
986
1002
|
var Toggle = function (props) {
|
|
987
1003
|
var _a;
|
|
988
1004
|
var containerRef = useRef(null);
|
|
989
1005
|
var inputRef = useRef(null);
|
|
990
|
-
var _b = useState(props.
|
|
1006
|
+
var _b = useState(props.defaultValue), checked = _b[0], setChecked = _b[1];
|
|
991
1007
|
useEffect(function () {
|
|
992
1008
|
var _a;
|
|
993
1009
|
if (props.autoFocus)
|
|
994
1010
|
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
995
|
-
if (props.
|
|
1011
|
+
if (props.defaultValue)
|
|
996
1012
|
inputRef.current.checked = true;
|
|
997
1013
|
}, []);
|
|
998
1014
|
useEffect(function () {
|
|
@@ -1009,10 +1025,10 @@ var Toggle = function (props) {
|
|
|
1009
1025
|
props.onChange(newValue);
|
|
1010
1026
|
}
|
|
1011
1027
|
};
|
|
1012
|
-
return (jsx(Container$
|
|
1028
|
+
return (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: jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
1013
1029
|
};
|
|
1014
1030
|
|
|
1015
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
1031
|
+
var Wrapper$3 = styled.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) {
|
|
1016
1032
|
var level = _a.level;
|
|
1017
1033
|
switch (level) {
|
|
1018
1034
|
case 1:
|
|
@@ -1023,7 +1039,7 @@ var Wrapper$3 = styled.div(templateObject_1$q || (templateObject_1$q = __makeTem
|
|
|
1023
1039
|
return "70px";
|
|
1024
1040
|
}
|
|
1025
1041
|
});
|
|
1026
|
-
var templateObject_1$
|
|
1042
|
+
var templateObject_1$t;
|
|
1027
1043
|
|
|
1028
1044
|
var trophies = {
|
|
1029
1045
|
1: {
|
|
@@ -1059,7 +1075,7 @@ var trophies = {
|
|
|
1059
1075
|
};
|
|
1060
1076
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
1061
1077
|
|
|
1062
|
-
var Container$
|
|
1078
|
+
var Container$e = styled.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) {
|
|
1063
1079
|
var type = _a.type;
|
|
1064
1080
|
switch (type) {
|
|
1065
1081
|
case "success":
|
|
@@ -1076,11 +1092,11 @@ var Container$c = styled.div(templateObject_1$p || (templateObject_1$p = __makeT
|
|
|
1076
1092
|
return theme.colors.red.base;
|
|
1077
1093
|
}
|
|
1078
1094
|
});
|
|
1079
|
-
var templateObject_1$
|
|
1095
|
+
var templateObject_1$s;
|
|
1080
1096
|
|
|
1081
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
1097
|
+
var Alert = function (props) { return (jsxs(Container$e, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
1082
1098
|
|
|
1083
|
-
var StyledCard = styled.div(templateObject_1$
|
|
1099
|
+
var StyledCard = styled.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) {
|
|
1084
1100
|
var ellipse = _a.ellipse;
|
|
1085
1101
|
return ellipse
|
|
1086
1102
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1089,26 +1105,26 @@ var StyledCard = styled.div(templateObject_1$o || (templateObject_1$o = __makeTe
|
|
|
1089
1105
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1090
1106
|
: "";
|
|
1091
1107
|
});
|
|
1092
|
-
var Ellipse = styled.div(templateObject_2$
|
|
1108
|
+
var Ellipse = styled.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) {
|
|
1093
1109
|
var color = _a.color;
|
|
1094
1110
|
return color ? theme.colors[color].light : "";
|
|
1095
1111
|
});
|
|
1096
|
-
var Content = styled.div(templateObject_3$
|
|
1097
|
-
var templateObject_1$
|
|
1112
|
+
var Content = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
1113
|
+
var templateObject_1$r, templateObject_2$m, templateObject_3$7;
|
|
1098
1114
|
|
|
1099
1115
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }, void 0), jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
1100
1116
|
|
|
1101
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
1102
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
1103
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
1104
|
-
var Label$
|
|
1117
|
+
var Fieldset$1 = styled.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"])));
|
|
1118
|
+
var CheckboxContainer = styled.div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1119
|
+
var CheckboxWrapper = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
1120
|
+
var Label$8 = styled(StyledParagraph)(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
1105
1121
|
var weight = _a.weight;
|
|
1106
1122
|
return weight || 500;
|
|
1107
1123
|
}, theme.colors.darkGray.base);
|
|
1108
|
-
var templateObject_1$
|
|
1124
|
+
var templateObject_1$q, templateObject_2$l, templateObject_3$6, templateObject_4$5;
|
|
1109
1125
|
|
|
1110
1126
|
var Checkboxes = function (props) {
|
|
1111
|
-
var _a = useState(props.
|
|
1127
|
+
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
1112
1128
|
var onChange = function (value) {
|
|
1113
1129
|
if (props.onChange) {
|
|
1114
1130
|
var newValues = values.includes(value)
|
|
@@ -1122,15 +1138,38 @@ var Checkboxes = function (props) {
|
|
|
1122
1138
|
if (props.onBlur)
|
|
1123
1139
|
props.onBlur(props.name);
|
|
1124
1140
|
};
|
|
1125
|
-
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$
|
|
1141
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$8, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1126
1142
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1127
|
-
return (jsxs(CheckboxWrapper, { children: [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), jsx(Label$
|
|
1143
|
+
return (jsxs(CheckboxWrapper, { children: [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), jsx(Label$8, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1128
1144
|
}) }, void 0)] }, void 0));
|
|
1129
1145
|
};
|
|
1130
1146
|
|
|
1131
|
-
var Container$
|
|
1132
|
-
var
|
|
1133
|
-
var
|
|
1147
|
+
var Container$d = styled.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);
|
|
1148
|
+
var Item = styled.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) {
|
|
1149
|
+
var isOpen = _a.isOpen;
|
|
1150
|
+
return (isOpen ? "" : "none");
|
|
1151
|
+
}, theme.colors.lightGray.darker);
|
|
1152
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1153
|
+
|
|
1154
|
+
var Collapse = function (props) {
|
|
1155
|
+
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
1156
|
+
var onClickItem = function (index, isOpen) {
|
|
1157
|
+
if (isOpen) {
|
|
1158
|
+
setOpenItems(function (prevState) { return prevState.filter(function (item) { return item !== index; }); });
|
|
1159
|
+
}
|
|
1160
|
+
else {
|
|
1161
|
+
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1162
|
+
}
|
|
1163
|
+
};
|
|
1164
|
+
return (jsx(Container$d, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1165
|
+
var isOpen = openItems.includes(index);
|
|
1166
|
+
return (jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h6" }, { children: item.title }), void 0), jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" }, void 0)] }, void 0), jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }), void 0)] }), "".concat(item.title, "-").concat(index)));
|
|
1167
|
+
}) }), void 0));
|
|
1168
|
+
};
|
|
1169
|
+
|
|
1170
|
+
var Container$c = styled.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"])));
|
|
1171
|
+
var Label$7 = styled(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);
|
|
1172
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1134
1173
|
|
|
1135
1174
|
var DateInputField = function (props) {
|
|
1136
1175
|
var onChange = function (value) {
|
|
@@ -1141,12 +1180,12 @@ var DateInputField = function (props) {
|
|
|
1141
1180
|
if (props.onBlur)
|
|
1142
1181
|
props.onBlur(props.name);
|
|
1143
1182
|
};
|
|
1144
|
-
return (jsxs(Container$
|
|
1183
|
+
return (jsxs(Container$c, { children: [jsx(Label$7, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1145
1184
|
};
|
|
1146
1185
|
|
|
1147
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
1148
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
1149
|
-
var templateObject_1$
|
|
1186
|
+
var StyledIconButton = styled(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"])));
|
|
1187
|
+
var GhostIconButton = styled(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"])));
|
|
1188
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1150
1189
|
|
|
1151
1190
|
var IconButton = function (props) {
|
|
1152
1191
|
if (props.color === "white")
|
|
@@ -1154,9 +1193,9 @@ var IconButton = function (props) {
|
|
|
1154
1193
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1155
1194
|
};
|
|
1156
1195
|
|
|
1157
|
-
var Container$
|
|
1158
|
-
var Label$
|
|
1159
|
-
var templateObject_1$
|
|
1196
|
+
var Container$b = styled.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"])));
|
|
1197
|
+
var Label$6 = styled(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);
|
|
1198
|
+
var templateObject_1$m, templateObject_2$h;
|
|
1160
1199
|
|
|
1161
1200
|
var InputField = function (props) {
|
|
1162
1201
|
var onChange = function (value) {
|
|
@@ -1167,18 +1206,18 @@ var InputField = function (props) {
|
|
|
1167
1206
|
if (props.onBlur)
|
|
1168
1207
|
props.onBlur(props.name);
|
|
1169
1208
|
};
|
|
1170
|
-
return (jsxs(Container$
|
|
1209
|
+
return (jsxs(Container$b, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0), props.tips && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
|
|
1171
1210
|
};
|
|
1172
1211
|
|
|
1173
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
1212
|
+
var Wrapper$2 = styled.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) {
|
|
1174
1213
|
var chevron = _a.chevron;
|
|
1175
1214
|
return (chevron === "left" ? "4px" : "");
|
|
1176
1215
|
}, function (_a) {
|
|
1177
1216
|
var chevron = _a.chevron;
|
|
1178
1217
|
return (chevron === "right" ? "4px" : "");
|
|
1179
1218
|
});
|
|
1180
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
1181
|
-
var templateObject_1$
|
|
1219
|
+
var StyledLink = styled(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);
|
|
1220
|
+
var templateObject_1$l, templateObject_2$g;
|
|
1182
1221
|
|
|
1183
1222
|
var Link = function (props) {
|
|
1184
1223
|
var onClick = function (e) {
|
|
@@ -1190,15 +1229,15 @@ var Link = function (props) {
|
|
|
1190
1229
|
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
1191
1230
|
};
|
|
1192
1231
|
|
|
1193
|
-
var Container$
|
|
1232
|
+
var Container$a = styled.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) {
|
|
1194
1233
|
var text = _a.text;
|
|
1195
1234
|
return (text ? "20px" : "");
|
|
1196
1235
|
});
|
|
1197
|
-
var templateObject_1$
|
|
1236
|
+
var templateObject_1$k;
|
|
1198
1237
|
|
|
1199
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1238
|
+
var Loading = function (props) { return (jsxs(Container$a, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1200
1239
|
|
|
1201
|
-
var Container$
|
|
1240
|
+
var Container$9 = styled.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) {
|
|
1202
1241
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1203
1242
|
if (dropdownIsVisible) {
|
|
1204
1243
|
switch (color) {
|
|
@@ -1211,8 +1250,8 @@ var Container$8 = styled.div(templateObject_1$h || (templateObject_1$h = __makeT
|
|
|
1211
1250
|
}
|
|
1212
1251
|
return "";
|
|
1213
1252
|
});
|
|
1214
|
-
var SelectedLocaleWrapper = styled.div(templateObject_2$
|
|
1215
|
-
var DropdownContainer = styled.div(templateObject_3$
|
|
1253
|
+
var SelectedLocaleWrapper = styled.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"])));
|
|
1254
|
+
var DropdownContainer = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
1216
1255
|
var color = _a.color;
|
|
1217
1256
|
switch (color) {
|
|
1218
1257
|
default:
|
|
@@ -1222,32 +1261,32 @@ var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = _
|
|
|
1222
1261
|
return theme.colors.lightGray.dark;
|
|
1223
1262
|
}
|
|
1224
1263
|
});
|
|
1225
|
-
var Locale = styled.div(templateObject_4$
|
|
1226
|
-
var templateObject_1$
|
|
1264
|
+
var Locale = styled.div(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
1265
|
+
var templateObject_1$j, templateObject_2$f, templateObject_3$5, templateObject_4$4;
|
|
1227
1266
|
|
|
1228
1267
|
var LocaleSelect = function (props) {
|
|
1229
1268
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
1230
|
-
var _b = useState(props.
|
|
1269
|
+
var _b = useState(props.defaultValue), locale = _b[0], setLocale = _b[1];
|
|
1231
1270
|
var onSelectLocale = function (locale) {
|
|
1232
1271
|
setLocale(locale);
|
|
1233
1272
|
props.onChange(locale);
|
|
1234
1273
|
};
|
|
1235
|
-
return (jsxs(Container$
|
|
1274
|
+
return (jsxs(Container$9, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedLocaleWrapper, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), dropdownIsVisible ? (jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" }, void 0)) : (jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }, void 0))] }, void 0), dropdownIsVisible && (jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1236
1275
|
.filter(function (l) { return l !== locale; })
|
|
1237
1276
|
.map(function (locale) { return (jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }), void 0)] }, void 0), jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" }, void 0)] }), locale)); }) }), void 0))] }), void 0));
|
|
1238
1277
|
};
|
|
1239
1278
|
|
|
1240
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
1241
|
-
var templateObject_1$
|
|
1279
|
+
var Wrapper$1 = styled.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"])));
|
|
1280
|
+
var templateObject_1$i;
|
|
1242
1281
|
|
|
1243
1282
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "silver" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "bronze" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
1244
1283
|
|
|
1245
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1284
|
+
var NotificationContainer = styled.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) {
|
|
1246
1285
|
var contrast = _a.contrast;
|
|
1247
1286
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1248
1287
|
});
|
|
1249
|
-
var ButtonContainer = styled.div(templateObject_2$
|
|
1250
|
-
var templateObject_1$
|
|
1288
|
+
var ButtonContainer = styled.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"])));
|
|
1289
|
+
var templateObject_1$h, templateObject_2$e;
|
|
1251
1290
|
|
|
1252
1291
|
var Notification = function (props) {
|
|
1253
1292
|
if (!props.isVisible)
|
|
@@ -1255,9 +1294,9 @@ var Notification = function (props) {
|
|
|
1255
1294
|
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.buttons && (jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }, void 0))] }), void 0));
|
|
1256
1295
|
};
|
|
1257
1296
|
|
|
1258
|
-
var Container$
|
|
1259
|
-
var Label$
|
|
1260
|
-
var templateObject_1$
|
|
1297
|
+
var Container$8 = styled.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"])));
|
|
1298
|
+
var Label$5 = styled(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);
|
|
1299
|
+
var templateObject_1$g, templateObject_2$d;
|
|
1261
1300
|
|
|
1262
1301
|
var NumberField = function (props) {
|
|
1263
1302
|
var onChange = function (value) {
|
|
@@ -1268,15 +1307,110 @@ var NumberField = function (props) {
|
|
|
1268
1307
|
if (props.onBlur)
|
|
1269
1308
|
props.onBlur(props.name);
|
|
1270
1309
|
};
|
|
1271
|
-
return (jsxs(Container$
|
|
1310
|
+
return (jsxs(Container$8, { children: [jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Number, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1272
1311
|
};
|
|
1273
1312
|
|
|
1274
|
-
var
|
|
1275
|
-
|
|
1276
|
-
|
|
1313
|
+
var expressions = {};
|
|
1314
|
+
|
|
1315
|
+
(function (exports) {
|
|
1316
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
1317
|
+
exports.isStrongPassword = exports.isValidUsername = exports.isValidEmail = exports.hasCapitalLetter = exports.hasSpecialCharacter = exports.hasNumber = void 0;
|
|
1318
|
+
var hasNumber = function (input) {
|
|
1319
|
+
var regex = new RegExp(/\d/g);
|
|
1320
|
+
return regex.test(input);
|
|
1321
|
+
};
|
|
1322
|
+
exports.hasNumber = hasNumber;
|
|
1323
|
+
var hasSpecialCharacter = function (input) {
|
|
1324
|
+
var regex = new RegExp(/`|~|!|"|-|_|@|#|\$|%|\^|&|\*|\(|\)|\+|=|\[|\{|\]|\}|\||\\|'|<|,|\.|>|\?|\/|""|;|:|\s/g);
|
|
1325
|
+
return regex.test(input);
|
|
1326
|
+
};
|
|
1327
|
+
exports.hasSpecialCharacter = hasSpecialCharacter;
|
|
1328
|
+
var hasCapitalLetter = function (input) {
|
|
1329
|
+
var regex = new RegExp(/[A-Z]/g);
|
|
1330
|
+
return regex.test(input);
|
|
1331
|
+
};
|
|
1332
|
+
exports.hasCapitalLetter = hasCapitalLetter;
|
|
1333
|
+
var isValidEmail = function (email) {
|
|
1334
|
+
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,}))$/);
|
|
1335
|
+
return regex.test(email);
|
|
1336
|
+
};
|
|
1337
|
+
exports.isValidEmail = isValidEmail;
|
|
1338
|
+
var isValidUsername = function (username) {
|
|
1339
|
+
if (username.length > 5 &&
|
|
1340
|
+
username.length <= 15 &&
|
|
1341
|
+
username.indexOf(" ") < 0 &&
|
|
1342
|
+
!(0, exports.isValidEmail)(username)) {
|
|
1343
|
+
return true;
|
|
1344
|
+
}
|
|
1345
|
+
else {
|
|
1346
|
+
return false;
|
|
1347
|
+
}
|
|
1348
|
+
};
|
|
1349
|
+
exports.isValidUsername = isValidUsername;
|
|
1350
|
+
var isStrongPassword = function (password) {
|
|
1351
|
+
return password.length >= 8 &&
|
|
1352
|
+
(0, exports.hasNumber)(password) &&
|
|
1353
|
+
(0, exports.hasSpecialCharacter)(password) &&
|
|
1354
|
+
(0, exports.hasCapitalLetter)(password)
|
|
1355
|
+
? true
|
|
1356
|
+
: false;
|
|
1357
|
+
};
|
|
1358
|
+
exports.isStrongPassword = isStrongPassword;
|
|
1359
|
+
}(expressions));
|
|
1360
|
+
|
|
1361
|
+
var Container$7 = styled.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"])));
|
|
1362
|
+
var Label$4 = styled(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);
|
|
1363
|
+
var HelperContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
1364
|
+
var fadeIn = keyframes(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
1365
|
+
var Helper = styled(StyledParagraph)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
1366
|
+
var isOk = _a.isOk;
|
|
1367
|
+
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1368
|
+
}, fadeIn);
|
|
1369
|
+
var templateObject_1$f, templateObject_2$c, templateObject_3$4, templateObject_4$3, templateObject_5$2;
|
|
1370
|
+
|
|
1371
|
+
var translations = {
|
|
1372
|
+
"nl-NL": {
|
|
1373
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
1374
|
+
number: "Minimaal 1 getal",
|
|
1375
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
1376
|
+
length: "Minimaal 8 karakters",
|
|
1377
|
+
},
|
|
1378
|
+
"nl-BE": {
|
|
1379
|
+
capitalLetter: "Minimaal 1 hoofdletter",
|
|
1380
|
+
number: "Minimaal 1 getal",
|
|
1381
|
+
specialCharacter: "Minimaal 1 leesteken",
|
|
1382
|
+
length: "Minimaal 8 karakters",
|
|
1383
|
+
},
|
|
1384
|
+
"en-GB": {
|
|
1385
|
+
capitalLetter: "At least 1 capital letter",
|
|
1386
|
+
number: "At least 1 number",
|
|
1387
|
+
specialCharacter: "At least 1 special character",
|
|
1388
|
+
length: "At least 8 characters",
|
|
1389
|
+
},
|
|
1390
|
+
// "fr-FR": {
|
|
1391
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1392
|
+
// number: "Au moins un chiffre",
|
|
1393
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1394
|
+
// length: "Au moins 8 caractères",
|
|
1395
|
+
// },
|
|
1396
|
+
// "fr-BE": {
|
|
1397
|
+
// capitalLetter: "Au moins une lettre majuscule",
|
|
1398
|
+
// number: "Au moins un chiffre",
|
|
1399
|
+
// specialCharacter: "Au moins un caractère spécial",
|
|
1400
|
+
// length: "Au moins 8 caractères",
|
|
1401
|
+
// },
|
|
1402
|
+
// "de-DE": {
|
|
1403
|
+
// capitalLetter: "Mindestens 1 Großbuchstabe",
|
|
1404
|
+
// number: "Mindestens 1 Zahl",
|
|
1405
|
+
// specialCharacter: "Mindestens 1 Sonderzeichen",
|
|
1406
|
+
// length: "Mindestens 8 Zeichen",
|
|
1407
|
+
// },
|
|
1408
|
+
};
|
|
1277
1409
|
|
|
1278
1410
|
var PasswordInputField = function (props) {
|
|
1411
|
+
var _a = useState(props.defaultValue || ""), value = _a[0], setValue = _a[1];
|
|
1279
1412
|
var onChange = function (value) {
|
|
1413
|
+
setValue(value);
|
|
1280
1414
|
if (props.onChange)
|
|
1281
1415
|
props.onChange(props.name, value);
|
|
1282
1416
|
};
|
|
@@ -1289,7 +1423,7 @@ var PasswordInputField = function (props) {
|
|
|
1289
1423
|
if (props.onBlur)
|
|
1290
1424
|
props.onBlur(props.name);
|
|
1291
1425
|
};
|
|
1292
|
-
return (jsxs(Container$
|
|
1426
|
+
return (jsxs(Container$7, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }, void 0), props.helper && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helper].capitalLetter] }), void 0), jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helper].number] }), void 0), jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helper].specialCharacter] }), void 0), jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helper].length] }), void 0)] }, void 0)) : null] }, void 0));
|
|
1293
1427
|
};
|
|
1294
1428
|
|
|
1295
1429
|
var generateRandomString = function (length) {
|
|
@@ -1302,7 +1436,7 @@ var generateRandomString = function (length) {
|
|
|
1302
1436
|
return string;
|
|
1303
1437
|
};
|
|
1304
1438
|
|
|
1305
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1439
|
+
var PopupContainer = styled.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) {
|
|
1306
1440
|
var isVisible = _a.isVisible;
|
|
1307
1441
|
return (isVisible ? "100%" : "0%");
|
|
1308
1442
|
}, function (_a) {
|
|
@@ -1315,7 +1449,7 @@ var PopupContainer = styled.div(templateObject_1$c || (templateObject_1$c = __ma
|
|
|
1315
1449
|
var contrast = _a.contrast;
|
|
1316
1450
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1317
1451
|
});
|
|
1318
|
-
var templateObject_1$
|
|
1452
|
+
var templateObject_1$e;
|
|
1319
1453
|
|
|
1320
1454
|
var Popup = function (props) {
|
|
1321
1455
|
var popupRef = useRef(null);
|
|
@@ -1351,8 +1485,8 @@ var Popup = function (props) {
|
|
|
1351
1485
|
return (jsxs(Fragment, { children: [children, jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
1352
1486
|
};
|
|
1353
1487
|
|
|
1354
|
-
var Wrapper = styled.div(templateObject_1$
|
|
1355
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1488
|
+
var Wrapper = styled.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"])));
|
|
1489
|
+
var StyledProgressBar = styled.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) {
|
|
1356
1490
|
var showInfo = _a.showInfo;
|
|
1357
1491
|
return (showInfo ? "10px" : "");
|
|
1358
1492
|
});
|
|
@@ -1363,12 +1497,12 @@ var Indicator = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTem
|
|
|
1363
1497
|
var color = _a.color;
|
|
1364
1498
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1365
1499
|
});
|
|
1366
|
-
var templateObject_1$
|
|
1500
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$3;
|
|
1367
1501
|
|
|
1368
1502
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
|
|
1369
1503
|
|
|
1370
|
-
var Container$
|
|
1371
|
-
var Step$1 = styled.li(templateObject_2$
|
|
1504
|
+
var Container$6 = styled.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"])));
|
|
1505
|
+
var Step$1 = styled.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) {
|
|
1372
1506
|
var status = _a.status;
|
|
1373
1507
|
return (!!status ? "pointer" : "not-allowed");
|
|
1374
1508
|
}, function (_a) {
|
|
@@ -1386,10 +1520,13 @@ var Step$1 = styled.li(templateObject_2$9 || (templateObject_2$9 = __makeTemplat
|
|
|
1386
1520
|
return status === "active"
|
|
1387
1521
|
? theme.colors.lightGray.light
|
|
1388
1522
|
: theme.colors.darkGray.light;
|
|
1389
|
-
}, theme.colors.darkGray.base,
|
|
1390
|
-
var
|
|
1523
|
+
}, theme.colors.darkGray.base, function (_a) {
|
|
1524
|
+
var hasTitle = _a.hasTitle;
|
|
1525
|
+
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1526
|
+
}, theme.colors.lightGray.dark);
|
|
1527
|
+
var templateObject_1$c, templateObject_2$a;
|
|
1391
1528
|
|
|
1392
|
-
var Steps$2 = function (props) { return (jsx(Container$
|
|
1529
|
+
var Steps$2 = function (props) { return (jsx(Container$6, { children: props.steps.map(function (_a, index) {
|
|
1393
1530
|
var title = _a.title, onClick = _a.onClick;
|
|
1394
1531
|
var step = index + 1;
|
|
1395
1532
|
var status = props.current > step
|
|
@@ -1401,11 +1538,11 @@ var Steps$2 = function (props) { return (jsx(Container$5, { children: props.step
|
|
|
1401
1538
|
if (onClick && props.current >= step)
|
|
1402
1539
|
onClick(step);
|
|
1403
1540
|
};
|
|
1404
|
-
return (jsxs(Step$1, __assign({ status: status }, { children: [jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1541
|
+
return (jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { children: [jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }), void 0), title && jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1405
1542
|
}) }, void 0)); };
|
|
1406
1543
|
|
|
1407
|
-
var Container$
|
|
1408
|
-
var Step = styled.li(templateObject_2$
|
|
1544
|
+
var Container$5 = styled.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"])));
|
|
1545
|
+
var Step = styled.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) {
|
|
1409
1546
|
var status = _a.status;
|
|
1410
1547
|
return (!!status ? "pointer" : "not-allowed");
|
|
1411
1548
|
}, function (_a) {
|
|
@@ -1424,9 +1561,9 @@ var Step = styled.li(templateObject_2$8 || (templateObject_2$8 = __makeTemplateO
|
|
|
1424
1561
|
? theme.colors.lightGray.light
|
|
1425
1562
|
: theme.colors.darkGray.light;
|
|
1426
1563
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1427
|
-
var templateObject_1$
|
|
1564
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1428
1565
|
|
|
1429
|
-
var Steps$1 = function (props) { return (jsx(Container$
|
|
1566
|
+
var Steps$1 = function (props) { return (jsx(Container$5, { children: props.steps.map(function (_a, index) {
|
|
1430
1567
|
var title = _a.title, onClick = _a.onClick;
|
|
1431
1568
|
var step = index + 1;
|
|
1432
1569
|
var status = props.current > step
|
|
@@ -1438,21 +1575,21 @@ var Steps$1 = function (props) { return (jsx(Container$4, { children: props.step
|
|
|
1438
1575
|
if (onClick && props.current >= step)
|
|
1439
1576
|
onClick(step);
|
|
1440
1577
|
};
|
|
1441
|
-
return (jsxs(Step, __assign({ status: status, onClick: onClickStep }, { children: [jsx("div", { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }, void 0), jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1578
|
+
return (jsxs(Step, __assign({ status: status, onClick: onClickStep }, { children: [jsx("div", { children: status === "passed" ? (jsx(Icon, { type: "check", size: "small", color: "white" }, void 0)) : (jsx(Heading, __assign({ type: "h6" }, { children: step }), void 0)) }, void 0), title && jsx(Paragraph, { children: title }, void 0)] }), "".concat(title, "-").concat(step)));
|
|
1442
1579
|
}) }, void 0)); };
|
|
1443
1580
|
|
|
1444
1581
|
var Steps = function (props) {
|
|
1445
1582
|
return props.alignment === "vertical" ? (jsx(Steps$1, __assign({}, props), void 0)) : (jsx(Steps$2, __assign({}, props), void 0));
|
|
1446
1583
|
};
|
|
1447
1584
|
|
|
1448
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
1449
|
-
var RadioContainer = styled.div(templateObject_2$
|
|
1585
|
+
var Fieldset = styled.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"])));
|
|
1586
|
+
var RadioContainer = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1450
1587
|
var RadioWrapper = styled.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"])));
|
|
1451
|
-
var Label$
|
|
1588
|
+
var Label$3 = styled(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) {
|
|
1452
1589
|
var weight = _a.weight;
|
|
1453
1590
|
return weight || 500;
|
|
1454
1591
|
}, theme.colors.darkGray.base);
|
|
1455
|
-
var templateObject_1$
|
|
1592
|
+
var templateObject_1$a, templateObject_2$8, templateObject_3$2, templateObject_4$2;
|
|
1456
1593
|
|
|
1457
1594
|
var RadioGroup = function (props) {
|
|
1458
1595
|
var onChange = function (value) {
|
|
@@ -1463,15 +1600,15 @@ var RadioGroup = function (props) {
|
|
|
1463
1600
|
if (props.onBlur)
|
|
1464
1601
|
props.onBlur(props.name);
|
|
1465
1602
|
};
|
|
1466
|
-
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$
|
|
1603
|
+
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$3, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1467
1604
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1468
|
-
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value,
|
|
1605
|
+
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$3, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, "".concat(value, "-").concat(index)));
|
|
1469
1606
|
}) }, void 0)] }, void 0));
|
|
1470
1607
|
};
|
|
1471
1608
|
|
|
1472
|
-
var Container$
|
|
1473
|
-
var Label$
|
|
1474
|
-
var templateObject_1$
|
|
1609
|
+
var Container$4 = styled.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"])));
|
|
1610
|
+
var Label$2 = styled(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);
|
|
1611
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1475
1612
|
|
|
1476
1613
|
var SelectField = function (props) {
|
|
1477
1614
|
var onChange = function (value) {
|
|
@@ -1482,15 +1619,15 @@ var SelectField = function (props) {
|
|
|
1482
1619
|
if (props.onBlur)
|
|
1483
1620
|
props.onBlur(props.name);
|
|
1484
1621
|
};
|
|
1485
|
-
return (jsxs(Container$
|
|
1622
|
+
return (jsxs(Container$4, { children: [jsx(Label$2, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
1486
1623
|
var value = _a.value, label = _a.label;
|
|
1487
1624
|
return (jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1488
1625
|
}) }), void 0)] }, void 0));
|
|
1489
1626
|
};
|
|
1490
1627
|
|
|
1491
|
-
var Container$
|
|
1492
|
-
var Label = styled(StyledParagraph)(templateObject_2$
|
|
1493
|
-
var templateObject_1$
|
|
1628
|
+
var Container$3 = styled.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"])));
|
|
1629
|
+
var Label$1 = styled(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);
|
|
1630
|
+
var templateObject_1$8, templateObject_2$6;
|
|
1494
1631
|
|
|
1495
1632
|
var ToggleField = function (props) {
|
|
1496
1633
|
var onChange = function (value) {
|
|
@@ -1501,10 +1638,10 @@ var ToggleField = function (props) {
|
|
|
1501
1638
|
if (props.onBlur)
|
|
1502
1639
|
props.onBlur(props.name);
|
|
1503
1640
|
};
|
|
1504
|
-
return (jsxs(Container$
|
|
1641
|
+
return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1505
1642
|
};
|
|
1506
1643
|
|
|
1507
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
1644
|
+
var TooltipContainer = styled.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) {
|
|
1508
1645
|
var isVisible = _a.isVisible;
|
|
1509
1646
|
return (isVisible ? "100%" : "0%");
|
|
1510
1647
|
}, function (_a) {
|
|
@@ -1514,7 +1651,7 @@ var TooltipContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __
|
|
|
1514
1651
|
var x = _a.x;
|
|
1515
1652
|
return (x ? "".concat(x, "px") : "");
|
|
1516
1653
|
});
|
|
1517
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
1654
|
+
var TooltipTitle = styled.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) {
|
|
1518
1655
|
var color = _a.color;
|
|
1519
1656
|
switch (color) {
|
|
1520
1657
|
default:
|
|
@@ -1524,7 +1661,7 @@ var TooltipTitle = styled.div(templateObject_2$4 || (templateObject_2$4 = __make
|
|
|
1524
1661
|
return theme.colors.lightGray.dark;
|
|
1525
1662
|
}
|
|
1526
1663
|
});
|
|
1527
|
-
var templateObject_1$
|
|
1664
|
+
var templateObject_1$7, templateObject_2$5;
|
|
1528
1665
|
|
|
1529
1666
|
var Tooltip = function (props) {
|
|
1530
1667
|
var tooltipRef = useRef(null);
|
|
@@ -1558,11 +1695,50 @@ var Tooltip = function (props) {
|
|
|
1558
1695
|
theme.colors.lightGray.light }, void 0) }), void 0), jsx(TooltipTitle, __assign({ color: props.color }, { children: jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0) }), void 0)] }), void 0)] }, void 0));
|
|
1559
1696
|
};
|
|
1560
1697
|
|
|
1698
|
+
var StyledTextarea = styled.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) {
|
|
1699
|
+
var disabled = _a.disabled;
|
|
1700
|
+
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1701
|
+
}, function (_a) {
|
|
1702
|
+
var disabled = _a.disabled;
|
|
1703
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
1704
|
+
}, function (_a) {
|
|
1705
|
+
var disabled = _a.disabled;
|
|
1706
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
1707
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
1708
|
+
var disabled = _a.disabled;
|
|
1709
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1710
|
+
}, 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));
|
|
1711
|
+
var templateObject_1$6;
|
|
1712
|
+
|
|
1713
|
+
var Textarea = function (props) {
|
|
1714
|
+
var onChange = function (e) {
|
|
1715
|
+
if (!props.disabled && !!props.onChange)
|
|
1716
|
+
props.onChange(e.target.value);
|
|
1717
|
+
};
|
|
1718
|
+
return jsx(StyledTextarea, __assign({}, props, { onChange: onChange }), void 0);
|
|
1719
|
+
};
|
|
1720
|
+
|
|
1721
|
+
var Container$2 = styled.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"])));
|
|
1722
|
+
var Label = styled(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);
|
|
1723
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1724
|
+
|
|
1725
|
+
var TextareaField = function (props) {
|
|
1726
|
+
var onChange = function (value) {
|
|
1727
|
+
if (props.onChange)
|
|
1728
|
+
props.onChange(props.name, value);
|
|
1729
|
+
};
|
|
1730
|
+
var onBlur = function () {
|
|
1731
|
+
if (props.onBlur)
|
|
1732
|
+
props.onBlur(props.name);
|
|
1733
|
+
};
|
|
1734
|
+
return (jsxs(Container$2, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(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 && (jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsx(Spacer, { vertical: 5 }, void 0), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] }), void 0))] }, void 0));
|
|
1735
|
+
};
|
|
1736
|
+
|
|
1561
1737
|
var FeedbackColors = {
|
|
1562
1738
|
success: theme.colors.green.base,
|
|
1563
1739
|
error: theme.colors.red.base,
|
|
1564
1740
|
};
|
|
1565
|
-
var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
|
|
1741
|
+
var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n input, select {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])), function (_a) {
|
|
1566
1742
|
var status = _a.status;
|
|
1567
1743
|
return FeedbackColors[status];
|
|
1568
1744
|
});
|
|
@@ -1590,17 +1766,103 @@ var FormWrapper = styled.form(templateObject_1$3 || (templateObject_1$3 = __make
|
|
|
1590
1766
|
var ButtonWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
1591
1767
|
var templateObject_1$3, templateObject_2$2;
|
|
1592
1768
|
|
|
1593
|
-
var Form = function (props) {
|
|
1769
|
+
var Form = forwardRef(function (props, ref) {
|
|
1594
1770
|
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
1595
1771
|
var _b = useState({}), feedback = _b[0], setFeedback = _b[1];
|
|
1772
|
+
useImperativeHandle(ref, function () { return ({
|
|
1773
|
+
resetForm: resetForm,
|
|
1774
|
+
}); });
|
|
1596
1775
|
useEffect(function () {
|
|
1597
|
-
|
|
1776
|
+
setDefaultValues();
|
|
1777
|
+
}, []);
|
|
1778
|
+
var setDefaultValues = function () {
|
|
1779
|
+
var defaultValues = {};
|
|
1598
1780
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1599
1781
|
var field = _a[_i];
|
|
1600
|
-
|
|
1782
|
+
defaultValues[field.name] = field.defaultValue;
|
|
1601
1783
|
}
|
|
1602
|
-
setValues(
|
|
1603
|
-
|
|
1784
|
+
setValues(defaultValues);
|
|
1785
|
+
setFeedback({});
|
|
1786
|
+
};
|
|
1787
|
+
var resetForm = function () {
|
|
1788
|
+
setDefaultValues();
|
|
1789
|
+
var _loop_1 = function (field) {
|
|
1790
|
+
switch (field.type) {
|
|
1791
|
+
case "text":
|
|
1792
|
+
case "password":
|
|
1793
|
+
case "date": {
|
|
1794
|
+
var element = document.getElementById(field.name);
|
|
1795
|
+
if (!field.defaultValue)
|
|
1796
|
+
element.value = "";
|
|
1797
|
+
else
|
|
1798
|
+
element.value = field.defaultValue;
|
|
1799
|
+
break;
|
|
1800
|
+
}
|
|
1801
|
+
case "textarea": {
|
|
1802
|
+
var element = document.getElementById(field.name);
|
|
1803
|
+
if (!field.defaultValue)
|
|
1804
|
+
element.value = "";
|
|
1805
|
+
else
|
|
1806
|
+
element.value = field.defaultValue;
|
|
1807
|
+
break;
|
|
1808
|
+
}
|
|
1809
|
+
case "toggle": {
|
|
1810
|
+
var element = document.getElementById(field.name);
|
|
1811
|
+
if (!field.defaultValue)
|
|
1812
|
+
element.checked = false;
|
|
1813
|
+
else
|
|
1814
|
+
element.checked = !!field.defaultValue;
|
|
1815
|
+
break;
|
|
1816
|
+
}
|
|
1817
|
+
case "number": {
|
|
1818
|
+
var element = document.getElementById(field.name);
|
|
1819
|
+
if (!field.defaultValue)
|
|
1820
|
+
element.value = "0";
|
|
1821
|
+
else
|
|
1822
|
+
element.value = "".concat(field.defaultValue);
|
|
1823
|
+
break;
|
|
1824
|
+
}
|
|
1825
|
+
case "select": {
|
|
1826
|
+
var element = document.getElementById(field.name);
|
|
1827
|
+
if (!field.defaultValue)
|
|
1828
|
+
element.selectedIndex = null;
|
|
1829
|
+
else {
|
|
1830
|
+
element.selectedIndex = Array.from(element.options).findIndex(function (_a) {
|
|
1831
|
+
var value = _a.value;
|
|
1832
|
+
return value === field.defaultValue;
|
|
1833
|
+
});
|
|
1834
|
+
}
|
|
1835
|
+
break;
|
|
1836
|
+
}
|
|
1837
|
+
case "radio": {
|
|
1838
|
+
for (var _b = 0, _c = field.items; _b < _c.length; _b++) {
|
|
1839
|
+
var option = _c[_b];
|
|
1840
|
+
var element = document.getElementById(option.id);
|
|
1841
|
+
if (!field.defaultValue)
|
|
1842
|
+
element.checked = false;
|
|
1843
|
+
else
|
|
1844
|
+
element.checked = element.value === field.defaultValue;
|
|
1845
|
+
}
|
|
1846
|
+
break;
|
|
1847
|
+
}
|
|
1848
|
+
case "checkbox": {
|
|
1849
|
+
for (var _d = 0, _e = field.items; _d < _e.length; _d++) {
|
|
1850
|
+
var option = _e[_d];
|
|
1851
|
+
var element = document.getElementById(option.id);
|
|
1852
|
+
if (!field.defaultValue)
|
|
1853
|
+
element.checked = false;
|
|
1854
|
+
else
|
|
1855
|
+
element.checked = field.defaultValue.includes(element.value);
|
|
1856
|
+
}
|
|
1857
|
+
break;
|
|
1858
|
+
}
|
|
1859
|
+
}
|
|
1860
|
+
};
|
|
1861
|
+
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1862
|
+
var field = _a[_i];
|
|
1863
|
+
_loop_1(field);
|
|
1864
|
+
}
|
|
1865
|
+
};
|
|
1604
1866
|
var onChangeFormField = function (fieldName, value) {
|
|
1605
1867
|
var _a, _b, _c;
|
|
1606
1868
|
var feedbackForField = { status: undefined, message: undefined };
|
|
@@ -1652,6 +1914,9 @@ var Form = function (props) {
|
|
|
1652
1914
|
case "date":
|
|
1653
1915
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1654
1916
|
jsx(DateInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1917
|
+
case "textarea":
|
|
1918
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1919
|
+
jsx(TextareaField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1655
1920
|
case "radio":
|
|
1656
1921
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1657
1922
|
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1669,7 +1934,7 @@ var Form = function (props) {
|
|
|
1669
1934
|
jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1670
1935
|
}
|
|
1671
1936
|
}) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1672
|
-
};
|
|
1937
|
+
});
|
|
1673
1938
|
|
|
1674
1939
|
var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: space-evenly;\n\n border-radius: 3px;\n border-color: ", ";\n\n background-color: ", ";\n box-sizing: border-box;\n border-width: ", ";\n border-style: solid;\n\n svg {\n fill: ", ";\n }\n\n h6 {\n color: ", ";\n font-size: 16px;\n line-height: 12px;\n }\n"])), function (_a) {
|
|
1675
1940
|
var color = _a.color, active = _a.active;
|
|
@@ -1721,12 +1986,10 @@ var Keyboard = function (props) {
|
|
|
1721
1986
|
right: [],
|
|
1722
1987
|
};
|
|
1723
1988
|
for (var _i = 0, _a = props.keys; _i < _a.length; _i++) {
|
|
1724
|
-
var
|
|
1725
|
-
var index = k.index, key = k.key, color = k.color, isShiftKey = k.isShiftKey;
|
|
1989
|
+
var _b = _a[_i], index = _b.index, key = _b.key, color = _b.color, hand = _b.hand, isShiftKey = _b.isShiftKey;
|
|
1726
1990
|
keys_1[index] = { character: key, color: color };
|
|
1727
|
-
if (isShiftKey)
|
|
1728
|
-
shiftKeys_1[
|
|
1729
|
-
}
|
|
1991
|
+
if (isShiftKey)
|
|
1992
|
+
shiftKeys_1[hand].push(key);
|
|
1730
1993
|
}
|
|
1731
1994
|
setKeys(keys_1);
|
|
1732
1995
|
setShiftKeys(shiftKeys_1);
|
|
@@ -1734,49 +1997,52 @@ var Keyboard = function (props) {
|
|
|
1734
1997
|
}, [props.keys]);
|
|
1735
1998
|
if (!keys)
|
|
1736
1999
|
return null;
|
|
1737
|
-
return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[
|
|
1738
|
-
keys[
|
|
1739
|
-
keys[
|
|
1740
|
-
keys[
|
|
1741
|
-
keys[
|
|
1742
|
-
keys[
|
|
1743
|
-
keys[
|
|
1744
|
-
keys[
|
|
1745
|
-
keys[
|
|
1746
|
-
keys[
|
|
1747
|
-
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[70].character === props.activeKey }, void 0), jsx(Key, { characters: [
|
|
2000
|
+
return (jsxs(Container, { children: [jsxs(SpecialRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[44].character, keys[89].character], color: keys[44].color, active: keys[44].character === props.activeKey ||
|
|
2001
|
+
keys[89].character === props.activeKey }, 44), jsx(Key, { characters: [keys[42].character, keys[87].character], color: keys[42].color, active: keys[42].character === props.activeKey ||
|
|
2002
|
+
keys[87].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[40].character, keys[85].character], color: keys[40].color, active: keys[40].character === props.activeKey ||
|
|
2003
|
+
keys[85].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[38].character, keys[83].character], color: keys[38].color, active: keys[38].character === props.activeKey ||
|
|
2004
|
+
keys[83].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[36].character, keys[81].character], color: keys[36].color, active: keys[36].character === props.activeKey ||
|
|
2005
|
+
keys[81].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[46].character, keys[91].character], color: keys[46].color, active: keys[46].character === props.activeKey ||
|
|
2006
|
+
keys[91].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[45].character, keys[90].character], color: keys[45].color, active: keys[45].character === props.activeKey ||
|
|
2007
|
+
keys[90].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[35].character, keys[80].character], color: keys[35].color, active: keys[35].character === props.activeKey ||
|
|
2008
|
+
keys[80].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[37].character, keys[82].character], color: keys[37].color, active: keys[37].character === props.activeKey ||
|
|
2009
|
+
keys[82].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[39].character, keys[84].character], color: keys[39].color, active: keys[39].character === props.activeKey ||
|
|
2010
|
+
keys[84].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[41].character, keys[86].character], color: keys[41].color, active: keys[41].character === props.activeKey ||
|
|
2011
|
+
keys[86].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[43].character, keys[88].character], color: keys[43].color, active: keys[43].character === props.activeKey ||
|
|
2012
|
+
keys[88].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(TopRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[65].character], color: keys[20].color, active: keys[20].character === props.activeKey ||
|
|
2013
|
+
keys[65].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[63].character], color: keys[18].color, active: keys[18].character === props.activeKey ||
|
|
2014
|
+
keys[63].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[61].character], color: keys[16].color, active: keys[16].character === props.activeKey ||
|
|
2015
|
+
keys[61].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[59].character], color: keys[14].color, active: keys[14].character === props.activeKey ||
|
|
2016
|
+
keys[59].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[69].character], color: keys[24].color, active: keys[24].character === props.activeKey ||
|
|
2017
|
+
keys[69].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[68].character], color: keys[23].color, active: keys[23].character === props.activeKey ||
|
|
2018
|
+
keys[68].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[58].character], color: keys[13].color, active: keys[13].character === props.activeKey ||
|
|
2019
|
+
keys[58].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[60].character], color: keys[15].color, active: keys[15].character === props.activeKey ||
|
|
2020
|
+
keys[60].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[62].character], color: keys[17].color, active: keys[17].character === props.activeKey ||
|
|
2021
|
+
keys[62].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[64].character], color: keys[19].color, active: keys[9].character === props.activeKey ||
|
|
2022
|
+
keys[64].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[22].character, keys[67].character], color: keys[22].color, active: keys[22].character === props.activeKey ||
|
|
2023
|
+
keys[67].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[21].character, keys[66].character], color: keys[21].color, active: keys[21].character === props.activeKey ||
|
|
2024
|
+
keys[66].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(StartRow, { children: [jsx(Key, {}, void 0), jsx(Key, { characters: [keys[54].character], color: keys[9].color, active: keys[9].character === props.activeKey ||
|
|
2025
|
+
keys[54].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[52].character], color: keys[7].color, active: keys[7].character === props.activeKey ||
|
|
2026
|
+
keys[52].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[50].character], color: keys[5].color, active: keys[5].character === props.activeKey ||
|
|
2027
|
+
keys[50].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[48].character], color: keys[3].color, active: keys[3].character === props.activeKey ||
|
|
2028
|
+
keys[48].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[57].character], color: keys[12].color, active: keys[12].character === props.activeKey ||
|
|
2029
|
+
keys[57].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[56].character], color: keys[11].color, active: keys[11].character === props.activeKey ||
|
|
2030
|
+
keys[56].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[47].character], color: keys[2].color, active: keys[2].character === props.activeKey ||
|
|
2031
|
+
keys[47].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[49].character], color: keys[4].color, active: keys[4].character === props.activeKey ||
|
|
2032
|
+
keys[49].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[51].character], color: keys[6].color, active: keys[6].character === props.activeKey ||
|
|
2033
|
+
keys[51].character === props.activeKey }, void 0), 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 ||
|
|
2034
|
+
keys[53].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[10].character, keys[55].character], color: keys[10].color, active: keys[10].character === props.activeKey ||
|
|
2035
|
+
keys[55].character === props.activeKey }, void 0), jsx(Key, {}, void 0)] }, void 0), jsxs(BottomRow, { children: [jsx(Key, { characters: ["Shift"], color: keys[32].color, active: shiftKeys.right.includes(props.activeKey) }, void 0), jsx(Key, { characters: [keys[77].character], color: keys[32].color, active: keys[32].character === props.activeKey ||
|
|
2036
|
+
keys[77].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[75].character], color: keys[30].color, active: keys[30].character === props.activeKey ||
|
|
2037
|
+
keys[75].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[73].character], color: keys[28].color, active: keys[28].character === props.activeKey ||
|
|
2038
|
+
keys[73].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[71].character], color: keys[26].color, active: keys[26].character === props.activeKey ||
|
|
2039
|
+
keys[71].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[79].character], color: keys[34].color, active: keys[34].character === props.activeKey ||
|
|
2040
|
+
keys[79].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[78].character], color: keys[33].color, active: keys[33].character === props.activeKey ||
|
|
2041
|
+
keys[78].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[70].character], color: keys[25].color, active: keys[25].character === props.activeKey ||
|
|
2042
|
+
keys[70].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[27].character, keys[72].character], color: keys[27].color, active: keys[27].character === props.activeKey ||
|
|
2043
|
+
keys[72].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[29].character, keys[74].character], color: keys[29].color, active: keys[29].character === props.activeKey ||
|
|
2044
|
+
keys[74].character === props.activeKey }, void 0), jsx(Key, { characters: [keys[31].character, keys[76].character], color: keys[31].color, active: keys[31].character === props.activeKey ||
|
|
2045
|
+
keys[76].character === props.activeKey }, void 0), jsx(Key, { characters: ["Shift"], color: keys[31].color, active: shiftKeys.left.includes(props.activeKey) }, void 0)] }, void 0), jsxs(SpacebarRow, { children: [jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, { color: keys[1].color, active: keys[1].character === props.activeKey }, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0), jsx(Key, {}, void 0)] }, void 0)] }, void 0));
|
|
1780
2046
|
};
|
|
1781
2047
|
|
|
1782
2048
|
var Mask = styled.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"])));
|
|
@@ -1802,5 +2068,5 @@ var Modal = function (props) {
|
|
|
1802
2068
|
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1803
2069
|
};
|
|
1804
2070
|
|
|
1805
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Steps, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
2071
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Collapse, DateInputField, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Steps, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1806
2072
|
//# sourceMappingURL=index.es.js.map
|