@typeolymp/ui-components 1.0.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Button/index.d.ts +1 -0
- package/build/components/atoms/Checkbox/index.d.ts +5 -3
- package/build/components/atoms/Flag/index.d.ts +2 -1
- package/build/components/atoms/Flag/stories.d.ts +1 -1
- package/build/components/atoms/Input/index.d.ts +2 -2
- package/build/components/atoms/Input/stories.d.ts +1 -1
- package/build/components/atoms/Medal/index.d.ts +2 -1
- package/build/components/atoms/Medal/stories.d.ts +1 -1
- package/build/components/atoms/Number/index.d.ts +14 -0
- package/build/components/atoms/Number/stories.d.ts +19 -0
- package/build/components/atoms/Number/styles.d.ts +2 -0
- package/build/components/atoms/Radio/index.d.ts +5 -3
- package/build/components/atoms/Radio/styles.d.ts +0 -1
- package/build/components/atoms/Select/index.d.ts +7 -2
- package/build/components/atoms/Toggle/index.d.ts +12 -0
- package/build/components/atoms/Toggle/stories.d.ts +7 -0
- package/build/components/atoms/Toggle/styles.d.ts +1 -0
- package/build/components/molecules/Alert/index.d.ts +7 -0
- package/build/components/molecules/Alert/stories.d.ts +8 -0
- package/build/components/molecules/Alert/styles.d.ts +1 -0
- package/build/components/molecules/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 +9 -0
- package/build/components/molecules/Loading/stories.d.ts +25 -0
- package/build/components/molecules/Loading/styles.d.ts +1 -0
- 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 +11 -2
- package/build/index.es.js +451 -209
- package/build/index.es.js.map +1 -1
- package/build/index.js +462 -210
- 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/build/lib/types.d.ts +1 -0
- package/package.json +4 -1
package/build/index.es.js
CHANGED
|
@@ -1,6 +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 BeatLoader from 'react-spinners/BeatLoader';
|
|
4
5
|
|
|
5
6
|
var theme = {
|
|
6
7
|
colors: {
|
|
@@ -172,12 +173,22 @@ var __assign = function() {
|
|
|
172
173
|
return __assign.apply(this, arguments);
|
|
173
174
|
};
|
|
174
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
|
+
|
|
175
186
|
function __makeTemplateObject(cooked, raw) {
|
|
176
187
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
177
188
|
return cooked;
|
|
178
189
|
}
|
|
179
190
|
|
|
180
|
-
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) {
|
|
181
192
|
var fluid = _a.fluid;
|
|
182
193
|
return (fluid ? "100%" : "fit-content");
|
|
183
194
|
}, function (_a) {
|
|
@@ -227,11 +238,11 @@ var StyledButton = styled.button(templateObject_1$r || (templateObject_1$r = __m
|
|
|
227
238
|
? theme.button.medium.heightActive
|
|
228
239
|
: theme.button[size].heightActive;
|
|
229
240
|
});
|
|
230
|
-
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) {
|
|
231
242
|
var size = _a.size;
|
|
232
243
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
233
244
|
});
|
|
234
|
-
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) {
|
|
235
246
|
var size = _a.size;
|
|
236
247
|
return !size
|
|
237
248
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -247,7 +258,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$5 || (templateObject_3$5
|
|
|
247
258
|
? theme.button.medium.marginTopActive
|
|
248
259
|
: theme.button[size].marginTopActive;
|
|
249
260
|
});
|
|
250
|
-
var templateObject_1$
|
|
261
|
+
var templateObject_1$A, templateObject_2$i, templateObject_3$6;
|
|
251
262
|
|
|
252
263
|
var Button = function (props) {
|
|
253
264
|
var onClick = function () {
|
|
@@ -264,7 +275,7 @@ var Button = function (props) {
|
|
|
264
275
|
return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
265
276
|
};
|
|
266
277
|
|
|
267
|
-
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) {
|
|
268
279
|
var checked = _a.checked, disabled = _a.disabled;
|
|
269
280
|
if (disabled)
|
|
270
281
|
return theme.colors.lightGray.darker;
|
|
@@ -285,29 +296,40 @@ var StyledCheckbox = styled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
285
296
|
return theme.colors.green.base;
|
|
286
297
|
return theme.colors.lightGray.darker;
|
|
287
298
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
288
|
-
var templateObject_1$
|
|
299
|
+
var templateObject_1$z;
|
|
289
300
|
|
|
290
301
|
var Checkbox = function (props) {
|
|
291
|
-
var
|
|
292
|
-
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];
|
|
293
306
|
useEffect(function () {
|
|
294
307
|
var _a;
|
|
295
308
|
if (props.autoFocus)
|
|
296
|
-
(_a =
|
|
309
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
297
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]);
|
|
298
318
|
var toggle = function () {
|
|
299
319
|
var _a;
|
|
300
320
|
if (!props.disabled) {
|
|
301
|
-
|
|
302
|
-
|
|
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);
|
|
303
325
|
if (!!props.onChange)
|
|
304
|
-
props.onChange(
|
|
326
|
+
props.onChange(props.value);
|
|
305
327
|
}
|
|
306
328
|
};
|
|
307
|
-
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));
|
|
308
330
|
};
|
|
309
331
|
|
|
310
|
-
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) {
|
|
311
333
|
var size = _a.size;
|
|
312
334
|
switch (size) {
|
|
313
335
|
case "small":
|
|
@@ -330,15 +352,16 @@ var Wrapper$9 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTem
|
|
|
330
352
|
return "27px";
|
|
331
353
|
}
|
|
332
354
|
});
|
|
333
|
-
var templateObject_1$
|
|
355
|
+
var templateObject_1$y;
|
|
334
356
|
|
|
335
357
|
var flags = {
|
|
336
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)),
|
|
337
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)),
|
|
338
361
|
};
|
|
339
362
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
340
363
|
|
|
341
|
-
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) {
|
|
342
365
|
var type = _a.type;
|
|
343
366
|
return theme.heading[type].fontSize;
|
|
344
367
|
}, function (_a) {
|
|
@@ -362,14 +385,14 @@ var StyledHeading = styled.span(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
362
385
|
var align = _a.align;
|
|
363
386
|
return align;
|
|
364
387
|
});
|
|
365
|
-
var templateObject_1$
|
|
388
|
+
var templateObject_1$x;
|
|
366
389
|
|
|
367
390
|
var Heading = function (props) {
|
|
368
391
|
var element = !!props.as ? props.as : props.type;
|
|
369
392
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
370
393
|
};
|
|
371
394
|
|
|
372
|
-
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) {
|
|
373
396
|
var size = _a.size;
|
|
374
397
|
return theme.icon[size] || theme.icon.medium;
|
|
375
398
|
}, function (_a) {
|
|
@@ -397,7 +420,7 @@ var Wrapper$8 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTem
|
|
|
397
420
|
return theme.colors.lightGray.light;
|
|
398
421
|
}
|
|
399
422
|
});
|
|
400
|
-
var templateObject_1$
|
|
423
|
+
var templateObject_1$w;
|
|
401
424
|
|
|
402
425
|
var icons = {
|
|
403
426
|
check: (jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -420,7 +443,7 @@ var icons = {
|
|
|
420
443
|
};
|
|
421
444
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
422
445
|
|
|
423
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
446
|
+
var Wrapper$7 = styled.div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
424
447
|
var size = _a.size;
|
|
425
448
|
switch (size) {
|
|
426
449
|
default:
|
|
@@ -432,7 +455,7 @@ var Wrapper$7 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTem
|
|
|
432
455
|
return "118px";
|
|
433
456
|
}
|
|
434
457
|
});
|
|
435
|
-
var templateObject_1$
|
|
458
|
+
var templateObject_1$v;
|
|
436
459
|
|
|
437
460
|
var illustrations = {
|
|
438
461
|
keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -447,11 +470,11 @@ var illustrations = {
|
|
|
447
470
|
};
|
|
448
471
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
449
472
|
|
|
450
|
-
var PasswordInputWrapper = styled.div(templateObject_1$
|
|
473
|
+
var PasswordInputWrapper = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
451
474
|
var disabled = _a.disabled;
|
|
452
475
|
return (disabled ? "not-allowed" : "pointer");
|
|
453
476
|
});
|
|
454
|
-
var StyledInput = styled.input(templateObject_2$
|
|
477
|
+
var StyledInput = styled.input(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
455
478
|
var disabled = _a.disabled;
|
|
456
479
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
457
480
|
}, function (_a) {
|
|
@@ -464,7 +487,7 @@ var StyledInput = styled.input(templateObject_2$c || (templateObject_2$c = __mak
|
|
|
464
487
|
var disabled = _a.disabled;
|
|
465
488
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
466
489
|
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
467
|
-
var templateObject_1$
|
|
490
|
+
var templateObject_1$u, templateObject_2$h;
|
|
468
491
|
|
|
469
492
|
var PasswordInput = function (props) {
|
|
470
493
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -500,7 +523,7 @@ Input.Password = PasswordInput;
|
|
|
500
523
|
|
|
501
524
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { children: [jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsx("defs", { children: jsx("clipPath", { children: jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
502
525
|
|
|
503
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
526
|
+
var Wrapper$6 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
504
527
|
var size = _a.size;
|
|
505
528
|
switch (size) {
|
|
506
529
|
default:
|
|
@@ -510,7 +533,7 @@ var Wrapper$6 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTem
|
|
|
510
533
|
return "116px";
|
|
511
534
|
}
|
|
512
535
|
});
|
|
513
|
-
var templateObject_1$
|
|
536
|
+
var templateObject_1$t;
|
|
514
537
|
|
|
515
538
|
var medals = {
|
|
516
539
|
small: {
|
|
@@ -526,7 +549,66 @@ var medals = {
|
|
|
526
549
|
};
|
|
527
550
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
528
551
|
|
|
529
|
-
var
|
|
552
|
+
var Wrapper$5 = styled.div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"])), function (_a) {
|
|
553
|
+
var disabled = _a.disabled;
|
|
554
|
+
return (disabled ? "49.5px" : "");
|
|
555
|
+
});
|
|
556
|
+
var StyledInputNumber = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
557
|
+
var disabled = _a.disabled;
|
|
558
|
+
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
559
|
+
}, function (_a) {
|
|
560
|
+
var disabled = _a.disabled;
|
|
561
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
562
|
+
}, function (_a) {
|
|
563
|
+
var disabled = _a.disabled;
|
|
564
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
565
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
566
|
+
var disabled = _a.disabled;
|
|
567
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
568
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
569
|
+
var templateObject_1$s, templateObject_2$g;
|
|
570
|
+
|
|
571
|
+
var Number = function (props) {
|
|
572
|
+
var ref = useRef(null);
|
|
573
|
+
var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
574
|
+
var onChange = function (e) {
|
|
575
|
+
if (!props.disabled) {
|
|
576
|
+
var value_1 = parseInt(e.target.value);
|
|
577
|
+
setValue(value_1);
|
|
578
|
+
if (!!props.onChange)
|
|
579
|
+
props.onChange(e.target.value);
|
|
580
|
+
}
|
|
581
|
+
};
|
|
582
|
+
var decrease = function () {
|
|
583
|
+
var _a;
|
|
584
|
+
var newValue = value - 1;
|
|
585
|
+
if (props.min && newValue < props.min) {
|
|
586
|
+
setValue(props.min);
|
|
587
|
+
}
|
|
588
|
+
else {
|
|
589
|
+
setValue(newValue);
|
|
590
|
+
if (!!props.onChange)
|
|
591
|
+
props.onChange("".concat(newValue));
|
|
592
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
593
|
+
}
|
|
594
|
+
};
|
|
595
|
+
var increase = function () {
|
|
596
|
+
var _a;
|
|
597
|
+
var newValue = value + 1;
|
|
598
|
+
if (props.max && newValue > props.max) {
|
|
599
|
+
setValue(props.max);
|
|
600
|
+
}
|
|
601
|
+
else {
|
|
602
|
+
setValue(newValue);
|
|
603
|
+
if (!!props.onChange)
|
|
604
|
+
props.onChange("".concat(newValue));
|
|
605
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
606
|
+
}
|
|
607
|
+
};
|
|
608
|
+
return (jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
609
|
+
};
|
|
610
|
+
|
|
611
|
+
var StyledParagraph = styled.p(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
530
612
|
var size = _a.size;
|
|
531
613
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
532
614
|
}, function (_a) {
|
|
@@ -558,11 +640,11 @@ var StyledParagraph = styled.p(templateObject_1$j || (templateObject_1$j = __mak
|
|
|
558
640
|
var align = _a.align;
|
|
559
641
|
return align;
|
|
560
642
|
});
|
|
561
|
-
var templateObject_1$
|
|
643
|
+
var templateObject_1$r;
|
|
562
644
|
|
|
563
645
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
564
646
|
|
|
565
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
647
|
+
var StyledRadio = styled.div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
566
648
|
var checked = _a.checked, disabled = _a.disabled;
|
|
567
649
|
if (disabled)
|
|
568
650
|
return theme.colors.lightGray.darker;
|
|
@@ -582,42 +664,48 @@ var StyledRadio = styled.div(templateObject_1$i || (templateObject_1$i = __makeT
|
|
|
582
664
|
if (checked)
|
|
583
665
|
return theme.colors.green.base;
|
|
584
666
|
return theme.colors.lightGray.darker;
|
|
585
|
-
},
|
|
586
|
-
var CheckedDot = styled.div(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n"], ["\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (_a) {
|
|
667
|
+
}, function (_a) {
|
|
587
668
|
var checked = _a.checked, disabled = _a.disabled;
|
|
588
669
|
if (disabled)
|
|
589
670
|
return theme.colors.lightGray.darker;
|
|
590
671
|
if (checked)
|
|
591
672
|
return theme.colors.green.base;
|
|
592
673
|
return "";
|
|
593
|
-
});
|
|
594
|
-
var templateObject_1$
|
|
674
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
675
|
+
var templateObject_1$q;
|
|
595
676
|
|
|
596
677
|
var Radio = function (props) {
|
|
597
|
-
var
|
|
598
|
-
var
|
|
678
|
+
var _a;
|
|
679
|
+
var wrapperRef = useRef(null);
|
|
680
|
+
var inputRef = useRef(null);
|
|
681
|
+
var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
599
682
|
useEffect(function () {
|
|
600
|
-
var _a;
|
|
601
683
|
if (props.autoFocus)
|
|
602
|
-
|
|
684
|
+
wrapperRef.current.focus();
|
|
685
|
+
if (props.defaultChecked)
|
|
686
|
+
inputRef.current.checked = true;
|
|
603
687
|
}, []);
|
|
688
|
+
useEffect(function () {
|
|
689
|
+
setChecked(inputRef.current.checked);
|
|
690
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
604
691
|
var toggle = function () {
|
|
605
692
|
var _a;
|
|
606
693
|
if (!props.disabled) {
|
|
607
|
-
|
|
608
|
-
|
|
694
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
695
|
+
inputRef.current.checked = true;
|
|
696
|
+
setChecked(true);
|
|
609
697
|
if (!!props.onChange)
|
|
610
|
-
props.onChange(
|
|
698
|
+
props.onChange(props.value);
|
|
611
699
|
}
|
|
612
700
|
};
|
|
613
|
-
return (
|
|
701
|
+
return (jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
614
702
|
};
|
|
615
703
|
|
|
616
|
-
var Wrapper$
|
|
704
|
+
var Wrapper$4 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
617
705
|
var disabled = _a.disabled;
|
|
618
706
|
return (disabled ? "not-allowed" : "pointer");
|
|
619
707
|
});
|
|
620
|
-
var StyledSelect = styled.select(templateObject_2$
|
|
708
|
+
var StyledSelect = styled.select(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
621
709
|
var disabled = _a.disabled;
|
|
622
710
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
623
711
|
}, function (_a) {
|
|
@@ -630,31 +718,35 @@ var StyledSelect = styled.select(templateObject_2$a || (templateObject_2$a = __m
|
|
|
630
718
|
var isChanged = _a.isChanged;
|
|
631
719
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
632
720
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
633
|
-
var templateObject_1$
|
|
721
|
+
var templateObject_1$p, templateObject_2$f;
|
|
634
722
|
|
|
635
723
|
var Select = function (props) {
|
|
636
|
-
var _a = useState(
|
|
637
|
-
var
|
|
724
|
+
var _a = useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
725
|
+
var _b = useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
726
|
+
var onChange = function (e) {
|
|
638
727
|
if (!props.disabled) {
|
|
728
|
+
var value_1 = e.target.value;
|
|
729
|
+
setValue(value_1);
|
|
639
730
|
setIsChanged(true);
|
|
640
|
-
props.onChange
|
|
731
|
+
if (!!props.onChange)
|
|
732
|
+
props.onChange(value_1);
|
|
641
733
|
}
|
|
642
734
|
};
|
|
643
|
-
return (jsxs(Wrapper$
|
|
735
|
+
return (jsxs(Wrapper$4, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
644
736
|
};
|
|
645
737
|
|
|
646
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
738
|
+
var StyledSpacer = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
647
739
|
var horizontal = _a.horizontal;
|
|
648
740
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
649
741
|
}, function (_a) {
|
|
650
742
|
var vertical = _a.vertical;
|
|
651
743
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
652
744
|
});
|
|
653
|
-
var templateObject_1$
|
|
745
|
+
var templateObject_1$o;
|
|
654
746
|
|
|
655
747
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
656
748
|
|
|
657
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
749
|
+
var StyledSubheading = styled.p(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"], ["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
658
750
|
var size = _a.size;
|
|
659
751
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
660
752
|
}, function (_a) {
|
|
@@ -682,11 +774,60 @@ var StyledSubheading = styled.p(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
682
774
|
return theme.colors.darkGray.dark;
|
|
683
775
|
}
|
|
684
776
|
});
|
|
685
|
-
var templateObject_1$
|
|
777
|
+
var templateObject_1$n;
|
|
686
778
|
|
|
687
779
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
688
780
|
|
|
689
|
-
var
|
|
781
|
+
var Container$8 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
782
|
+
var disabled = _a.disabled;
|
|
783
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
784
|
+
}, function (_a) {
|
|
785
|
+
var checked = _a.checked, disabled = _a.disabled;
|
|
786
|
+
if (disabled)
|
|
787
|
+
return theme.colors.lightGray.dark;
|
|
788
|
+
return checked ? theme.colors.green.base : theme.colors.lightGray.darker;
|
|
789
|
+
}, function (_a) {
|
|
790
|
+
var checked = _a.checked;
|
|
791
|
+
return (checked ? "3px" : "");
|
|
792
|
+
}, function (_a) {
|
|
793
|
+
var checked = _a.checked;
|
|
794
|
+
return (checked ? "" : "3px");
|
|
795
|
+
}, function (_a) {
|
|
796
|
+
var disabled = _a.disabled;
|
|
797
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
798
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
799
|
+
var templateObject_1$m;
|
|
800
|
+
|
|
801
|
+
var Toggle = function (props) {
|
|
802
|
+
var _a;
|
|
803
|
+
var containerRef = useRef(null);
|
|
804
|
+
var inputRef = useRef(null);
|
|
805
|
+
var _b = useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
806
|
+
useEffect(function () {
|
|
807
|
+
var _a;
|
|
808
|
+
if (props.autoFocus)
|
|
809
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
810
|
+
if (props.defaultChecked)
|
|
811
|
+
inputRef.current.checked = true;
|
|
812
|
+
}, []);
|
|
813
|
+
useEffect(function () {
|
|
814
|
+
setChecked(inputRef.current.checked);
|
|
815
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
816
|
+
var toggle = function () {
|
|
817
|
+
var _a;
|
|
818
|
+
if (!props.disabled) {
|
|
819
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
820
|
+
var newValue = !inputRef.current.checked;
|
|
821
|
+
inputRef.current.checked = newValue;
|
|
822
|
+
setChecked(newValue);
|
|
823
|
+
if (!!props.onChange)
|
|
824
|
+
props.onChange(newValue);
|
|
825
|
+
}
|
|
826
|
+
};
|
|
827
|
+
return (jsx(Container$8, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
828
|
+
};
|
|
829
|
+
|
|
830
|
+
var Wrapper$3 = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
690
831
|
var level = _a.level;
|
|
691
832
|
switch (level) {
|
|
692
833
|
case 1:
|
|
@@ -697,7 +838,7 @@ var Wrapper$4 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTem
|
|
|
697
838
|
return "70px";
|
|
698
839
|
}
|
|
699
840
|
});
|
|
700
|
-
var templateObject_1$
|
|
841
|
+
var templateObject_1$l;
|
|
701
842
|
|
|
702
843
|
var trophies = {
|
|
703
844
|
1: {
|
|
@@ -731,9 +872,30 @@ var trophies = {
|
|
|
731
872
|
3: (jsxs("svg", __assign({ viewBox: "0 0 96 118" }, { children: [jsx("path", { d: "M74.4418 104.86H21.5586C19.4421 104.886 17.4199 105.746 15.9322 107.253C14.4445 108.759 13.6099 110.792 13.6099 112.91V117.658H82.3914V112.829C82.3699 110.725 81.5263 108.713 80.0413 107.224C78.5554 105.734 76.5459 104.886 74.4427 104.86H74.4418Z", fill: "#75301C" }, void 0), jsx("path", { d: "M65.8683 90.0547H30.1299C28.9557 90.0547 27.8292 90.5209 26.9992 91.351C26.1692 92.1811 25.7029 93.3076 25.7029 94.4817V104.925H70.2955V94.4412C70.2802 93.276 69.8068 92.163 68.9794 91.3427C68.1511 90.5216 67.0343 90.0601 65.8683 90.0547Z", fill: "#75301C" }, void 0), jsx("path", { d: "M88.9303 7.28211H80.4787V2.85505C80.4248 1.78331 79.539 0.942463 78.4664 0.94336H17.4534C16.3422 0.94336 15.4411 1.84441 15.4411 2.95566V7.28199H6.98946C5.04275 7.40147 3.22083 8.28005 1.91479 9.72918C0.609485 11.1773 -0.0759402 13.0809 0.00669058 15.0295C0.010284 22.457 1.48717 29.8101 4.3528 36.6616C7.18612 43.4836 11.4874 49.5987 16.9503 54.571C18.623 56.1072 20.4052 57.5193 22.283 58.7969C22.4842 59.0385 22.645 59.2802 22.8462 59.5012C23.1885 59.9036 23.5505 60.2863 23.9332 60.6888C25.2538 62.0741 26.6948 63.3407 28.2391 64.4717C34.3372 68.9491 37.9395 76.063 37.9386 83.629V90.1691H58.0616V83.629C58.0535 76.0964 61.6136 69.0048 67.6604 64.5122C69.2029 63.3857 70.6375 62.119 71.9465 60.7284C72.3292 60.3259 72.711 59.9234 73.0533 59.521C73.2545 59.3 73.436 59.0377 73.6165 58.8167C75.4941 57.5392 77.2764 56.1271 78.9492 54.5908C84.4059 49.613 88.7063 43.4997 91.5467 36.6814C94.4492 29.8306 95.9611 22.4704 95.9935 15.0295C96.0753 13.0675 95.3791 11.1532 94.0567 9.70229C92.7334 8.25056 90.8908 7.3809 88.9307 7.28224L88.9303 7.28211ZM9.30304 34.5689C6.72568 28.3774 5.39871 21.7369 5.39871 15.0298C5.39871 13.7622 6.16321 12.6555 7.06874 12.6555H15.5204V39.8204C15.5357 41.8489 15.7513 43.871 16.1645 45.8573C13.3365 42.4509 11.0241 38.6471 9.30292 34.5677L9.30304 34.5689ZM86.695 34.5689C84.9755 38.6618 82.6632 42.479 79.8334 45.8989C80.2484 43.9127 80.4649 41.8904 80.4775 39.862V12.6558H88.9291C89.8347 12.6558 90.5992 13.7625 90.5992 15.03C90.5992 21.7371 89.2723 28.3777 86.6948 34.5691L86.695 34.5689Z", fill: "#FF9D00" }, void 0)] }), void 0)),
|
|
732
873
|
},
|
|
733
874
|
};
|
|
734
|
-
var Trophy = function (props) { return (jsx(Wrapper$
|
|
875
|
+
var Trophy = function (props) { return (jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
735
876
|
|
|
736
|
-
var
|
|
877
|
+
var Container$7 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
878
|
+
var type = _a.type;
|
|
879
|
+
switch (type) {
|
|
880
|
+
case "success":
|
|
881
|
+
return "rgba(139, 220, 174, 20%)";
|
|
882
|
+
case "error":
|
|
883
|
+
return "rgba(247, 119, 140, 20%)";
|
|
884
|
+
}
|
|
885
|
+
}, function (_a) {
|
|
886
|
+
var type = _a.type;
|
|
887
|
+
switch (type) {
|
|
888
|
+
case "success":
|
|
889
|
+
return theme.colors.green.base;
|
|
890
|
+
case "error":
|
|
891
|
+
return theme.colors.red.base;
|
|
892
|
+
}
|
|
893
|
+
});
|
|
894
|
+
var templateObject_1$k;
|
|
895
|
+
|
|
896
|
+
var Alert = function (props) { return (jsxs(Container$7, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
897
|
+
|
|
898
|
+
var StyledCard = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
737
899
|
var ellipse = _a.ellipse;
|
|
738
900
|
return ellipse
|
|
739
901
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -742,135 +904,48 @@ var StyledCard = styled.div(templateObject_1$d || (templateObject_1$d = __makeTe
|
|
|
742
904
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
743
905
|
: "";
|
|
744
906
|
});
|
|
745
|
-
var Ellipse = styled.div(templateObject_2$
|
|
907
|
+
var Ellipse = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
746
908
|
var color = _a.color;
|
|
747
909
|
return color ? theme.colors[color].light : "";
|
|
748
910
|
});
|
|
749
|
-
var Content = styled.div(templateObject_3$
|
|
750
|
-
var templateObject_1$
|
|
911
|
+
var Content = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
912
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$5;
|
|
751
913
|
|
|
752
914
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }, void 0), jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
753
915
|
|
|
754
|
-
var
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
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) {
|
|
759
|
-
var disabled = _a.disabled;
|
|
760
|
-
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
761
|
-
}, function (_a) {
|
|
762
|
-
var disabled = _a.disabled;
|
|
763
|
-
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
764
|
-
}, function (_a) {
|
|
765
|
-
var disabled = _a.disabled;
|
|
766
|
-
return (disabled ? "not-allowed" : "pointer");
|
|
767
|
-
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
768
|
-
var disabled = _a.disabled;
|
|
769
|
-
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
770
|
-
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
771
|
-
var templateObject_1$c, templateObject_2$8;
|
|
772
|
-
|
|
773
|
-
var Number = function (props) {
|
|
774
|
-
var ref = useRef(null);
|
|
775
|
-
var _a = useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
776
|
-
var onChange = function (e) {
|
|
777
|
-
if (!props.disabled) {
|
|
778
|
-
var value_1 = parseInt(e.target.value);
|
|
779
|
-
setValue(value_1);
|
|
780
|
-
if (!!props.onChange)
|
|
781
|
-
props.onChange(e.target.value);
|
|
782
|
-
}
|
|
783
|
-
};
|
|
784
|
-
var decrease = function () {
|
|
785
|
-
var _a;
|
|
786
|
-
var newValue = value - 1;
|
|
787
|
-
if (props.min && newValue < props.min) ;
|
|
788
|
-
else {
|
|
789
|
-
setValue(newValue);
|
|
790
|
-
if (!!props.onChange)
|
|
791
|
-
props.onChange("".concat(newValue));
|
|
792
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
793
|
-
}
|
|
794
|
-
};
|
|
795
|
-
var increase = function () {
|
|
796
|
-
var _a;
|
|
797
|
-
var newValue = value + 1;
|
|
798
|
-
if (props.max && newValue > props.max) ;
|
|
799
|
-
else {
|
|
800
|
-
setValue(newValue);
|
|
801
|
-
if (!!props.onChange)
|
|
802
|
-
props.onChange("".concat(newValue));
|
|
803
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
804
|
-
}
|
|
805
|
-
};
|
|
806
|
-
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));
|
|
807
|
-
};
|
|
808
|
-
|
|
809
|
-
var FeedbackColors = {
|
|
810
|
-
success: theme.colors.green.base,
|
|
811
|
-
error: theme.colors.red.base,
|
|
812
|
-
};
|
|
813
|
-
|
|
814
|
-
var FieldWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __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) {
|
|
815
|
-
var inline = _a.inline;
|
|
816
|
-
return (inline ? "row" : "column");
|
|
817
|
-
}, function (_a) {
|
|
818
|
-
var inline = _a.inline;
|
|
819
|
-
return (inline ? "center" : "flex-start");
|
|
820
|
-
}, function (_a) {
|
|
821
|
-
var feedbackStatus = _a.feedbackStatus;
|
|
822
|
-
return FeedbackColors[feedbackStatus];
|
|
823
|
-
});
|
|
824
|
-
var Label = styled(StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
916
|
+
var Fieldset$1 = styled.fieldset(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
917
|
+
var CheckboxContainer = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
918
|
+
var CheckboxWrapper = styled.div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
919
|
+
var Label$5 = styled(StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
825
920
|
var weight = _a.weight;
|
|
826
921
|
return weight || 500;
|
|
827
922
|
}, theme.colors.darkGray.base);
|
|
828
|
-
var
|
|
829
|
-
var status = _a.status;
|
|
830
|
-
return "\n svg {\n fill: ".concat(FeedbackColors[status], ";\n }\n p {\n color: ").concat(FeedbackColors[status], ";\n }\n ");
|
|
831
|
-
});
|
|
832
|
-
var templateObject_1$b, templateObject_2$7, templateObject_3$3;
|
|
923
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$4, templateObject_4$3;
|
|
833
924
|
|
|
834
|
-
var
|
|
835
|
-
var
|
|
836
|
-
var
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
};
|
|
844
|
-
var FormField = function (props) {
|
|
845
|
-
var onChange = function (value) { return props.onChange(props.name, value); };
|
|
846
|
-
switch (props.type) {
|
|
847
|
-
case "text":
|
|
848
|
-
case "password": {
|
|
849
|
-
var fields = {
|
|
850
|
-
text: Input,
|
|
851
|
-
password: Input.Password,
|
|
852
|
-
};
|
|
853
|
-
var Field = fields[props.type];
|
|
854
|
-
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));
|
|
925
|
+
var Checkboxes = function (props) {
|
|
926
|
+
var _a = useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
927
|
+
var onChange = function (value) {
|
|
928
|
+
if (props.onChange) {
|
|
929
|
+
var newValues = values.includes(value)
|
|
930
|
+
? values.filter(function (v) { return v !== value; })
|
|
931
|
+
: __spreadArray(__spreadArray([], values, true), [value], false);
|
|
932
|
+
setValues(newValues);
|
|
933
|
+
props.onChange(props.name, newValues);
|
|
855
934
|
}
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
var Field = fields[props.type];
|
|
866
|
-
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));
|
|
867
|
-
}
|
|
868
|
-
}
|
|
935
|
+
};
|
|
936
|
+
var onBlur = function () {
|
|
937
|
+
if (props.onBlur)
|
|
938
|
+
props.onBlur(props.name);
|
|
939
|
+
};
|
|
940
|
+
return (jsxs(Fieldset$1, { children: [props.legend && jsx(Label$5, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
941
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
942
|
+
return (jsxs(CheckboxWrapper, { children: [jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$5, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
943
|
+
}) }, void 0)] }, void 0));
|
|
869
944
|
};
|
|
870
945
|
|
|
871
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
872
|
-
var GhostIconButton = styled(GhostButton)(templateObject_2$
|
|
873
|
-
var templateObject_1$
|
|
946
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"])));
|
|
947
|
+
var GhostIconButton = styled(GhostButton)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
|
|
948
|
+
var templateObject_1$h, templateObject_2$c;
|
|
874
949
|
|
|
875
950
|
var IconButton = function (props) {
|
|
876
951
|
if (props.color === "white")
|
|
@@ -878,15 +953,32 @@ var IconButton = function (props) {
|
|
|
878
953
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
879
954
|
};
|
|
880
955
|
|
|
881
|
-
var
|
|
956
|
+
var Container$6 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
957
|
+
var Label$4 = styled(StyledParagraph)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
958
|
+
var templateObject_1$g, templateObject_2$b;
|
|
959
|
+
|
|
960
|
+
var InputField = function (props) {
|
|
961
|
+
var onChange = function (value) {
|
|
962
|
+
if (props.onChange)
|
|
963
|
+
props.onChange(props.name, value);
|
|
964
|
+
};
|
|
965
|
+
var onBlur = function () {
|
|
966
|
+
if (props.onBlur)
|
|
967
|
+
props.onBlur(props.name);
|
|
968
|
+
};
|
|
969
|
+
var Field = props.isPassword ? Input.Password : Input;
|
|
970
|
+
return (jsxs(Container$6, { children: [jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Field, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
971
|
+
};
|
|
972
|
+
|
|
973
|
+
var Wrapper$2 = styled.a(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
882
974
|
var chevron = _a.chevron;
|
|
883
975
|
return (chevron === "left" ? "4px" : "");
|
|
884
976
|
}, function (_a) {
|
|
885
977
|
var chevron = _a.chevron;
|
|
886
978
|
return (chevron === "right" ? "4px" : "");
|
|
887
979
|
});
|
|
888
|
-
var StyledLink = styled(StyledParagraph)(templateObject_2$
|
|
889
|
-
var templateObject_1$
|
|
980
|
+
var StyledLink = styled(StyledParagraph)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
981
|
+
var templateObject_1$f, templateObject_2$a;
|
|
890
982
|
|
|
891
983
|
var Link = function (props) {
|
|
892
984
|
var onClick = function (e) {
|
|
@@ -895,19 +987,27 @@ var Link = function (props) {
|
|
|
895
987
|
props.onClick();
|
|
896
988
|
}
|
|
897
989
|
};
|
|
898
|
-
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron }, { children: [props.chevron === "left" &&
|
|
990
|
+
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
899
991
|
};
|
|
900
992
|
|
|
901
|
-
var
|
|
902
|
-
var
|
|
993
|
+
var Container$5 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
|
|
994
|
+
var text = _a.text;
|
|
995
|
+
return (text ? "20px" : "");
|
|
996
|
+
});
|
|
997
|
+
var templateObject_1$e;
|
|
998
|
+
|
|
999
|
+
var Loading = function (props) { return (jsxs(Container$5, __assign({}, props, { children: [jsx(BeatLoader, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1000
|
+
|
|
1001
|
+
var Wrapper$1 = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
|
|
1002
|
+
var templateObject_1$d;
|
|
903
1003
|
|
|
904
1004
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx(Medal, { type: "gold" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "silver" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxs("div", { children: [jsx(Medal, { type: "bronze" }, void 0), jsx(Spacer, { horizontal: 5 }, void 0), jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
905
1005
|
|
|
906
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
1006
|
+
var NotificationContainer = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"], ["\n width: fit-content;\n max-width: 460px;\n padding: 15px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n"])), function (_a) {
|
|
907
1007
|
var contrast = _a.contrast;
|
|
908
1008
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
909
1009
|
});
|
|
910
|
-
var templateObject_1$
|
|
1010
|
+
var templateObject_1$c;
|
|
911
1011
|
|
|
912
1012
|
var Notification = function (props) {
|
|
913
1013
|
if (!props.isVisible)
|
|
@@ -915,6 +1015,22 @@ var Notification = function (props) {
|
|
|
915
1015
|
return (jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxs(Fragment, { children: [jsx(Spacer, { horizontal: 15 }, void 0), jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.button && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Button, __assign({}, props.button, { size: "small" }), void 0)] }, void 0))] }), void 0));
|
|
916
1016
|
};
|
|
917
1017
|
|
|
1018
|
+
var Container$4 = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
1019
|
+
var Label$3 = styled(StyledParagraph)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1020
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1021
|
+
|
|
1022
|
+
var NumberField = function (props) {
|
|
1023
|
+
var onChange = function (value) {
|
|
1024
|
+
if (props.onChange)
|
|
1025
|
+
props.onChange(props.name, value);
|
|
1026
|
+
};
|
|
1027
|
+
var onBlur = function () {
|
|
1028
|
+
if (props.onBlur)
|
|
1029
|
+
props.onBlur(props.name);
|
|
1030
|
+
};
|
|
1031
|
+
return (jsxs(Container$4, { children: [jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autocomplete: props.autocomplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1032
|
+
};
|
|
1033
|
+
|
|
918
1034
|
var generateRandomString = function (length) {
|
|
919
1035
|
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
920
1036
|
var charsLength = chars.length;
|
|
@@ -925,7 +1041,7 @@ var generateRandomString = function (length) {
|
|
|
925
1041
|
return string;
|
|
926
1042
|
};
|
|
927
1043
|
|
|
928
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
1044
|
+
var PopupContainer = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n max-width: 25vw;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n padding: 15px;\n margin-top: 10px;\n border-radius: 6px;\n background-color: ", ";\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
929
1045
|
var isVisible = _a.isVisible;
|
|
930
1046
|
return (isVisible ? "100%" : "0%");
|
|
931
1047
|
}, function (_a) {
|
|
@@ -938,7 +1054,7 @@ var PopupContainer = styled.div(templateObject_1$6 || (templateObject_1$6 = __ma
|
|
|
938
1054
|
var contrast = _a.contrast;
|
|
939
1055
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
940
1056
|
});
|
|
941
|
-
var templateObject_1$
|
|
1057
|
+
var templateObject_1$a;
|
|
942
1058
|
|
|
943
1059
|
var Popup = function (props) {
|
|
944
1060
|
var popupRef = useRef(null);
|
|
@@ -974,23 +1090,82 @@ var Popup = function (props) {
|
|
|
974
1090
|
return (jsxs(Fragment, { children: [children, jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
975
1091
|
};
|
|
976
1092
|
|
|
977
|
-
var Wrapper = styled.div(templateObject_1$
|
|
978
|
-
var StyledProgressBar = styled.div(templateObject_2$
|
|
1093
|
+
var Wrapper = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1094
|
+
var StyledProgressBar = styled.div(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"], ["\n width: 100%;\n height: 15px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n margin-right: ", ";\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
979
1095
|
var showInfo = _a.showInfo;
|
|
980
1096
|
return (showInfo ? "10px" : "");
|
|
981
1097
|
});
|
|
982
|
-
var Indicator = styled.div(templateObject_3$
|
|
1098
|
+
var Indicator = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"], ["\n width: ", ";\n max-width: calc(100% - 6px);\n height: 9px;\n position: relative;\n background-color: ", ";\n border-radius: 8px;\n top: 3px;\n left: 3px;\n"])), function (_a) {
|
|
983
1099
|
var percent = _a.percent;
|
|
984
1100
|
return "calc(".concat(percent, "% - 6px)");
|
|
985
1101
|
}, function (_a) {
|
|
986
1102
|
var color = _a.color;
|
|
987
1103
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
988
1104
|
});
|
|
989
|
-
var templateObject_1$
|
|
1105
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$3;
|
|
990
1106
|
|
|
991
1107
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx(StyledProgressBar, __assign({}, props, { children: jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
|
|
992
1108
|
|
|
993
|
-
var
|
|
1109
|
+
var Fieldset = styled.fieldset(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1110
|
+
var RadioContainer = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1111
|
+
var RadioWrapper = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
1112
|
+
var Label$2 = styled(StyledParagraph)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
1113
|
+
var weight = _a.weight;
|
|
1114
|
+
return weight || 500;
|
|
1115
|
+
}, theme.colors.darkGray.base);
|
|
1116
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$2, templateObject_4$2;
|
|
1117
|
+
|
|
1118
|
+
var RadioGroup = function (props) {
|
|
1119
|
+
var onChange = function (value) {
|
|
1120
|
+
if (props.onChange)
|
|
1121
|
+
props.onChange(props.name, value);
|
|
1122
|
+
};
|
|
1123
|
+
var onBlur = function () {
|
|
1124
|
+
if (props.onBlur)
|
|
1125
|
+
props.onBlur(props.name);
|
|
1126
|
+
};
|
|
1127
|
+
return (jsxs(Fieldset, { children: [props.legend && jsx(Label$2, __assign({ as: "legend" }, { children: props.legend }), void 0), jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1128
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
1129
|
+
return (jsxs(RadioWrapper, { children: [jsx(Radio, { id: id, name: props.name, value: value, defaultChecked: props.initialValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
1130
|
+
}) }, void 0)] }, void 0));
|
|
1131
|
+
};
|
|
1132
|
+
|
|
1133
|
+
var Container$3 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1134
|
+
var Label$1 = styled(StyledParagraph)(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1135
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1136
|
+
|
|
1137
|
+
var SelectField = function (props) {
|
|
1138
|
+
var onChange = function (value) {
|
|
1139
|
+
if (props.onChange)
|
|
1140
|
+
props.onChange(props.name, value);
|
|
1141
|
+
};
|
|
1142
|
+
var onBlur = function () {
|
|
1143
|
+
if (props.onBlur)
|
|
1144
|
+
props.onBlur(props.name);
|
|
1145
|
+
};
|
|
1146
|
+
return (jsxs(Container$3, { children: [jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, initialValue: props.initialValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a) {
|
|
1147
|
+
var value = _a.value, label = _a.label;
|
|
1148
|
+
return (jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1149
|
+
}) }), void 0)] }, void 0));
|
|
1150
|
+
};
|
|
1151
|
+
|
|
1152
|
+
var Container$2 = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
1153
|
+
var Label = styled(StyledParagraph)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1154
|
+
var templateObject_1$6, templateObject_2$5;
|
|
1155
|
+
|
|
1156
|
+
var ToggleField = function (props) {
|
|
1157
|
+
var onChange = function (value) {
|
|
1158
|
+
if (props.onChange)
|
|
1159
|
+
props.onChange(props.name, value);
|
|
1160
|
+
};
|
|
1161
|
+
var onBlur = function () {
|
|
1162
|
+
if (props.onBlur)
|
|
1163
|
+
props.onBlur(props.name);
|
|
1164
|
+
};
|
|
1165
|
+
return (jsxs(Container$2, { children: [jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsx(Spacer, { vertical: 5 }, void 0), jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultChecked: props.initialValue, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1166
|
+
};
|
|
1167
|
+
|
|
1168
|
+
var TooltipContainer = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"], ["\n width: fit-content;\n position: fixed;\n opacity: ", ";\n top: ", ";\n left: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 5px;\n pointer-events: none;\n z-index: 9;\n"])), function (_a) {
|
|
994
1169
|
var isVisible = _a.isVisible;
|
|
995
1170
|
return (isVisible ? "100%" : "0%");
|
|
996
1171
|
}, function (_a) {
|
|
@@ -1000,7 +1175,7 @@ var TooltipContainer = styled.div(templateObject_1$4 || (templateObject_1$4 = __
|
|
|
1000
1175
|
var x = _a.x;
|
|
1001
1176
|
return (x ? "".concat(x, "px") : "");
|
|
1002
1177
|
});
|
|
1003
|
-
var TooltipTitle = styled.div(templateObject_2$
|
|
1178
|
+
var TooltipTitle = styled.div(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n width: 100%;\n padding: 12px 16px;\n background-color: ", ";\n border-radius: 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n display: flex;\n align-items: center;\n justify-content: center;\n"])), function (_a) {
|
|
1004
1179
|
var color = _a.color;
|
|
1005
1180
|
switch (color) {
|
|
1006
1181
|
default:
|
|
@@ -1010,7 +1185,7 @@ var TooltipTitle = styled.div(templateObject_2$3 || (templateObject_2$3 = __make
|
|
|
1010
1185
|
return theme.colors.lightGray.dark;
|
|
1011
1186
|
}
|
|
1012
1187
|
});
|
|
1013
|
-
var templateObject_1$
|
|
1188
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1014
1189
|
|
|
1015
1190
|
var Tooltip = function (props) {
|
|
1016
1191
|
var tooltipRef = useRef(null);
|
|
@@ -1044,28 +1219,67 @@ var Tooltip = function (props) {
|
|
|
1044
1219
|
theme.colors.lightGray.light }, void 0) }), void 0), jsx(TooltipTitle, __assign({ color: props.color }, { children: jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0) }), void 0)] }), void 0)] }, void 0));
|
|
1045
1220
|
};
|
|
1046
1221
|
|
|
1047
|
-
var
|
|
1048
|
-
|
|
1222
|
+
var FeedbackColors = {
|
|
1223
|
+
success: theme.colors.green.base,
|
|
1224
|
+
error: theme.colors.red.base,
|
|
1225
|
+
};
|
|
1226
|
+
var FieldWrapper = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 30px;\n }\n"], ["\n input {\n border-color: ", ";\n }\n\n :not(:last-child) {\n margin-bottom: 30px;\n }\n"])), function (_a) {
|
|
1227
|
+
var status = _a.status;
|
|
1228
|
+
return FeedbackColors[status];
|
|
1229
|
+
});
|
|
1230
|
+
var FeedbackWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 5px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n margin-right: 5px;\n }\n\n svg {\n fill: ", ";\n }\n p {\n color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n margin-top: 5px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n margin-right: 5px;\n }\n\n svg {\n fill: ", ";\n }\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
1231
|
+
var status = _a.status;
|
|
1232
|
+
return FeedbackColors[status];
|
|
1233
|
+
}, function (_a) {
|
|
1234
|
+
var status = _a.status;
|
|
1235
|
+
return FeedbackColors[status];
|
|
1236
|
+
});
|
|
1237
|
+
var templateObject_1$4, templateObject_2$3;
|
|
1238
|
+
|
|
1239
|
+
var WithValidation = function (_a) {
|
|
1240
|
+
var status = _a.status, message = _a.message, children = _a.children;
|
|
1241
|
+
if (!message)
|
|
1242
|
+
return jsx(FieldWrapper, __assign({ status: status }, { children: children }), void 0);
|
|
1243
|
+
var icons = {
|
|
1244
|
+
success: "check",
|
|
1245
|
+
error: "warning",
|
|
1246
|
+
};
|
|
1247
|
+
return (jsxs(FieldWrapper, __assign({ status: status }, { children: [children, jsxs(FeedbackWrapper, __assign({ status: status }, { children: [jsx(Icon, { type: icons[status], size: "small" }, void 0), jsx(Paragraph, __assign({ size: "small" }, { children: message }), void 0)] }), void 0)] }), void 0));
|
|
1248
|
+
};
|
|
1249
|
+
|
|
1250
|
+
var FormWrapper = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
1251
|
+
var ButtonWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
1049
1252
|
var templateObject_1$3, templateObject_2$2;
|
|
1050
1253
|
|
|
1051
1254
|
var Form = function (props) {
|
|
1052
|
-
var
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
initialValues
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1255
|
+
var _a = useState({}), values = _a[0], setValues = _a[1];
|
|
1256
|
+
var _b = useState({}), feedback = _b[0], setFeedback = _b[1];
|
|
1257
|
+
useEffect(function () {
|
|
1258
|
+
var initialValues = {};
|
|
1259
|
+
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1260
|
+
var field = _a[_i];
|
|
1261
|
+
initialValues[field.name] = field.initialValue;
|
|
1262
|
+
}
|
|
1263
|
+
setValues(initialValues);
|
|
1264
|
+
}, []);
|
|
1059
1265
|
var onChangeFormField = function (fieldName, value) {
|
|
1060
|
-
var _a, _b;
|
|
1061
|
-
|
|
1062
|
-
|
|
1266
|
+
var _a, _b, _c;
|
|
1267
|
+
var feedbackForField = { status: undefined, message: undefined };
|
|
1268
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1269
|
+
if (field.validateTrigger && field.validateTrigger.includes("onChange")) {
|
|
1270
|
+
feedbackForField = field.validator(values[fieldName]);
|
|
1271
|
+
}
|
|
1272
|
+
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1273
|
+
var newValues = __assign(__assign({}, values), (_b = {}, _b[fieldName] = value, _b));
|
|
1274
|
+
setValues(newValues);
|
|
1275
|
+
if (props.onChangeFields)
|
|
1276
|
+
props.onChangeFields(newValues, __assign(__assign({}, values), (_c = {}, _c[fieldName] = value, _c)));
|
|
1063
1277
|
};
|
|
1064
|
-
var onBlurFormField = function (fieldName
|
|
1278
|
+
var onBlurFormField = function (fieldName) {
|
|
1065
1279
|
var _a;
|
|
1066
|
-
var field = props.fields.find(function (field) { return field.name === fieldName
|
|
1067
|
-
if (field && field.
|
|
1068
|
-
var feedbackForField = field.validator(
|
|
1280
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1281
|
+
if (field.validateTrigger && field.validateTrigger.includes("onBlur")) {
|
|
1282
|
+
var feedbackForField = field.validator(values[fieldName]);
|
|
1069
1283
|
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1070
1284
|
}
|
|
1071
1285
|
};
|
|
@@ -1081,10 +1295,38 @@ var Form = function (props) {
|
|
|
1081
1295
|
}
|
|
1082
1296
|
}
|
|
1083
1297
|
setFeedback(feedback);
|
|
1084
|
-
if (isValid)
|
|
1298
|
+
if (isValid && !!props.onSubmit) {
|
|
1085
1299
|
props.onSubmit(values);
|
|
1300
|
+
}
|
|
1301
|
+
else if (!!props.onError) {
|
|
1302
|
+
props.onError(feedback);
|
|
1303
|
+
}
|
|
1086
1304
|
};
|
|
1087
|
-
return (jsxs(Fragment, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 15 }, void 0)] }, void 0)),
|
|
1305
|
+
return (jsxs(Fragment, { children: [props.title && (jsxs(Fragment, { children: [jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), jsx(Spacer, { vertical: 15 }, void 0)] }, void 0)), props.description && (jsxs(Fragment, { children: [jsx(Paragraph, __assign({ color: "darkGray", weight: "regular" }, { children: props.description }), void 0), jsx(Spacer, { vertical: 20 }, void 0)] }, void 0)), jsx(FormWrapper, { children: props.fields.map(function (field, index) {
|
|
1306
|
+
switch (field.type) {
|
|
1307
|
+
case "text":
|
|
1308
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1309
|
+
jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1310
|
+
case "password":
|
|
1311
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1312
|
+
jsx(InputField, __assign({ isPassword: true }, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1313
|
+
case "radio":
|
|
1314
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1315
|
+
jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1316
|
+
case "number":
|
|
1317
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1318
|
+
jsx(NumberField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1319
|
+
case "checkbox":
|
|
1320
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1321
|
+
jsx(Checkboxes, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1322
|
+
case "select":
|
|
1323
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1324
|
+
jsx(SelectField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1325
|
+
case "toggle":
|
|
1326
|
+
return (createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1327
|
+
jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1328
|
+
}
|
|
1329
|
+
}) }, void 0), props.button && (jsx(ButtonWrapper, { children: jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1088
1330
|
};
|
|
1089
1331
|
|
|
1090
1332
|
var Container$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n min-width: 30px;\n max-width: 30px;\n min-height: 30px;\n max-height: 30px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n border-color: ", ";\n border-width: ", ";\n border-style: solid;\n box-sizing: border-box;\n\n h6 {\n color: ", ";\n line-height: 12px;\n text-transform: uppercase;\n }\n"], ["\n min-width: 30px;\n max-width: 30px;\n min-height: 30px;\n max-height: 30px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 3px;\n border-color: ", ";\n border-width: ", ";\n border-style: solid;\n box-sizing: border-box;\n\n h6 {\n color: ", ";\n line-height: 12px;\n text-transform: uppercase;\n }\n"])), function (_a) {
|
|
@@ -1143,7 +1385,7 @@ var CardWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTempl
|
|
|
1143
1385
|
var width = _a.width;
|
|
1144
1386
|
return (width ? "".concat(width, "px") : "720px");
|
|
1145
1387
|
});
|
|
1146
|
-
var CloseIconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -
|
|
1388
|
+
var CloseIconWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -10px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -10px;\n\n svg {\n cursor: pointer;\n }\n svg:hover {\n fill: ", ";\n }\n"])), theme.colors.darkGray.base);
|
|
1147
1389
|
var ChildrenWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
1148
1390
|
var FooterContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"], ["\n width: calc(100% + 30px);\n box-sizing: border-box;\n min-height: 45px;\n margin-top: 15px;\n margin-bottom: -15px;\n margin-left: -15px;\n padding: 15px 50px;\n background-color: ", ";\n border-top: 1px solid ", ";\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker);
|
|
1149
1391
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1161,5 +1403,5 @@ var Modal = function (props) {
|
|
|
1161
1403
|
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1162
1404
|
};
|
|
1163
1405
|
|
|
1164
|
-
export { Button, Card, Checkbox, Flag, Form,
|
|
1406
|
+
export { Alert, Button, Card, Checkbox, Checkboxes, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Keyboard, Link, Loading, Logo, Medal, Medals, Modal, Notification, Number, NumberField, Paragraph, Popup, ProgressBar, Radio, RadioGroup, Select, SelectField, Spacer, Subheading, Toggle, ToggleField, Tooltip, Trophy, theme };
|
|
1165
1407
|
//# sourceMappingURL=index.es.js.map
|