@typeolymp/ui-components 1.4.0 → 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/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/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/index.d.ts +2 -1
- package/build/index.es.js +122 -74
- package/build/index.es.js.map +1 -1
- package/build/index.js +122 -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$C || (templateObject_1$C = __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$B || (templateObject_1$B = __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$A || (templateObject_1$A = __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$z || (templateObject_1$z = __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$y || (templateObject_1$y = __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)),
|
|
@@ -446,7 +473,7 @@ var icons = {
|
|
|
446
473
|
};
|
|
447
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)); };
|
|
448
475
|
|
|
449
|
-
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) {
|
|
450
477
|
var size = _a.size;
|
|
451
478
|
switch (size) {
|
|
452
479
|
default:
|
|
@@ -458,7 +485,7 @@ var Wrapper$7 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTem
|
|
|
458
485
|
return "118px";
|
|
459
486
|
}
|
|
460
487
|
});
|
|
461
|
-
var templateObject_1$
|
|
488
|
+
var templateObject_1$y;
|
|
462
489
|
|
|
463
490
|
var illustrations = {
|
|
464
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)),
|
|
@@ -473,14 +500,14 @@ var illustrations = {
|
|
|
473
500
|
};
|
|
474
501
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
475
502
|
|
|
476
|
-
var InputIconWrapper = styled.div(templateObject_1$
|
|
477
|
-
var
|
|
478
|
-
return
|
|
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 : "";
|
|
479
506
|
}, function (_a) {
|
|
480
507
|
var disabled = _a.disabled;
|
|
481
508
|
return (disabled ? "not-allowed" : "pointer");
|
|
482
509
|
});
|
|
483
|
-
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) {
|
|
484
511
|
var disabled = _a.disabled;
|
|
485
512
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
486
513
|
}, function (_a) {
|
|
@@ -493,7 +520,7 @@ var StyledInput = styled.input(templateObject_2$j || (templateObject_2$j = __mak
|
|
|
493
520
|
var disabled = _a.disabled;
|
|
494
521
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
495
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));
|
|
496
|
-
var templateObject_1$
|
|
523
|
+
var templateObject_1$x, templateObject_2$k;
|
|
497
524
|
|
|
498
525
|
var PasswordInput = function (props) {
|
|
499
526
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -557,7 +584,7 @@ Input.Date = DateInput;
|
|
|
557
584
|
|
|
558
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)); };
|
|
559
586
|
|
|
560
|
-
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) {
|
|
561
588
|
var size = _a.size;
|
|
562
589
|
switch (size) {
|
|
563
590
|
default:
|
|
@@ -567,7 +594,7 @@ var Wrapper$6 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTem
|
|
|
567
594
|
return "116px";
|
|
568
595
|
}
|
|
569
596
|
});
|
|
570
|
-
var templateObject_1$
|
|
597
|
+
var templateObject_1$w;
|
|
571
598
|
|
|
572
599
|
var medals = {
|
|
573
600
|
small: {
|
|
@@ -583,11 +610,11 @@ var medals = {
|
|
|
583
610
|
};
|
|
584
611
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
585
612
|
|
|
586
|
-
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) {
|
|
587
614
|
var disabled = _a.disabled;
|
|
588
615
|
return (disabled ? "49.5px" : "");
|
|
589
616
|
});
|
|
590
|
-
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) {
|
|
591
618
|
var disabled = _a.disabled;
|
|
592
619
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
593
620
|
}, function (_a) {
|
|
@@ -600,7 +627,7 @@ var StyledInputNumber = styled.input(templateObject_2$i || (templateObject_2$i =
|
|
|
600
627
|
var disabled = _a.disabled;
|
|
601
628
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
602
629
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
603
|
-
var templateObject_1$
|
|
630
|
+
var templateObject_1$v, templateObject_2$j;
|
|
604
631
|
|
|
605
632
|
var Number = function (props) {
|
|
606
633
|
var ref = useRef(null);
|
|
@@ -642,7 +669,7 @@ var Number = function (props) {
|
|
|
642
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));
|
|
643
670
|
};
|
|
644
671
|
|
|
645
|
-
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) {
|
|
646
673
|
var size = _a.size;
|
|
647
674
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
648
675
|
}, function (_a) {
|
|
@@ -674,11 +701,11 @@ var StyledParagraph = styled.p(templateObject_1$t || (templateObject_1$t = __mak
|
|
|
674
701
|
var align = _a.align;
|
|
675
702
|
return align;
|
|
676
703
|
});
|
|
677
|
-
var templateObject_1$
|
|
704
|
+
var templateObject_1$u;
|
|
678
705
|
|
|
679
706
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
680
707
|
|
|
681
|
-
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) {
|
|
682
709
|
var checked = _a.checked, disabled = _a.disabled;
|
|
683
710
|
if (disabled)
|
|
684
711
|
return theme.colors.lightGray.darker;
|
|
@@ -706,7 +733,7 @@ var StyledRadio = styled.div(templateObject_1$s || (templateObject_1$s = __makeT
|
|
|
706
733
|
return theme.colors.green.base;
|
|
707
734
|
return "";
|
|
708
735
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
709
|
-
var templateObject_1$
|
|
736
|
+
var templateObject_1$t;
|
|
710
737
|
|
|
711
738
|
var Radio = function (props) {
|
|
712
739
|
var _a;
|
|
@@ -735,11 +762,11 @@ var Radio = function (props) {
|
|
|
735
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));
|
|
736
763
|
};
|
|
737
764
|
|
|
738
|
-
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) {
|
|
739
766
|
var disabled = _a.disabled;
|
|
740
767
|
return (disabled ? "not-allowed" : "pointer");
|
|
741
768
|
});
|
|
742
|
-
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) {
|
|
743
770
|
var disabled = _a.disabled;
|
|
744
771
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
745
772
|
}, function (_a) {
|
|
@@ -752,7 +779,7 @@ var StyledSelect = styled.select(templateObject_2$h || (templateObject_2$h = __m
|
|
|
752
779
|
var isChanged = _a.isChanged;
|
|
753
780
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
754
781
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
755
|
-
var templateObject_1$
|
|
782
|
+
var templateObject_1$s, templateObject_2$i;
|
|
756
783
|
|
|
757
784
|
var Select = function (props) {
|
|
758
785
|
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -769,18 +796,18 @@ var Select = function (props) {
|
|
|
769
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));
|
|
770
797
|
};
|
|
771
798
|
|
|
772
|
-
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) {
|
|
773
800
|
var horizontal = _a.horizontal;
|
|
774
801
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
775
802
|
}, function (_a) {
|
|
776
803
|
var vertical = _a.vertical;
|
|
777
804
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
778
805
|
});
|
|
779
|
-
var templateObject_1$
|
|
806
|
+
var templateObject_1$r;
|
|
780
807
|
|
|
781
808
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
782
809
|
|
|
783
|
-
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) {
|
|
784
811
|
var size = _a.size;
|
|
785
812
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
786
813
|
}, function (_a) {
|
|
@@ -808,11 +835,11 @@ var StyledSubheading = styled.p(templateObject_1$p || (templateObject_1$p = __ma
|
|
|
808
835
|
return theme.colors.darkGray.dark;
|
|
809
836
|
}
|
|
810
837
|
});
|
|
811
|
-
var templateObject_1$
|
|
838
|
+
var templateObject_1$q;
|
|
812
839
|
|
|
813
840
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
814
841
|
|
|
815
|
-
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) {
|
|
816
843
|
var disabled = _a.disabled;
|
|
817
844
|
return (disabled ? "not-allowed" : "pointer");
|
|
818
845
|
}, function (_a) {
|
|
@@ -830,7 +857,7 @@ var Container$a = styled.div(templateObject_1$o || (templateObject_1$o = __makeT
|
|
|
830
857
|
var disabled = _a.disabled;
|
|
831
858
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
832
859
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
833
|
-
var templateObject_1$
|
|
860
|
+
var templateObject_1$p;
|
|
834
861
|
|
|
835
862
|
var Toggle = function (props) {
|
|
836
863
|
var _a;
|
|
@@ -858,10 +885,10 @@ var Toggle = function (props) {
|
|
|
858
885
|
props.onChange(newValue);
|
|
859
886
|
}
|
|
860
887
|
};
|
|
861
|
-
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));
|
|
862
889
|
};
|
|
863
890
|
|
|
864
|
-
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) {
|
|
865
892
|
var level = _a.level;
|
|
866
893
|
switch (level) {
|
|
867
894
|
case 1:
|
|
@@ -872,7 +899,7 @@ var Wrapper$3 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTem
|
|
|
872
899
|
return "70px";
|
|
873
900
|
}
|
|
874
901
|
});
|
|
875
|
-
var templateObject_1$
|
|
902
|
+
var templateObject_1$o;
|
|
876
903
|
|
|
877
904
|
var trophies = {
|
|
878
905
|
1: {
|
|
@@ -908,7 +935,7 @@ var trophies = {
|
|
|
908
935
|
};
|
|
909
936
|
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
910
937
|
|
|
911
|
-
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) {
|
|
912
939
|
var type = _a.type;
|
|
913
940
|
switch (type) {
|
|
914
941
|
case "success":
|
|
@@ -925,11 +952,11 @@ var Container$9 = styled.div(templateObject_1$m || (templateObject_1$m = __makeT
|
|
|
925
952
|
return theme.colors.red.base;
|
|
926
953
|
}
|
|
927
954
|
});
|
|
928
|
-
var templateObject_1$
|
|
955
|
+
var templateObject_1$n;
|
|
929
956
|
|
|
930
|
-
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)); };
|
|
931
958
|
|
|
932
|
-
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) {
|
|
933
960
|
var ellipse = _a.ellipse;
|
|
934
961
|
return ellipse
|
|
935
962
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -938,23 +965,23 @@ var StyledCard = styled.div(templateObject_1$l || (templateObject_1$l = __makeTe
|
|
|
938
965
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
939
966
|
: "";
|
|
940
967
|
});
|
|
941
|
-
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) {
|
|
942
969
|
var color = _a.color;
|
|
943
970
|
return color ? theme.colors[color].light : "";
|
|
944
971
|
});
|
|
945
|
-
var Content = styled.div(templateObject_3$
|
|
946
|
-
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;
|
|
947
974
|
|
|
948
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)); };
|
|
949
976
|
|
|
950
|
-
var Fieldset$1 = styled.fieldset(templateObject_1$
|
|
951
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
952
|
-
var CheckboxWrapper = styled.div(templateObject_3$
|
|
953
|
-
var Label$7 = styled(StyledParagraph)(templateObject_4$
|
|
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) {
|
|
954
981
|
var weight = _a.weight;
|
|
955
982
|
return weight || 500;
|
|
956
983
|
}, theme.colors.darkGray.base);
|
|
957
|
-
var templateObject_1$
|
|
984
|
+
var templateObject_1$l, templateObject_2$g, templateObject_3$5, templateObject_4$4;
|
|
958
985
|
|
|
959
986
|
var Checkboxes = function (props) {
|
|
960
987
|
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -977,9 +1004,9 @@ var Checkboxes = function (props) {
|
|
|
977
1004
|
}) }, void 0)] }, void 0));
|
|
978
1005
|
};
|
|
979
1006
|
|
|
980
|
-
var Container$
|
|
981
|
-
var Label$6 = styled(StyledParagraph)(templateObject_2$
|
|
982
|
-
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;
|
|
983
1010
|
|
|
984
1011
|
var DateInputField = function (props) {
|
|
985
1012
|
var onChange = function (value) {
|
|
@@ -990,12 +1017,12 @@ var DateInputField = function (props) {
|
|
|
990
1017
|
if (props.onBlur)
|
|
991
1018
|
props.onBlur(props.name);
|
|
992
1019
|
};
|
|
993
|
-
return (jsxs(Container$
|
|
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));
|
|
994
1021
|
};
|
|
995
1022
|
|
|
996
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
997
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
998
|
-
var templateObject_1$
|
|
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;
|
|
999
1026
|
|
|
1000
1027
|
var IconButton = function (props) {
|
|
1001
1028
|
if (props.color === "white")
|
|
@@ -1003,9 +1030,9 @@ var IconButton = function (props) {
|
|
|
1003
1030
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
1004
1031
|
};
|
|
1005
1032
|
|
|
1006
|
-
var Container$
|
|
1007
|
-
var Label$5 = styled(StyledParagraph)(templateObject_2$
|
|
1008
|
-
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;
|
|
1009
1036
|
|
|
1010
1037
|
var InputField = function (props) {
|
|
1011
1038
|
var onChange = function (value) {
|
|
@@ -1016,18 +1043,18 @@ var InputField = function (props) {
|
|
|
1016
1043
|
if (props.onBlur)
|
|
1017
1044
|
props.onBlur(props.name);
|
|
1018
1045
|
};
|
|
1019
|
-
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));
|
|
1020
1047
|
};
|
|
1021
1048
|
|
|
1022
|
-
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) {
|
|
1023
1050
|
var chevron = _a.chevron;
|
|
1024
1051
|
return (chevron === "left" ? "4px" : "");
|
|
1025
1052
|
}, function (_a) {
|
|
1026
1053
|
var chevron = _a.chevron;
|
|
1027
1054
|
return (chevron === "right" ? "4px" : "");
|
|
1028
1055
|
});
|
|
1029
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
1030
|
-
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;
|
|
1031
1058
|
|
|
1032
1059
|
var Link = function (props) {
|
|
1033
1060
|
var onClick = function (e) {
|
|
@@ -1039,13 +1066,34 @@ var Link = function (props) {
|
|
|
1039
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));
|
|
1040
1067
|
};
|
|
1041
1068
|
|
|
1042
|
-
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) {
|
|
1043
1070
|
var text = _a.text;
|
|
1044
1071
|
return (text ? "20px" : "");
|
|
1045
1072
|
});
|
|
1046
|
-
var templateObject_1$
|
|
1073
|
+
var templateObject_1$g;
|
|
1047
1074
|
|
|
1048
|
-
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
|
+
};
|
|
1049
1097
|
|
|
1050
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"])));
|
|
1051
1099
|
var templateObject_1$e;
|
|
@@ -1476,5 +1524,5 @@ var Modal = function (props) {
|
|
|
1476
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));
|
|
1477
1525
|
};
|
|
1478
1526
|
|
|
1479
|
-
export { Alert, Button, Card, Checkbox, Checkboxes, DateInputField, 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 };
|
|
1480
1528
|
//# sourceMappingURL=index.es.js.map
|