@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.js
CHANGED
|
@@ -5,11 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var styled = require('styled-components');
|
|
7
7
|
var React = require('react');
|
|
8
|
+
var BeatLoader = require('react-spinners/BeatLoader');
|
|
8
9
|
|
|
9
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
11
|
|
|
11
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
+
var BeatLoader__default = /*#__PURE__*/_interopDefaultLegacy(BeatLoader);
|
|
13
15
|
|
|
14
16
|
var theme = {
|
|
15
17
|
colors: {
|
|
@@ -181,12 +183,22 @@ var __assign = function() {
|
|
|
181
183
|
return __assign.apply(this, arguments);
|
|
182
184
|
};
|
|
183
185
|
|
|
186
|
+
function __spreadArray(to, from, pack) {
|
|
187
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
188
|
+
if (ar || !(i in from)) {
|
|
189
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
190
|
+
ar[i] = from[i];
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
194
|
+
}
|
|
195
|
+
|
|
184
196
|
function __makeTemplateObject(cooked, raw) {
|
|
185
197
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
186
198
|
return cooked;
|
|
187
199
|
}
|
|
188
200
|
|
|
189
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
201
|
+
var StyledButton = styled__default["default"].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) {
|
|
190
202
|
var fluid = _a.fluid;
|
|
191
203
|
return (fluid ? "100%" : "fit-content");
|
|
192
204
|
}, function (_a) {
|
|
@@ -236,11 +248,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$r || (temp
|
|
|
236
248
|
? theme.button.medium.heightActive
|
|
237
249
|
: theme.button[size].heightActive;
|
|
238
250
|
});
|
|
239
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
251
|
+
var DisabledButton = styled__default["default"](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) {
|
|
240
252
|
var size = _a.size;
|
|
241
253
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
242
254
|
});
|
|
243
|
-
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$
|
|
255
|
+
var GhostButton = styled__default["default"](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) {
|
|
244
256
|
var size = _a.size;
|
|
245
257
|
return !size
|
|
246
258
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -256,7 +268,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$5 ||
|
|
|
256
268
|
? theme.button.medium.marginTopActive
|
|
257
269
|
: theme.button[size].marginTopActive;
|
|
258
270
|
});
|
|
259
|
-
var templateObject_1$
|
|
271
|
+
var templateObject_1$A, templateObject_2$i, templateObject_3$6;
|
|
260
272
|
|
|
261
273
|
var Button = function (props) {
|
|
262
274
|
var onClick = function () {
|
|
@@ -273,7 +285,7 @@ var Button = function (props) {
|
|
|
273
285
|
return (jsxRuntime.jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
|
|
274
286
|
};
|
|
275
287
|
|
|
276
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
288
|
+
var StyledCheckbox = styled__default["default"].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) {
|
|
277
289
|
var checked = _a.checked, disabled = _a.disabled;
|
|
278
290
|
if (disabled)
|
|
279
291
|
return theme.colors.lightGray.darker;
|
|
@@ -294,29 +306,40 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$q || (templ
|
|
|
294
306
|
return theme.colors.green.base;
|
|
295
307
|
return theme.colors.lightGray.darker;
|
|
296
308
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
297
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$z;
|
|
298
310
|
|
|
299
311
|
var Checkbox = function (props) {
|
|
300
|
-
var
|
|
301
|
-
var
|
|
312
|
+
var _a;
|
|
313
|
+
var wrapperRef = React.useRef(null);
|
|
314
|
+
var inputRef = React.useRef(null);
|
|
315
|
+
var _b = React.useState(props.checked), checked = _b[0], setChecked = _b[1];
|
|
302
316
|
React.useEffect(function () {
|
|
303
317
|
var _a;
|
|
304
318
|
if (props.autoFocus)
|
|
305
|
-
(_a =
|
|
319
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
306
320
|
}, []);
|
|
321
|
+
React.useEffect(function () {
|
|
322
|
+
setChecked(inputRef.current.checked);
|
|
323
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
324
|
+
React.useEffect(function () {
|
|
325
|
+
inputRef.current.checked = props.checked;
|
|
326
|
+
setChecked(props.checked);
|
|
327
|
+
}, [props.checked]);
|
|
307
328
|
var toggle = function () {
|
|
308
329
|
var _a;
|
|
309
330
|
if (!props.disabled) {
|
|
310
|
-
|
|
311
|
-
|
|
331
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
332
|
+
var newValue = !inputRef.current.checked;
|
|
333
|
+
inputRef.current.checked = newValue;
|
|
334
|
+
setChecked(newValue);
|
|
312
335
|
if (!!props.onChange)
|
|
313
|
-
props.onChange(
|
|
336
|
+
props.onChange(props.value);
|
|
314
337
|
}
|
|
315
338
|
};
|
|
316
|
-
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref:
|
|
339
|
+
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
317
340
|
};
|
|
318
341
|
|
|
319
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
342
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
320
343
|
var size = _a.size;
|
|
321
344
|
switch (size) {
|
|
322
345
|
case "small":
|
|
@@ -339,15 +362,16 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$p || (templateOb
|
|
|
339
362
|
return "27px";
|
|
340
363
|
}
|
|
341
364
|
});
|
|
342
|
-
var templateObject_1$
|
|
365
|
+
var templateObject_1$y;
|
|
343
366
|
|
|
344
367
|
var flags = {
|
|
345
368
|
"nl-NL": (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsxRuntime.jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
346
369
|
"nl-BE": (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M15 0h6c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-6V0z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#ffd800", d: "M7 0H15V18H7z" }, void 0), jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h6v18H1c-.6 0-1-.4-1-1V1z", fill: "#23292f" }, void 0)] }), void 0)),
|
|
370
|
+
"en-GB": (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { fill: "#158cc7", d: "M0 11.9L0 16 5 11.9z" }, void 0), jsxRuntime.jsx("path", { fill: "#158cc7", d: "M8.1 0L7 0 2.5 0 8.1 4.6z" }, void 0), jsxRuntime.jsx("path", { fill: "#158cc7", d: "M0 2L0 6.1 5 6.1z" }, void 0), jsxRuntime.jsx("path", { fill: "#158cc7", d: "M22 16L22 11.9 17 11.9z" }, void 0), jsxRuntime.jsx("path", { fill: "#158cc7", d: "M22 6.1L22 2 17 6.1z" }, void 0), jsxRuntime.jsx("path", { fill: "#158cc7", d: "M19.5 0L15 0 13.9 0 13.9 4.6z" }, void 0), jsxRuntime.jsx("path", { fill: "#158cc7", d: "M8.1 13.4L2.5 18 7 18 8.1 18 8.1 18z" }, void 0), jsxRuntime.jsx("path", { fill: "#158cc7", d: "M13.9 18L13.9 18 15 18 19.5 18 13.9 13.4z" }, void 0), jsxRuntime.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), jsxRuntime.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)),
|
|
347
371
|
};
|
|
348
372
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
349
373
|
|
|
350
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
374
|
+
var StyledHeading = styled__default["default"].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) {
|
|
351
375
|
var type = _a.type;
|
|
352
376
|
return theme.heading[type].fontSize;
|
|
353
377
|
}, function (_a) {
|
|
@@ -371,14 +395,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$o || (templ
|
|
|
371
395
|
var align = _a.align;
|
|
372
396
|
return align;
|
|
373
397
|
});
|
|
374
|
-
var templateObject_1$
|
|
398
|
+
var templateObject_1$x;
|
|
375
399
|
|
|
376
400
|
var Heading = function (props) {
|
|
377
401
|
var element = !!props.as ? props.as : props.type;
|
|
378
402
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
379
403
|
};
|
|
380
404
|
|
|
381
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
405
|
+
var Wrapper$8 = styled__default["default"].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) {
|
|
382
406
|
var size = _a.size;
|
|
383
407
|
return theme.icon[size] || theme.icon.medium;
|
|
384
408
|
}, function (_a) {
|
|
@@ -406,7 +430,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$n || (templateOb
|
|
|
406
430
|
return theme.colors.lightGray.light;
|
|
407
431
|
}
|
|
408
432
|
});
|
|
409
|
-
var templateObject_1$
|
|
433
|
+
var templateObject_1$w;
|
|
410
434
|
|
|
411
435
|
var icons = {
|
|
412
436
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -429,7 +453,7 @@ var icons = {
|
|
|
429
453
|
};
|
|
430
454
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
431
455
|
|
|
432
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
456
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
433
457
|
var size = _a.size;
|
|
434
458
|
switch (size) {
|
|
435
459
|
default:
|
|
@@ -441,7 +465,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$m || (templateOb
|
|
|
441
465
|
return "118px";
|
|
442
466
|
}
|
|
443
467
|
});
|
|
444
|
-
var templateObject_1$
|
|
468
|
+
var templateObject_1$v;
|
|
445
469
|
|
|
446
470
|
var illustrations = {
|
|
447
471
|
keyboard: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -456,11 +480,11 @@ var illustrations = {
|
|
|
456
480
|
};
|
|
457
481
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
458
482
|
|
|
459
|
-
var PasswordInputWrapper = styled__default["default"].div(templateObject_1$
|
|
483
|
+
var PasswordInputWrapper = styled__default["default"].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) {
|
|
460
484
|
var disabled = _a.disabled;
|
|
461
485
|
return (disabled ? "not-allowed" : "pointer");
|
|
462
486
|
});
|
|
463
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
487
|
+
var StyledInput = styled__default["default"].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) {
|
|
464
488
|
var disabled = _a.disabled;
|
|
465
489
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
466
490
|
}, function (_a) {
|
|
@@ -473,7 +497,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$c || (templa
|
|
|
473
497
|
var disabled = _a.disabled;
|
|
474
498
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
475
499
|
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, theme.colors.lightGray.darker, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
476
|
-
var templateObject_1$
|
|
500
|
+
var templateObject_1$u, templateObject_2$h;
|
|
477
501
|
|
|
478
502
|
var PasswordInput = function (props) {
|
|
479
503
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -509,7 +533,7 @@ Input.Password = PasswordInput;
|
|
|
509
533
|
|
|
510
534
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsxRuntime.jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsxRuntime.jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsxRuntime.jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsxRuntime.jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsxRuntime.jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { children: jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
511
535
|
|
|
512
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
536
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
513
537
|
var size = _a.size;
|
|
514
538
|
switch (size) {
|
|
515
539
|
default:
|
|
@@ -519,7 +543,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$k || (templateOb
|
|
|
519
543
|
return "116px";
|
|
520
544
|
}
|
|
521
545
|
});
|
|
522
|
-
var templateObject_1$
|
|
546
|
+
var templateObject_1$t;
|
|
523
547
|
|
|
524
548
|
var medals = {
|
|
525
549
|
small: {
|
|
@@ -535,7 +559,66 @@ var medals = {
|
|
|
535
559
|
};
|
|
536
560
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
537
561
|
|
|
538
|
-
var
|
|
562
|
+
var Wrapper$5 = styled__default["default"].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) {
|
|
563
|
+
var disabled = _a.disabled;
|
|
564
|
+
return (disabled ? "49.5px" : "");
|
|
565
|
+
});
|
|
566
|
+
var StyledInputNumber = styled__default["default"].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) {
|
|
567
|
+
var disabled = _a.disabled;
|
|
568
|
+
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
569
|
+
}, function (_a) {
|
|
570
|
+
var disabled = _a.disabled;
|
|
571
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
572
|
+
}, function (_a) {
|
|
573
|
+
var disabled = _a.disabled;
|
|
574
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
575
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
576
|
+
var disabled = _a.disabled;
|
|
577
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
578
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
579
|
+
var templateObject_1$s, templateObject_2$g;
|
|
580
|
+
|
|
581
|
+
var Number = function (props) {
|
|
582
|
+
var ref = React.useRef(null);
|
|
583
|
+
var _a = React.useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
584
|
+
var onChange = function (e) {
|
|
585
|
+
if (!props.disabled) {
|
|
586
|
+
var value_1 = parseInt(e.target.value);
|
|
587
|
+
setValue(value_1);
|
|
588
|
+
if (!!props.onChange)
|
|
589
|
+
props.onChange(e.target.value);
|
|
590
|
+
}
|
|
591
|
+
};
|
|
592
|
+
var decrease = function () {
|
|
593
|
+
var _a;
|
|
594
|
+
var newValue = value - 1;
|
|
595
|
+
if (props.min && newValue < props.min) {
|
|
596
|
+
setValue(props.min);
|
|
597
|
+
}
|
|
598
|
+
else {
|
|
599
|
+
setValue(newValue);
|
|
600
|
+
if (!!props.onChange)
|
|
601
|
+
props.onChange("".concat(newValue));
|
|
602
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
603
|
+
}
|
|
604
|
+
};
|
|
605
|
+
var increase = function () {
|
|
606
|
+
var _a;
|
|
607
|
+
var newValue = value + 1;
|
|
608
|
+
if (props.max && newValue > props.max) {
|
|
609
|
+
setValue(props.max);
|
|
610
|
+
}
|
|
611
|
+
else {
|
|
612
|
+
setValue(newValue);
|
|
613
|
+
if (!!props.onChange)
|
|
614
|
+
props.onChange("".concat(newValue));
|
|
615
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
616
|
+
}
|
|
617
|
+
};
|
|
618
|
+
return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
619
|
+
};
|
|
620
|
+
|
|
621
|
+
var StyledParagraph = styled__default["default"].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) {
|
|
539
622
|
var size = _a.size;
|
|
540
623
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
541
624
|
}, function (_a) {
|
|
@@ -567,11 +650,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$j || (templa
|
|
|
567
650
|
var align = _a.align;
|
|
568
651
|
return align;
|
|
569
652
|
});
|
|
570
|
-
var templateObject_1$
|
|
653
|
+
var templateObject_1$r;
|
|
571
654
|
|
|
572
655
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
573
656
|
|
|
574
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
657
|
+
var StyledRadio = styled__default["default"].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) {
|
|
575
658
|
var checked = _a.checked, disabled = _a.disabled;
|
|
576
659
|
if (disabled)
|
|
577
660
|
return theme.colors.lightGray.darker;
|
|
@@ -591,42 +674,48 @@ var StyledRadio = styled__default["default"].div(templateObject_1$i || (template
|
|
|
591
674
|
if (checked)
|
|
592
675
|
return theme.colors.green.base;
|
|
593
676
|
return theme.colors.lightGray.darker;
|
|
594
|
-
},
|
|
595
|
-
var CheckedDot = styled__default["default"].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) {
|
|
677
|
+
}, function (_a) {
|
|
596
678
|
var checked = _a.checked, disabled = _a.disabled;
|
|
597
679
|
if (disabled)
|
|
598
680
|
return theme.colors.lightGray.darker;
|
|
599
681
|
if (checked)
|
|
600
682
|
return theme.colors.green.base;
|
|
601
683
|
return "";
|
|
602
|
-
});
|
|
603
|
-
var templateObject_1$
|
|
684
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
685
|
+
var templateObject_1$q;
|
|
604
686
|
|
|
605
687
|
var Radio = function (props) {
|
|
606
|
-
var
|
|
607
|
-
var
|
|
688
|
+
var _a;
|
|
689
|
+
var wrapperRef = React.useRef(null);
|
|
690
|
+
var inputRef = React.useRef(null);
|
|
691
|
+
var _b = React.useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
608
692
|
React.useEffect(function () {
|
|
609
|
-
var _a;
|
|
610
693
|
if (props.autoFocus)
|
|
611
|
-
|
|
694
|
+
wrapperRef.current.focus();
|
|
695
|
+
if (props.defaultChecked)
|
|
696
|
+
inputRef.current.checked = true;
|
|
612
697
|
}, []);
|
|
698
|
+
React.useEffect(function () {
|
|
699
|
+
setChecked(inputRef.current.checked);
|
|
700
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
613
701
|
var toggle = function () {
|
|
614
702
|
var _a;
|
|
615
703
|
if (!props.disabled) {
|
|
616
|
-
|
|
617
|
-
|
|
704
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
705
|
+
inputRef.current.checked = true;
|
|
706
|
+
setChecked(true);
|
|
618
707
|
if (!!props.onChange)
|
|
619
|
-
props.onChange(
|
|
708
|
+
props.onChange(props.value);
|
|
620
709
|
}
|
|
621
710
|
};
|
|
622
|
-
return (jsxRuntime.
|
|
711
|
+
return (jsxRuntime.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: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
623
712
|
};
|
|
624
713
|
|
|
625
|
-
var Wrapper$
|
|
714
|
+
var Wrapper$4 = styled__default["default"].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) {
|
|
626
715
|
var disabled = _a.disabled;
|
|
627
716
|
return (disabled ? "not-allowed" : "pointer");
|
|
628
717
|
});
|
|
629
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
718
|
+
var StyledSelect = styled__default["default"].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) {
|
|
630
719
|
var disabled = _a.disabled;
|
|
631
720
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
632
721
|
}, function (_a) {
|
|
@@ -639,31 +728,35 @@ var StyledSelect = styled__default["default"].select(templateObject_2$a || (temp
|
|
|
639
728
|
var isChanged = _a.isChanged;
|
|
640
729
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
641
730
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
642
|
-
var templateObject_1$
|
|
731
|
+
var templateObject_1$p, templateObject_2$f;
|
|
643
732
|
|
|
644
733
|
var Select = function (props) {
|
|
645
|
-
var _a = React.useState(
|
|
646
|
-
var
|
|
734
|
+
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
735
|
+
var _b = React.useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
736
|
+
var onChange = function (e) {
|
|
647
737
|
if (!props.disabled) {
|
|
738
|
+
var value_1 = e.target.value;
|
|
739
|
+
setValue(value_1);
|
|
648
740
|
setIsChanged(true);
|
|
649
|
-
props.onChange
|
|
741
|
+
if (!!props.onChange)
|
|
742
|
+
props.onChange(value_1);
|
|
650
743
|
}
|
|
651
744
|
};
|
|
652
|
-
return (jsxRuntime.jsxs(Wrapper$
|
|
745
|
+
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
653
746
|
};
|
|
654
747
|
|
|
655
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
748
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
656
749
|
var horizontal = _a.horizontal;
|
|
657
750
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
658
751
|
}, function (_a) {
|
|
659
752
|
var vertical = _a.vertical;
|
|
660
753
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
661
754
|
});
|
|
662
|
-
var templateObject_1$
|
|
755
|
+
var templateObject_1$o;
|
|
663
756
|
|
|
664
757
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
665
758
|
|
|
666
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
759
|
+
var StyledSubheading = styled__default["default"].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) {
|
|
667
760
|
var size = _a.size;
|
|
668
761
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
669
762
|
}, function (_a) {
|
|
@@ -691,11 +784,60 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$f || (templ
|
|
|
691
784
|
return theme.colors.darkGray.dark;
|
|
692
785
|
}
|
|
693
786
|
});
|
|
694
|
-
var templateObject_1$
|
|
787
|
+
var templateObject_1$n;
|
|
695
788
|
|
|
696
789
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
697
790
|
|
|
698
|
-
var
|
|
791
|
+
var Container$8 = styled__default["default"].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) {
|
|
792
|
+
var disabled = _a.disabled;
|
|
793
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
794
|
+
}, function (_a) {
|
|
795
|
+
var checked = _a.checked, disabled = _a.disabled;
|
|
796
|
+
if (disabled)
|
|
797
|
+
return theme.colors.lightGray.dark;
|
|
798
|
+
return checked ? theme.colors.green.base : theme.colors.lightGray.darker;
|
|
799
|
+
}, function (_a) {
|
|
800
|
+
var checked = _a.checked;
|
|
801
|
+
return (checked ? "3px" : "");
|
|
802
|
+
}, function (_a) {
|
|
803
|
+
var checked = _a.checked;
|
|
804
|
+
return (checked ? "" : "3px");
|
|
805
|
+
}, function (_a) {
|
|
806
|
+
var disabled = _a.disabled;
|
|
807
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
808
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
809
|
+
var templateObject_1$m;
|
|
810
|
+
|
|
811
|
+
var Toggle = function (props) {
|
|
812
|
+
var _a;
|
|
813
|
+
var containerRef = React.useRef(null);
|
|
814
|
+
var inputRef = React.useRef(null);
|
|
815
|
+
var _b = React.useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
816
|
+
React.useEffect(function () {
|
|
817
|
+
var _a;
|
|
818
|
+
if (props.autoFocus)
|
|
819
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
820
|
+
if (props.defaultChecked)
|
|
821
|
+
inputRef.current.checked = true;
|
|
822
|
+
}, []);
|
|
823
|
+
React.useEffect(function () {
|
|
824
|
+
setChecked(inputRef.current.checked);
|
|
825
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
826
|
+
var toggle = function () {
|
|
827
|
+
var _a;
|
|
828
|
+
if (!props.disabled) {
|
|
829
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
830
|
+
var newValue = !inputRef.current.checked;
|
|
831
|
+
inputRef.current.checked = newValue;
|
|
832
|
+
setChecked(newValue);
|
|
833
|
+
if (!!props.onChange)
|
|
834
|
+
props.onChange(newValue);
|
|
835
|
+
}
|
|
836
|
+
};
|
|
837
|
+
return (jsxRuntime.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: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
838
|
+
};
|
|
839
|
+
|
|
840
|
+
var Wrapper$3 = styled__default["default"].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) {
|
|
699
841
|
var level = _a.level;
|
|
700
842
|
switch (level) {
|
|
701
843
|
case 1:
|
|
@@ -706,7 +848,7 @@ var Wrapper$4 = styled__default["default"].div(templateObject_1$e || (templateOb
|
|
|
706
848
|
return "70px";
|
|
707
849
|
}
|
|
708
850
|
});
|
|
709
|
-
var templateObject_1$
|
|
851
|
+
var templateObject_1$l;
|
|
710
852
|
|
|
711
853
|
var trophies = {
|
|
712
854
|
1: {
|
|
@@ -740,9 +882,30 @@ var trophies = {
|
|
|
740
882
|
3: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 96 118" }, { children: [jsxRuntime.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), jsxRuntime.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), jsxRuntime.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)),
|
|
741
883
|
},
|
|
742
884
|
};
|
|
743
|
-
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$
|
|
885
|
+
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
744
886
|
|
|
745
|
-
var
|
|
887
|
+
var Container$7 = styled__default["default"].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) {
|
|
888
|
+
var type = _a.type;
|
|
889
|
+
switch (type) {
|
|
890
|
+
case "success":
|
|
891
|
+
return "rgba(139, 220, 174, 20%)";
|
|
892
|
+
case "error":
|
|
893
|
+
return "rgba(247, 119, 140, 20%)";
|
|
894
|
+
}
|
|
895
|
+
}, function (_a) {
|
|
896
|
+
var type = _a.type;
|
|
897
|
+
switch (type) {
|
|
898
|
+
case "success":
|
|
899
|
+
return theme.colors.green.base;
|
|
900
|
+
case "error":
|
|
901
|
+
return theme.colors.red.base;
|
|
902
|
+
}
|
|
903
|
+
});
|
|
904
|
+
var templateObject_1$k;
|
|
905
|
+
|
|
906
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$7, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
907
|
+
|
|
908
|
+
var StyledCard = styled__default["default"].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) {
|
|
746
909
|
var ellipse = _a.ellipse;
|
|
747
910
|
return ellipse
|
|
748
911
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -751,135 +914,48 @@ var StyledCard = styled__default["default"].div(templateObject_1$d || (templateO
|
|
|
751
914
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
752
915
|
: "";
|
|
753
916
|
});
|
|
754
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
917
|
+
var Ellipse = styled__default["default"].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) {
|
|
755
918
|
var color = _a.color;
|
|
756
919
|
return color ? theme.colors[color].light : "";
|
|
757
920
|
});
|
|
758
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
759
|
-
var templateObject_1$
|
|
921
|
+
var Content = styled__default["default"].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"])));
|
|
922
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$5;
|
|
760
923
|
|
|
761
924
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }, void 0), jsxRuntime.jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
762
925
|
|
|
763
|
-
var
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
var StyledInputNumber = styled__default["default"].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) {
|
|
768
|
-
var disabled = _a.disabled;
|
|
769
|
-
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
770
|
-
}, function (_a) {
|
|
771
|
-
var disabled = _a.disabled;
|
|
772
|
-
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
773
|
-
}, function (_a) {
|
|
774
|
-
var disabled = _a.disabled;
|
|
775
|
-
return (disabled ? "not-allowed" : "pointer");
|
|
776
|
-
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
777
|
-
var disabled = _a.disabled;
|
|
778
|
-
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
779
|
-
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
780
|
-
var templateObject_1$c, templateObject_2$8;
|
|
781
|
-
|
|
782
|
-
var Number = function (props) {
|
|
783
|
-
var ref = React.useRef(null);
|
|
784
|
-
var _a = React.useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
785
|
-
var onChange = function (e) {
|
|
786
|
-
if (!props.disabled) {
|
|
787
|
-
var value_1 = parseInt(e.target.value);
|
|
788
|
-
setValue(value_1);
|
|
789
|
-
if (!!props.onChange)
|
|
790
|
-
props.onChange(e.target.value);
|
|
791
|
-
}
|
|
792
|
-
};
|
|
793
|
-
var decrease = function () {
|
|
794
|
-
var _a;
|
|
795
|
-
var newValue = value - 1;
|
|
796
|
-
if (props.min && newValue < props.min) ;
|
|
797
|
-
else {
|
|
798
|
-
setValue(newValue);
|
|
799
|
-
if (!!props.onChange)
|
|
800
|
-
props.onChange("".concat(newValue));
|
|
801
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
802
|
-
}
|
|
803
|
-
};
|
|
804
|
-
var increase = function () {
|
|
805
|
-
var _a;
|
|
806
|
-
var newValue = value + 1;
|
|
807
|
-
if (props.max && newValue > props.max) ;
|
|
808
|
-
else {
|
|
809
|
-
setValue(newValue);
|
|
810
|
-
if (!!props.onChange)
|
|
811
|
-
props.onChange("".concat(newValue));
|
|
812
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
813
|
-
}
|
|
814
|
-
};
|
|
815
|
-
return (jsxRuntime.jsxs(Wrapper$3, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1 }, void 0), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1 }, void 0)] }), void 0));
|
|
816
|
-
};
|
|
817
|
-
|
|
818
|
-
var FeedbackColors = {
|
|
819
|
-
success: theme.colors.green.base,
|
|
820
|
-
error: theme.colors.red.base,
|
|
821
|
-
};
|
|
822
|
-
|
|
823
|
-
var FieldWrapper = styled__default["default"].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) {
|
|
824
|
-
var inline = _a.inline;
|
|
825
|
-
return (inline ? "row" : "column");
|
|
826
|
-
}, function (_a) {
|
|
827
|
-
var inline = _a.inline;
|
|
828
|
-
return (inline ? "center" : "flex-start");
|
|
829
|
-
}, function (_a) {
|
|
830
|
-
var feedbackStatus = _a.feedbackStatus;
|
|
831
|
-
return FeedbackColors[feedbackStatus];
|
|
832
|
-
});
|
|
833
|
-
var Label = styled__default["default"](StyledParagraph)(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n"], ["\n font-weight: ", ";\n color: ", ";\n"])), function (_a) {
|
|
926
|
+
var Fieldset$1 = styled__default["default"].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"])));
|
|
927
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
928
|
+
var CheckboxWrapper = styled__default["default"].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"])));
|
|
929
|
+
var Label$5 = styled__default["default"](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) {
|
|
834
930
|
var weight = _a.weight;
|
|
835
931
|
return weight || 500;
|
|
836
932
|
}, theme.colors.darkGray.base);
|
|
837
|
-
var
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
var
|
|
842
|
-
|
|
843
|
-
var
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
};
|
|
849
|
-
if (!status)
|
|
850
|
-
return null;
|
|
851
|
-
return (jsxRuntime.jsxs(FeedbackWrapper, __assign({ status: status }, { children: [jsxRuntime.jsx(Icon, { type: icons[status], size: "small" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small" }, { children: message }), void 0)] }), void 0));
|
|
852
|
-
};
|
|
853
|
-
var FormField = function (props) {
|
|
854
|
-
var onChange = function (value) { return props.onChange(props.name, value); };
|
|
855
|
-
switch (props.type) {
|
|
856
|
-
case "text":
|
|
857
|
-
case "password": {
|
|
858
|
-
var fields = {
|
|
859
|
-
text: Input,
|
|
860
|
-
password: Input.Password,
|
|
861
|
-
};
|
|
862
|
-
var Field = fields[props.type];
|
|
863
|
-
return (jsxRuntime.jsxs(FieldWrapper, __assign({ feedbackStatus: props.feedback.status }, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(Field, { initialValue: props.initialValue, autoComplete: props.autocomplete, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: props.onBlur }, void 0), jsxRuntime.jsx(Feedback, __assign({}, props.feedback), void 0)] }), void 0));
|
|
933
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$4, templateObject_4$3;
|
|
934
|
+
|
|
935
|
+
var Checkboxes = function (props) {
|
|
936
|
+
var _a = React.useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
937
|
+
var onChange = function (value) {
|
|
938
|
+
if (props.onChange) {
|
|
939
|
+
var newValues = values.includes(value)
|
|
940
|
+
? values.filter(function (v) { return v !== value; })
|
|
941
|
+
: __spreadArray(__spreadArray([], values, true), [value], false);
|
|
942
|
+
setValues(newValues);
|
|
943
|
+
props.onChange(props.name, newValues);
|
|
864
944
|
}
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
var Field = fields[props.type];
|
|
875
|
-
return (jsxRuntime.jsxs(FieldWrapper, __assign({ inline: true, feedbackStatus: props.feedback.status }, { children: [jsxRuntime.jsx(Field, { initialValue: props.initialValue, autoFocus: props.autoFocus, onChange: onChange, onBlur: props.onBlur, id: props.name }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name, weight: 400 }, { children: props.label }), void 0), jsxRuntime.jsx(Feedback, __assign({}, props.feedback), void 0)] }), void 0));
|
|
876
|
-
}
|
|
877
|
-
}
|
|
945
|
+
};
|
|
946
|
+
var onBlur = function () {
|
|
947
|
+
if (props.onBlur)
|
|
948
|
+
props.onBlur(props.name);
|
|
949
|
+
};
|
|
950
|
+
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$5, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
951
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
952
|
+
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$5, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
953
|
+
}) }, void 0)] }, void 0));
|
|
878
954
|
};
|
|
879
955
|
|
|
880
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
881
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
882
|
-
var templateObject_1$
|
|
956
|
+
var StyledIconButton = styled__default["default"](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"])));
|
|
957
|
+
var GhostIconButton = styled__default["default"](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"])));
|
|
958
|
+
var templateObject_1$h, templateObject_2$c;
|
|
883
959
|
|
|
884
960
|
var IconButton = function (props) {
|
|
885
961
|
if (props.color === "white")
|
|
@@ -887,15 +963,32 @@ var IconButton = function (props) {
|
|
|
887
963
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
888
964
|
};
|
|
889
965
|
|
|
890
|
-
var
|
|
966
|
+
var Container$6 = styled__default["default"].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"])));
|
|
967
|
+
var Label$4 = styled__default["default"](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);
|
|
968
|
+
var templateObject_1$g, templateObject_2$b;
|
|
969
|
+
|
|
970
|
+
var InputField = function (props) {
|
|
971
|
+
var onChange = function (value) {
|
|
972
|
+
if (props.onChange)
|
|
973
|
+
props.onChange(props.name, value);
|
|
974
|
+
};
|
|
975
|
+
var onBlur = function () {
|
|
976
|
+
if (props.onBlur)
|
|
977
|
+
props.onBlur(props.name);
|
|
978
|
+
};
|
|
979
|
+
var Field = props.isPassword ? Input.Password : Input;
|
|
980
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
|
|
981
|
+
};
|
|
982
|
+
|
|
983
|
+
var Wrapper$2 = styled__default["default"].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) {
|
|
891
984
|
var chevron = _a.chevron;
|
|
892
985
|
return (chevron === "left" ? "4px" : "");
|
|
893
986
|
}, function (_a) {
|
|
894
987
|
var chevron = _a.chevron;
|
|
895
988
|
return (chevron === "right" ? "4px" : "");
|
|
896
989
|
});
|
|
897
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
898
|
-
var templateObject_1$
|
|
990
|
+
var StyledLink = styled__default["default"](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);
|
|
991
|
+
var templateObject_1$f, templateObject_2$a;
|
|
899
992
|
|
|
900
993
|
var Link = function (props) {
|
|
901
994
|
var onClick = function (e) {
|
|
@@ -904,19 +997,27 @@ var Link = function (props) {
|
|
|
904
997
|
props.onClick();
|
|
905
998
|
}
|
|
906
999
|
};
|
|
907
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron }, { children: [props.chevron === "left" &&
|
|
1000
|
+
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }, void 0), jsxRuntime.jsx(StyledLink, __assign({ size: "large" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }, void 0))] }), void 0));
|
|
908
1001
|
};
|
|
909
1002
|
|
|
910
|
-
var
|
|
911
|
-
var
|
|
1003
|
+
var Container$5 = styled__default["default"].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) {
|
|
1004
|
+
var text = _a.text;
|
|
1005
|
+
return (text ? "20px" : "");
|
|
1006
|
+
});
|
|
1007
|
+
var templateObject_1$e;
|
|
1008
|
+
|
|
1009
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$5, __assign({}, props, { children: [jsxRuntime.jsx(BeatLoader__default["default"], { color: theme.colors[props.color].base, speedMultiplier: 0.5 }, void 0), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0), jsxRuntime.jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
1010
|
+
|
|
1011
|
+
var Wrapper$1 = styled__default["default"].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"])));
|
|
1012
|
+
var templateObject_1$d;
|
|
912
1013
|
|
|
913
1014
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "gold" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "silver" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }), void 0)] }, void 0), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "bronze" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 5 }, void 0), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }), void 0)] }, void 0)] }, void 0)); };
|
|
914
1015
|
|
|
915
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1016
|
+
var NotificationContainer = styled__default["default"].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) {
|
|
916
1017
|
var contrast = _a.contrast;
|
|
917
1018
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
918
1019
|
});
|
|
919
|
-
var templateObject_1$
|
|
1020
|
+
var templateObject_1$c;
|
|
920
1021
|
|
|
921
1022
|
var Notification = function (props) {
|
|
922
1023
|
if (!props.isVisible)
|
|
@@ -924,6 +1025,22 @@ var Notification = function (props) {
|
|
|
924
1025
|
return (jsxRuntime.jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }, void 0), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose }, void 0)] }, void 0))] }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content }), void 0), props.button && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0), jsxRuntime.jsx(Button, __assign({}, props.button, { size: "small" }), void 0)] }, void 0))] }), void 0));
|
|
925
1026
|
};
|
|
926
1027
|
|
|
1028
|
+
var Container$4 = styled__default["default"].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"])));
|
|
1029
|
+
var Label$3 = styled__default["default"](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);
|
|
1030
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1031
|
+
|
|
1032
|
+
var NumberField = function (props) {
|
|
1033
|
+
var onChange = function (value) {
|
|
1034
|
+
if (props.onChange)
|
|
1035
|
+
props.onChange(props.name, value);
|
|
1036
|
+
};
|
|
1037
|
+
var onBlur = function () {
|
|
1038
|
+
if (props.onBlur)
|
|
1039
|
+
props.onBlur(props.name);
|
|
1040
|
+
};
|
|
1041
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
|
|
1042
|
+
};
|
|
1043
|
+
|
|
927
1044
|
var generateRandomString = function (length) {
|
|
928
1045
|
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
929
1046
|
var charsLength = chars.length;
|
|
@@ -934,7 +1051,7 @@ var generateRandomString = function (length) {
|
|
|
934
1051
|
return string;
|
|
935
1052
|
};
|
|
936
1053
|
|
|
937
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
1054
|
+
var PopupContainer = styled__default["default"].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) {
|
|
938
1055
|
var isVisible = _a.isVisible;
|
|
939
1056
|
return (isVisible ? "100%" : "0%");
|
|
940
1057
|
}, function (_a) {
|
|
@@ -947,7 +1064,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$6 || (templ
|
|
|
947
1064
|
var contrast = _a.contrast;
|
|
948
1065
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
949
1066
|
});
|
|
950
|
-
var templateObject_1$
|
|
1067
|
+
var templateObject_1$a;
|
|
951
1068
|
|
|
952
1069
|
var Popup = function (props) {
|
|
953
1070
|
var popupRef = React.useRef(null);
|
|
@@ -983,23 +1100,82 @@ var Popup = function (props) {
|
|
|
983
1100
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0), jsxRuntime.jsx(Spacer, { vertical: 10 }, void 0)] }, void 0)), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }), void 0)] }), void 0)] }, void 0));
|
|
984
1101
|
};
|
|
985
1102
|
|
|
986
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
987
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
1103
|
+
var Wrapper = styled__default["default"].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"])));
|
|
1104
|
+
var StyledProgressBar = styled__default["default"].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) {
|
|
988
1105
|
var showInfo = _a.showInfo;
|
|
989
1106
|
return (showInfo ? "10px" : "");
|
|
990
1107
|
});
|
|
991
|
-
var Indicator = styled__default["default"].div(templateObject_3$
|
|
1108
|
+
var Indicator = styled__default["default"].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) {
|
|
992
1109
|
var percent = _a.percent;
|
|
993
1110
|
return "calc(".concat(percent, "% - 6px)");
|
|
994
1111
|
}, function (_a) {
|
|
995
1112
|
var color = _a.color;
|
|
996
1113
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
997
1114
|
});
|
|
998
|
-
var templateObject_1$
|
|
1115
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$3;
|
|
999
1116
|
|
|
1000
1117
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign({}, props, { children: jsxRuntime.jsx(Indicator, __assign({}, props), void 0) }), void 0), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") }), void 0))] }, void 0)); };
|
|
1001
1118
|
|
|
1002
|
-
var
|
|
1119
|
+
var Fieldset = styled__default["default"].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"])));
|
|
1120
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1121
|
+
var RadioWrapper = styled__default["default"].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"])));
|
|
1122
|
+
var Label$2 = styled__default["default"](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) {
|
|
1123
|
+
var weight = _a.weight;
|
|
1124
|
+
return weight || 500;
|
|
1125
|
+
}, theme.colors.darkGray.base);
|
|
1126
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$2, templateObject_4$2;
|
|
1127
|
+
|
|
1128
|
+
var RadioGroup = function (props) {
|
|
1129
|
+
var onChange = function (value) {
|
|
1130
|
+
if (props.onChange)
|
|
1131
|
+
props.onChange(props.name, value);
|
|
1132
|
+
};
|
|
1133
|
+
var onBlur = function () {
|
|
1134
|
+
if (props.onBlur)
|
|
1135
|
+
props.onBlur(props.name);
|
|
1136
|
+
};
|
|
1137
|
+
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$2, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1138
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
1139
|
+
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.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), jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
1140
|
+
}) }, void 0)] }, void 0));
|
|
1141
|
+
};
|
|
1142
|
+
|
|
1143
|
+
var Container$3 = styled__default["default"].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"])));
|
|
1144
|
+
var Label$1 = styled__default["default"](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);
|
|
1145
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1146
|
+
|
|
1147
|
+
var SelectField = function (props) {
|
|
1148
|
+
var onChange = function (value) {
|
|
1149
|
+
if (props.onChange)
|
|
1150
|
+
props.onChange(props.name, value);
|
|
1151
|
+
};
|
|
1152
|
+
var onBlur = function () {
|
|
1153
|
+
if (props.onBlur)
|
|
1154
|
+
props.onBlur(props.name);
|
|
1155
|
+
};
|
|
1156
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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) {
|
|
1157
|
+
var value = _a.value, label = _a.label;
|
|
1158
|
+
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1159
|
+
}) }), void 0)] }, void 0));
|
|
1160
|
+
};
|
|
1161
|
+
|
|
1162
|
+
var Container$2 = styled__default["default"].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"])));
|
|
1163
|
+
var Label = styled__default["default"](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);
|
|
1164
|
+
var templateObject_1$6, templateObject_2$5;
|
|
1165
|
+
|
|
1166
|
+
var ToggleField = function (props) {
|
|
1167
|
+
var onChange = function (value) {
|
|
1168
|
+
if (props.onChange)
|
|
1169
|
+
props.onChange(props.name, value);
|
|
1170
|
+
};
|
|
1171
|
+
var onBlur = function () {
|
|
1172
|
+
if (props.onBlur)
|
|
1173
|
+
props.onBlur(props.name);
|
|
1174
|
+
};
|
|
1175
|
+
return (jsxRuntime.jsxs(Container$2, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.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));
|
|
1176
|
+
};
|
|
1177
|
+
|
|
1178
|
+
var TooltipContainer = styled__default["default"].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) {
|
|
1003
1179
|
var isVisible = _a.isVisible;
|
|
1004
1180
|
return (isVisible ? "100%" : "0%");
|
|
1005
1181
|
}, function (_a) {
|
|
@@ -1009,7 +1185,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$4 || (tem
|
|
|
1009
1185
|
var x = _a.x;
|
|
1010
1186
|
return (x ? "".concat(x, "px") : "");
|
|
1011
1187
|
});
|
|
1012
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
1188
|
+
var TooltipTitle = styled__default["default"].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) {
|
|
1013
1189
|
var color = _a.color;
|
|
1014
1190
|
switch (color) {
|
|
1015
1191
|
default:
|
|
@@ -1019,7 +1195,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$3 || (templat
|
|
|
1019
1195
|
return theme.colors.lightGray.dark;
|
|
1020
1196
|
}
|
|
1021
1197
|
});
|
|
1022
|
-
var templateObject_1$
|
|
1198
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1023
1199
|
|
|
1024
1200
|
var Tooltip = function (props) {
|
|
1025
1201
|
var tooltipRef = React.useRef(null);
|
|
@@ -1053,28 +1229,67 @@ var Tooltip = function (props) {
|
|
|
1053
1229
|
theme.colors.lightGray.light }, void 0) }), void 0), jsxRuntime.jsx(TooltipTitle, __assign({ color: props.color }, { children: jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title }), void 0) }), void 0)] }), void 0)] }, void 0));
|
|
1054
1230
|
};
|
|
1055
1231
|
|
|
1056
|
-
var
|
|
1057
|
-
|
|
1232
|
+
var FeedbackColors = {
|
|
1233
|
+
success: theme.colors.green.base,
|
|
1234
|
+
error: theme.colors.red.base,
|
|
1235
|
+
};
|
|
1236
|
+
var FieldWrapper = styled__default["default"].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) {
|
|
1237
|
+
var status = _a.status;
|
|
1238
|
+
return FeedbackColors[status];
|
|
1239
|
+
});
|
|
1240
|
+
var FeedbackWrapper = styled__default["default"].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) {
|
|
1241
|
+
var status = _a.status;
|
|
1242
|
+
return FeedbackColors[status];
|
|
1243
|
+
}, function (_a) {
|
|
1244
|
+
var status = _a.status;
|
|
1245
|
+
return FeedbackColors[status];
|
|
1246
|
+
});
|
|
1247
|
+
var templateObject_1$4, templateObject_2$3;
|
|
1248
|
+
|
|
1249
|
+
var WithValidation = function (_a) {
|
|
1250
|
+
var status = _a.status, message = _a.message, children = _a.children;
|
|
1251
|
+
if (!message)
|
|
1252
|
+
return jsxRuntime.jsx(FieldWrapper, __assign({ status: status }, { children: children }), void 0);
|
|
1253
|
+
var icons = {
|
|
1254
|
+
success: "check",
|
|
1255
|
+
error: "warning",
|
|
1256
|
+
};
|
|
1257
|
+
return (jsxRuntime.jsxs(FieldWrapper, __assign({ status: status }, { children: [children, jsxRuntime.jsxs(FeedbackWrapper, __assign({ status: status }, { children: [jsxRuntime.jsx(Icon, { type: icons[status], size: "small" }, void 0), jsxRuntime.jsx(Paragraph, __assign({ size: "small" }, { children: message }), void 0)] }), void 0)] }), void 0));
|
|
1258
|
+
};
|
|
1259
|
+
|
|
1260
|
+
var FormWrapper = styled__default["default"].form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
1261
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
1058
1262
|
var templateObject_1$3, templateObject_2$2;
|
|
1059
1263
|
|
|
1060
1264
|
var Form = function (props) {
|
|
1061
|
-
var
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
initialValues
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1265
|
+
var _a = React.useState({}), values = _a[0], setValues = _a[1];
|
|
1266
|
+
var _b = React.useState({}), feedback = _b[0], setFeedback = _b[1];
|
|
1267
|
+
React.useEffect(function () {
|
|
1268
|
+
var initialValues = {};
|
|
1269
|
+
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1270
|
+
var field = _a[_i];
|
|
1271
|
+
initialValues[field.name] = field.initialValue;
|
|
1272
|
+
}
|
|
1273
|
+
setValues(initialValues);
|
|
1274
|
+
}, []);
|
|
1068
1275
|
var onChangeFormField = function (fieldName, value) {
|
|
1069
|
-
var _a, _b;
|
|
1070
|
-
|
|
1071
|
-
|
|
1276
|
+
var _a, _b, _c;
|
|
1277
|
+
var feedbackForField = { status: undefined, message: undefined };
|
|
1278
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1279
|
+
if (field.validateTrigger && field.validateTrigger.includes("onChange")) {
|
|
1280
|
+
feedbackForField = field.validator(values[fieldName]);
|
|
1281
|
+
}
|
|
1282
|
+
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1283
|
+
var newValues = __assign(__assign({}, values), (_b = {}, _b[fieldName] = value, _b));
|
|
1284
|
+
setValues(newValues);
|
|
1285
|
+
if (props.onChangeFields)
|
|
1286
|
+
props.onChangeFields(newValues, __assign(__assign({}, values), (_c = {}, _c[fieldName] = value, _c)));
|
|
1072
1287
|
};
|
|
1073
|
-
var onBlurFormField = function (fieldName
|
|
1288
|
+
var onBlurFormField = function (fieldName) {
|
|
1074
1289
|
var _a;
|
|
1075
|
-
var field = props.fields.find(function (field) { return field.name === fieldName
|
|
1076
|
-
if (field && field.
|
|
1077
|
-
var feedbackForField = field.validator(
|
|
1290
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1291
|
+
if (field.validateTrigger && field.validateTrigger.includes("onBlur")) {
|
|
1292
|
+
var feedbackForField = field.validator(values[fieldName]);
|
|
1078
1293
|
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1079
1294
|
}
|
|
1080
1295
|
};
|
|
@@ -1090,10 +1305,38 @@ var Form = function (props) {
|
|
|
1090
1305
|
}
|
|
1091
1306
|
}
|
|
1092
1307
|
setFeedback(feedback);
|
|
1093
|
-
if (isValid)
|
|
1308
|
+
if (isValid && !!props.onSubmit) {
|
|
1094
1309
|
props.onSubmit(values);
|
|
1310
|
+
}
|
|
1311
|
+
else if (!!props.onError) {
|
|
1312
|
+
props.onError(feedback);
|
|
1313
|
+
}
|
|
1095
1314
|
};
|
|
1096
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), jsxRuntime.jsx(Spacer, { vertical: 15 }, void 0)] }, void 0)), jsxRuntime.
|
|
1315
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title }), void 0), jsxRuntime.jsx(Spacer, { vertical: 15 }, void 0)] }, void 0)), props.description && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Paragraph, __assign({ color: "darkGray", weight: "regular" }, { children: props.description }), void 0), jsxRuntime.jsx(Spacer, { vertical: 20 }, void 0)] }, void 0)), jsxRuntime.jsx(FormWrapper, { children: props.fields.map(function (field, index) {
|
|
1316
|
+
switch (field.type) {
|
|
1317
|
+
case "text":
|
|
1318
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1319
|
+
jsxRuntime.jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1320
|
+
case "password":
|
|
1321
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1322
|
+
jsxRuntime.jsx(InputField, __assign({ isPassword: true }, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1323
|
+
case "radio":
|
|
1324
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1325
|
+
jsxRuntime.jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1326
|
+
case "number":
|
|
1327
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1328
|
+
jsxRuntime.jsx(NumberField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1329
|
+
case "checkbox":
|
|
1330
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1331
|
+
jsxRuntime.jsx(Checkboxes, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1332
|
+
case "select":
|
|
1333
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1334
|
+
jsxRuntime.jsx(SelectField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1335
|
+
case "toggle":
|
|
1336
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1337
|
+
jsxRuntime.jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1338
|
+
}
|
|
1339
|
+
}) }, void 0), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1097
1340
|
};
|
|
1098
1341
|
|
|
1099
1342
|
var Container$1 = styled__default["default"].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) {
|
|
@@ -1152,7 +1395,7 @@ var CardWrapper = styled__default["default"].div(templateObject_2 || (templateOb
|
|
|
1152
1395
|
var width = _a.width;
|
|
1153
1396
|
return (width ? "".concat(width, "px") : "720px");
|
|
1154
1397
|
});
|
|
1155
|
-
var CloseIconWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -
|
|
1398
|
+
var CloseIconWrapper = styled__default["default"].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);
|
|
1156
1399
|
var ChildrenWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
1157
1400
|
var FooterContainer = styled__default["default"].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);
|
|
1158
1401
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1170,31 +1413,40 @@ var Modal = function (props) {
|
|
|
1170
1413
|
return (jsxRuntime.jsx(Mask, { children: jsxRuntime.jsx(CardWrapper, __assign({}, props, { children: jsxRuntime.jsxs(Card, { children: [jsxRuntime.jsx(CloseIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsxRuntime.jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsxRuntime.jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1171
1414
|
};
|
|
1172
1415
|
|
|
1416
|
+
exports.Alert = Alert;
|
|
1173
1417
|
exports.Button = Button;
|
|
1174
1418
|
exports.Card = Card;
|
|
1175
1419
|
exports.Checkbox = Checkbox;
|
|
1420
|
+
exports.Checkboxes = Checkboxes;
|
|
1176
1421
|
exports.Flag = Flag;
|
|
1177
1422
|
exports.Form = Form;
|
|
1178
|
-
exports.FormField = FormField;
|
|
1179
1423
|
exports.Heading = Heading;
|
|
1180
1424
|
exports.Icon = Icon;
|
|
1181
1425
|
exports.IconButton = IconButton;
|
|
1182
1426
|
exports.Illustration = Illustration;
|
|
1183
1427
|
exports.Input = Input;
|
|
1428
|
+
exports.InputField = InputField;
|
|
1184
1429
|
exports.Keyboard = Keyboard;
|
|
1185
1430
|
exports.Link = Link;
|
|
1431
|
+
exports.Loading = Loading;
|
|
1186
1432
|
exports.Logo = Logo;
|
|
1187
1433
|
exports.Medal = Medal;
|
|
1188
1434
|
exports.Medals = Medals;
|
|
1189
1435
|
exports.Modal = Modal;
|
|
1190
1436
|
exports.Notification = Notification;
|
|
1437
|
+
exports.Number = Number;
|
|
1438
|
+
exports.NumberField = NumberField;
|
|
1191
1439
|
exports.Paragraph = Paragraph;
|
|
1192
1440
|
exports.Popup = Popup;
|
|
1193
1441
|
exports.ProgressBar = ProgressBar;
|
|
1194
1442
|
exports.Radio = Radio;
|
|
1443
|
+
exports.RadioGroup = RadioGroup;
|
|
1195
1444
|
exports.Select = Select;
|
|
1445
|
+
exports.SelectField = SelectField;
|
|
1196
1446
|
exports.Spacer = Spacer;
|
|
1197
1447
|
exports.Subheading = Subheading;
|
|
1448
|
+
exports.Toggle = Toggle;
|
|
1449
|
+
exports.ToggleField = ToggleField;
|
|
1198
1450
|
exports.Tooltip = Tooltip;
|
|
1199
1451
|
exports.Trophy = Trophy;
|
|
1200
1452
|
exports.theme = theme;
|