@typeolymp/ui-components 1.0.0 → 1.0.1
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/Flag/index.d.ts +2 -1
- package/build/components/molecules/Alert/index.d.ts +7 -0
- package/build/components/molecules/Alert/stories.d.ts +8 -0
- package/build/components/molecules/Alert/styles.d.ts +1 -0
- package/build/components/molecules/Loading/index.d.ts +9 -0
- package/build/components/molecules/Loading/stories.d.ts +25 -0
- package/build/components/molecules/Loading/styles.d.ts +1 -0
- package/build/index.d.ts +3 -1
- package/build/index.es.js +71 -39
- package/build/index.es.js.map +1 -1
- package/build/index.js +72 -38
- package/build/index.js.map +1 -1
- package/build/lib/types.d.ts +1 -0
- package/package.json +2 -1
package/build/index.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var React = require('react');
|
|
8
|
+
var reactSpinnersKit = require('react-spinners-kit');
|
|
8
9
|
|
|
9
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
11
|
|
|
@@ -186,7 +187,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
186
187
|
return cooked;
|
|
187
188
|
}
|
|
188
189
|
|
|
189
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
190
|
+
var StyledButton = styled__default["default"].button(templateObject_1$t || (templateObject_1$t = __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) {
|
|
190
191
|
var fluid = _a.fluid;
|
|
191
192
|
return (fluid ? "100%" : "fit-content");
|
|
192
193
|
}, function (_a) {
|
|
@@ -256,7 +257,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$5 ||
|
|
|
256
257
|
? theme.button.medium.marginTopActive
|
|
257
258
|
: theme.button[size].marginTopActive;
|
|
258
259
|
});
|
|
259
|
-
var templateObject_1$
|
|
260
|
+
var templateObject_1$t, templateObject_2$d, templateObject_3$5;
|
|
260
261
|
|
|
261
262
|
var Button = function (props) {
|
|
262
263
|
var onClick = function () {
|
|
@@ -273,7 +274,7 @@ var Button = function (props) {
|
|
|
273
274
|
return (jsxRuntime.jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
|
|
274
275
|
};
|
|
275
276
|
|
|
276
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
277
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __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) {
|
|
277
278
|
var checked = _a.checked, disabled = _a.disabled;
|
|
278
279
|
if (disabled)
|
|
279
280
|
return theme.colors.lightGray.darker;
|
|
@@ -294,7 +295,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$q || (templ
|
|
|
294
295
|
return theme.colors.green.base;
|
|
295
296
|
return theme.colors.lightGray.darker;
|
|
296
297
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
297
|
-
var templateObject_1$
|
|
298
|
+
var templateObject_1$s;
|
|
298
299
|
|
|
299
300
|
var Checkbox = function (props) {
|
|
300
301
|
var ref = React.useRef(null);
|
|
@@ -316,7 +317,7 @@ var Checkbox = function (props) {
|
|
|
316
317
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: ref }, { children: [checked && (jsxRuntime.jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsxRuntime.jsx("input", { type: "checkbox", checked: checked, onChange: toggle, disabled: !!props.disabled, id: props.id }, void 0)] }), void 0));
|
|
317
318
|
};
|
|
318
319
|
|
|
319
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
320
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
320
321
|
var size = _a.size;
|
|
321
322
|
switch (size) {
|
|
322
323
|
case "small":
|
|
@@ -339,7 +340,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$p || (templateOb
|
|
|
339
340
|
return "27px";
|
|
340
341
|
}
|
|
341
342
|
});
|
|
342
|
-
var templateObject_1$
|
|
343
|
+
var templateObject_1$r;
|
|
343
344
|
|
|
344
345
|
var flags = {
|
|
345
346
|
"nl-NL": (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsxRuntime.jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -347,7 +348,7 @@ var flags = {
|
|
|
347
348
|
};
|
|
348
349
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
349
350
|
|
|
350
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
351
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$q || (templateObject_1$q = __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) {
|
|
351
352
|
var type = _a.type;
|
|
352
353
|
return theme.heading[type].fontSize;
|
|
353
354
|
}, function (_a) {
|
|
@@ -371,14 +372,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$o || (templ
|
|
|
371
372
|
var align = _a.align;
|
|
372
373
|
return align;
|
|
373
374
|
});
|
|
374
|
-
var templateObject_1$
|
|
375
|
+
var templateObject_1$q;
|
|
375
376
|
|
|
376
377
|
var Heading = function (props) {
|
|
377
378
|
var element = !!props.as ? props.as : props.type;
|
|
378
379
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
379
380
|
};
|
|
380
381
|
|
|
381
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
382
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
382
383
|
var size = _a.size;
|
|
383
384
|
return theme.icon[size] || theme.icon.medium;
|
|
384
385
|
}, function (_a) {
|
|
@@ -406,7 +407,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$n || (templateOb
|
|
|
406
407
|
return theme.colors.lightGray.light;
|
|
407
408
|
}
|
|
408
409
|
});
|
|
409
|
-
var templateObject_1$
|
|
410
|
+
var templateObject_1$p;
|
|
410
411
|
|
|
411
412
|
var icons = {
|
|
412
413
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -429,7 +430,7 @@ var icons = {
|
|
|
429
430
|
};
|
|
430
431
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
431
432
|
|
|
432
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
433
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
433
434
|
var size = _a.size;
|
|
434
435
|
switch (size) {
|
|
435
436
|
default:
|
|
@@ -441,7 +442,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$m || (templateOb
|
|
|
441
442
|
return "118px";
|
|
442
443
|
}
|
|
443
444
|
});
|
|
444
|
-
var templateObject_1$
|
|
445
|
+
var templateObject_1$o;
|
|
445
446
|
|
|
446
447
|
var illustrations = {
|
|
447
448
|
keyboard: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -456,7 +457,7 @@ var illustrations = {
|
|
|
456
457
|
};
|
|
457
458
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
458
459
|
|
|
459
|
-
var PasswordInputWrapper = styled__default["default"].div(templateObject_1$
|
|
460
|
+
var PasswordInputWrapper = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\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 div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
460
461
|
var disabled = _a.disabled;
|
|
461
462
|
return (disabled ? "not-allowed" : "pointer");
|
|
462
463
|
});
|
|
@@ -473,7 +474,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$c || (templa
|
|
|
473
474
|
var disabled = _a.disabled;
|
|
474
475
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
475
476
|
}, 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));
|
|
476
|
-
var templateObject_1$
|
|
477
|
+
var templateObject_1$n, templateObject_2$c;
|
|
477
478
|
|
|
478
479
|
var PasswordInput = function (props) {
|
|
479
480
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -509,7 +510,7 @@ Input.Password = PasswordInput;
|
|
|
509
510
|
|
|
510
511
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsxRuntime.jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsxRuntime.jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsxRuntime.jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsxRuntime.jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsxRuntime.jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { children: jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
511
512
|
|
|
512
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
513
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
513
514
|
var size = _a.size;
|
|
514
515
|
switch (size) {
|
|
515
516
|
default:
|
|
@@ -519,7 +520,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$k || (templateOb
|
|
|
519
520
|
return "116px";
|
|
520
521
|
}
|
|
521
522
|
});
|
|
522
|
-
var templateObject_1$
|
|
523
|
+
var templateObject_1$m;
|
|
523
524
|
|
|
524
525
|
var medals = {
|
|
525
526
|
small: {
|
|
@@ -535,7 +536,7 @@ var medals = {
|
|
|
535
536
|
};
|
|
536
537
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
537
538
|
|
|
538
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
539
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$l || (templateObject_1$l = __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) {
|
|
539
540
|
var size = _a.size;
|
|
540
541
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
541
542
|
}, function (_a) {
|
|
@@ -567,11 +568,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$j || (templa
|
|
|
567
568
|
var align = _a.align;
|
|
568
569
|
return align;
|
|
569
570
|
});
|
|
570
|
-
var templateObject_1$
|
|
571
|
+
var templateObject_1$l;
|
|
571
572
|
|
|
572
573
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
573
574
|
|
|
574
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
575
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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 :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 :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
575
576
|
var checked = _a.checked, disabled = _a.disabled;
|
|
576
577
|
if (disabled)
|
|
577
578
|
return theme.colors.lightGray.darker;
|
|
@@ -600,7 +601,7 @@ var CheckedDot = styled__default["default"].div(templateObject_2$b || (templateO
|
|
|
600
601
|
return theme.colors.green.base;
|
|
601
602
|
return "";
|
|
602
603
|
});
|
|
603
|
-
var templateObject_1$
|
|
604
|
+
var templateObject_1$k, templateObject_2$b;
|
|
604
605
|
|
|
605
606
|
var Radio = function (props) {
|
|
606
607
|
var ref = React.useRef(null);
|
|
@@ -622,7 +623,7 @@ var Radio = function (props) {
|
|
|
622
623
|
return (jsxRuntime.jsxs(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: ref }, { children: [checked && jsxRuntime.jsx(CheckedDot, { disabled: props.disabled, checked: checked }, void 0), jsxRuntime.jsx("input", { type: "radio", checked: checked, onChange: toggle, disabled: !!props.disabled, id: props.id }, void 0)] }), void 0));
|
|
623
624
|
};
|
|
624
625
|
|
|
625
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
626
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: relative;\n\n select {\n padding-right: 43px;\n }\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 select {\n padding-right: 43px;\n }\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) {
|
|
626
627
|
var disabled = _a.disabled;
|
|
627
628
|
return (disabled ? "not-allowed" : "pointer");
|
|
628
629
|
});
|
|
@@ -639,7 +640,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$a || (temp
|
|
|
639
640
|
var isChanged = _a.isChanged;
|
|
640
641
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
641
642
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
642
|
-
var templateObject_1$
|
|
643
|
+
var templateObject_1$j, templateObject_2$a;
|
|
643
644
|
|
|
644
645
|
var Select = function (props) {
|
|
645
646
|
var _a = React.useState(false), isChanged = _a[0], setIsChanged = _a[1];
|
|
@@ -652,18 +653,18 @@ var Select = function (props) {
|
|
|
652
653
|
return (jsxRuntime.jsxs(Wrapper$5, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
653
654
|
};
|
|
654
655
|
|
|
655
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
656
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
656
657
|
var horizontal = _a.horizontal;
|
|
657
658
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
658
659
|
}, function (_a) {
|
|
659
660
|
var vertical = _a.vertical;
|
|
660
661
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
661
662
|
});
|
|
662
|
-
var templateObject_1$
|
|
663
|
+
var templateObject_1$i;
|
|
663
664
|
|
|
664
665
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
665
666
|
|
|
666
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
667
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$h || (templateObject_1$h = __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) {
|
|
667
668
|
var size = _a.size;
|
|
668
669
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
669
670
|
}, function (_a) {
|
|
@@ -691,11 +692,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$f || (templ
|
|
|
691
692
|
return theme.colors.darkGray.dark;
|
|
692
693
|
}
|
|
693
694
|
});
|
|
694
|
-
var templateObject_1$
|
|
695
|
+
var templateObject_1$h;
|
|
695
696
|
|
|
696
697
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
697
698
|
|
|
698
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
699
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __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) {
|
|
699
700
|
var level = _a.level;
|
|
700
701
|
switch (level) {
|
|
701
702
|
case 1:
|
|
@@ -706,7 +707,7 @@ var Wrapper$4 = styled__default["default"].div(templateObject_1$e || (templateOb
|
|
|
706
707
|
return "70px";
|
|
707
708
|
}
|
|
708
709
|
});
|
|
709
|
-
var templateObject_1$
|
|
710
|
+
var templateObject_1$g;
|
|
710
711
|
|
|
711
712
|
var trophies = {
|
|
712
713
|
1: {
|
|
@@ -742,7 +743,30 @@ var trophies = {
|
|
|
742
743
|
};
|
|
743
744
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$4, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
744
745
|
|
|
745
|
-
var
|
|
746
|
+
var Container$3 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: fit-content;\n 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 p {\n color: ", ";\n }\n"], ["\n width: fit-content;\n 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 p {\n color: ", ";\n }\n"])), function (_a) {
|
|
747
|
+
var type = _a.type;
|
|
748
|
+
switch (type) {
|
|
749
|
+
case "success":
|
|
750
|
+
return "rgba(139, 220, 174, 20%)";
|
|
751
|
+
case "error":
|
|
752
|
+
return "rgba(247, 119, 140, 20%)";
|
|
753
|
+
}
|
|
754
|
+
}, function (_a) {
|
|
755
|
+
var type = _a.type;
|
|
756
|
+
switch (type) {
|
|
757
|
+
case "success":
|
|
758
|
+
return theme.colors.green.base;
|
|
759
|
+
case "error":
|
|
760
|
+
return theme.colors.red.base;
|
|
761
|
+
}
|
|
762
|
+
});
|
|
763
|
+
var templateObject_1$f;
|
|
764
|
+
|
|
765
|
+
var Alert = function (props) {
|
|
766
|
+
return (jsxRuntime.jsxs(Container$3, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, { children: props.message }, void 0)] }), void 0));
|
|
767
|
+
};
|
|
768
|
+
|
|
769
|
+
var StyledCard = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
746
770
|
var ellipse = _a.ellipse;
|
|
747
771
|
return ellipse
|
|
748
772
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -756,11 +780,11 @@ var Ellipse = styled__default["default"].div(templateObject_2$9 || (templateObje
|
|
|
756
780
|
return color ? theme.colors[color].light : "";
|
|
757
781
|
});
|
|
758
782
|
var Content = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
759
|
-
var templateObject_1$
|
|
783
|
+
var templateObject_1$e, templateObject_2$9, templateObject_3$4;
|
|
760
784
|
|
|
761
785
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }, void 0), jsxRuntime.jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
762
786
|
|
|
763
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
787
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
764
788
|
var disabled = _a.disabled;
|
|
765
789
|
return (disabled ? "49.5px" : "");
|
|
766
790
|
});
|
|
@@ -777,7 +801,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$8 || (
|
|
|
777
801
|
var disabled = _a.disabled;
|
|
778
802
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
779
803
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
780
|
-
var templateObject_1$
|
|
804
|
+
var templateObject_1$d, templateObject_2$8;
|
|
781
805
|
|
|
782
806
|
var Number = function (props) {
|
|
783
807
|
var ref = React.useRef(null);
|
|
@@ -820,7 +844,7 @@ var FeedbackColors = {
|
|
|
820
844
|
error: theme.colors.red.base,
|
|
821
845
|
};
|
|
822
846
|
|
|
823
|
-
var FieldWrapper = styled__default["default"].div(templateObject_1$
|
|
847
|
+
var FieldWrapper = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n flex-wrap: wrap;\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n\n input,\n > div:first-child {\n border-color: ", ";\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n flex-wrap: wrap;\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n\n input,\n > div:first-child {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
824
848
|
var inline = _a.inline;
|
|
825
849
|
return (inline ? "row" : "column");
|
|
826
850
|
}, function (_a) {
|
|
@@ -838,7 +862,7 @@ var FeedbackWrapper = styled__default["default"].div(templateObject_3$3 || (temp
|
|
|
838
862
|
var status = _a.status;
|
|
839
863
|
return "\n svg {\n fill: ".concat(FeedbackColors[status], ";\n }\n p {\n color: ").concat(FeedbackColors[status], ";\n }\n ");
|
|
840
864
|
});
|
|
841
|
-
var templateObject_1$
|
|
865
|
+
var templateObject_1$c, templateObject_2$7, templateObject_3$3;
|
|
842
866
|
|
|
843
867
|
var Feedback = function (_a) {
|
|
844
868
|
var status = _a.status, message = _a.message;
|
|
@@ -877,9 +901,9 @@ var FormField = function (props) {
|
|
|
877
901
|
}
|
|
878
902
|
};
|
|
879
903
|
|
|
880
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
904
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
881
905
|
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
882
|
-
var templateObject_1$
|
|
906
|
+
var templateObject_1$b, templateObject_2$6;
|
|
883
907
|
|
|
884
908
|
var IconButton = function (props) {
|
|
885
909
|
if (props.color === "white")
|
|
@@ -887,7 +911,7 @@ var IconButton = function (props) {
|
|
|
887
911
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
888
912
|
};
|
|
889
913
|
|
|
890
|
-
var Wrapper$2 = styled__default["default"].div(templateObject_1$
|
|
914
|
+
var Wrapper$2 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\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\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
891
915
|
var chevron = _a.chevron;
|
|
892
916
|
return (chevron === "left" ? "4px" : "");
|
|
893
917
|
}, function (_a) {
|
|
@@ -895,7 +919,7 @@ var Wrapper$2 = styled__default["default"].div(templateObject_1$9 || (templateOb
|
|
|
895
919
|
return (chevron === "right" ? "4px" : "");
|
|
896
920
|
});
|
|
897
921
|
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n text-decoration: none;\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n text-decoration: none;\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
898
|
-
var templateObject_1$
|
|
922
|
+
var templateObject_1$a, templateObject_2$5;
|
|
899
923
|
|
|
900
924
|
var Link = function (props) {
|
|
901
925
|
var onClick = function (e) {
|
|
@@ -907,6 +931,14 @@ var Link = function (props) {
|
|
|
907
931
|
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron }, { children: [props.chevron === "left" && (jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green", onClick: onClick }, void 0)), jsxRuntime.jsx(StyledLink, __assign({ href: props.href, onClick: onClick, size: "large", as: "a" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green", onClick: onClick }, void 0))] }), void 0));
|
|
908
932
|
};
|
|
909
933
|
|
|
934
|
+
var Container$2 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
935
|
+
var text = _a.text;
|
|
936
|
+
return (text ? "20px" : "");
|
|
937
|
+
});
|
|
938
|
+
var templateObject_1$9;
|
|
939
|
+
|
|
940
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$2, __assign({}, props, { children: [jsxRuntime.jsx(reactSpinnersKit.ImpulseSpinner, { size: 60, frontColor: theme.colors[props.color].base, backColor: theme.colors[props.color].light }, void 0), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
941
|
+
|
|
910
942
|
var Wrapper$1 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
911
943
|
var templateObject_1$8;
|
|
912
944
|
|
|
@@ -1170,6 +1202,7 @@ var Modal = function (props) {
|
|
|
1170
1202
|
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign({}, props, { children: jsxRuntime.jsxs(Card, { children: [jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1171
1203
|
};
|
|
1172
1204
|
|
|
1205
|
+
exports.Alert = Alert;
|
|
1173
1206
|
exports.Button = Button;
|
|
1174
1207
|
exports.Card = Card;
|
|
1175
1208
|
exports.Checkbox = Checkbox;
|
|
@@ -1183,6 +1216,7 @@ exports.Illustration = Illustration;
|
|
|
1183
1216
|
exports.Input = Input;
|
|
1184
1217
|
exports.Keyboard = Keyboard;
|
|
1185
1218
|
exports.Link = Link;
|
|
1219
|
+
exports.Loading = Loading;
|
|
1186
1220
|
exports.Logo = Logo;
|
|
1187
1221
|
exports.Medal = Medal;
|
|
1188
1222
|
exports.Medals = Medals;
|