@typeolymp/ui-components 1.0.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Button/index.d.ts +1 -0
- package/build/components/atoms/Checkbox/index.d.ts +5 -3
- package/build/components/atoms/Flag/index.d.ts +1 -1
- package/build/components/atoms/Flag/stories.d.ts +1 -1
- package/build/components/atoms/Input/index.d.ts +2 -2
- package/build/components/atoms/Input/stories.d.ts +1 -1
- package/build/components/atoms/Medal/index.d.ts +2 -1
- package/build/components/atoms/Medal/stories.d.ts +1 -1
- package/build/components/atoms/Number/index.d.ts +14 -0
- package/build/components/atoms/Number/stories.d.ts +19 -0
- package/build/components/atoms/Number/styles.d.ts +2 -0
- package/build/components/atoms/Radio/index.d.ts +5 -3
- package/build/components/atoms/Radio/styles.d.ts +0 -1
- package/build/components/atoms/Select/index.d.ts +7 -2
- package/build/components/atoms/Toggle/index.d.ts +12 -0
- package/build/components/atoms/Toggle/stories.d.ts +7 -0
- package/build/components/atoms/Toggle/styles.d.ts +1 -0
- package/build/components/molecules/Card/index.d.ts +1 -1
- package/build/components/molecules/Checkboxes/index.d.ts +16 -0
- package/build/components/molecules/Checkboxes/styles.d.ts +4 -0
- package/build/components/molecules/FormField/index.d.ts +4 -8
- package/build/components/molecules/FormField/styles.d.ts +2 -0
- package/build/components/molecules/InputField/index.d.ts +15 -0
- package/build/components/molecules/InputField/styles.d.ts +2 -0
- package/build/components/molecules/Loading/index.d.ts +1 -1
- package/build/components/molecules/NumberField/index.d.ts +15 -0
- package/build/components/molecules/NumberField/styles.d.ts +2 -0
- package/build/components/molecules/RadioGroup/index.d.ts +16 -0
- package/build/components/molecules/RadioGroup/styles.d.ts +4 -0
- package/build/components/molecules/SelectField/index.d.ts +17 -0
- package/build/components/molecules/SelectField/styles.d.ts +2 -0
- package/build/components/molecules/ToggleField/index.d.ts +12 -0
- package/build/components/molecules/ToggleField/styles.d.ts +2 -0
- package/build/components/organisms/Form/WithValidation/index.d.ts +4 -0
- package/build/components/organisms/Form/WithValidation/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +48 -5
- package/build/components/organisms/Form/stories.d.ts +11 -2
- package/build/index.d.ts +9 -2
- package/build/index.es.js +429 -219
- package/build/index.es.js.map +1 -1
- package/build/index.js +437 -219
- package/build/index.js.map +1 -1
- package/build/lib/theme/index.d.ts +3 -0
- package/build/lib/theme/types.d.ts +72 -0
- package/package.json +4 -2
package/build/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import React, { useRef, useState, useEffect, createElement } from 'react';
|
|
4
|
-
import
|
|
4
|
+
import BeatLoader from 'react-spinners/BeatLoader';
|
|
5
5
|
|
|
6
6
|
var theme = {
|
|
7
7
|
colors: {
|
|
@@ -173,12 +173,22 @@ var __assign = function() {
|
|
|
173
173
|
return __assign.apply(this, arguments);
|
|
174
174
|
};
|
|
175
175
|
|
|
176
|
+
function __spreadArray(to, from, pack) {
|
|
177
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
178
|
+
if (ar || !(i in from)) {
|
|
179
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
180
|
+
ar[i] = from[i];
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
184
|
+
}
|
|
185
|
+
|
|
176
186
|
function __makeTemplateObject(cooked, raw) {
|
|
177
187
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
178
188
|
return cooked;
|
|
179
189
|
}
|
|
180
190
|
|
|
181
|
-
var StyledButton = styled.button(templateObject_1$
|
|
191
|
+
var StyledButton = styled.button(templateObject_1$A || (templateObject_1$A = __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) {
|
|
182
192
|
var fluid = _a.fluid;
|
|
183
193
|
return (fluid ? "100%" : "fit-content");
|
|
184
194
|
}, function (_a) {
|
|
@@ -228,11 +238,11 @@ var StyledButton = styled.button(templateObject_1$t || (templateObject_1$t = __m
|
|
|
228
238
|
? theme.button.medium.heightActive
|
|
229
239
|
: theme.button[size].heightActive;
|
|
230
240
|
});
|
|
231
|
-
var DisabledButton = styled(StyledButton)(templateObject_2$
|
|
241
|
+
var DisabledButton = styled(StyledButton)(templateObject_2$i || (templateObject_2$i = __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) {
|
|
232
242
|
var size = _a.size;
|
|
233
243
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
234
244
|
});
|
|
235
|
-
var GhostButton = styled(StyledButton)(templateObject_3$
|
|
245
|
+
var GhostButton = styled(StyledButton)(templateObject_3$6 || (templateObject_3$6 = __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) {
|
|
236
246
|
var size = _a.size;
|
|
237
247
|
return !size
|
|
238
248
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -248,7 +258,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$5 || (templateObject_3$5
|
|
|
248
258
|
? theme.button.medium.marginTopActive
|
|
249
259
|
: theme.button[size].marginTopActive;
|
|
250
260
|
});
|
|
251
|
-
var templateObject_1$
|
|
261
|
+
var templateObject_1$A, templateObject_2$i, templateObject_3$6;
|
|
252
262
|
|
|
253
263
|
var Button = function (props) {
|
|
254
264
|
var onClick = function () {
|
|
@@ -265,7 +275,7 @@ var Button = function (props) {
|
|
|
265
275
|
return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
266
276
|
};
|
|
267
277
|
|
|
268
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
278
|
+
var StyledCheckbox = styled.div(templateObject_1$z || (templateObject_1$z = __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) {
|
|
269
279
|
var checked = _a.checked, disabled = _a.disabled;
|
|
270
280
|
if (disabled)
|
|
271
281
|
return theme.colors.lightGray.darker;
|
|
@@ -286,29 +296,40 @@ var StyledCheckbox = styled.div(templateObject_1$s || (templateObject_1$s = __ma
|
|
|
286
296
|
return theme.colors.green.base;
|
|
287
297
|
return theme.colors.lightGray.darker;
|
|
288
298
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
289
|
-
var templateObject_1$
|
|
299
|
+
var templateObject_1$z;
|
|
290
300
|
|
|
291
301
|
var Checkbox = function (props) {
|
|
292
|
-
var
|
|
293
|
-
var
|
|
302
|
+
var _a;
|
|
303
|
+
var wrapperRef = useRef(null);
|
|
304
|
+
var inputRef = useRef(null);
|
|
305
|
+
var _b = useState(props.checked), checked = _b[0], setChecked = _b[1];
|
|
294
306
|
useEffect(function () {
|
|
295
307
|
var _a;
|
|
296
308
|
if (props.autoFocus)
|
|
297
|
-
(_a =
|
|
309
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
298
310
|
}, []);
|
|
311
|
+
useEffect(function () {
|
|
312
|
+
setChecked(inputRef.current.checked);
|
|
313
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
314
|
+
useEffect(function () {
|
|
315
|
+
inputRef.current.checked = props.checked;
|
|
316
|
+
setChecked(props.checked);
|
|
317
|
+
}, [props.checked]);
|
|
299
318
|
var toggle = function () {
|
|
300
319
|
var _a;
|
|
301
320
|
if (!props.disabled) {
|
|
302
|
-
|
|
303
|
-
|
|
321
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
322
|
+
var newValue = !inputRef.current.checked;
|
|
323
|
+
inputRef.current.checked = newValue;
|
|
324
|
+
setChecked(newValue);
|
|
304
325
|
if (!!props.onChange)
|
|
305
|
-
props.onChange(
|
|
326
|
+
props.onChange(props.value);
|
|
306
327
|
}
|
|
307
328
|
};
|
|
308
|
-
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:
|
|
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));
|
|
309
330
|
};
|
|
310
331
|
|
|
311
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
332
|
+
var Wrapper$9 = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
312
333
|
var size = _a.size;
|
|
313
334
|
switch (size) {
|
|
314
335
|
case "small":
|
|
@@ -331,15 +352,16 @@ var Wrapper$9 = styled.div(templateObject_1$r || (templateObject_1$r = __makeTem
|
|
|
331
352
|
return "27px";
|
|
332
353
|
}
|
|
333
354
|
});
|
|
334
|
-
var templateObject_1$
|
|
355
|
+
var templateObject_1$y;
|
|
335
356
|
|
|
336
357
|
var flags = {
|
|
337
358
|
"nl-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)),
|
|
338
359
|
"nl-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)),
|
|
360
|
+
"en-GB": (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { fill: "#158cc7", d: "M0 11.9L0 16 5 11.9z" }, void 0), jsx("path", { fill: "#158cc7", d: "M8.1 0L7 0 2.5 0 8.1 4.6z" }, void 0), jsx("path", { fill: "#158cc7", d: "M0 2L0 6.1 5 6.1z" }, void 0), jsx("path", { fill: "#158cc7", d: "M22 16L22 11.9 17 11.9z" }, void 0), jsx("path", { fill: "#158cc7", d: "M22 6.1L22 2 17 6.1z" }, void 0), jsx("path", { fill: "#158cc7", d: "M19.5 0L15 0 13.9 0 13.9 4.6z" }, void 0), jsx("path", { fill: "#158cc7", d: "M8.1 13.4L2.5 18 7 18 8.1 18 8.1 18z" }, void 0), jsx("path", { fill: "#158cc7", d: "M13.9 18L13.9 18 15 18 19.5 18 13.9 13.4z" }, void 0), jsx("path", { d: "M22 10.9V7.1h-7.8L22 .7c-.1-.4-.5-.7-.9-.7l-8.2 6.7V0H9.1v6.7L.9 0C.5 0 .1.3 0 .7L7.7 7H0v3.8h7.8L0 17.3c.1.4.5.7.9.7l8.2-6.7V18h3.8v-6.7l8.2 6.7c.5 0 .8-.3.9-.7L14.3 11H22z", fill: "#e62944" }, void 0), jsx("path", { d: "M21.1 18l-8.2-6.7V18H9.1v-6.7L.9 18h1.6l5.6-4.6V18h5.8v-4.6l5.6 4.6h1.6c-.1 0-.1 0 0 0zM.9 0l8.2 6.7V0h-1v4.6L2.5 0H.9C1 0 1 0 .9 0zM7.8 7.1L0 .7V2l5 4.1H0v1h7.8zM0 17.3L7.7 11H0v1h5l-5 4v1.3zM14.2 10.9l7.7 6.3v-1.3l-5-4.1h5v-1h-7.7zM22 .7L14.3 7H22V6h-5l5-4V1 .7zM12.9 6.7L21.1 0h-1.6l-5.6 4.6V0h-1v6.7z", fill: "#fff" }, void 0)] }), void 0)),
|
|
339
361
|
};
|
|
340
362
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
341
363
|
|
|
342
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
364
|
+
var StyledHeading = styled.span(templateObject_1$x || (templateObject_1$x = __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) {
|
|
343
365
|
var type = _a.type;
|
|
344
366
|
return theme.heading[type].fontSize;
|
|
345
367
|
}, function (_a) {
|
|
@@ -363,14 +385,14 @@ var StyledHeading = styled.span(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
363
385
|
var align = _a.align;
|
|
364
386
|
return align;
|
|
365
387
|
});
|
|
366
|
-
var templateObject_1$
|
|
388
|
+
var templateObject_1$x;
|
|
367
389
|
|
|
368
390
|
var Heading = function (props) {
|
|
369
391
|
var element = !!props.as ? props.as : props.type;
|
|
370
392
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
371
393
|
};
|
|
372
394
|
|
|
373
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
395
|
+
var Wrapper$8 = styled.div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
374
396
|
var size = _a.size;
|
|
375
397
|
return theme.icon[size] || theme.icon.medium;
|
|
376
398
|
}, function (_a) {
|
|
@@ -398,7 +420,7 @@ var Wrapper$8 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTem
|
|
|
398
420
|
return theme.colors.lightGray.light;
|
|
399
421
|
}
|
|
400
422
|
});
|
|
401
|
-
var templateObject_1$
|
|
423
|
+
var templateObject_1$w;
|
|
402
424
|
|
|
403
425
|
var icons = {
|
|
404
426
|
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)),
|
|
@@ -421,7 +443,7 @@ var icons = {
|
|
|
421
443
|
};
|
|
422
444
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
423
445
|
|
|
424
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
446
|
+
var Wrapper$7 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
425
447
|
var size = _a.size;
|
|
426
448
|
switch (size) {
|
|
427
449
|
default:
|
|
@@ -433,7 +455,7 @@ var Wrapper$7 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTem
|
|
|
433
455
|
return "118px";
|
|
434
456
|
}
|
|
435
457
|
});
|
|
436
|
-
var templateObject_1$
|
|
458
|
+
var templateObject_1$v;
|
|
437
459
|
|
|
438
460
|
var illustrations = {
|
|
439
461
|
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)),
|
|
@@ -448,11 +470,11 @@ var illustrations = {
|
|
|
448
470
|
};
|
|
449
471
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
450
472
|
|
|
451
|
-
var PasswordInputWrapper = styled.div(templateObject_1$
|
|
473
|
+
var PasswordInputWrapper = styled.div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
452
474
|
var disabled = _a.disabled;
|
|
453
475
|
return (disabled ? "not-allowed" : "pointer");
|
|
454
476
|
});
|
|
455
|
-
var StyledInput = styled.input(templateObject_2$
|
|
477
|
+
var StyledInput = styled.input(templateObject_2$h || (templateObject_2$h = __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 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 :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 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 :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
456
478
|
var disabled = _a.disabled;
|
|
457
479
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
458
480
|
}, function (_a) {
|
|
@@ -465,7 +487,7 @@ var StyledInput = styled.input(templateObject_2$c || (templateObject_2$c = __mak
|
|
|
465
487
|
var disabled = _a.disabled;
|
|
466
488
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
467
489
|
}, 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));
|
|
468
|
-
var templateObject_1$
|
|
490
|
+
var templateObject_1$u, templateObject_2$h;
|
|
469
491
|
|
|
470
492
|
var PasswordInput = function (props) {
|
|
471
493
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -501,7 +523,7 @@ Input.Password = PasswordInput;
|
|
|
501
523
|
|
|
502
524
|
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)); };
|
|
503
525
|
|
|
504
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
526
|
+
var Wrapper$6 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
505
527
|
var size = _a.size;
|
|
506
528
|
switch (size) {
|
|
507
529
|
default:
|
|
@@ -511,7 +533,7 @@ var Wrapper$6 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTem
|
|
|
511
533
|
return "116px";
|
|
512
534
|
}
|
|
513
535
|
});
|
|
514
|
-
var templateObject_1$
|
|
536
|
+
var templateObject_1$t;
|
|
515
537
|
|
|
516
538
|
var medals = {
|
|
517
539
|
small: {
|
|
@@ -527,7 +549,66 @@ var medals = {
|
|
|
527
549
|
};
|
|
528
550
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
529
551
|
|
|
530
|
-
var
|
|
552
|
+
var Wrapper$5 = styled.div(templateObject_1$s || (templateObject_1$s = __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) {
|
|
553
|
+
var disabled = _a.disabled;
|
|
554
|
+
return (disabled ? "49.5px" : "");
|
|
555
|
+
});
|
|
556
|
+
var StyledInputNumber = styled.input(templateObject_2$g || (templateObject_2$g = __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) {
|
|
557
|
+
var disabled = _a.disabled;
|
|
558
|
+
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
559
|
+
}, function (_a) {
|
|
560
|
+
var disabled = _a.disabled;
|
|
561
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
562
|
+
}, function (_a) {
|
|
563
|
+
var disabled = _a.disabled;
|
|
564
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
565
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
566
|
+
var disabled = _a.disabled;
|
|
567
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
568
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
569
|
+
var templateObject_1$s, templateObject_2$g;
|
|
570
|
+
|
|
571
|
+
var Number = function (props) {
|
|
572
|
+
var ref = useRef(null);
|
|
573
|
+
var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
574
|
+
var onChange = function (e) {
|
|
575
|
+
if (!props.disabled) {
|
|
576
|
+
var value_1 = parseInt(e.target.value);
|
|
577
|
+
setValue(value_1);
|
|
578
|
+
if (!!props.onChange)
|
|
579
|
+
props.onChange(e.target.value);
|
|
580
|
+
}
|
|
581
|
+
};
|
|
582
|
+
var decrease = function () {
|
|
583
|
+
var _a;
|
|
584
|
+
var newValue = value - 1;
|
|
585
|
+
if (props.min && newValue < props.min) {
|
|
586
|
+
setValue(props.min);
|
|
587
|
+
}
|
|
588
|
+
else {
|
|
589
|
+
setValue(newValue);
|
|
590
|
+
if (!!props.onChange)
|
|
591
|
+
props.onChange("".concat(newValue));
|
|
592
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
593
|
+
}
|
|
594
|
+
};
|
|
595
|
+
var increase = function () {
|
|
596
|
+
var _a;
|
|
597
|
+
var newValue = value + 1;
|
|
598
|
+
if (props.max && newValue > props.max) {
|
|
599
|
+
setValue(props.max);
|
|
600
|
+
}
|
|
601
|
+
else {
|
|
602
|
+
setValue(newValue);
|
|
603
|
+
if (!!props.onChange)
|
|
604
|
+
props.onChange("".concat(newValue));
|
|
605
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
606
|
+
}
|
|
607
|
+
};
|
|
608
|
+
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));
|
|
609
|
+
};
|
|
610
|
+
|
|
611
|
+
var StyledParagraph = styled.p(templateObject_1$r || (templateObject_1$r = __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) {
|
|
531
612
|
var size = _a.size;
|
|
532
613
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
533
614
|
}, function (_a) {
|
|
@@ -559,11 +640,11 @@ var StyledParagraph = styled.p(templateObject_1$l || (templateObject_1$l = __mak
|
|
|
559
640
|
var align = _a.align;
|
|
560
641
|
return align;
|
|
561
642
|
});
|
|
562
|
-
var templateObject_1$
|
|
643
|
+
var templateObject_1$r;
|
|
563
644
|
|
|
564
645
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
565
646
|
|
|
566
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
647
|
+
var StyledRadio = styled.div(templateObject_1$q || (templateObject_1$q = __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) {
|
|
567
648
|
var checked = _a.checked, disabled = _a.disabled;
|
|
568
649
|
if (disabled)
|
|
569
650
|
return theme.colors.lightGray.darker;
|
|
@@ -583,42 +664,48 @@ var StyledRadio = styled.div(templateObject_1$k || (templateObject_1$k = __makeT
|
|
|
583
664
|
if (checked)
|
|
584
665
|
return theme.colors.green.base;
|
|
585
666
|
return theme.colors.lightGray.darker;
|
|
586
|
-
},
|
|
587
|
-
var CheckedDot = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n"], ["\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (_a) {
|
|
667
|
+
}, function (_a) {
|
|
588
668
|
var checked = _a.checked, disabled = _a.disabled;
|
|
589
669
|
if (disabled)
|
|
590
670
|
return theme.colors.lightGray.darker;
|
|
591
671
|
if (checked)
|
|
592
672
|
return theme.colors.green.base;
|
|
593
673
|
return "";
|
|
594
|
-
});
|
|
595
|
-
var templateObject_1$
|
|
674
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
675
|
+
var templateObject_1$q;
|
|
596
676
|
|
|
597
677
|
var Radio = function (props) {
|
|
598
|
-
var
|
|
599
|
-
var
|
|
678
|
+
var _a;
|
|
679
|
+
var wrapperRef = useRef(null);
|
|
680
|
+
var inputRef = useRef(null);
|
|
681
|
+
var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
600
682
|
useEffect(function () {
|
|
601
|
-
var _a;
|
|
602
683
|
if (props.autoFocus)
|
|
603
|
-
|
|
684
|
+
wrapperRef.current.focus();
|
|
685
|
+
if (props.defaultChecked)
|
|
686
|
+
inputRef.current.checked = true;
|
|
604
687
|
}, []);
|
|
688
|
+
useEffect(function () {
|
|
689
|
+
setChecked(inputRef.current.checked);
|
|
690
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
605
691
|
var toggle = function () {
|
|
606
692
|
var _a;
|
|
607
693
|
if (!props.disabled) {
|
|
608
|
-
|
|
609
|
-
|
|
694
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
695
|
+
inputRef.current.checked = true;
|
|
696
|
+
setChecked(true);
|
|
610
697
|
if (!!props.onChange)
|
|
611
|
-
props.onChange(
|
|
698
|
+
props.onChange(props.value);
|
|
612
699
|
}
|
|
613
700
|
};
|
|
614
|
-
return (
|
|
701
|
+
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));
|
|
615
702
|
};
|
|
616
703
|
|
|
617
|
-
var Wrapper$
|
|
704
|
+
var Wrapper$4 = styled.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
618
705
|
var disabled = _a.disabled;
|
|
619
706
|
return (disabled ? "not-allowed" : "pointer");
|
|
620
707
|
});
|
|
621
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
708
|
+
var StyledSelect = styled.select(templateObject_2$f || (templateObject_2$f = __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) {
|
|
622
709
|
var disabled = _a.disabled;
|
|
623
710
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
624
711
|
}, function (_a) {
|
|
@@ -631,31 +718,35 @@ var StyledSelect = styled.select(templateObject_2$a || (templateObject_2$a = __m
|
|
|
631
718
|
var isChanged = _a.isChanged;
|
|
632
719
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
633
720
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
634
|
-
var templateObject_1$
|
|
721
|
+
var templateObject_1$p, templateObject_2$f;
|
|
635
722
|
|
|
636
723
|
var Select = function (props) {
|
|
637
|
-
var _a = useState(
|
|
638
|
-
var
|
|
724
|
+
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
725
|
+
var _b = useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
726
|
+
var onChange = function (e) {
|
|
639
727
|
if (!props.disabled) {
|
|
728
|
+
var value_1 = e.target.value;
|
|
729
|
+
setValue(value_1);
|
|
640
730
|
setIsChanged(true);
|
|
641
|
-
props.onChange
|
|
731
|
+
if (!!props.onChange)
|
|
732
|
+
props.onChange(value_1);
|
|
642
733
|
}
|
|
643
734
|
};
|
|
644
|
-
return (jsxs(Wrapper$
|
|
735
|
+
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));
|
|
645
736
|
};
|
|
646
737
|
|
|
647
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
738
|
+
var StyledSpacer = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
648
739
|
var horizontal = _a.horizontal;
|
|
649
740
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
650
741
|
}, function (_a) {
|
|
651
742
|
var vertical = _a.vertical;
|
|
652
743
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
653
744
|
});
|
|
654
|
-
var templateObject_1$
|
|
745
|
+
var templateObject_1$o;
|
|
655
746
|
|
|
656
747
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
657
748
|
|
|
658
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
749
|
+
var StyledSubheading = styled.p(templateObject_1$n || (templateObject_1$n = __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) {
|
|
659
750
|
var size = _a.size;
|
|
660
751
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
661
752
|
}, function (_a) {
|
|
@@ -683,11 +774,60 @@ var StyledSubheading = styled.p(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
683
774
|
return theme.colors.darkGray.dark;
|
|
684
775
|
}
|
|
685
776
|
});
|
|
686
|
-
var templateObject_1$
|
|
777
|
+
var templateObject_1$n;
|
|
687
778
|
|
|
688
779
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
689
780
|
|
|
690
|
-
var
|
|
781
|
+
var Container$8 = styled.div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
782
|
+
var disabled = _a.disabled;
|
|
783
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
784
|
+
}, function (_a) {
|
|
785
|
+
var checked = _a.checked, disabled = _a.disabled;
|
|
786
|
+
if (disabled)
|
|
787
|
+
return theme.colors.lightGray.dark;
|
|
788
|
+
return checked ? theme.colors.green.base : theme.colors.lightGray.darker;
|
|
789
|
+
}, function (_a) {
|
|
790
|
+
var checked = _a.checked;
|
|
791
|
+
return (checked ? "3px" : "");
|
|
792
|
+
}, function (_a) {
|
|
793
|
+
var checked = _a.checked;
|
|
794
|
+
return (checked ? "" : "3px");
|
|
795
|
+
}, function (_a) {
|
|
796
|
+
var disabled = _a.disabled;
|
|
797
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
798
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
799
|
+
var templateObject_1$m;
|
|
800
|
+
|
|
801
|
+
var Toggle = function (props) {
|
|
802
|
+
var _a;
|
|
803
|
+
var containerRef = useRef(null);
|
|
804
|
+
var inputRef = useRef(null);
|
|
805
|
+
var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
806
|
+
useEffect(function () {
|
|
807
|
+
var _a;
|
|
808
|
+
if (props.autoFocus)
|
|
809
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
810
|
+
if (props.defaultChecked)
|
|
811
|
+
inputRef.current.checked = true;
|
|
812
|
+
}, []);
|
|
813
|
+
useEffect(function () {
|
|
814
|
+
setChecked(inputRef.current.checked);
|
|
815
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
816
|
+
var toggle = function () {
|
|
817
|
+
var _a;
|
|
818
|
+
if (!props.disabled) {
|
|
819
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
820
|
+
var newValue = !inputRef.current.checked;
|
|
821
|
+
inputRef.current.checked = newValue;
|
|
822
|
+
setChecked(newValue);
|
|
823
|
+
if (!!props.onChange)
|
|
824
|
+
props.onChange(newValue);
|
|
825
|
+
}
|
|
826
|
+
};
|
|
827
|
+
return (jsx(Container$8, __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));
|
|
828
|
+
};
|
|
829
|
+
|
|
830
|
+
var Wrapper$3 = styled.div(templateObject_1$l || (templateObject_1$l = __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) {
|
|
691
831
|
var level = _a.level;
|
|
692
832
|
switch (level) {
|
|
693
833
|
case 1:
|
|
@@ -698,7 +838,7 @@ var Wrapper$4 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTem
|
|
|
698
838
|
return "70px";
|
|
699
839
|
}
|
|
700
840
|
});
|
|
701
|
-
var templateObject_1$
|
|
841
|
+
var templateObject_1$l;
|
|
702
842
|
|
|
703
843
|
var trophies = {
|
|
704
844
|
1: {
|
|
@@ -732,9 +872,9 @@ var trophies = {
|
|
|
732
872
|
3: (jsxs("svg", __assign({ viewBox: "0 0 96 118" }, { children: [jsx("path", { d: "M74.4418 104.86H21.5586C19.4421 104.886 17.4199 105.746 15.9322 107.253C14.4445 108.759 13.6099 110.792 13.6099 112.91V117.658H82.3914V112.829C82.3699 110.725 81.5263 108.713 80.0413 107.224C78.5554 105.734 76.5459 104.886 74.4427 104.86H74.4418Z", fill: "#75301C" }, void 0), jsx("path", { d: "M65.8683 90.0547H30.1299C28.9557 90.0547 27.8292 90.5209 26.9992 91.351C26.1692 92.1811 25.7029 93.3076 25.7029 94.4817V104.925H70.2955V94.4412C70.2802 93.276 69.8068 92.163 68.9794 91.3427C68.1511 90.5216 67.0343 90.0601 65.8683 90.0547Z", fill: "#75301C" }, void 0), jsx("path", { d: "M88.9303 7.28211H80.4787V2.85505C80.4248 1.78331 79.539 0.942463 78.4664 0.94336H17.4534C16.3422 0.94336 15.4411 1.84441 15.4411 2.95566V7.28199H6.98946C5.04275 7.40147 3.22083 8.28005 1.91479 9.72918C0.609485 11.1773 -0.0759402 13.0809 0.00669058 15.0295C0.010284 22.457 1.48717 29.8101 4.3528 36.6616C7.18612 43.4836 11.4874 49.5987 16.9503 54.571C18.623 56.1072 20.4052 57.5193 22.283 58.7969C22.4842 59.0385 22.645 59.2802 22.8462 59.5012C23.1885 59.9036 23.5505 60.2863 23.9332 60.6888C25.2538 62.0741 26.6948 63.3407 28.2391 64.4717C34.3372 68.9491 37.9395 76.063 37.9386 83.629V90.1691H58.0616V83.629C58.0535 76.0964 61.6136 69.0048 67.6604 64.5122C69.2029 63.3857 70.6375 62.119 71.9465 60.7284C72.3292 60.3259 72.711 59.9234 73.0533 59.521C73.2545 59.3 73.436 59.0377 73.6165 58.8167C75.4941 57.5392 77.2764 56.1271 78.9492 54.5908C84.4059 49.613 88.7063 43.4997 91.5467 36.6814C94.4492 29.8306 95.9611 22.4704 95.9935 15.0295C96.0753 13.0675 95.3791 11.1532 94.0567 9.70229C92.7334 8.25056 90.8908 7.3809 88.9307 7.28224L88.9303 7.28211ZM9.30304 34.5689C6.72568 28.3774 5.39871 21.7369 5.39871 15.0298C5.39871 13.7622 6.16321 12.6555 7.06874 12.6555H15.5204V39.8204C15.5357 41.8489 15.7513 43.871 16.1645 45.8573C13.3365 42.4509 11.0241 38.6471 9.30292 34.5677L9.30304 34.5689ZM86.695 34.5689C84.9755 38.6618 82.6632 42.479 79.8334 45.8989C80.2484 43.9127 80.4649 41.8904 80.4775 39.862V12.6558H88.9291C89.8347 12.6558 90.5992 13.7625 90.5992 15.03C90.5992 21.7371 89.2723 28.3777 86.6948 34.5691L86.695 34.5689Z", fill: "#FF9D00" }, void 0)] }), void 0)),
|
|
733
873
|
},
|
|
734
874
|
};
|
|
735
|
-
var Trophy = function (props) { return (jsx(Wrapper$
|
|
875
|
+
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
736
876
|
|
|
737
|
-
var Container$
|
|
877
|
+
var Container$7 = styled.div(templateObject_1$k || (templateObject_1$k = __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) {
|
|
738
878
|
var type = _a.type;
|
|
739
879
|
switch (type) {
|
|
740
880
|
case "success":
|
|
@@ -751,13 +891,11 @@ var Container$3 = styled.div(templateObject_1$f || (templateObject_1$f = __makeT
|
|
|
751
891
|
return theme.colors.red.base;
|
|
752
892
|
}
|
|
753
893
|
});
|
|
754
|
-
var templateObject_1$
|
|
894
|
+
var templateObject_1$k;
|
|
755
895
|
|
|
756
|
-
var Alert = function (props) {
|
|
757
|
-
return (jsxs(Container$3, __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));
|
|
758
|
-
};
|
|
896
|
+
var Alert = function (props) { return (jsxs(Container$7, __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)); };
|
|
759
897
|
|
|
760
|
-
var StyledCard = styled.div(templateObject_1$
|
|
898
|
+
var StyledCard = styled.div(templateObject_1$j || (templateObject_1$j = __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) {
|
|
761
899
|
var ellipse = _a.ellipse;
|
|
762
900
|
return ellipse
|
|
763
901
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -766,135 +904,48 @@ var StyledCard = styled.div(templateObject_1$e || (templateObject_1$e = __makeTe
|
|
|
766
904
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
767
905
|
: "";
|
|
768
906
|
});
|
|
769
|
-
var Ellipse = styled.div(templateObject_2$
|
|
907
|
+
var Ellipse = styled.div(templateObject_2$e || (templateObject_2$e = __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) {
|
|
770
908
|
var color = _a.color;
|
|
771
909
|
return color ? theme.colors[color].light : "";
|
|
772
910
|
});
|
|
773
|
-
var Content = styled.div(templateObject_3$
|
|
774
|
-
var templateObject_1$
|
|
911
|
+
var Content = styled.div(templateObject_3$5 || (templateObject_3$5 = __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"])));
|
|
912
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$5;
|
|
775
913
|
|
|
776
914
|
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)); };
|
|
777
915
|
|
|
778
|
-
var
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
var StyledInputNumber = styled.input(templateObject_2$8 || (templateObject_2$8 = __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) {
|
|
783
|
-
var disabled = _a.disabled;
|
|
784
|
-
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
785
|
-
}, function (_a) {
|
|
786
|
-
var disabled = _a.disabled;
|
|
787
|
-
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
788
|
-
}, function (_a) {
|
|
789
|
-
var disabled = _a.disabled;
|
|
790
|
-
return (disabled ? "not-allowed" : "pointer");
|
|
791
|
-
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
792
|
-
var disabled = _a.disabled;
|
|
793
|
-
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
794
|
-
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
795
|
-
var templateObject_1$d, templateObject_2$8;
|
|
796
|
-
|
|
797
|
-
var Number = function (props) {
|
|
798
|
-
var ref = useRef(null);
|
|
799
|
-
var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
800
|
-
var onChange = function (e) {
|
|
801
|
-
if (!props.disabled) {
|
|
802
|
-
var value_1 = parseInt(e.target.value);
|
|
803
|
-
setValue(value_1);
|
|
804
|
-
if (!!props.onChange)
|
|
805
|
-
props.onChange(e.target.value);
|
|
806
|
-
}
|
|
807
|
-
};
|
|
808
|
-
var decrease = function () {
|
|
809
|
-
var _a;
|
|
810
|
-
var newValue = value - 1;
|
|
811
|
-
if (props.min && newValue < props.min) ;
|
|
812
|
-
else {
|
|
813
|
-
setValue(newValue);
|
|
814
|
-
if (!!props.onChange)
|
|
815
|
-
props.onChange("".concat(newValue));
|
|
816
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
817
|
-
}
|
|
818
|
-
};
|
|
819
|
-
var increase = function () {
|
|
820
|
-
var _a;
|
|
821
|
-
var newValue = value + 1;
|
|
822
|
-
if (props.max && newValue > props.max) ;
|
|
823
|
-
else {
|
|
824
|
-
setValue(newValue);
|
|
825
|
-
if (!!props.onChange)
|
|
826
|
-
props.onChange("".concat(newValue));
|
|
827
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
828
|
-
}
|
|
829
|
-
};
|
|
830
|
-
return (jsxs(Wrapper$3, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1 }, 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 }, void 0)] }), void 0));
|
|
831
|
-
};
|
|
832
|
-
|
|
833
|
-
var FeedbackColors = {
|
|
834
|
-
success: theme.colors.green.base,
|
|
835
|
-
error: theme.colors.red.base,
|
|
836
|
-
};
|
|
837
|
-
|
|
838
|
-
var FieldWrapper = styled.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) {
|
|
839
|
-
var inline = _a.inline;
|
|
840
|
-
return (inline ? "row" : "column");
|
|
841
|
-
}, function (_a) {
|
|
842
|
-
var inline = _a.inline;
|
|
843
|
-
return (inline ? "center" : "flex-start");
|
|
844
|
-
}, function (_a) {
|
|
845
|
-
var feedbackStatus = _a.feedbackStatus;
|
|
846
|
-
return FeedbackColors[feedbackStatus];
|
|
847
|
-
});
|
|
848
|
-
var Label = styled(StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
916
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
917
|
+
var CheckboxContainer = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
918
|
+
var CheckboxWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
919
|
+
var Label$5 = styled(StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __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) {
|
|
849
920
|
var weight = _a.weight;
|
|
850
921
|
return weight || 500;
|
|
851
922
|
}, theme.colors.darkGray.base);
|
|
852
|
-
var
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
var
|
|
857
|
-
|
|
858
|
-
var
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
};
|
|
864
|
-
if (!status)
|
|
865
|
-
return null;
|
|
866
|
-
return (jsxs(FeedbackWrapper, __assign({ status: status }, { children: [jsx(Icon, { type: icons[status], size: "small" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsx(Paragraph, __assign({ size: "small" }, { children: message }), void 0)] }), void 0));
|
|
867
|
-
};
|
|
868
|
-
var FormField = function (props) {
|
|
869
|
-
var onChange = function (value) { return props.onChange(props.name, value); };
|
|
870
|
-
switch (props.type) {
|
|
871
|
-
case "text":
|
|
872
|
-
case "password": {
|
|
873
|
-
var fields = {
|
|
874
|
-
text: Input,
|
|
875
|
-
password: Input.Password,
|
|
876
|
-
};
|
|
877
|
-
var Field = fields[props.type];
|
|
878
|
-
return (jsxs(FieldWrapper, __assign({ feedbackStatus: props.feedback.status }, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Field, { initialValue: props.initialValue, autoComplete: props.autocomplete, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: props.onBlur }, void 0), jsx(Feedback, __assign({}, props.feedback), void 0)] }), void 0));
|
|
879
|
-
}
|
|
880
|
-
case "number": {
|
|
881
|
-
return (jsxs(FieldWrapper, __assign({ feedbackStatus: props.feedback.status }, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autoComplete: props.autocomplete, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: props.onBlur }, void 0), jsx(Feedback, __assign({}, props.feedback), void 0)] }), void 0));
|
|
882
|
-
}
|
|
883
|
-
case "checkbox":
|
|
884
|
-
case "radio": {
|
|
885
|
-
var fields = {
|
|
886
|
-
checkbox: Checkbox,
|
|
887
|
-
radio: Radio,
|
|
888
|
-
};
|
|
889
|
-
var Field = fields[props.type];
|
|
890
|
-
return (jsxs(FieldWrapper, __assign({ inline: true, feedbackStatus: props.feedback.status }, { children: [jsx(Field, { initialValue: props.initialValue, autoFocus: props.autoFocus, onChange: onChange, onBlur: props.onBlur, id: props.name }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Label, __assign({ as: "label", htmlFor: props.name, weight: 400 }, { children: props.label }), void 0), jsx(Feedback, __assign({}, props.feedback), void 0)] }), void 0));
|
|
923
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$4, templateObject_4$3;
|
|
924
|
+
|
|
925
|
+
var Checkboxes = function (props) {
|
|
926
|
+
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
927
|
+
var onChange = function (value) {
|
|
928
|
+
if (props.onChange) {
|
|
929
|
+
var newValues = values.includes(value)
|
|
930
|
+
? values.filter(function (v) { return v !== value; })
|
|
931
|
+
: __spreadArray(__spreadArray([], values, true), [value], false);
|
|
932
|
+
setValues(newValues);
|
|
933
|
+
props.onChange(props.name, newValues);
|
|
891
934
|
}
|
|
892
|
-
}
|
|
935
|
+
};
|
|
936
|
+
var onBlur = function () {
|
|
937
|
+
if (props.onBlur)
|
|
938
|
+
props.onBlur(props.name);
|
|
939
|
+
};
|
|
940
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$5, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
941
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
942
|
+
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$5, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
943
|
+
}) }, void 0)] }, void 0));
|
|
893
944
|
};
|
|
894
945
|
|
|
895
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
896
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
897
|
-
var templateObject_1$
|
|
946
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
947
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
948
|
+
var templateObject_1$h, templateObject_2$c;
|
|
898
949
|
|
|
899
950
|
var IconButton = function (props) {
|
|
900
951
|
if (props.color === "white")
|
|
@@ -902,15 +953,32 @@ var IconButton = function (props) {
|
|
|
902
953
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
903
954
|
};
|
|
904
955
|
|
|
905
|
-
var
|
|
956
|
+
var Container$6 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
957
|
+
var Label$4 = styled(StyledParagraph)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
958
|
+
var templateObject_1$g, templateObject_2$b;
|
|
959
|
+
|
|
960
|
+
var InputField = function (props) {
|
|
961
|
+
var onChange = function (value) {
|
|
962
|
+
if (props.onChange)
|
|
963
|
+
props.onChange(props.name, value);
|
|
964
|
+
};
|
|
965
|
+
var onBlur = function () {
|
|
966
|
+
if (props.onBlur)
|
|
967
|
+
props.onBlur(props.name);
|
|
968
|
+
};
|
|
969
|
+
var Field = props.isPassword ? Input.Password : Input;
|
|
970
|
+
return (jsxs(Container$6, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Field, { 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));
|
|
971
|
+
};
|
|
972
|
+
|
|
973
|
+
var Wrapper$2 = styled.a(templateObject_1$f || (templateObject_1$f = __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) {
|
|
906
974
|
var chevron = _a.chevron;
|
|
907
975
|
return (chevron === "left" ? "4px" : "");
|
|
908
976
|
}, function (_a) {
|
|
909
977
|
var chevron = _a.chevron;
|
|
910
978
|
return (chevron === "right" ? "4px" : "");
|
|
911
979
|
});
|
|
912
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
913
|
-
var templateObject_1$
|
|
980
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$a || (templateObject_2$a = __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);
|
|
981
|
+
var templateObject_1$f, templateObject_2$a;
|
|
914
982
|
|
|
915
983
|
var Link = function (props) {
|
|
916
984
|
var onClick = function (e) {
|
|
@@ -919,27 +987,27 @@ var Link = function (props) {
|
|
|
919
987
|
props.onClick();
|
|
920
988
|
}
|
|
921
989
|
};
|
|
922
|
-
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron }, { children: [props.chevron === "left" &&
|
|
990
|
+
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));
|
|
923
991
|
};
|
|
924
992
|
|
|
925
|
-
var Container$
|
|
993
|
+
var Container$5 = styled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
926
994
|
var text = _a.text;
|
|
927
995
|
return (text ? "20px" : "");
|
|
928
996
|
});
|
|
929
|
-
var templateObject_1$
|
|
997
|
+
var templateObject_1$e;
|
|
930
998
|
|
|
931
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
999
|
+
var Loading = function (props) { return (jsxs(Container$5, __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)); };
|
|
932
1000
|
|
|
933
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
934
|
-
var templateObject_1$
|
|
1001
|
+
var Wrapper$1 = styled.div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
1002
|
+
var templateObject_1$d;
|
|
935
1003
|
|
|
936
1004
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "silver" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "bronze" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
937
1005
|
|
|
938
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1006
|
+
var NotificationContainer = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"], ["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"])), function (_a) {
|
|
939
1007
|
var contrast = _a.contrast;
|
|
940
1008
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
941
1009
|
});
|
|
942
|
-
var templateObject_1$
|
|
1010
|
+
var templateObject_1$c;
|
|
943
1011
|
|
|
944
1012
|
var Notification = function (props) {
|
|
945
1013
|
if (!props.isVisible)
|
|
@@ -947,6 +1015,22 @@ var Notification = function (props) {
|
|
|
947
1015
|
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.button && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Button, __assign({}, props.button, { size: "small" }), void 0)] }, void 0))] }), void 0));
|
|
948
1016
|
};
|
|
949
1017
|
|
|
1018
|
+
var Container$4 = styled.div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
1019
|
+
var Label$3 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1020
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1021
|
+
|
|
1022
|
+
var NumberField = function (props) {
|
|
1023
|
+
var onChange = function (value) {
|
|
1024
|
+
if (props.onChange)
|
|
1025
|
+
props.onChange(props.name, value);
|
|
1026
|
+
};
|
|
1027
|
+
var onBlur = function () {
|
|
1028
|
+
if (props.onBlur)
|
|
1029
|
+
props.onBlur(props.name);
|
|
1030
|
+
};
|
|
1031
|
+
return (jsxs(Container$4, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autocomplete: props.autocomplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1032
|
+
};
|
|
1033
|
+
|
|
950
1034
|
var generateRandomString = function (length) {
|
|
951
1035
|
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
952
1036
|
var charsLength = chars.length;
|
|
@@ -957,7 +1041,7 @@ var generateRandomString = function (length) {
|
|
|
957
1041
|
return string;
|
|
958
1042
|
};
|
|
959
1043
|
|
|
960
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1044
|
+
var PopupContainer = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
961
1045
|
var isVisible = _a.isVisible;
|
|
962
1046
|
return (isVisible ? "100%" : "0%");
|
|
963
1047
|
}, function (_a) {
|
|
@@ -970,7 +1054,7 @@ var PopupContainer = styled.div(templateObject_1$6 || (templateObject_1$6 = __ma
|
|
|
970
1054
|
var contrast = _a.contrast;
|
|
971
1055
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
972
1056
|
});
|
|
973
|
-
var templateObject_1$
|
|
1057
|
+
var templateObject_1$a;
|
|
974
1058
|
|
|
975
1059
|
var Popup = function (props) {
|
|
976
1060
|
var popupRef = useRef(null);
|
|
@@ -1006,23 +1090,82 @@ var Popup = function (props) {
|
|
|
1006
1090
|
return (jsxs(Fragment, { children: [children, jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
1007
1091
|
};
|
|
1008
1092
|
|
|
1009
|
-
var Wrapper = styled.div(templateObject_1$
|
|
1010
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1093
|
+
var Wrapper = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1094
|
+
var StyledProgressBar = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
1011
1095
|
var showInfo = _a.showInfo;
|
|
1012
1096
|
return (showInfo ? "10px" : "");
|
|
1013
1097
|
});
|
|
1014
|
-
var Indicator = styled.div(templateObject_3$
|
|
1098
|
+
var Indicator = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"], ["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"])), function (_a) {
|
|
1015
1099
|
var percent = _a.percent;
|
|
1016
1100
|
return "calc(".concat(percent, "% - 6px)");
|
|
1017
1101
|
}, function (_a) {
|
|
1018
1102
|
var color = _a.color;
|
|
1019
1103
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1020
1104
|
});
|
|
1021
|
-
var templateObject_1$
|
|
1105
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$3;
|
|
1022
1106
|
|
|
1023
1107
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
|
|
1024
1108
|
|
|
1025
|
-
var
|
|
1109
|
+
var Fieldset = styled.fieldset(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1110
|
+
var RadioContainer = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1111
|
+
var RadioWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
1112
|
+
var Label$2 = styled(StyledParagraph)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
1113
|
+
var weight = _a.weight;
|
|
1114
|
+
return weight || 500;
|
|
1115
|
+
}, theme.colors.darkGray.base);
|
|
1116
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$2, templateObject_4$2;
|
|
1117
|
+
|
|
1118
|
+
var RadioGroup = function (props) {
|
|
1119
|
+
var onChange = function (value) {
|
|
1120
|
+
if (props.onChange)
|
|
1121
|
+
props.onChange(props.name, value);
|
|
1122
|
+
};
|
|
1123
|
+
var onBlur = function () {
|
|
1124
|
+
if (props.onBlur)
|
|
1125
|
+
props.onBlur(props.name);
|
|
1126
|
+
};
|
|
1127
|
+
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$2, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1128
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
1129
|
+
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultChecked: props.initialValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
1130
|
+
}) }, void 0)] }, void 0));
|
|
1131
|
+
};
|
|
1132
|
+
|
|
1133
|
+
var Container$3 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1134
|
+
var Label$1 = styled(StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1135
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1136
|
+
|
|
1137
|
+
var SelectField = function (props) {
|
|
1138
|
+
var onChange = function (value) {
|
|
1139
|
+
if (props.onChange)
|
|
1140
|
+
props.onChange(props.name, value);
|
|
1141
|
+
};
|
|
1142
|
+
var onBlur = function () {
|
|
1143
|
+
if (props.onBlur)
|
|
1144
|
+
props.onBlur(props.name);
|
|
1145
|
+
};
|
|
1146
|
+
return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, initialValue: props.initialValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a) {
|
|
1147
|
+
var value = _a.value, label = _a.label;
|
|
1148
|
+
return (jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1149
|
+
}) }), void 0)] }, void 0));
|
|
1150
|
+
};
|
|
1151
|
+
|
|
1152
|
+
var Container$2 = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1153
|
+
var Label = styled(StyledParagraph)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1154
|
+
var templateObject_1$6, templateObject_2$5;
|
|
1155
|
+
|
|
1156
|
+
var ToggleField = function (props) {
|
|
1157
|
+
var onChange = function (value) {
|
|
1158
|
+
if (props.onChange)
|
|
1159
|
+
props.onChange(props.name, value);
|
|
1160
|
+
};
|
|
1161
|
+
var onBlur = function () {
|
|
1162
|
+
if (props.onBlur)
|
|
1163
|
+
props.onBlur(props.name);
|
|
1164
|
+
};
|
|
1165
|
+
return (jsxs(Container$2, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultChecked: props.initialValue, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1166
|
+
};
|
|
1167
|
+
|
|
1168
|
+
var TooltipContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
1026
1169
|
var isVisible = _a.isVisible;
|
|
1027
1170
|
return (isVisible ? "100%" : "0%");
|
|
1028
1171
|
}, function (_a) {
|
|
@@ -1032,7 +1175,7 @@ var TooltipContainer = styled.div(templateObject_1$4 || (templateObject_1$4 = __
|
|
|
1032
1175
|
var x = _a.x;
|
|
1033
1176
|
return (x ? "".concat(x, "px") : "");
|
|
1034
1177
|
});
|
|
1035
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
1178
|
+
var TooltipTitle = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
1036
1179
|
var color = _a.color;
|
|
1037
1180
|
switch (color) {
|
|
1038
1181
|
default:
|
|
@@ -1042,7 +1185,7 @@ var TooltipTitle = styled.div(templateObject_2$3 || (templateObject_2$3 = __make
|
|
|
1042
1185
|
return theme.colors.lightGray.dark;
|
|
1043
1186
|
}
|
|
1044
1187
|
});
|
|
1045
|
-
var templateObject_1$
|
|
1188
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1046
1189
|
|
|
1047
1190
|
var Tooltip = function (props) {
|
|
1048
1191
|
var tooltipRef = useRef(null);
|
|
@@ -1076,28 +1219,67 @@ var Tooltip = function (props) {
|
|
|
1076
1219
|
theme.colors.lightGray.light }, void 0) }), void 0), jsx(TooltipTitle, __assign({ color: props.color }, { children: jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0) }), void 0)] }), void 0)] }, void 0));
|
|
1077
1220
|
};
|
|
1078
1221
|
|
|
1079
|
-
var
|
|
1080
|
-
|
|
1222
|
+
var FeedbackColors = {
|
|
1223
|
+
success: theme.colors.green.base,
|
|
1224
|
+
error: theme.colors.red.base,
|
|
1225
|
+
};
|
|
1226
|
+
var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 30px;\n }\n"], ["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 30px;\n }\n"])), function (_a) {
|
|
1227
|
+
var status = _a.status;
|
|
1228
|
+
return FeedbackColors[status];
|
|
1229
|
+
});
|
|
1230
|
+
var FeedbackWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 5px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n margin-right: 5px;\n }\n\n svg {\n fill: ", ";\n }\n p {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n margin-top: 5px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n margin-right: 5px;\n }\n\n svg {\n fill: ", ";\n }\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
1231
|
+
var status = _a.status;
|
|
1232
|
+
return FeedbackColors[status];
|
|
1233
|
+
}, function (_a) {
|
|
1234
|
+
var status = _a.status;
|
|
1235
|
+
return FeedbackColors[status];
|
|
1236
|
+
});
|
|
1237
|
+
var templateObject_1$4, templateObject_2$3;
|
|
1238
|
+
|
|
1239
|
+
var WithValidation = function (_a) {
|
|
1240
|
+
var status = _a.status, message = _a.message, children = _a.children;
|
|
1241
|
+
if (!message)
|
|
1242
|
+
return jsx(FieldWrapper, __assign({ status: status }, { children: children }), void 0);
|
|
1243
|
+
var icons = {
|
|
1244
|
+
success: "check",
|
|
1245
|
+
error: "warning",
|
|
1246
|
+
};
|
|
1247
|
+
return (jsxs(FieldWrapper, __assign({ status: status }, { children: [children, jsxs(FeedbackWrapper, __assign({ status: status }, { children: [jsx(Icon, { type: icons[status], size: "small" }, void 0), jsx(Paragraph, __assign({ size: "small" }, { children: message }), void 0)] }), void 0)] }), void 0));
|
|
1248
|
+
};
|
|
1249
|
+
|
|
1250
|
+
var FormWrapper = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
1251
|
+
var ButtonWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
1081
1252
|
var templateObject_1$3, templateObject_2$2;
|
|
1082
1253
|
|
|
1083
1254
|
var Form = function (props) {
|
|
1084
|
-
var
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
initialValues
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1255
|
+
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
1256
|
+
var _b = useState({}), feedback = _b[0], setFeedback = _b[1];
|
|
1257
|
+
useEffect(function () {
|
|
1258
|
+
var initialValues = {};
|
|
1259
|
+
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1260
|
+
var field = _a[_i];
|
|
1261
|
+
initialValues[field.name] = field.initialValue;
|
|
1262
|
+
}
|
|
1263
|
+
setValues(initialValues);
|
|
1264
|
+
}, []);
|
|
1091
1265
|
var onChangeFormField = function (fieldName, value) {
|
|
1092
|
-
var _a, _b;
|
|
1093
|
-
|
|
1094
|
-
|
|
1266
|
+
var _a, _b, _c;
|
|
1267
|
+
var feedbackForField = { status: undefined, message: undefined };
|
|
1268
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1269
|
+
if (field.validateTrigger && field.validateTrigger.includes("onChange")) {
|
|
1270
|
+
feedbackForField = field.validator(values[fieldName]);
|
|
1271
|
+
}
|
|
1272
|
+
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1273
|
+
var newValues = __assign(__assign({}, values), (_b = {}, _b[fieldName] = value, _b));
|
|
1274
|
+
setValues(newValues);
|
|
1275
|
+
if (props.onChangeFields)
|
|
1276
|
+
props.onChangeFields(newValues, __assign(__assign({}, values), (_c = {}, _c[fieldName] = value, _c)));
|
|
1095
1277
|
};
|
|
1096
|
-
var onBlurFormField = function (fieldName
|
|
1278
|
+
var onBlurFormField = function (fieldName) {
|
|
1097
1279
|
var _a;
|
|
1098
|
-
var field = props.fields.find(function (field) { return field.name === fieldName
|
|
1099
|
-
if (field && field.
|
|
1100
|
-
var feedbackForField = field.validator(
|
|
1280
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1281
|
+
if (field.validateTrigger && field.validateTrigger.includes("onBlur")) {
|
|
1282
|
+
var feedbackForField = field.validator(values[fieldName]);
|
|
1101
1283
|
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1102
1284
|
}
|
|
1103
1285
|
};
|
|
@@ -1113,10 +1295,38 @@ var Form = function (props) {
|
|
|
1113
1295
|
}
|
|
1114
1296
|
}
|
|
1115
1297
|
setFeedback(feedback);
|
|
1116
|
-
if (isValid)
|
|
1298
|
+
if (isValid && !!props.onSubmit) {
|
|
1117
1299
|
props.onSubmit(values);
|
|
1300
|
+
}
|
|
1301
|
+
else if (!!props.onError) {
|
|
1302
|
+
props.onError(feedback);
|
|
1303
|
+
}
|
|
1118
1304
|
};
|
|
1119
|
-
return (jsxs(Fragment, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 15 }, void 0)] }, void 0)),
|
|
1305
|
+
return (jsxs(Fragment, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 15 }, void 0)] }, void 0)), props.description && (jsxs(Fragment, { children: [jsx(Paragraph, __assign({ color: "darkGray", weight: "regular" }, { children: props.description }), void 0), jsx(Spacer, { vertical: 20 }, void 0)] }, void 0)), jsx(FormWrapper, { children: props.fields.map(function (field, index) {
|
|
1306
|
+
switch (field.type) {
|
|
1307
|
+
case "text":
|
|
1308
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1309
|
+
jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1310
|
+
case "password":
|
|
1311
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1312
|
+
jsx(InputField, __assign({ isPassword: true }, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1313
|
+
case "radio":
|
|
1314
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1315
|
+
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1316
|
+
case "number":
|
|
1317
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1318
|
+
jsx(NumberField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1319
|
+
case "checkbox":
|
|
1320
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1321
|
+
jsx(Checkboxes, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1322
|
+
case "select":
|
|
1323
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1324
|
+
jsx(SelectField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1325
|
+
case "toggle":
|
|
1326
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1327
|
+
jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1328
|
+
}
|
|
1329
|
+
}) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1120
1330
|
};
|
|
1121
1331
|
|
|
1122
1332
|
var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width: 30px;\n max-width: 30px;\n min-height: 30px;\n max-height: 30px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n border-color: ", ";\n border-width: ", ";\n border-style: solid;\n box-sizing: border-box;\n\n h6 {\n color: ", ";\n line-height: 12px;\n text-transform: uppercase;\n }\n"], ["\n min-width: 30px;\n max-width: 30px;\n min-height: 30px;\n max-height: 30px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n border-color: ", ";\n border-width: ", ";\n border-style: solid;\n box-sizing: border-box;\n\n h6 {\n color: ", ";\n line-height: 12px;\n text-transform: uppercase;\n }\n"])), function (_a) {
|
|
@@ -1175,7 +1385,7 @@ var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTempl
|
|
|
1175
1385
|
var width = _a.width;
|
|
1176
1386
|
return (width ? "".concat(width, "px") : "720px");
|
|
1177
1387
|
});
|
|
1178
|
-
var CloseIconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -
|
|
1388
|
+
var CloseIconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -10px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -10px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"])), theme.colors.darkGray.base);
|
|
1179
1389
|
var ChildrenWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
1180
1390
|
var FooterContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
1181
1391
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1193,5 +1403,5 @@ var Modal = function (props) {
|
|
|
1193
1403
|
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));
|
|
1194
1404
|
};
|
|
1195
1405
|
|
|
1196
|
-
export { Alert, Button, Card, Checkbox, Flag, Form,
|
|
1406
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1197
1407
|
//# sourceMappingURL=index.es.js.map
|