@typeolymp/ui-components 1.3.2 → 1.5.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/Icon/index.d.ts +1 -1
- package/build/components/atoms/Input/Date.d.ts +9 -0
- package/build/components/atoms/Input/index.d.ts +2 -0
- package/build/components/atoms/Input/stories.d.ts +1 -0
- package/build/components/atoms/Input/styles.d.ts +1 -1
- package/build/components/molecules/DateInputField/index.d.ts +13 -0
- package/build/components/molecules/DateInputField/styles.d.ts +2 -0
- package/build/components/molecules/LocaleSelect/index.d.ts +9 -0
- package/build/components/molecules/LocaleSelect/stories.d.ts +15 -0
- package/build/components/molecules/LocaleSelect/styles.d.ts +4 -0
- package/build/components/molecules/PasswordInputField/index.d.ts +1 -1
- package/build/components/molecules/TranslationSelect/index.d.ts +8 -0
- package/build/components/molecules/TranslationSelect/stories.d.ts +15 -0
- package/build/components/molecules/TranslationSelect/styles.d.ts +4 -0
- package/build/components/organisms/Form/index.d.ts +5 -1
- package/build/components/organisms/Form/stories.d.ts +1 -0
- package/build/index.d.ts +3 -1
- package/build/index.es.js +168 -74
- package/build/index.es.js.map +1 -1
- package/build/index.js +169 -73
- package/build/index.js.map +1 -1
- package/package.json +2 -2
package/build/index.es.js
CHANGED
|
@@ -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$D || (templateObject_1$D = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
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$B || (templateObject_1$B = __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$l || (templateObject_2$l = __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$7 || (templateObject_3$7 = __makeTemplateObject(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
|
|
246
246
|
var size = _a.size;
|
|
247
247
|
return !size
|
|
248
248
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -258,7 +258,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$6 || (templateObject_3$6
|
|
|
258
258
|
? theme.button.medium.marginTopActive
|
|
259
259
|
: theme.button[size].marginTopActive;
|
|
260
260
|
});
|
|
261
|
-
var templateObject_1$
|
|
261
|
+
var templateObject_1$D, templateObject_2$l, templateObject_3$7;
|
|
262
262
|
|
|
263
263
|
var Button = function (props) {
|
|
264
264
|
var onClick = function () {
|
|
@@ -275,7 +275,7 @@ var Button = function (props) {
|
|
|
275
275
|
return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
276
276
|
};
|
|
277
277
|
|
|
278
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
278
|
+
var StyledCheckbox = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
279
279
|
var checked = _a.checked, disabled = _a.disabled;
|
|
280
280
|
if (disabled)
|
|
281
281
|
return theme.colors.lightGray.darker;
|
|
@@ -296,7 +296,7 @@ var StyledCheckbox = styled.div(templateObject_1$A || (templateObject_1$A = __ma
|
|
|
296
296
|
return theme.colors.green.base;
|
|
297
297
|
return theme.colors.lightGray.darker;
|
|
298
298
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
299
|
-
var templateObject_1$
|
|
299
|
+
var templateObject_1$C;
|
|
300
300
|
|
|
301
301
|
var Checkbox = function (props) {
|
|
302
302
|
var _a;
|
|
@@ -329,7 +329,7 @@ var Checkbox = function (props) {
|
|
|
329
329
|
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
330
|
};
|
|
331
331
|
|
|
332
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
332
|
+
var Wrapper$9 = styled.div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
333
333
|
var size = _a.size;
|
|
334
334
|
switch (size) {
|
|
335
335
|
case "small":
|
|
@@ -352,16 +352,43 @@ var Wrapper$9 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTem
|
|
|
352
352
|
return "27px";
|
|
353
353
|
}
|
|
354
354
|
});
|
|
355
|
-
var templateObject_1$
|
|
355
|
+
var templateObject_1$B;
|
|
356
|
+
|
|
357
|
+
var parsers = {};
|
|
358
|
+
|
|
359
|
+
Object.defineProperty(parsers, "__esModule", { value: true });
|
|
360
|
+
var getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = parsers.getLanguageCodeByLocale = getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = void 0;
|
|
361
|
+
var getNativeLanguageByLocale = function (locale) {
|
|
362
|
+
var nativeLanguages = {
|
|
363
|
+
"en-GB": "English (UK)",
|
|
364
|
+
"nl-NL": "Nederlands",
|
|
365
|
+
"nl-BE": "Nederlands (BE)",
|
|
366
|
+
"fr-BE": "Français (BE)",
|
|
367
|
+
"fr-FR": "Français",
|
|
368
|
+
"de-DE": "Deutsch",
|
|
369
|
+
};
|
|
370
|
+
return nativeLanguages[locale];
|
|
371
|
+
};
|
|
372
|
+
var getNativeLanguageByLocale_1 = parsers.getNativeLanguageByLocale = getNativeLanguageByLocale;
|
|
373
|
+
var getLanguageCodeByLocale = function (locale) {
|
|
374
|
+
return locale.split("-")[0];
|
|
375
|
+
};
|
|
376
|
+
parsers.getLanguageCodeByLocale = getLanguageCodeByLocale;
|
|
377
|
+
var getCountryCodeByLocale = function (locale) {
|
|
378
|
+
return locale.split("-")[1];
|
|
379
|
+
};
|
|
380
|
+
getCountryCodeByLocale_1 = parsers.getCountryCodeByLocale = getCountryCodeByLocale;
|
|
356
381
|
|
|
357
382
|
var flags = {
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
383
|
+
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)),
|
|
384
|
+
BE: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#e62743" }, void 0), jsx("path", { fill: "#ffd800", d: "M7 0H15V18H7z" }, void 0), jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#23292f" }, void 0)] }), void 0)),
|
|
385
|
+
GB: (jsxs("svg", __assign({ viewBox: "0 0 24 24", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M24 3H0v18h24V3z", fill: "#1899D6" }, void 0), jsx("path", { d: "M24 3h-3.003l-6.252 4.683V3H9.238v4.875L2.63 3H0v2.434l4.74 3.514H0v6.236h4.702L0 18.722V21h3.11l6.128-4.606V21h5.507v-4.687L21.075 21H24v-2.253l-4.817-3.564H24V8.947h-4.793L24 5.347V3z", fill: "#fff" }, void 0), jsx("path", { d: "M7.726 8.947L0 3v1.57l5.772 4.378h1.954zM16.285 15.184L24 21v-1.46l-5.761-4.356h-1.954zM9.238 15.184H7.65L0 21h1.832l7.406-5.531v-.286zM14.745 8.947h1.48L24 3.146V3h-1.75l-7.505 5.58v.367z", fill: "#FF4B4B" }, void 0), jsx("path", { d: "M24 10.27H13.565V3h-3.147v7.27H0v3.59h10.418V21h3.147v-7.14H24v-3.59z", fill: "#FF4B4B" }, void 0)] }), void 0)),
|
|
386
|
+
FR: (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#148cc6" }, void 0), jsx("path", { fill: "#fff", d: "M7 0H15V18H7z" }, void 0), jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#e62743" }, void 0)] }), void 0)),
|
|
387
|
+
DE: (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: "#000" }, void 0), jsx("path", { fill: "#e62743", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#ffd800" }, void 0)] }), void 0)),
|
|
361
388
|
};
|
|
362
|
-
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
389
|
+
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }), void 0)); };
|
|
363
390
|
|
|
364
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
391
|
+
var StyledHeading = styled.span(templateObject_1$A || (templateObject_1$A = __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) {
|
|
365
392
|
var type = _a.type;
|
|
366
393
|
return theme.heading[type].fontSize;
|
|
367
394
|
}, function (_a) {
|
|
@@ -385,14 +412,14 @@ var StyledHeading = styled.span(templateObject_1$y || (templateObject_1$y = __ma
|
|
|
385
412
|
var align = _a.align;
|
|
386
413
|
return align;
|
|
387
414
|
});
|
|
388
|
-
var templateObject_1$
|
|
415
|
+
var templateObject_1$A;
|
|
389
416
|
|
|
390
417
|
var Heading = function (props) {
|
|
391
418
|
var element = !!props.as ? props.as : props.type;
|
|
392
419
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
393
420
|
};
|
|
394
421
|
|
|
395
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
422
|
+
var Wrapper$8 = styled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
396
423
|
var size = _a.size;
|
|
397
424
|
return theme.icon[size] || theme.icon.medium;
|
|
398
425
|
}, function (_a) {
|
|
@@ -422,7 +449,7 @@ var Wrapper$8 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTem
|
|
|
422
449
|
return theme.colors.lightGray.light;
|
|
423
450
|
}
|
|
424
451
|
});
|
|
425
|
-
var templateObject_1$
|
|
452
|
+
var templateObject_1$z;
|
|
426
453
|
|
|
427
454
|
var icons = {
|
|
428
455
|
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)),
|
|
@@ -442,10 +469,11 @@ var icons = {
|
|
|
442
469
|
setting: (jsx("path", { d: "M10.5145 2H13.4674C13.7167 2.00125 13.9575 2.09128 14.1467 2.25398C14.3364 2.41792 14.4643 2.642 14.509 2.88889L14.6811 3.94104C15.0485 4.06092 15.4059 4.20952 15.75 4.38548L16.6558 3.75963C16.8336 3.63488 17.0456 3.56835 17.2626 3.56916H17.3533C17.604 3.58716 17.8394 3.69692 18.0145 3.87755L20.1341 5.97277C20.3138 6.14482 20.4235 6.37749 20.442 6.62583C20.4621 6.87658 20.3949 7.12657 20.2518 7.3333L19.6268 8.24033C19.797 8.5843 19.9453 8.93877 20.0707 9.30156L21.1213 9.48294C21.3663 9.51899 21.5892 9.64511 21.7464 9.8367C21.9102 10.0289 22.0001 10.2733 22 10.526V13.492C22.0001 13.7447 21.9102 13.9891 21.7464 14.1813C21.6107 14.3456 21.4269 14.463 21.221 14.5169H21.1213L20.0707 14.6983C19.9453 15.0611 19.797 15.4156 19.6268 15.7596L20.2428 16.6666C20.3856 16.8706 20.4529 17.1181 20.433 17.3664C20.4132 17.6148 20.3075 17.8485 20.1341 18.0271L18.0326 20.1314C17.8575 20.312 17.6221 20.4218 17.3713 20.4398H17.2808C17.0637 20.4406 16.8517 20.3741 16.6739 20.2493L15.7681 19.6235C15.424 19.7994 15.0666 19.948 14.6993 20.0679L14.5272 21.1201C14.4824 21.367 14.3545 21.591 14.1648 21.755C13.9756 21.9165 13.7341 22.0036 13.4855 21.9999H10.4873C10.2389 22.002 9.99801 21.9151 9.80796 21.755C9.6439 21.6192 9.52665 21.4351 9.47282 21.2289V21.1291L9.30072 20.077C8.93397 19.9554 8.57672 19.8069 8.23188 19.6325L7.32609 20.2584C7.1483 20.3831 6.93631 20.4497 6.71922 20.4489H6.62861C6.37785 20.4309 6.1425 20.3211 5.96739 20.1405L3.86594 18.0362C3.69251 17.8575 3.58674 17.6239 3.5669 17.3755C3.54706 17.1272 3.61439 16.8796 3.75725 16.6756L4.37318 15.7686C4.20296 15.4246 4.05472 15.0702 3.92935 14.7074L2.8786 14.526C2.63444 14.4875 2.41244 14.3619 2.25359 14.1723C2.08979 13.9801 1.99989 13.7356 2 13.4829V10.517C1.99989 10.2643 2.08979 10.0198 2.25359 9.82762C2.38922 9.66333 2.57303 9.54593 2.77897 9.49202H2.8786L3.92935 9.31061C4.05472 8.94782 4.20296 8.59338 4.37318 8.24941L3.75725 7.34238C3.61439 7.13839 3.54706 6.89088 3.5669 6.64252C3.58674 6.39415 3.69251 6.1605 3.86594 5.98185L5.96739 3.87755C6.1425 3.69692 6.37785 3.58716 6.62861 3.56916H6.71922C6.93631 3.56835 7.1483 3.63488 7.32609 3.75963L8.23188 4.38548C8.57672 4.21112 8.93397 4.06257 9.30072 3.94104L9.47282 2.88889C9.51756 2.642 9.6454 2.41792 9.83511 2.25398C10.0243 2.09128 10.2651 2.00125 10.5145 2ZM12.5797 4.1043H11.4202L11.3297 4.08616L11.1938 4.90249C11.1599 5.10978 11.0653 5.30232 10.9221 5.45576C10.7796 5.60618 10.5974 5.7131 10.3968 5.76414C9.75859 5.91381 9.14747 6.16167 8.58516 6.49886C8.42145 6.59897 8.23347 6.65228 8.04165 6.65304C7.83358 6.64211 7.63273 6.57298 7.46192 6.45349L6.78258 5.96369L5.94926 6.80724L6.43837 7.47843C6.55492 7.65022 6.62086 7.85137 6.62861 8.05891C6.63703 8.2664 6.58343 8.47171 6.47464 8.6485C6.13986 9.19635 5.89233 9.79305 5.74094 10.4172C5.6974 10.6211 5.58938 10.8056 5.43295 10.9433C5.28314 11.0865 5.09381 11.1813 4.88949 11.2154L4.06519 11.3605V12.594L4.88949 12.7301C5.09167 12.7651 5.27995 12.8562 5.43295 12.9931C5.58565 13.1338 5.69291 13.317 5.74094 13.5192C5.89041 14.1582 6.13791 14.7702 6.47464 15.3333C6.58727 15.5059 6.64724 15.7076 6.64724 15.9137C6.64724 16.1199 6.58727 16.3216 6.47464 16.4942L5.98547 17.1745L6.81884 18.018L7.49819 17.5282C7.66574 17.409 7.86362 17.3398 8.06885 17.3287C8.26067 17.3295 8.4486 17.3828 8.6123 17.4829C9.17462 17.8201 9.78574 18.0679 10.4239 18.2176C10.6242 18.2695 10.8062 18.3763 10.9493 18.526C11.0881 18.6777 11.1794 18.867 11.2119 19.0702L11.3569 19.8956H12.5344L12.6703 19.0702C12.7063 18.8663 12.8008 18.6772 12.942 18.526C13.0852 18.3763 13.267 18.2695 13.4674 18.2176C14.1055 18.0679 14.7166 17.8201 15.279 17.4829C15.4427 17.3828 15.6306 17.3295 15.8225 17.3287C16.0305 17.3396 16.2313 17.4088 16.4021 17.5282L17.0815 18.009L17.9148 17.1745L17.4257 16.4942C17.3131 16.3216 17.2531 16.1199 17.2531 15.9137C17.2531 15.7076 17.3131 15.5059 17.4257 15.3333C17.7624 14.7702 18.0099 14.1582 18.1594 13.5192C18.2074 13.317 18.3147 13.1338 18.4674 12.9931C18.618 12.8527 18.8074 12.7611 19.0108 12.7301L19.8351 12.594V11.4058L19.0108 11.2698C18.8092 11.233 18.6214 11.142 18.4674 11.0067C18.3147 10.866 18.2074 10.6828 18.1594 10.4807C18.0099 9.84166 17.7624 9.2297 17.4257 8.66663C17.3169 8.48984 17.2633 8.28456 17.2717 8.07707C17.2768 7.87042 17.3466 7.67057 17.471 7.50564L17.9511 6.82537L17.1177 5.98185L16.4384 6.47162C16.2708 6.59082 16.073 6.66001 15.8677 6.67117C15.6759 6.67041 15.488 6.6171 15.3243 6.51699C14.762 6.1798 14.1508 5.93197 13.5127 5.7823C13.3138 5.72702 13.1327 5.62073 12.9873 5.47392C12.8485 5.32214 12.7571 5.13292 12.7246 4.9297L12.5797 4.1043ZM9.67144 8.44754C10.3629 7.98301 11.1764 7.73413 12.009 7.73234C13.1263 7.7324 14.1979 8.17597 14.9891 8.96588C15.7754 9.76053 16.2208 10.8313 16.2301 11.95C16.2301 12.7838 15.9832 13.5989 15.5208 14.2923C15.0584 14.9857 14.4011 15.5262 13.632 15.8457C12.8629 16.1652 12.0165 16.2493 11.1997 16.0873C10.3829 15.9253 9.63237 15.5245 9.04296 14.9355C8.45355 14.3466 8.0517 13.5959 7.88815 12.7784C7.72461 11.9608 7.80676 11.1131 8.12417 10.3422C8.44157 9.57141 8.97998 8.91207 9.67144 8.44754ZM10.6474 13.595C11.0315 13.9099 11.5126 14.0819 12.009 14.0815V14.1359C12.2958 14.1287 12.5782 14.0639 12.8396 13.9455C13.1009 13.8271 13.336 13.6575 13.5308 13.4466C13.8805 13.0939 14.0975 12.6307 14.1446 12.1359C14.1917 11.641 14.0661 11.1451 13.7892 10.7326C13.5122 10.3201 13.1011 10.0164 12.6257 9.87326C12.1503 9.73013 11.6401 9.7564 11.1818 9.94758C10.7236 10.1388 10.3457 10.4831 10.1125 10.9218C9.87927 11.3606 9.80507 11.8668 9.90259 12.3542C10.0001 12.8416 10.2633 13.2801 10.6474 13.595Z" }, void 0)),
|
|
443
470
|
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)),
|
|
444
471
|
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
|
+
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)),
|
|
445
473
|
};
|
|
446
|
-
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
474
|
+
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)); };
|
|
447
475
|
|
|
448
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
476
|
+
var Wrapper$7 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
449
477
|
var size = _a.size;
|
|
450
478
|
switch (size) {
|
|
451
479
|
default:
|
|
@@ -457,7 +485,7 @@ var Wrapper$7 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTem
|
|
|
457
485
|
return "118px";
|
|
458
486
|
}
|
|
459
487
|
});
|
|
460
|
-
var templateObject_1$
|
|
488
|
+
var templateObject_1$y;
|
|
461
489
|
|
|
462
490
|
var illustrations = {
|
|
463
491
|
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)),
|
|
@@ -472,11 +500,14 @@ var illustrations = {
|
|
|
472
500
|
};
|
|
473
501
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
474
502
|
|
|
475
|
-
var
|
|
503
|
+
var InputIconWrapper = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
504
|
+
var value = _a.value;
|
|
505
|
+
return !value ? theme.colors.lightGray.darker : "";
|
|
506
|
+
}, function (_a) {
|
|
476
507
|
var disabled = _a.disabled;
|
|
477
508
|
return (disabled ? "not-allowed" : "pointer");
|
|
478
509
|
});
|
|
479
|
-
var StyledInput = styled.input(templateObject_2$
|
|
510
|
+
var StyledInput = styled.input(templateObject_2$k || (templateObject_2$k = __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) {
|
|
480
511
|
var disabled = _a.disabled;
|
|
481
512
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
482
513
|
}, function (_a) {
|
|
@@ -489,7 +520,7 @@ var StyledInput = styled.input(templateObject_2$i || (templateObject_2$i = __mak
|
|
|
489
520
|
var disabled = _a.disabled;
|
|
490
521
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
491
522
|
}, 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));
|
|
492
|
-
var templateObject_1$
|
|
523
|
+
var templateObject_1$x, templateObject_2$k;
|
|
493
524
|
|
|
494
525
|
var PasswordInput = function (props) {
|
|
495
526
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -510,7 +541,30 @@ var PasswordInput = function (props) {
|
|
|
510
541
|
if (props.onKeyPress)
|
|
511
542
|
props.onKeyPress(e);
|
|
512
543
|
};
|
|
513
|
-
return (jsxs(
|
|
544
|
+
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
|
|
545
|
+
};
|
|
546
|
+
|
|
547
|
+
var DateInput = function (props) {
|
|
548
|
+
var inputRef = useRef(null);
|
|
549
|
+
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
550
|
+
var showPicker = function () {
|
|
551
|
+
if (!props.disabled) {
|
|
552
|
+
inputRef.current.showPicker();
|
|
553
|
+
}
|
|
554
|
+
};
|
|
555
|
+
var onKeyPress = function (e) {
|
|
556
|
+
if (e.key === "Enter")
|
|
557
|
+
showPicker();
|
|
558
|
+
};
|
|
559
|
+
var onChange = function (e) {
|
|
560
|
+
if (!props.disabled) {
|
|
561
|
+
var value_1 = e.target.value;
|
|
562
|
+
setValue(value_1);
|
|
563
|
+
if (!!props.onChange)
|
|
564
|
+
props.onChange(value_1);
|
|
565
|
+
}
|
|
566
|
+
};
|
|
567
|
+
return (jsxs(InputIconWrapper, __assign({ disabled: props.disabled, value: value }, { children: [jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsx(StyledInput, __assign({ type: "date" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
|
|
514
568
|
};
|
|
515
569
|
|
|
516
570
|
var Input = function (props) {
|
|
@@ -525,11 +579,12 @@ var Input = function (props) {
|
|
|
525
579
|
};
|
|
526
580
|
return (jsx(StyledInput, __assign({ type: "text" }, props, { value: value, onChange: onChange }), void 0));
|
|
527
581
|
};
|
|
528
|
-
Input.Password = PasswordInput;
|
|
582
|
+
Input.Password = PasswordInput;
|
|
583
|
+
Input.Date = DateInput;
|
|
529
584
|
|
|
530
585
|
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)); };
|
|
531
586
|
|
|
532
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
587
|
+
var Wrapper$6 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
533
588
|
var size = _a.size;
|
|
534
589
|
switch (size) {
|
|
535
590
|
default:
|
|
@@ -539,7 +594,7 @@ var Wrapper$6 = styled.div(templateObject_1$u || (templateObject_1$u = __makeTem
|
|
|
539
594
|
return "116px";
|
|
540
595
|
}
|
|
541
596
|
});
|
|
542
|
-
var templateObject_1$
|
|
597
|
+
var templateObject_1$w;
|
|
543
598
|
|
|
544
599
|
var medals = {
|
|
545
600
|
small: {
|
|
@@ -555,11 +610,11 @@ var medals = {
|
|
|
555
610
|
};
|
|
556
611
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
557
612
|
|
|
558
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
613
|
+
var Wrapper$5 = styled.div(templateObject_1$v || (templateObject_1$v = __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) {
|
|
559
614
|
var disabled = _a.disabled;
|
|
560
615
|
return (disabled ? "49.5px" : "");
|
|
561
616
|
});
|
|
562
|
-
var StyledInputNumber = styled.input(templateObject_2$
|
|
617
|
+
var StyledInputNumber = styled.input(templateObject_2$j || (templateObject_2$j = __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\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\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) {
|
|
563
618
|
var disabled = _a.disabled;
|
|
564
619
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
565
620
|
}, function (_a) {
|
|
@@ -572,7 +627,7 @@ var StyledInputNumber = styled.input(templateObject_2$h || (templateObject_2$h =
|
|
|
572
627
|
var disabled = _a.disabled;
|
|
573
628
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
574
629
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
575
|
-
var templateObject_1$
|
|
630
|
+
var templateObject_1$v, templateObject_2$j;
|
|
576
631
|
|
|
577
632
|
var Number = function (props) {
|
|
578
633
|
var ref = useRef(null);
|
|
@@ -614,7 +669,7 @@ var Number = function (props) {
|
|
|
614
669
|
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
615
670
|
};
|
|
616
671
|
|
|
617
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
672
|
+
var StyledParagraph = styled.p(templateObject_1$u || (templateObject_1$u = __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) {
|
|
618
673
|
var size = _a.size;
|
|
619
674
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
620
675
|
}, function (_a) {
|
|
@@ -646,11 +701,11 @@ var StyledParagraph = styled.p(templateObject_1$s || (templateObject_1$s = __mak
|
|
|
646
701
|
var align = _a.align;
|
|
647
702
|
return align;
|
|
648
703
|
});
|
|
649
|
-
var templateObject_1$
|
|
704
|
+
var templateObject_1$u;
|
|
650
705
|
|
|
651
706
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
652
707
|
|
|
653
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
708
|
+
var StyledRadio = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
654
709
|
var checked = _a.checked, disabled = _a.disabled;
|
|
655
710
|
if (disabled)
|
|
656
711
|
return theme.colors.lightGray.darker;
|
|
@@ -678,7 +733,7 @@ var StyledRadio = styled.div(templateObject_1$r || (templateObject_1$r = __makeT
|
|
|
678
733
|
return theme.colors.green.base;
|
|
679
734
|
return "";
|
|
680
735
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
681
|
-
var templateObject_1$
|
|
736
|
+
var templateObject_1$t;
|
|
682
737
|
|
|
683
738
|
var Radio = function (props) {
|
|
684
739
|
var _a;
|
|
@@ -707,11 +762,11 @@ var Radio = function (props) {
|
|
|
707
762
|
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));
|
|
708
763
|
};
|
|
709
764
|
|
|
710
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
765
|
+
var Wrapper$4 = styled.div(templateObject_1$s || (templateObject_1$s = __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) {
|
|
711
766
|
var disabled = _a.disabled;
|
|
712
767
|
return (disabled ? "not-allowed" : "pointer");
|
|
713
768
|
});
|
|
714
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
769
|
+
var StyledSelect = styled.select(templateObject_2$i || (templateObject_2$i = __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) {
|
|
715
770
|
var disabled = _a.disabled;
|
|
716
771
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
717
772
|
}, function (_a) {
|
|
@@ -724,7 +779,7 @@ var StyledSelect = styled.select(templateObject_2$g || (templateObject_2$g = __m
|
|
|
724
779
|
var isChanged = _a.isChanged;
|
|
725
780
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
726
781
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
727
|
-
var templateObject_1$
|
|
782
|
+
var templateObject_1$s, templateObject_2$i;
|
|
728
783
|
|
|
729
784
|
var Select = function (props) {
|
|
730
785
|
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -741,18 +796,18 @@ var Select = function (props) {
|
|
|
741
796
|
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
742
797
|
};
|
|
743
798
|
|
|
744
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
799
|
+
var StyledSpacer = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
745
800
|
var horizontal = _a.horizontal;
|
|
746
801
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
747
802
|
}, function (_a) {
|
|
748
803
|
var vertical = _a.vertical;
|
|
749
804
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
750
805
|
});
|
|
751
|
-
var templateObject_1$
|
|
806
|
+
var templateObject_1$r;
|
|
752
807
|
|
|
753
808
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
754
809
|
|
|
755
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
810
|
+
var StyledSubheading = styled.p(templateObject_1$q || (templateObject_1$q = __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) {
|
|
756
811
|
var size = _a.size;
|
|
757
812
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
758
813
|
}, function (_a) {
|
|
@@ -780,11 +835,11 @@ var StyledSubheading = styled.p(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
780
835
|
return theme.colors.darkGray.dark;
|
|
781
836
|
}
|
|
782
837
|
});
|
|
783
|
-
var templateObject_1$
|
|
838
|
+
var templateObject_1$q;
|
|
784
839
|
|
|
785
840
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
786
841
|
|
|
787
|
-
var Container$
|
|
842
|
+
var Container$b = styled.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
788
843
|
var disabled = _a.disabled;
|
|
789
844
|
return (disabled ? "not-allowed" : "pointer");
|
|
790
845
|
}, function (_a) {
|
|
@@ -802,7 +857,7 @@ var Container$9 = styled.div(templateObject_1$n || (templateObject_1$n = __makeT
|
|
|
802
857
|
var disabled = _a.disabled;
|
|
803
858
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
804
859
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
805
|
-
var templateObject_1$
|
|
860
|
+
var templateObject_1$p;
|
|
806
861
|
|
|
807
862
|
var Toggle = function (props) {
|
|
808
863
|
var _a;
|
|
@@ -830,10 +885,10 @@ var Toggle = function (props) {
|
|
|
830
885
|
props.onChange(newValue);
|
|
831
886
|
}
|
|
832
887
|
};
|
|
833
|
-
return (jsx(Container$
|
|
888
|
+
return (jsx(Container$b, __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));
|
|
834
889
|
};
|
|
835
890
|
|
|
836
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
891
|
+
var Wrapper$3 = styled.div(templateObject_1$o || (templateObject_1$o = __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) {
|
|
837
892
|
var level = _a.level;
|
|
838
893
|
switch (level) {
|
|
839
894
|
case 1:
|
|
@@ -844,7 +899,7 @@ var Wrapper$3 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTem
|
|
|
844
899
|
return "70px";
|
|
845
900
|
}
|
|
846
901
|
});
|
|
847
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$o;
|
|
848
903
|
|
|
849
904
|
var trophies = {
|
|
850
905
|
1: {
|
|
@@ -880,7 +935,7 @@ var trophies = {
|
|
|
880
935
|
};
|
|
881
936
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
882
937
|
|
|
883
|
-
var Container$
|
|
938
|
+
var Container$a = styled.div(templateObject_1$n || (templateObject_1$n = __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) {
|
|
884
939
|
var type = _a.type;
|
|
885
940
|
switch (type) {
|
|
886
941
|
case "success":
|
|
@@ -897,11 +952,11 @@ var Container$8 = styled.div(templateObject_1$l || (templateObject_1$l = __makeT
|
|
|
897
952
|
return theme.colors.red.base;
|
|
898
953
|
}
|
|
899
954
|
});
|
|
900
|
-
var templateObject_1$
|
|
955
|
+
var templateObject_1$n;
|
|
901
956
|
|
|
902
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
957
|
+
var Alert = function (props) { return (jsxs(Container$a, __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)); };
|
|
903
958
|
|
|
904
|
-
var StyledCard = styled.div(templateObject_1$
|
|
959
|
+
var StyledCard = styled.div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
905
960
|
var ellipse = _a.ellipse;
|
|
906
961
|
return ellipse
|
|
907
962
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -910,23 +965,23 @@ var StyledCard = styled.div(templateObject_1$k || (templateObject_1$k = __makeTe
|
|
|
910
965
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
911
966
|
: "";
|
|
912
967
|
});
|
|
913
|
-
var Ellipse = styled.div(templateObject_2$
|
|
968
|
+
var Ellipse = styled.div(templateObject_2$h || (templateObject_2$h = __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) {
|
|
914
969
|
var color = _a.color;
|
|
915
970
|
return color ? theme.colors[color].light : "";
|
|
916
971
|
});
|
|
917
|
-
var Content = styled.div(templateObject_3$
|
|
918
|
-
var templateObject_1$
|
|
972
|
+
var Content = styled.div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
973
|
+
var templateObject_1$m, templateObject_2$h, templateObject_3$6;
|
|
919
974
|
|
|
920
975
|
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)); };
|
|
921
976
|
|
|
922
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
923
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
924
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
925
|
-
var Label$
|
|
977
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
978
|
+
var CheckboxContainer = styled.div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
979
|
+
var CheckboxWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
980
|
+
var Label$7 = styled(StyledParagraph)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
926
981
|
var weight = _a.weight;
|
|
927
982
|
return weight || 500;
|
|
928
983
|
}, theme.colors.darkGray.base);
|
|
929
|
-
var templateObject_1$
|
|
984
|
+
var templateObject_1$l, templateObject_2$g, templateObject_3$5, templateObject_4$4;
|
|
930
985
|
|
|
931
986
|
var Checkboxes = function (props) {
|
|
932
987
|
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -943,15 +998,31 @@ var Checkboxes = function (props) {
|
|
|
943
998
|
if (props.onBlur)
|
|
944
999
|
props.onBlur(props.name);
|
|
945
1000
|
};
|
|
946
|
-
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$
|
|
1001
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$7, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
947
1002
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
948
|
-
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$
|
|
1003
|
+
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$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
949
1004
|
}) }, void 0)] }, void 0));
|
|
950
1005
|
};
|
|
951
1006
|
|
|
952
|
-
var
|
|
953
|
-
var
|
|
954
|
-
var templateObject_1$
|
|
1007
|
+
var Container$9 = styled.div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
1008
|
+
var Label$6 = styled(StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1009
|
+
var templateObject_1$k, templateObject_2$f;
|
|
1010
|
+
|
|
1011
|
+
var DateInputField = function (props) {
|
|
1012
|
+
var onChange = function (value) {
|
|
1013
|
+
if (props.onChange)
|
|
1014
|
+
props.onChange(props.name, value);
|
|
1015
|
+
};
|
|
1016
|
+
var onBlur = function () {
|
|
1017
|
+
if (props.onBlur)
|
|
1018
|
+
props.onBlur(props.name);
|
|
1019
|
+
};
|
|
1020
|
+
return (jsxs(Container$9, { children: [jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Input.Date, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1021
|
+
};
|
|
1022
|
+
|
|
1023
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
1024
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
1025
|
+
var templateObject_1$j, templateObject_2$e;
|
|
955
1026
|
|
|
956
1027
|
var IconButton = function (props) {
|
|
957
1028
|
if (props.color === "white")
|
|
@@ -959,9 +1030,9 @@ var IconButton = function (props) {
|
|
|
959
1030
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
960
1031
|
};
|
|
961
1032
|
|
|
962
|
-
var Container$
|
|
963
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
964
|
-
var templateObject_1$
|
|
1033
|
+
var Container$8 = styled.div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
1034
|
+
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);
|
|
1035
|
+
var templateObject_1$i, templateObject_2$d;
|
|
965
1036
|
|
|
966
1037
|
var InputField = function (props) {
|
|
967
1038
|
var onChange = function (value) {
|
|
@@ -972,18 +1043,18 @@ var InputField = function (props) {
|
|
|
972
1043
|
if (props.onBlur)
|
|
973
1044
|
props.onBlur(props.name);
|
|
974
1045
|
};
|
|
975
|
-
return (jsxs(Container$
|
|
1046
|
+
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(Input, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
976
1047
|
};
|
|
977
1048
|
|
|
978
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
1049
|
+
var Wrapper$2 = styled.a(templateObject_1$h || (templateObject_1$h = __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) {
|
|
979
1050
|
var chevron = _a.chevron;
|
|
980
1051
|
return (chevron === "left" ? "4px" : "");
|
|
981
1052
|
}, function (_a) {
|
|
982
1053
|
var chevron = _a.chevron;
|
|
983
1054
|
return (chevron === "right" ? "4px" : "");
|
|
984
1055
|
});
|
|
985
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
986
|
-
var templateObject_1$
|
|
1056
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$c || (templateObject_2$c = __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);
|
|
1057
|
+
var templateObject_1$h, templateObject_2$c;
|
|
987
1058
|
|
|
988
1059
|
var Link = function (props) {
|
|
989
1060
|
var onClick = function (e) {
|
|
@@ -995,13 +1066,34 @@ var Link = function (props) {
|
|
|
995
1066
|
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));
|
|
996
1067
|
};
|
|
997
1068
|
|
|
998
|
-
var Container$
|
|
1069
|
+
var Container$7 = styled.div(templateObject_1$g || (templateObject_1$g = __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) {
|
|
999
1070
|
var text = _a.text;
|
|
1000
1071
|
return (text ? "20px" : "");
|
|
1001
1072
|
});
|
|
1002
|
-
var templateObject_1$
|
|
1073
|
+
var templateObject_1$g;
|
|
1003
1074
|
|
|
1004
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1075
|
+
var Loading = function (props) { return (jsxs(Container$7, __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)); };
|
|
1076
|
+
|
|
1077
|
+
var Container$6 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n z-index: 3;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n z-index: 3;\n"])), function (_a) {
|
|
1078
|
+
var dropdownIsVisible = _a.dropdownIsVisible;
|
|
1079
|
+
return dropdownIsVisible ? theme.colors.lightGray.light : "";
|
|
1080
|
+
});
|
|
1081
|
+
var SelectedTranslationWrapper = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
1082
|
+
var DropdownContainer = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n width: calc(100% + 20px);\n background-color: ", ";\n border-radius: 6px 0 6px 6px;\n overflow: hidden;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 100%;\n right: 0;\n"], ["\n width: calc(100% + 20px);\n background-color: ", ";\n border-radius: 6px 0 6px 6px;\n overflow: hidden;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 100%;\n right: 0;\n"])), theme.colors.lightGray.light);
|
|
1083
|
+
var Locale = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n }\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 }\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);
|
|
1084
|
+
var templateObject_1$f, templateObject_2$b, templateObject_3$4, templateObject_4$3;
|
|
1085
|
+
|
|
1086
|
+
var LocaleSelect = function (props) {
|
|
1087
|
+
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
1088
|
+
var _b = useState(props.initialValue), locale = _b[0], setLocale = _b[1];
|
|
1089
|
+
var onSelectLocale = function (locale) {
|
|
1090
|
+
setLocale(locale);
|
|
1091
|
+
props.onChange(locale);
|
|
1092
|
+
};
|
|
1093
|
+
return (jsxs(Container$6, __assign({ dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxs(SelectedTranslationWrapper, { children: [jsx(Flag, { locale: locale }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }), void 0), jsx(Spacer, { horizontal: 10 }, 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, { children: props.locales
|
|
1094
|
+
.filter(function (l) { return l !== locale; })
|
|
1095
|
+
.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));
|
|
1096
|
+
};
|
|
1005
1097
|
|
|
1006
1098
|
var Wrapper$1 = styled.div(templateObject_1$e || (templateObject_1$e = __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"])));
|
|
1007
1099
|
var templateObject_1$e;
|
|
@@ -1310,7 +1402,6 @@ var Form = function (props) {
|
|
|
1310
1402
|
}
|
|
1311
1403
|
};
|
|
1312
1404
|
var onSubmit = function () {
|
|
1313
|
-
console.log("submit");
|
|
1314
1405
|
var isValid = true;
|
|
1315
1406
|
var feedback = {};
|
|
1316
1407
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1337,6 +1428,9 @@ var Form = function (props) {
|
|
|
1337
1428
|
case "password":
|
|
1338
1429
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1339
1430
|
jsx(PasswordInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPress: field.submitOnEnter && onSubmit }), void 0)));
|
|
1431
|
+
case "date":
|
|
1432
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1433
|
+
jsx(DateInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1340
1434
|
case "radio":
|
|
1341
1435
|
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1342
1436
|
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1430,5 +1524,5 @@ var Modal = function (props) {
|
|
|
1430
1524
|
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));
|
|
1431
1525
|
};
|
|
1432
1526
|
|
|
1433
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1527
|
+
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, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1434
1528
|
//# sourceMappingURL=index.es.js.map
|