@typeolymp/ui-components 1.0.1 → 1.2.2
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/Icon/index.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 +431 -219
- package/build/index.es.js.map +1 -1
- package/build/index.js +439 -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) {
|
|
@@ -394,11 +416,13 @@ var Wrapper$8 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTem
|
|
|
394
416
|
return theme.colors.orange.base;
|
|
395
417
|
case "red":
|
|
396
418
|
return theme.colors.red.base;
|
|
419
|
+
case "purple":
|
|
420
|
+
return theme.colors.purple.base;
|
|
397
421
|
case "white":
|
|
398
422
|
return theme.colors.lightGray.light;
|
|
399
423
|
}
|
|
400
424
|
});
|
|
401
|
-
var templateObject_1$
|
|
425
|
+
var templateObject_1$w;
|
|
402
426
|
|
|
403
427
|
var icons = {
|
|
404
428
|
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 +445,7 @@ var icons = {
|
|
|
421
445
|
};
|
|
422
446
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
423
447
|
|
|
424
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
448
|
+
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
449
|
var size = _a.size;
|
|
426
450
|
switch (size) {
|
|
427
451
|
default:
|
|
@@ -433,7 +457,7 @@ var Wrapper$7 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTem
|
|
|
433
457
|
return "118px";
|
|
434
458
|
}
|
|
435
459
|
});
|
|
436
|
-
var templateObject_1$
|
|
460
|
+
var templateObject_1$v;
|
|
437
461
|
|
|
438
462
|
var illustrations = {
|
|
439
463
|
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 +472,11 @@ var illustrations = {
|
|
|
448
472
|
};
|
|
449
473
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
450
474
|
|
|
451
|
-
var PasswordInputWrapper = styled.div(templateObject_1$
|
|
475
|
+
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
476
|
var disabled = _a.disabled;
|
|
453
477
|
return (disabled ? "not-allowed" : "pointer");
|
|
454
478
|
});
|
|
455
|
-
var StyledInput = styled.input(templateObject_2$
|
|
479
|
+
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
480
|
var disabled = _a.disabled;
|
|
457
481
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
458
482
|
}, function (_a) {
|
|
@@ -465,7 +489,7 @@ var StyledInput = styled.input(templateObject_2$c || (templateObject_2$c = __mak
|
|
|
465
489
|
var disabled = _a.disabled;
|
|
466
490
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
467
491
|
}, 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$
|
|
492
|
+
var templateObject_1$u, templateObject_2$h;
|
|
469
493
|
|
|
470
494
|
var PasswordInput = function (props) {
|
|
471
495
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -501,7 +525,7 @@ Input.Password = PasswordInput;
|
|
|
501
525
|
|
|
502
526
|
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
527
|
|
|
504
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
528
|
+
var Wrapper$6 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
505
529
|
var size = _a.size;
|
|
506
530
|
switch (size) {
|
|
507
531
|
default:
|
|
@@ -511,7 +535,7 @@ var Wrapper$6 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTem
|
|
|
511
535
|
return "116px";
|
|
512
536
|
}
|
|
513
537
|
});
|
|
514
|
-
var templateObject_1$
|
|
538
|
+
var templateObject_1$t;
|
|
515
539
|
|
|
516
540
|
var medals = {
|
|
517
541
|
small: {
|
|
@@ -527,7 +551,66 @@ var medals = {
|
|
|
527
551
|
};
|
|
528
552
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
529
553
|
|
|
530
|
-
var
|
|
554
|
+
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) {
|
|
555
|
+
var disabled = _a.disabled;
|
|
556
|
+
return (disabled ? "49.5px" : "");
|
|
557
|
+
});
|
|
558
|
+
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) {
|
|
559
|
+
var disabled = _a.disabled;
|
|
560
|
+
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
561
|
+
}, function (_a) {
|
|
562
|
+
var disabled = _a.disabled;
|
|
563
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
564
|
+
}, function (_a) {
|
|
565
|
+
var disabled = _a.disabled;
|
|
566
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
567
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
568
|
+
var disabled = _a.disabled;
|
|
569
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
570
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
571
|
+
var templateObject_1$s, templateObject_2$g;
|
|
572
|
+
|
|
573
|
+
var Number = function (props) {
|
|
574
|
+
var ref = useRef(null);
|
|
575
|
+
var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
576
|
+
var onChange = function (e) {
|
|
577
|
+
if (!props.disabled) {
|
|
578
|
+
var value_1 = parseInt(e.target.value);
|
|
579
|
+
setValue(value_1);
|
|
580
|
+
if (!!props.onChange)
|
|
581
|
+
props.onChange(e.target.value);
|
|
582
|
+
}
|
|
583
|
+
};
|
|
584
|
+
var decrease = function () {
|
|
585
|
+
var _a;
|
|
586
|
+
var newValue = value - 1;
|
|
587
|
+
if (props.min && newValue < props.min) {
|
|
588
|
+
setValue(props.min);
|
|
589
|
+
}
|
|
590
|
+
else {
|
|
591
|
+
setValue(newValue);
|
|
592
|
+
if (!!props.onChange)
|
|
593
|
+
props.onChange("".concat(newValue));
|
|
594
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
595
|
+
}
|
|
596
|
+
};
|
|
597
|
+
var increase = function () {
|
|
598
|
+
var _a;
|
|
599
|
+
var newValue = value + 1;
|
|
600
|
+
if (props.max && newValue > props.max) {
|
|
601
|
+
setValue(props.max);
|
|
602
|
+
}
|
|
603
|
+
else {
|
|
604
|
+
setValue(newValue);
|
|
605
|
+
if (!!props.onChange)
|
|
606
|
+
props.onChange("".concat(newValue));
|
|
607
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
608
|
+
}
|
|
609
|
+
};
|
|
610
|
+
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));
|
|
611
|
+
};
|
|
612
|
+
|
|
613
|
+
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
614
|
var size = _a.size;
|
|
532
615
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
533
616
|
}, function (_a) {
|
|
@@ -559,11 +642,11 @@ var StyledParagraph = styled.p(templateObject_1$l || (templateObject_1$l = __mak
|
|
|
559
642
|
var align = _a.align;
|
|
560
643
|
return align;
|
|
561
644
|
});
|
|
562
|
-
var templateObject_1$
|
|
645
|
+
var templateObject_1$r;
|
|
563
646
|
|
|
564
647
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
565
648
|
|
|
566
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
649
|
+
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
650
|
var checked = _a.checked, disabled = _a.disabled;
|
|
568
651
|
if (disabled)
|
|
569
652
|
return theme.colors.lightGray.darker;
|
|
@@ -583,42 +666,48 @@ var StyledRadio = styled.div(templateObject_1$k || (templateObject_1$k = __makeT
|
|
|
583
666
|
if (checked)
|
|
584
667
|
return theme.colors.green.base;
|
|
585
668
|
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) {
|
|
669
|
+
}, function (_a) {
|
|
588
670
|
var checked = _a.checked, disabled = _a.disabled;
|
|
589
671
|
if (disabled)
|
|
590
672
|
return theme.colors.lightGray.darker;
|
|
591
673
|
if (checked)
|
|
592
674
|
return theme.colors.green.base;
|
|
593
675
|
return "";
|
|
594
|
-
});
|
|
595
|
-
var templateObject_1$
|
|
676
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
677
|
+
var templateObject_1$q;
|
|
596
678
|
|
|
597
679
|
var Radio = function (props) {
|
|
598
|
-
var
|
|
599
|
-
var
|
|
680
|
+
var _a;
|
|
681
|
+
var wrapperRef = useRef(null);
|
|
682
|
+
var inputRef = useRef(null);
|
|
683
|
+
var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
600
684
|
useEffect(function () {
|
|
601
|
-
var _a;
|
|
602
685
|
if (props.autoFocus)
|
|
603
|
-
|
|
686
|
+
wrapperRef.current.focus();
|
|
687
|
+
if (props.defaultChecked)
|
|
688
|
+
inputRef.current.checked = true;
|
|
604
689
|
}, []);
|
|
690
|
+
useEffect(function () {
|
|
691
|
+
setChecked(inputRef.current.checked);
|
|
692
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
605
693
|
var toggle = function () {
|
|
606
694
|
var _a;
|
|
607
695
|
if (!props.disabled) {
|
|
608
|
-
|
|
609
|
-
|
|
696
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
697
|
+
inputRef.current.checked = true;
|
|
698
|
+
setChecked(true);
|
|
610
699
|
if (!!props.onChange)
|
|
611
|
-
props.onChange(
|
|
700
|
+
props.onChange(props.value);
|
|
612
701
|
}
|
|
613
702
|
};
|
|
614
|
-
return (
|
|
703
|
+
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
704
|
};
|
|
616
705
|
|
|
617
|
-
var Wrapper$
|
|
706
|
+
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
707
|
var disabled = _a.disabled;
|
|
619
708
|
return (disabled ? "not-allowed" : "pointer");
|
|
620
709
|
});
|
|
621
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
710
|
+
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
711
|
var disabled = _a.disabled;
|
|
623
712
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
624
713
|
}, function (_a) {
|
|
@@ -631,31 +720,35 @@ var StyledSelect = styled.select(templateObject_2$a || (templateObject_2$a = __m
|
|
|
631
720
|
var isChanged = _a.isChanged;
|
|
632
721
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
633
722
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
634
|
-
var templateObject_1$
|
|
723
|
+
var templateObject_1$p, templateObject_2$f;
|
|
635
724
|
|
|
636
725
|
var Select = function (props) {
|
|
637
|
-
var _a = useState(
|
|
638
|
-
var
|
|
726
|
+
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
727
|
+
var _b = useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
728
|
+
var onChange = function (e) {
|
|
639
729
|
if (!props.disabled) {
|
|
730
|
+
var value_1 = e.target.value;
|
|
731
|
+
setValue(value_1);
|
|
640
732
|
setIsChanged(true);
|
|
641
|
-
props.onChange
|
|
733
|
+
if (!!props.onChange)
|
|
734
|
+
props.onChange(value_1);
|
|
642
735
|
}
|
|
643
736
|
};
|
|
644
|
-
return (jsxs(Wrapper$
|
|
737
|
+
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
738
|
};
|
|
646
739
|
|
|
647
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
740
|
+
var StyledSpacer = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
648
741
|
var horizontal = _a.horizontal;
|
|
649
742
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
650
743
|
}, function (_a) {
|
|
651
744
|
var vertical = _a.vertical;
|
|
652
745
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
653
746
|
});
|
|
654
|
-
var templateObject_1$
|
|
747
|
+
var templateObject_1$o;
|
|
655
748
|
|
|
656
749
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
657
750
|
|
|
658
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
751
|
+
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
752
|
var size = _a.size;
|
|
660
753
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
661
754
|
}, function (_a) {
|
|
@@ -683,11 +776,60 @@ var StyledSubheading = styled.p(templateObject_1$h || (templateObject_1$h = __ma
|
|
|
683
776
|
return theme.colors.darkGray.dark;
|
|
684
777
|
}
|
|
685
778
|
});
|
|
686
|
-
var templateObject_1$
|
|
779
|
+
var templateObject_1$n;
|
|
687
780
|
|
|
688
781
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
689
782
|
|
|
690
|
-
var
|
|
783
|
+
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) {
|
|
784
|
+
var disabled = _a.disabled;
|
|
785
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
786
|
+
}, function (_a) {
|
|
787
|
+
var checked = _a.checked, disabled = _a.disabled;
|
|
788
|
+
if (disabled)
|
|
789
|
+
return theme.colors.lightGray.dark;
|
|
790
|
+
return checked ? theme.colors.green.base : theme.colors.lightGray.darker;
|
|
791
|
+
}, function (_a) {
|
|
792
|
+
var checked = _a.checked;
|
|
793
|
+
return (checked ? "3px" : "");
|
|
794
|
+
}, function (_a) {
|
|
795
|
+
var checked = _a.checked;
|
|
796
|
+
return (checked ? "" : "3px");
|
|
797
|
+
}, function (_a) {
|
|
798
|
+
var disabled = _a.disabled;
|
|
799
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
800
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
801
|
+
var templateObject_1$m;
|
|
802
|
+
|
|
803
|
+
var Toggle = function (props) {
|
|
804
|
+
var _a;
|
|
805
|
+
var containerRef = useRef(null);
|
|
806
|
+
var inputRef = useRef(null);
|
|
807
|
+
var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
808
|
+
useEffect(function () {
|
|
809
|
+
var _a;
|
|
810
|
+
if (props.autoFocus)
|
|
811
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
812
|
+
if (props.defaultChecked)
|
|
813
|
+
inputRef.current.checked = true;
|
|
814
|
+
}, []);
|
|
815
|
+
useEffect(function () {
|
|
816
|
+
setChecked(inputRef.current.checked);
|
|
817
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
818
|
+
var toggle = function () {
|
|
819
|
+
var _a;
|
|
820
|
+
if (!props.disabled) {
|
|
821
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
822
|
+
var newValue = !inputRef.current.checked;
|
|
823
|
+
inputRef.current.checked = newValue;
|
|
824
|
+
setChecked(newValue);
|
|
825
|
+
if (!!props.onChange)
|
|
826
|
+
props.onChange(newValue);
|
|
827
|
+
}
|
|
828
|
+
};
|
|
829
|
+
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));
|
|
830
|
+
};
|
|
831
|
+
|
|
832
|
+
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
833
|
var level = _a.level;
|
|
692
834
|
switch (level) {
|
|
693
835
|
case 1:
|
|
@@ -698,7 +840,7 @@ var Wrapper$4 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTem
|
|
|
698
840
|
return "70px";
|
|
699
841
|
}
|
|
700
842
|
});
|
|
701
|
-
var templateObject_1$
|
|
843
|
+
var templateObject_1$l;
|
|
702
844
|
|
|
703
845
|
var trophies = {
|
|
704
846
|
1: {
|
|
@@ -732,9 +874,9 @@ var trophies = {
|
|
|
732
874
|
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
875
|
},
|
|
734
876
|
};
|
|
735
|
-
var Trophy = function (props) { return (jsx(Wrapper$
|
|
877
|
+
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
736
878
|
|
|
737
|
-
var Container$
|
|
879
|
+
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
880
|
var type = _a.type;
|
|
739
881
|
switch (type) {
|
|
740
882
|
case "success":
|
|
@@ -751,13 +893,11 @@ var Container$3 = styled.div(templateObject_1$f || (templateObject_1$f = __makeT
|
|
|
751
893
|
return theme.colors.red.base;
|
|
752
894
|
}
|
|
753
895
|
});
|
|
754
|
-
var templateObject_1$
|
|
896
|
+
var templateObject_1$k;
|
|
755
897
|
|
|
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
|
-
};
|
|
898
|
+
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
899
|
|
|
760
|
-
var StyledCard = styled.div(templateObject_1$
|
|
900
|
+
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
901
|
var ellipse = _a.ellipse;
|
|
762
902
|
return ellipse
|
|
763
903
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -766,135 +906,48 @@ var StyledCard = styled.div(templateObject_1$e || (templateObject_1$e = __makeTe
|
|
|
766
906
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
767
907
|
: "";
|
|
768
908
|
});
|
|
769
|
-
var Ellipse = styled.div(templateObject_2$
|
|
909
|
+
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
910
|
var color = _a.color;
|
|
771
911
|
return color ? theme.colors[color].light : "";
|
|
772
912
|
});
|
|
773
|
-
var Content = styled.div(templateObject_3$
|
|
774
|
-
var templateObject_1$
|
|
913
|
+
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"])));
|
|
914
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$5;
|
|
775
915
|
|
|
776
916
|
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
917
|
|
|
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) {
|
|
918
|
+
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"])));
|
|
919
|
+
var CheckboxContainer = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
920
|
+
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"])));
|
|
921
|
+
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
922
|
var weight = _a.weight;
|
|
850
923
|
return weight || 500;
|
|
851
924
|
}, 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));
|
|
925
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$4, templateObject_4$3;
|
|
926
|
+
|
|
927
|
+
var Checkboxes = function (props) {
|
|
928
|
+
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
929
|
+
var onChange = function (value) {
|
|
930
|
+
if (props.onChange) {
|
|
931
|
+
var newValues = values.includes(value)
|
|
932
|
+
? values.filter(function (v) { return v !== value; })
|
|
933
|
+
: __spreadArray(__spreadArray([], values, true), [value], false);
|
|
934
|
+
setValues(newValues);
|
|
935
|
+
props.onChange(props.name, newValues);
|
|
891
936
|
}
|
|
892
|
-
}
|
|
937
|
+
};
|
|
938
|
+
var onBlur = function () {
|
|
939
|
+
if (props.onBlur)
|
|
940
|
+
props.onBlur(props.name);
|
|
941
|
+
};
|
|
942
|
+
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) {
|
|
943
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
944
|
+
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));
|
|
945
|
+
}) }, void 0)] }, void 0));
|
|
893
946
|
};
|
|
894
947
|
|
|
895
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
896
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
897
|
-
var templateObject_1$
|
|
948
|
+
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"])));
|
|
949
|
+
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"])));
|
|
950
|
+
var templateObject_1$h, templateObject_2$c;
|
|
898
951
|
|
|
899
952
|
var IconButton = function (props) {
|
|
900
953
|
if (props.color === "white")
|
|
@@ -902,15 +955,32 @@ var IconButton = function (props) {
|
|
|
902
955
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
903
956
|
};
|
|
904
957
|
|
|
905
|
-
var
|
|
958
|
+
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"])));
|
|
959
|
+
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);
|
|
960
|
+
var templateObject_1$g, templateObject_2$b;
|
|
961
|
+
|
|
962
|
+
var InputField = function (props) {
|
|
963
|
+
var onChange = function (value) {
|
|
964
|
+
if (props.onChange)
|
|
965
|
+
props.onChange(props.name, value);
|
|
966
|
+
};
|
|
967
|
+
var onBlur = function () {
|
|
968
|
+
if (props.onBlur)
|
|
969
|
+
props.onBlur(props.name);
|
|
970
|
+
};
|
|
971
|
+
var Field = props.isPassword ? Input.Password : Input;
|
|
972
|
+
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));
|
|
973
|
+
};
|
|
974
|
+
|
|
975
|
+
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
976
|
var chevron = _a.chevron;
|
|
907
977
|
return (chevron === "left" ? "4px" : "");
|
|
908
978
|
}, function (_a) {
|
|
909
979
|
var chevron = _a.chevron;
|
|
910
980
|
return (chevron === "right" ? "4px" : "");
|
|
911
981
|
});
|
|
912
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
913
|
-
var templateObject_1$
|
|
982
|
+
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);
|
|
983
|
+
var templateObject_1$f, templateObject_2$a;
|
|
914
984
|
|
|
915
985
|
var Link = function (props) {
|
|
916
986
|
var onClick = function (e) {
|
|
@@ -919,27 +989,27 @@ var Link = function (props) {
|
|
|
919
989
|
props.onClick();
|
|
920
990
|
}
|
|
921
991
|
};
|
|
922
|
-
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron }, { children: [props.chevron === "left" &&
|
|
992
|
+
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
993
|
};
|
|
924
994
|
|
|
925
|
-
var Container$
|
|
995
|
+
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
996
|
var text = _a.text;
|
|
927
997
|
return (text ? "20px" : "");
|
|
928
998
|
});
|
|
929
|
-
var templateObject_1$
|
|
999
|
+
var templateObject_1$e;
|
|
930
1000
|
|
|
931
|
-
var Loading = function (props) { return (jsxs(Container$
|
|
1001
|
+
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
1002
|
|
|
933
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
934
|
-
var templateObject_1$
|
|
1003
|
+
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"])));
|
|
1004
|
+
var templateObject_1$d;
|
|
935
1005
|
|
|
936
1006
|
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
1007
|
|
|
938
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1008
|
+
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
1009
|
var contrast = _a.contrast;
|
|
940
1010
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
941
1011
|
});
|
|
942
|
-
var templateObject_1$
|
|
1012
|
+
var templateObject_1$c;
|
|
943
1013
|
|
|
944
1014
|
var Notification = function (props) {
|
|
945
1015
|
if (!props.isVisible)
|
|
@@ -947,6 +1017,22 @@ var Notification = function (props) {
|
|
|
947
1017
|
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
1018
|
};
|
|
949
1019
|
|
|
1020
|
+
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"])));
|
|
1021
|
+
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);
|
|
1022
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1023
|
+
|
|
1024
|
+
var NumberField = function (props) {
|
|
1025
|
+
var onChange = function (value) {
|
|
1026
|
+
if (props.onChange)
|
|
1027
|
+
props.onChange(props.name, value);
|
|
1028
|
+
};
|
|
1029
|
+
var onBlur = function () {
|
|
1030
|
+
if (props.onBlur)
|
|
1031
|
+
props.onBlur(props.name);
|
|
1032
|
+
};
|
|
1033
|
+
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));
|
|
1034
|
+
};
|
|
1035
|
+
|
|
950
1036
|
var generateRandomString = function (length) {
|
|
951
1037
|
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
952
1038
|
var charsLength = chars.length;
|
|
@@ -957,7 +1043,7 @@ var generateRandomString = function (length) {
|
|
|
957
1043
|
return string;
|
|
958
1044
|
};
|
|
959
1045
|
|
|
960
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1046
|
+
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
1047
|
var isVisible = _a.isVisible;
|
|
962
1048
|
return (isVisible ? "100%" : "0%");
|
|
963
1049
|
}, function (_a) {
|
|
@@ -970,7 +1056,7 @@ var PopupContainer = styled.div(templateObject_1$6 || (templateObject_1$6 = __ma
|
|
|
970
1056
|
var contrast = _a.contrast;
|
|
971
1057
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
972
1058
|
});
|
|
973
|
-
var templateObject_1$
|
|
1059
|
+
var templateObject_1$a;
|
|
974
1060
|
|
|
975
1061
|
var Popup = function (props) {
|
|
976
1062
|
var popupRef = useRef(null);
|
|
@@ -1006,23 +1092,82 @@ var Popup = function (props) {
|
|
|
1006
1092
|
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
1093
|
};
|
|
1008
1094
|
|
|
1009
|
-
var Wrapper = styled.div(templateObject_1$
|
|
1010
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1095
|
+
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"])));
|
|
1096
|
+
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
1097
|
var showInfo = _a.showInfo;
|
|
1012
1098
|
return (showInfo ? "10px" : "");
|
|
1013
1099
|
});
|
|
1014
|
-
var Indicator = styled.div(templateObject_3$
|
|
1100
|
+
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
1101
|
var percent = _a.percent;
|
|
1016
1102
|
return "calc(".concat(percent, "% - 6px)");
|
|
1017
1103
|
}, function (_a) {
|
|
1018
1104
|
var color = _a.color;
|
|
1019
1105
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1020
1106
|
});
|
|
1021
|
-
var templateObject_1$
|
|
1107
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$3;
|
|
1022
1108
|
|
|
1023
1109
|
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
1110
|
|
|
1025
|
-
var
|
|
1111
|
+
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"])));
|
|
1112
|
+
var RadioContainer = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1113
|
+
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"])));
|
|
1114
|
+
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) {
|
|
1115
|
+
var weight = _a.weight;
|
|
1116
|
+
return weight || 500;
|
|
1117
|
+
}, theme.colors.darkGray.base);
|
|
1118
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$2, templateObject_4$2;
|
|
1119
|
+
|
|
1120
|
+
var RadioGroup = function (props) {
|
|
1121
|
+
var onChange = function (value) {
|
|
1122
|
+
if (props.onChange)
|
|
1123
|
+
props.onChange(props.name, value);
|
|
1124
|
+
};
|
|
1125
|
+
var onBlur = function () {
|
|
1126
|
+
if (props.onBlur)
|
|
1127
|
+
props.onBlur(props.name);
|
|
1128
|
+
};
|
|
1129
|
+
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) {
|
|
1130
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
1131
|
+
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));
|
|
1132
|
+
}) }, void 0)] }, void 0));
|
|
1133
|
+
};
|
|
1134
|
+
|
|
1135
|
+
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"])));
|
|
1136
|
+
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);
|
|
1137
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1138
|
+
|
|
1139
|
+
var SelectField = function (props) {
|
|
1140
|
+
var onChange = function (value) {
|
|
1141
|
+
if (props.onChange)
|
|
1142
|
+
props.onChange(props.name, value);
|
|
1143
|
+
};
|
|
1144
|
+
var onBlur = function () {
|
|
1145
|
+
if (props.onBlur)
|
|
1146
|
+
props.onBlur(props.name);
|
|
1147
|
+
};
|
|
1148
|
+
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) {
|
|
1149
|
+
var value = _a.value, label = _a.label;
|
|
1150
|
+
return (jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1151
|
+
}) }), void 0)] }, void 0));
|
|
1152
|
+
};
|
|
1153
|
+
|
|
1154
|
+
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"])));
|
|
1155
|
+
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);
|
|
1156
|
+
var templateObject_1$6, templateObject_2$5;
|
|
1157
|
+
|
|
1158
|
+
var ToggleField = function (props) {
|
|
1159
|
+
var onChange = function (value) {
|
|
1160
|
+
if (props.onChange)
|
|
1161
|
+
props.onChange(props.name, value);
|
|
1162
|
+
};
|
|
1163
|
+
var onBlur = function () {
|
|
1164
|
+
if (props.onBlur)
|
|
1165
|
+
props.onBlur(props.name);
|
|
1166
|
+
};
|
|
1167
|
+
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));
|
|
1168
|
+
};
|
|
1169
|
+
|
|
1170
|
+
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
1171
|
var isVisible = _a.isVisible;
|
|
1027
1172
|
return (isVisible ? "100%" : "0%");
|
|
1028
1173
|
}, function (_a) {
|
|
@@ -1032,7 +1177,7 @@ var TooltipContainer = styled.div(templateObject_1$4 || (templateObject_1$4 = __
|
|
|
1032
1177
|
var x = _a.x;
|
|
1033
1178
|
return (x ? "".concat(x, "px") : "");
|
|
1034
1179
|
});
|
|
1035
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
1180
|
+
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
1181
|
var color = _a.color;
|
|
1037
1182
|
switch (color) {
|
|
1038
1183
|
default:
|
|
@@ -1042,7 +1187,7 @@ var TooltipTitle = styled.div(templateObject_2$3 || (templateObject_2$3 = __make
|
|
|
1042
1187
|
return theme.colors.lightGray.dark;
|
|
1043
1188
|
}
|
|
1044
1189
|
});
|
|
1045
|
-
var templateObject_1$
|
|
1190
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1046
1191
|
|
|
1047
1192
|
var Tooltip = function (props) {
|
|
1048
1193
|
var tooltipRef = useRef(null);
|
|
@@ -1076,28 +1221,67 @@ var Tooltip = function (props) {
|
|
|
1076
1221
|
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
1222
|
};
|
|
1078
1223
|
|
|
1079
|
-
var
|
|
1080
|
-
|
|
1224
|
+
var FeedbackColors = {
|
|
1225
|
+
success: theme.colors.green.base,
|
|
1226
|
+
error: theme.colors.red.base,
|
|
1227
|
+
};
|
|
1228
|
+
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) {
|
|
1229
|
+
var status = _a.status;
|
|
1230
|
+
return FeedbackColors[status];
|
|
1231
|
+
});
|
|
1232
|
+
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) {
|
|
1233
|
+
var status = _a.status;
|
|
1234
|
+
return FeedbackColors[status];
|
|
1235
|
+
}, function (_a) {
|
|
1236
|
+
var status = _a.status;
|
|
1237
|
+
return FeedbackColors[status];
|
|
1238
|
+
});
|
|
1239
|
+
var templateObject_1$4, templateObject_2$3;
|
|
1240
|
+
|
|
1241
|
+
var WithValidation = function (_a) {
|
|
1242
|
+
var status = _a.status, message = _a.message, children = _a.children;
|
|
1243
|
+
if (!message)
|
|
1244
|
+
return jsx(FieldWrapper, __assign({ status: status }, { children: children }), void 0);
|
|
1245
|
+
var icons = {
|
|
1246
|
+
success: "check",
|
|
1247
|
+
error: "warning",
|
|
1248
|
+
};
|
|
1249
|
+
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));
|
|
1250
|
+
};
|
|
1251
|
+
|
|
1252
|
+
var FormWrapper = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
1253
|
+
var ButtonWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
1081
1254
|
var templateObject_1$3, templateObject_2$2;
|
|
1082
1255
|
|
|
1083
1256
|
var Form = function (props) {
|
|
1084
|
-
var
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
initialValues
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1257
|
+
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
1258
|
+
var _b = useState({}), feedback = _b[0], setFeedback = _b[1];
|
|
1259
|
+
useEffect(function () {
|
|
1260
|
+
var initialValues = {};
|
|
1261
|
+
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1262
|
+
var field = _a[_i];
|
|
1263
|
+
initialValues[field.name] = field.initialValue;
|
|
1264
|
+
}
|
|
1265
|
+
setValues(initialValues);
|
|
1266
|
+
}, []);
|
|
1091
1267
|
var onChangeFormField = function (fieldName, value) {
|
|
1092
|
-
var _a, _b;
|
|
1093
|
-
|
|
1094
|
-
|
|
1268
|
+
var _a, _b, _c;
|
|
1269
|
+
var feedbackForField = { status: undefined, message: undefined };
|
|
1270
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1271
|
+
if (field.validateTrigger && field.validateTrigger.includes("onChange")) {
|
|
1272
|
+
feedbackForField = field.validator(values[fieldName]);
|
|
1273
|
+
}
|
|
1274
|
+
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1275
|
+
var newValues = __assign(__assign({}, values), (_b = {}, _b[fieldName] = value, _b));
|
|
1276
|
+
setValues(newValues);
|
|
1277
|
+
if (props.onChangeFields)
|
|
1278
|
+
props.onChangeFields(newValues, __assign(__assign({}, values), (_c = {}, _c[fieldName] = value, _c)));
|
|
1095
1279
|
};
|
|
1096
|
-
var onBlurFormField = function (fieldName
|
|
1280
|
+
var onBlurFormField = function (fieldName) {
|
|
1097
1281
|
var _a;
|
|
1098
|
-
var field = props.fields.find(function (field) { return field.name === fieldName
|
|
1099
|
-
if (field && field.
|
|
1100
|
-
var feedbackForField = field.validator(
|
|
1282
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1283
|
+
if (field.validateTrigger && field.validateTrigger.includes("onBlur")) {
|
|
1284
|
+
var feedbackForField = field.validator(values[fieldName]);
|
|
1101
1285
|
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1102
1286
|
}
|
|
1103
1287
|
};
|
|
@@ -1113,10 +1297,38 @@ var Form = function (props) {
|
|
|
1113
1297
|
}
|
|
1114
1298
|
}
|
|
1115
1299
|
setFeedback(feedback);
|
|
1116
|
-
if (isValid)
|
|
1300
|
+
if (isValid && !!props.onSubmit) {
|
|
1117
1301
|
props.onSubmit(values);
|
|
1302
|
+
}
|
|
1303
|
+
else if (!!props.onError) {
|
|
1304
|
+
props.onError(feedback);
|
|
1305
|
+
}
|
|
1118
1306
|
};
|
|
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)),
|
|
1307
|
+
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) {
|
|
1308
|
+
switch (field.type) {
|
|
1309
|
+
case "text":
|
|
1310
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1311
|
+
jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1312
|
+
case "password":
|
|
1313
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1314
|
+
jsx(InputField, __assign({ isPassword: true }, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1315
|
+
case "radio":
|
|
1316
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1317
|
+
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1318
|
+
case "number":
|
|
1319
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1320
|
+
jsx(NumberField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1321
|
+
case "checkbox":
|
|
1322
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1323
|
+
jsx(Checkboxes, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1324
|
+
case "select":
|
|
1325
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1326
|
+
jsx(SelectField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1327
|
+
case "toggle":
|
|
1328
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1329
|
+
jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1330
|
+
}
|
|
1331
|
+
}) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1120
1332
|
};
|
|
1121
1333
|
|
|
1122
1334
|
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 +1387,7 @@ var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTempl
|
|
|
1175
1387
|
var width = _a.width;
|
|
1176
1388
|
return (width ? "".concat(width, "px") : "720px");
|
|
1177
1389
|
});
|
|
1178
|
-
var CloseIconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -
|
|
1390
|
+
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
1391
|
var ChildrenWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
1180
1392
|
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
1393
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1193,5 +1405,5 @@ var Modal = function (props) {
|
|
|
1193
1405
|
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
1406
|
};
|
|
1195
1407
|
|
|
1196
|
-
export { Alert, Button, Card, Checkbox, Flag, Form,
|
|
1408
|
+
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
1409
|
//# sourceMappingURL=index.es.js.map
|