@typeolymp/ui-components 1.0.1 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Button/index.d.ts +1 -0
- package/build/components/atoms/Checkbox/index.d.ts +5 -3
- package/build/components/atoms/Flag/index.d.ts +1 -1
- package/build/components/atoms/Flag/stories.d.ts +1 -1
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/atoms/Input/index.d.ts +2 -2
- package/build/components/atoms/Input/stories.d.ts +1 -1
- package/build/components/atoms/Medal/index.d.ts +2 -1
- package/build/components/atoms/Medal/stories.d.ts +1 -1
- package/build/components/atoms/Number/index.d.ts +14 -0
- package/build/components/atoms/Number/stories.d.ts +19 -0
- package/build/components/atoms/Number/styles.d.ts +2 -0
- package/build/components/atoms/Radio/index.d.ts +5 -3
- package/build/components/atoms/Radio/styles.d.ts +0 -1
- package/build/components/atoms/Select/index.d.ts +7 -2
- package/build/components/atoms/Toggle/index.d.ts +12 -0
- package/build/components/atoms/Toggle/stories.d.ts +7 -0
- package/build/components/atoms/Toggle/styles.d.ts +1 -0
- package/build/components/molecules/Card/index.d.ts +1 -1
- package/build/components/molecules/Checkboxes/index.d.ts +16 -0
- package/build/components/molecules/Checkboxes/styles.d.ts +4 -0
- package/build/components/molecules/FormField/index.d.ts +4 -8
- package/build/components/molecules/FormField/styles.d.ts +2 -0
- package/build/components/molecules/InputField/index.d.ts +15 -0
- package/build/components/molecules/InputField/styles.d.ts +2 -0
- package/build/components/molecules/Loading/index.d.ts +1 -1
- package/build/components/molecules/NumberField/index.d.ts +15 -0
- package/build/components/molecules/NumberField/styles.d.ts +2 -0
- package/build/components/molecules/RadioGroup/index.d.ts +16 -0
- package/build/components/molecules/RadioGroup/styles.d.ts +4 -0
- package/build/components/molecules/SelectField/index.d.ts +17 -0
- package/build/components/molecules/SelectField/styles.d.ts +2 -0
- package/build/components/molecules/ToggleField/index.d.ts +12 -0
- package/build/components/molecules/ToggleField/styles.d.ts +2 -0
- package/build/components/organisms/Form/WithValidation/index.d.ts +4 -0
- package/build/components/organisms/Form/WithValidation/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +48 -5
- package/build/components/organisms/Form/stories.d.ts +11 -2
- package/build/index.d.ts +9 -2
- package/build/index.es.js +431 -219
- package/build/index.es.js.map +1 -1
- package/build/index.js +439 -219
- package/build/index.js.map +1 -1
- package/build/lib/theme/index.d.ts +3 -0
- package/build/lib/theme/types.d.ts +72 -0
- package/package.json +4 -2
package/build/index.js
CHANGED
|
@@ -5,12 +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
|
|
8
|
+
var BeatLoader = require('react-spinners/BeatLoader');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
12
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
+
var BeatLoader__default = /*#__PURE__*/_interopDefaultLegacy(BeatLoader);
|
|
14
15
|
|
|
15
16
|
var theme = {
|
|
16
17
|
colors: {
|
|
@@ -182,12 +183,22 @@ var __assign = function() {
|
|
|
182
183
|
return __assign.apply(this, arguments);
|
|
183
184
|
};
|
|
184
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
|
+
|
|
185
196
|
function __makeTemplateObject(cooked, raw) {
|
|
186
197
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
187
198
|
return cooked;
|
|
188
199
|
}
|
|
189
200
|
|
|
190
|
-
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) {
|
|
191
202
|
var fluid = _a.fluid;
|
|
192
203
|
return (fluid ? "100%" : "fit-content");
|
|
193
204
|
}, function (_a) {
|
|
@@ -237,11 +248,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$t || (temp
|
|
|
237
248
|
? theme.button.medium.heightActive
|
|
238
249
|
: theme.button[size].heightActive;
|
|
239
250
|
});
|
|
240
|
-
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) {
|
|
241
252
|
var size = _a.size;
|
|
242
253
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
243
254
|
});
|
|
244
|
-
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) {
|
|
245
256
|
var size = _a.size;
|
|
246
257
|
return !size
|
|
247
258
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -257,7 +268,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$5 ||
|
|
|
257
268
|
? theme.button.medium.marginTopActive
|
|
258
269
|
: theme.button[size].marginTopActive;
|
|
259
270
|
});
|
|
260
|
-
var templateObject_1$
|
|
271
|
+
var templateObject_1$A, templateObject_2$i, templateObject_3$6;
|
|
261
272
|
|
|
262
273
|
var Button = function (props) {
|
|
263
274
|
var onClick = function () {
|
|
@@ -274,7 +285,7 @@ var Button = function (props) {
|
|
|
274
285
|
return (jsxRuntime.jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
|
|
275
286
|
};
|
|
276
287
|
|
|
277
|
-
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) {
|
|
278
289
|
var checked = _a.checked, disabled = _a.disabled;
|
|
279
290
|
if (disabled)
|
|
280
291
|
return theme.colors.lightGray.darker;
|
|
@@ -295,29 +306,40 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$s || (templ
|
|
|
295
306
|
return theme.colors.green.base;
|
|
296
307
|
return theme.colors.lightGray.darker;
|
|
297
308
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
298
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$z;
|
|
299
310
|
|
|
300
311
|
var Checkbox = function (props) {
|
|
301
|
-
var
|
|
302
|
-
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];
|
|
303
316
|
React.useEffect(function () {
|
|
304
317
|
var _a;
|
|
305
318
|
if (props.autoFocus)
|
|
306
|
-
(_a =
|
|
319
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
307
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]);
|
|
308
328
|
var toggle = function () {
|
|
309
329
|
var _a;
|
|
310
330
|
if (!props.disabled) {
|
|
311
|
-
|
|
312
|
-
|
|
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);
|
|
313
335
|
if (!!props.onChange)
|
|
314
|
-
props.onChange(
|
|
336
|
+
props.onChange(props.value);
|
|
315
337
|
}
|
|
316
338
|
};
|
|
317
|
-
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref:
|
|
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));
|
|
318
340
|
};
|
|
319
341
|
|
|
320
|
-
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) {
|
|
321
343
|
var size = _a.size;
|
|
322
344
|
switch (size) {
|
|
323
345
|
case "small":
|
|
@@ -340,15 +362,16 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$r || (templateOb
|
|
|
340
362
|
return "27px";
|
|
341
363
|
}
|
|
342
364
|
});
|
|
343
|
-
var templateObject_1$
|
|
365
|
+
var templateObject_1$y;
|
|
344
366
|
|
|
345
367
|
var flags = {
|
|
346
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)),
|
|
347
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)),
|
|
348
371
|
};
|
|
349
372
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
350
373
|
|
|
351
|
-
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) {
|
|
352
375
|
var type = _a.type;
|
|
353
376
|
return theme.heading[type].fontSize;
|
|
354
377
|
}, function (_a) {
|
|
@@ -372,14 +395,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$q || (templ
|
|
|
372
395
|
var align = _a.align;
|
|
373
396
|
return align;
|
|
374
397
|
});
|
|
375
|
-
var templateObject_1$
|
|
398
|
+
var templateObject_1$x;
|
|
376
399
|
|
|
377
400
|
var Heading = function (props) {
|
|
378
401
|
var element = !!props.as ? props.as : props.type;
|
|
379
402
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
380
403
|
};
|
|
381
404
|
|
|
382
|
-
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) {
|
|
383
406
|
var size = _a.size;
|
|
384
407
|
return theme.icon[size] || theme.icon.medium;
|
|
385
408
|
}, function (_a) {
|
|
@@ -403,11 +426,13 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$p || (templateOb
|
|
|
403
426
|
return theme.colors.orange.base;
|
|
404
427
|
case "red":
|
|
405
428
|
return theme.colors.red.base;
|
|
429
|
+
case "purple":
|
|
430
|
+
return theme.colors.purple.base;
|
|
406
431
|
case "white":
|
|
407
432
|
return theme.colors.lightGray.light;
|
|
408
433
|
}
|
|
409
434
|
});
|
|
410
|
-
var templateObject_1$
|
|
435
|
+
var templateObject_1$w;
|
|
411
436
|
|
|
412
437
|
var icons = {
|
|
413
438
|
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)),
|
|
@@ -430,7 +455,7 @@ var icons = {
|
|
|
430
455
|
};
|
|
431
456
|
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)); };
|
|
432
457
|
|
|
433
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
458
|
+
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) {
|
|
434
459
|
var size = _a.size;
|
|
435
460
|
switch (size) {
|
|
436
461
|
default:
|
|
@@ -442,7 +467,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$o || (templateOb
|
|
|
442
467
|
return "118px";
|
|
443
468
|
}
|
|
444
469
|
});
|
|
445
|
-
var templateObject_1$
|
|
470
|
+
var templateObject_1$v;
|
|
446
471
|
|
|
447
472
|
var illustrations = {
|
|
448
473
|
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)),
|
|
@@ -457,11 +482,11 @@ var illustrations = {
|
|
|
457
482
|
};
|
|
458
483
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
459
484
|
|
|
460
|
-
var PasswordInputWrapper = styled__default["default"].div(templateObject_1$
|
|
485
|
+
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) {
|
|
461
486
|
var disabled = _a.disabled;
|
|
462
487
|
return (disabled ? "not-allowed" : "pointer");
|
|
463
488
|
});
|
|
464
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
489
|
+
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) {
|
|
465
490
|
var disabled = _a.disabled;
|
|
466
491
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
467
492
|
}, function (_a) {
|
|
@@ -474,7 +499,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$c || (templa
|
|
|
474
499
|
var disabled = _a.disabled;
|
|
475
500
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
476
501
|
}, 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));
|
|
477
|
-
var templateObject_1$
|
|
502
|
+
var templateObject_1$u, templateObject_2$h;
|
|
478
503
|
|
|
479
504
|
var PasswordInput = function (props) {
|
|
480
505
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -510,7 +535,7 @@ Input.Password = PasswordInput;
|
|
|
510
535
|
|
|
511
536
|
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)); };
|
|
512
537
|
|
|
513
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
538
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
514
539
|
var size = _a.size;
|
|
515
540
|
switch (size) {
|
|
516
541
|
default:
|
|
@@ -520,7 +545,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$m || (templateOb
|
|
|
520
545
|
return "116px";
|
|
521
546
|
}
|
|
522
547
|
});
|
|
523
|
-
var templateObject_1$
|
|
548
|
+
var templateObject_1$t;
|
|
524
549
|
|
|
525
550
|
var medals = {
|
|
526
551
|
small: {
|
|
@@ -536,7 +561,66 @@ var medals = {
|
|
|
536
561
|
};
|
|
537
562
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
538
563
|
|
|
539
|
-
var
|
|
564
|
+
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) {
|
|
565
|
+
var disabled = _a.disabled;
|
|
566
|
+
return (disabled ? "49.5px" : "");
|
|
567
|
+
});
|
|
568
|
+
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) {
|
|
569
|
+
var disabled = _a.disabled;
|
|
570
|
+
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
571
|
+
}, function (_a) {
|
|
572
|
+
var disabled = _a.disabled;
|
|
573
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
574
|
+
}, function (_a) {
|
|
575
|
+
var disabled = _a.disabled;
|
|
576
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
577
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
578
|
+
var disabled = _a.disabled;
|
|
579
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
580
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
581
|
+
var templateObject_1$s, templateObject_2$g;
|
|
582
|
+
|
|
583
|
+
var Number = function (props) {
|
|
584
|
+
var ref = React.useRef(null);
|
|
585
|
+
var _a = React.useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
586
|
+
var onChange = function (e) {
|
|
587
|
+
if (!props.disabled) {
|
|
588
|
+
var value_1 = parseInt(e.target.value);
|
|
589
|
+
setValue(value_1);
|
|
590
|
+
if (!!props.onChange)
|
|
591
|
+
props.onChange(e.target.value);
|
|
592
|
+
}
|
|
593
|
+
};
|
|
594
|
+
var decrease = function () {
|
|
595
|
+
var _a;
|
|
596
|
+
var newValue = value - 1;
|
|
597
|
+
if (props.min && newValue < props.min) {
|
|
598
|
+
setValue(props.min);
|
|
599
|
+
}
|
|
600
|
+
else {
|
|
601
|
+
setValue(newValue);
|
|
602
|
+
if (!!props.onChange)
|
|
603
|
+
props.onChange("".concat(newValue));
|
|
604
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
605
|
+
}
|
|
606
|
+
};
|
|
607
|
+
var increase = function () {
|
|
608
|
+
var _a;
|
|
609
|
+
var newValue = value + 1;
|
|
610
|
+
if (props.max && newValue > props.max) {
|
|
611
|
+
setValue(props.max);
|
|
612
|
+
}
|
|
613
|
+
else {
|
|
614
|
+
setValue(newValue);
|
|
615
|
+
if (!!props.onChange)
|
|
616
|
+
props.onChange("".concat(newValue));
|
|
617
|
+
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
618
|
+
}
|
|
619
|
+
};
|
|
620
|
+
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));
|
|
621
|
+
};
|
|
622
|
+
|
|
623
|
+
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) {
|
|
540
624
|
var size = _a.size;
|
|
541
625
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
542
626
|
}, function (_a) {
|
|
@@ -568,11 +652,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$l || (templa
|
|
|
568
652
|
var align = _a.align;
|
|
569
653
|
return align;
|
|
570
654
|
});
|
|
571
|
-
var templateObject_1$
|
|
655
|
+
var templateObject_1$r;
|
|
572
656
|
|
|
573
657
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
574
658
|
|
|
575
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
659
|
+
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) {
|
|
576
660
|
var checked = _a.checked, disabled = _a.disabled;
|
|
577
661
|
if (disabled)
|
|
578
662
|
return theme.colors.lightGray.darker;
|
|
@@ -592,42 +676,48 @@ var StyledRadio = styled__default["default"].div(templateObject_1$k || (template
|
|
|
592
676
|
if (checked)
|
|
593
677
|
return theme.colors.green.base;
|
|
594
678
|
return theme.colors.lightGray.darker;
|
|
595
|
-
},
|
|
596
|
-
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) {
|
|
679
|
+
}, function (_a) {
|
|
597
680
|
var checked = _a.checked, disabled = _a.disabled;
|
|
598
681
|
if (disabled)
|
|
599
682
|
return theme.colors.lightGray.darker;
|
|
600
683
|
if (checked)
|
|
601
684
|
return theme.colors.green.base;
|
|
602
685
|
return "";
|
|
603
|
-
});
|
|
604
|
-
var templateObject_1$
|
|
686
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
687
|
+
var templateObject_1$q;
|
|
605
688
|
|
|
606
689
|
var Radio = function (props) {
|
|
607
|
-
var
|
|
608
|
-
var
|
|
690
|
+
var _a;
|
|
691
|
+
var wrapperRef = React.useRef(null);
|
|
692
|
+
var inputRef = React.useRef(null);
|
|
693
|
+
var _b = React.useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
609
694
|
React.useEffect(function () {
|
|
610
|
-
var _a;
|
|
611
695
|
if (props.autoFocus)
|
|
612
|
-
|
|
696
|
+
wrapperRef.current.focus();
|
|
697
|
+
if (props.defaultChecked)
|
|
698
|
+
inputRef.current.checked = true;
|
|
613
699
|
}, []);
|
|
700
|
+
React.useEffect(function () {
|
|
701
|
+
setChecked(inputRef.current.checked);
|
|
702
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
614
703
|
var toggle = function () {
|
|
615
704
|
var _a;
|
|
616
705
|
if (!props.disabled) {
|
|
617
|
-
|
|
618
|
-
|
|
706
|
+
(_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
707
|
+
inputRef.current.checked = true;
|
|
708
|
+
setChecked(true);
|
|
619
709
|
if (!!props.onChange)
|
|
620
|
-
props.onChange(
|
|
710
|
+
props.onChange(props.value);
|
|
621
711
|
}
|
|
622
712
|
};
|
|
623
|
-
return (jsxRuntime.
|
|
713
|
+
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));
|
|
624
714
|
};
|
|
625
715
|
|
|
626
|
-
var Wrapper$
|
|
716
|
+
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) {
|
|
627
717
|
var disabled = _a.disabled;
|
|
628
718
|
return (disabled ? "not-allowed" : "pointer");
|
|
629
719
|
});
|
|
630
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
720
|
+
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) {
|
|
631
721
|
var disabled = _a.disabled;
|
|
632
722
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
633
723
|
}, function (_a) {
|
|
@@ -640,31 +730,35 @@ var StyledSelect = styled__default["default"].select(templateObject_2$a || (temp
|
|
|
640
730
|
var isChanged = _a.isChanged;
|
|
641
731
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
642
732
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
643
|
-
var templateObject_1$
|
|
733
|
+
var templateObject_1$p, templateObject_2$f;
|
|
644
734
|
|
|
645
735
|
var Select = function (props) {
|
|
646
|
-
var _a = React.useState(
|
|
647
|
-
var
|
|
736
|
+
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
737
|
+
var _b = React.useState(false), isChanged = _b[0], setIsChanged = _b[1];
|
|
738
|
+
var onChange = function (e) {
|
|
648
739
|
if (!props.disabled) {
|
|
740
|
+
var value_1 = e.target.value;
|
|
741
|
+
setValue(value_1);
|
|
649
742
|
setIsChanged(true);
|
|
650
|
-
props.onChange
|
|
743
|
+
if (!!props.onChange)
|
|
744
|
+
props.onChange(value_1);
|
|
651
745
|
}
|
|
652
746
|
};
|
|
653
|
-
return (jsxRuntime.jsxs(Wrapper$
|
|
747
|
+
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));
|
|
654
748
|
};
|
|
655
749
|
|
|
656
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
750
|
+
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) {
|
|
657
751
|
var horizontal = _a.horizontal;
|
|
658
752
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
659
753
|
}, function (_a) {
|
|
660
754
|
var vertical = _a.vertical;
|
|
661
755
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
662
756
|
});
|
|
663
|
-
var templateObject_1$
|
|
757
|
+
var templateObject_1$o;
|
|
664
758
|
|
|
665
759
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
666
760
|
|
|
667
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
761
|
+
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) {
|
|
668
762
|
var size = _a.size;
|
|
669
763
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
670
764
|
}, function (_a) {
|
|
@@ -692,11 +786,60 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$h || (templ
|
|
|
692
786
|
return theme.colors.darkGray.dark;
|
|
693
787
|
}
|
|
694
788
|
});
|
|
695
|
-
var templateObject_1$
|
|
789
|
+
var templateObject_1$n;
|
|
696
790
|
|
|
697
791
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
698
792
|
|
|
699
|
-
var
|
|
793
|
+
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) {
|
|
794
|
+
var disabled = _a.disabled;
|
|
795
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
796
|
+
}, function (_a) {
|
|
797
|
+
var checked = _a.checked, disabled = _a.disabled;
|
|
798
|
+
if (disabled)
|
|
799
|
+
return theme.colors.lightGray.dark;
|
|
800
|
+
return checked ? theme.colors.green.base : theme.colors.lightGray.darker;
|
|
801
|
+
}, function (_a) {
|
|
802
|
+
var checked = _a.checked;
|
|
803
|
+
return (checked ? "3px" : "");
|
|
804
|
+
}, function (_a) {
|
|
805
|
+
var checked = _a.checked;
|
|
806
|
+
return (checked ? "" : "3px");
|
|
807
|
+
}, function (_a) {
|
|
808
|
+
var disabled = _a.disabled;
|
|
809
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
810
|
+
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
811
|
+
var templateObject_1$m;
|
|
812
|
+
|
|
813
|
+
var Toggle = function (props) {
|
|
814
|
+
var _a;
|
|
815
|
+
var containerRef = React.useRef(null);
|
|
816
|
+
var inputRef = React.useRef(null);
|
|
817
|
+
var _b = React.useState(props.defaultChecked), checked = _b[0], setChecked = _b[1];
|
|
818
|
+
React.useEffect(function () {
|
|
819
|
+
var _a;
|
|
820
|
+
if (props.autoFocus)
|
|
821
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
822
|
+
if (props.defaultChecked)
|
|
823
|
+
inputRef.current.checked = true;
|
|
824
|
+
}, []);
|
|
825
|
+
React.useEffect(function () {
|
|
826
|
+
setChecked(inputRef.current.checked);
|
|
827
|
+
}, [(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.checked]);
|
|
828
|
+
var toggle = function () {
|
|
829
|
+
var _a;
|
|
830
|
+
if (!props.disabled) {
|
|
831
|
+
(_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
832
|
+
var newValue = !inputRef.current.checked;
|
|
833
|
+
inputRef.current.checked = newValue;
|
|
834
|
+
setChecked(newValue);
|
|
835
|
+
if (!!props.onChange)
|
|
836
|
+
props.onChange(newValue);
|
|
837
|
+
}
|
|
838
|
+
};
|
|
839
|
+
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));
|
|
840
|
+
};
|
|
841
|
+
|
|
842
|
+
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) {
|
|
700
843
|
var level = _a.level;
|
|
701
844
|
switch (level) {
|
|
702
845
|
case 1:
|
|
@@ -707,7 +850,7 @@ var Wrapper$4 = styled__default["default"].div(templateObject_1$g || (templateOb
|
|
|
707
850
|
return "70px";
|
|
708
851
|
}
|
|
709
852
|
});
|
|
710
|
-
var templateObject_1$
|
|
853
|
+
var templateObject_1$l;
|
|
711
854
|
|
|
712
855
|
var trophies = {
|
|
713
856
|
1: {
|
|
@@ -741,9 +884,9 @@ var trophies = {
|
|
|
741
884
|
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)),
|
|
742
885
|
},
|
|
743
886
|
};
|
|
744
|
-
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$
|
|
887
|
+
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
745
888
|
|
|
746
|
-
var Container$
|
|
889
|
+
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) {
|
|
747
890
|
var type = _a.type;
|
|
748
891
|
switch (type) {
|
|
749
892
|
case "success":
|
|
@@ -760,13 +903,11 @@ var Container$3 = styled__default["default"].div(templateObject_1$f || (template
|
|
|
760
903
|
return theme.colors.red.base;
|
|
761
904
|
}
|
|
762
905
|
});
|
|
763
|
-
var templateObject_1$
|
|
906
|
+
var templateObject_1$k;
|
|
764
907
|
|
|
765
|
-
var Alert = function (props) {
|
|
766
|
-
return (jsxRuntime.jsxs(Container$3, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, { children: props.message }, void 0)] }), void 0));
|
|
767
|
-
};
|
|
908
|
+
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)); };
|
|
768
909
|
|
|
769
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
910
|
+
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) {
|
|
770
911
|
var ellipse = _a.ellipse;
|
|
771
912
|
return ellipse
|
|
772
913
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -775,135 +916,48 @@ var StyledCard = styled__default["default"].div(templateObject_1$e || (templateO
|
|
|
775
916
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
776
917
|
: "";
|
|
777
918
|
});
|
|
778
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
919
|
+
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) {
|
|
779
920
|
var color = _a.color;
|
|
780
921
|
return color ? theme.colors[color].light : "";
|
|
781
922
|
});
|
|
782
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
783
|
-
var templateObject_1$
|
|
923
|
+
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"])));
|
|
924
|
+
var templateObject_1$j, templateObject_2$e, templateObject_3$5;
|
|
784
925
|
|
|
785
926
|
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)); };
|
|
786
927
|
|
|
787
|
-
var
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
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) {
|
|
792
|
-
var disabled = _a.disabled;
|
|
793
|
-
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
794
|
-
}, function (_a) {
|
|
795
|
-
var disabled = _a.disabled;
|
|
796
|
-
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
797
|
-
}, function (_a) {
|
|
798
|
-
var disabled = _a.disabled;
|
|
799
|
-
return (disabled ? "not-allowed" : "pointer");
|
|
800
|
-
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
801
|
-
var disabled = _a.disabled;
|
|
802
|
-
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
803
|
-
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
804
|
-
var templateObject_1$d, templateObject_2$8;
|
|
805
|
-
|
|
806
|
-
var Number = function (props) {
|
|
807
|
-
var ref = React.useRef(null);
|
|
808
|
-
var _a = React.useState(props.initialValue || 0), value = _a[0], setValue = _a[1];
|
|
809
|
-
var onChange = function (e) {
|
|
810
|
-
if (!props.disabled) {
|
|
811
|
-
var value_1 = parseInt(e.target.value);
|
|
812
|
-
setValue(value_1);
|
|
813
|
-
if (!!props.onChange)
|
|
814
|
-
props.onChange(e.target.value);
|
|
815
|
-
}
|
|
816
|
-
};
|
|
817
|
-
var decrease = function () {
|
|
818
|
-
var _a;
|
|
819
|
-
var newValue = value - 1;
|
|
820
|
-
if (props.min && newValue < props.min) ;
|
|
821
|
-
else {
|
|
822
|
-
setValue(newValue);
|
|
823
|
-
if (!!props.onChange)
|
|
824
|
-
props.onChange("".concat(newValue));
|
|
825
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
826
|
-
}
|
|
827
|
-
};
|
|
828
|
-
var increase = function () {
|
|
829
|
-
var _a;
|
|
830
|
-
var newValue = value + 1;
|
|
831
|
-
if (props.max && newValue > props.max) ;
|
|
832
|
-
else {
|
|
833
|
-
setValue(newValue);
|
|
834
|
-
if (!!props.onChange)
|
|
835
|
-
props.onChange("".concat(newValue));
|
|
836
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
837
|
-
}
|
|
838
|
-
};
|
|
839
|
-
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));
|
|
840
|
-
};
|
|
841
|
-
|
|
842
|
-
var FeedbackColors = {
|
|
843
|
-
success: theme.colors.green.base,
|
|
844
|
-
error: theme.colors.red.base,
|
|
845
|
-
};
|
|
846
|
-
|
|
847
|
-
var FieldWrapper = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n flex-wrap: wrap;\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n\n input,\n > div:first-child {\n border-color: ", ";\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n flex-wrap: wrap;\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n\n input,\n > div:first-child {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
848
|
-
var inline = _a.inline;
|
|
849
|
-
return (inline ? "row" : "column");
|
|
850
|
-
}, function (_a) {
|
|
851
|
-
var inline = _a.inline;
|
|
852
|
-
return (inline ? "center" : "flex-start");
|
|
853
|
-
}, function (_a) {
|
|
854
|
-
var feedbackStatus = _a.feedbackStatus;
|
|
855
|
-
return FeedbackColors[feedbackStatus];
|
|
856
|
-
});
|
|
857
|
-
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) {
|
|
928
|
+
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"])));
|
|
929
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
930
|
+
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"])));
|
|
931
|
+
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) {
|
|
858
932
|
var weight = _a.weight;
|
|
859
933
|
return weight || 500;
|
|
860
934
|
}, theme.colors.darkGray.base);
|
|
861
|
-
var
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
var
|
|
866
|
-
|
|
867
|
-
var
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
};
|
|
873
|
-
if (!status)
|
|
874
|
-
return null;
|
|
875
|
-
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));
|
|
876
|
-
};
|
|
877
|
-
var FormField = function (props) {
|
|
878
|
-
var onChange = function (value) { return props.onChange(props.name, value); };
|
|
879
|
-
switch (props.type) {
|
|
880
|
-
case "text":
|
|
881
|
-
case "password": {
|
|
882
|
-
var fields = {
|
|
883
|
-
text: Input,
|
|
884
|
-
password: Input.Password,
|
|
885
|
-
};
|
|
886
|
-
var Field = fields[props.type];
|
|
887
|
-
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));
|
|
888
|
-
}
|
|
889
|
-
case "number": {
|
|
890
|
-
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(Number, { min: props.min, max: props.max, initialValue: props.initialValue, autoComplete: props.autocomplete, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: props.onBlur }, void 0), jsxRuntime.jsx(Feedback, __assign({}, props.feedback), void 0)] }), void 0));
|
|
891
|
-
}
|
|
892
|
-
case "checkbox":
|
|
893
|
-
case "radio": {
|
|
894
|
-
var fields = {
|
|
895
|
-
checkbox: Checkbox,
|
|
896
|
-
radio: Radio,
|
|
897
|
-
};
|
|
898
|
-
var Field = fields[props.type];
|
|
899
|
-
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));
|
|
935
|
+
var templateObject_1$i, templateObject_2$d, templateObject_3$4, templateObject_4$3;
|
|
936
|
+
|
|
937
|
+
var Checkboxes = function (props) {
|
|
938
|
+
var _a = React.useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
939
|
+
var onChange = function (value) {
|
|
940
|
+
if (props.onChange) {
|
|
941
|
+
var newValues = values.includes(value)
|
|
942
|
+
? values.filter(function (v) { return v !== value; })
|
|
943
|
+
: __spreadArray(__spreadArray([], values, true), [value], false);
|
|
944
|
+
setValues(newValues);
|
|
945
|
+
props.onChange(props.name, newValues);
|
|
900
946
|
}
|
|
901
|
-
}
|
|
947
|
+
};
|
|
948
|
+
var onBlur = function () {
|
|
949
|
+
if (props.onBlur)
|
|
950
|
+
props.onBlur(props.name);
|
|
951
|
+
};
|
|
952
|
+
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) {
|
|
953
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
954
|
+
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));
|
|
955
|
+
}) }, void 0)] }, void 0));
|
|
902
956
|
};
|
|
903
957
|
|
|
904
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
905
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
906
|
-
var templateObject_1$
|
|
958
|
+
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"])));
|
|
959
|
+
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"])));
|
|
960
|
+
var templateObject_1$h, templateObject_2$c;
|
|
907
961
|
|
|
908
962
|
var IconButton = function (props) {
|
|
909
963
|
if (props.color === "white")
|
|
@@ -911,15 +965,32 @@ var IconButton = function (props) {
|
|
|
911
965
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
912
966
|
};
|
|
913
967
|
|
|
914
|
-
var
|
|
968
|
+
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"])));
|
|
969
|
+
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);
|
|
970
|
+
var templateObject_1$g, templateObject_2$b;
|
|
971
|
+
|
|
972
|
+
var InputField = function (props) {
|
|
973
|
+
var onChange = function (value) {
|
|
974
|
+
if (props.onChange)
|
|
975
|
+
props.onChange(props.name, value);
|
|
976
|
+
};
|
|
977
|
+
var onBlur = function () {
|
|
978
|
+
if (props.onBlur)
|
|
979
|
+
props.onBlur(props.name);
|
|
980
|
+
};
|
|
981
|
+
var Field = props.isPassword ? Input.Password : Input;
|
|
982
|
+
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));
|
|
983
|
+
};
|
|
984
|
+
|
|
985
|
+
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) {
|
|
915
986
|
var chevron = _a.chevron;
|
|
916
987
|
return (chevron === "left" ? "4px" : "");
|
|
917
988
|
}, function (_a) {
|
|
918
989
|
var chevron = _a.chevron;
|
|
919
990
|
return (chevron === "right" ? "4px" : "");
|
|
920
991
|
});
|
|
921
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
922
|
-
var templateObject_1$
|
|
992
|
+
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);
|
|
993
|
+
var templateObject_1$f, templateObject_2$a;
|
|
923
994
|
|
|
924
995
|
var Link = function (props) {
|
|
925
996
|
var onClick = function (e) {
|
|
@@ -928,27 +999,27 @@ var Link = function (props) {
|
|
|
928
999
|
props.onClick();
|
|
929
1000
|
}
|
|
930
1001
|
};
|
|
931
|
-
return (jsxRuntime.jsxs(Wrapper$2, __assign({ chevron: props.chevron }, { children: [props.chevron === "left" &&
|
|
1002
|
+
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));
|
|
932
1003
|
};
|
|
933
1004
|
|
|
934
|
-
var Container$
|
|
1005
|
+
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) {
|
|
935
1006
|
var text = _a.text;
|
|
936
1007
|
return (text ? "20px" : "");
|
|
937
1008
|
});
|
|
938
|
-
var templateObject_1$
|
|
1009
|
+
var templateObject_1$e;
|
|
939
1010
|
|
|
940
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1011
|
+
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)); };
|
|
941
1012
|
|
|
942
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
943
|
-
var templateObject_1$
|
|
1013
|
+
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"])));
|
|
1014
|
+
var templateObject_1$d;
|
|
944
1015
|
|
|
945
1016
|
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)); };
|
|
946
1017
|
|
|
947
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1018
|
+
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) {
|
|
948
1019
|
var contrast = _a.contrast;
|
|
949
1020
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
950
1021
|
});
|
|
951
|
-
var templateObject_1$
|
|
1022
|
+
var templateObject_1$c;
|
|
952
1023
|
|
|
953
1024
|
var Notification = function (props) {
|
|
954
1025
|
if (!props.isVisible)
|
|
@@ -956,6 +1027,22 @@ var Notification = function (props) {
|
|
|
956
1027
|
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));
|
|
957
1028
|
};
|
|
958
1029
|
|
|
1030
|
+
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"])));
|
|
1031
|
+
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);
|
|
1032
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1033
|
+
|
|
1034
|
+
var NumberField = function (props) {
|
|
1035
|
+
var onChange = function (value) {
|
|
1036
|
+
if (props.onChange)
|
|
1037
|
+
props.onChange(props.name, value);
|
|
1038
|
+
};
|
|
1039
|
+
var onBlur = function () {
|
|
1040
|
+
if (props.onBlur)
|
|
1041
|
+
props.onBlur(props.name);
|
|
1042
|
+
};
|
|
1043
|
+
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));
|
|
1044
|
+
};
|
|
1045
|
+
|
|
959
1046
|
var generateRandomString = function (length) {
|
|
960
1047
|
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
961
1048
|
var charsLength = chars.length;
|
|
@@ -966,7 +1053,7 @@ var generateRandomString = function (length) {
|
|
|
966
1053
|
return string;
|
|
967
1054
|
};
|
|
968
1055
|
|
|
969
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
1056
|
+
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) {
|
|
970
1057
|
var isVisible = _a.isVisible;
|
|
971
1058
|
return (isVisible ? "100%" : "0%");
|
|
972
1059
|
}, function (_a) {
|
|
@@ -979,7 +1066,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$6 || (templ
|
|
|
979
1066
|
var contrast = _a.contrast;
|
|
980
1067
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
981
1068
|
});
|
|
982
|
-
var templateObject_1$
|
|
1069
|
+
var templateObject_1$a;
|
|
983
1070
|
|
|
984
1071
|
var Popup = function (props) {
|
|
985
1072
|
var popupRef = React.useRef(null);
|
|
@@ -1015,23 +1102,82 @@ var Popup = function (props) {
|
|
|
1015
1102
|
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));
|
|
1016
1103
|
};
|
|
1017
1104
|
|
|
1018
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1019
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
1105
|
+
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"])));
|
|
1106
|
+
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) {
|
|
1020
1107
|
var showInfo = _a.showInfo;
|
|
1021
1108
|
return (showInfo ? "10px" : "");
|
|
1022
1109
|
});
|
|
1023
|
-
var Indicator = styled__default["default"].div(templateObject_3$
|
|
1110
|
+
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) {
|
|
1024
1111
|
var percent = _a.percent;
|
|
1025
1112
|
return "calc(".concat(percent, "% - 6px)");
|
|
1026
1113
|
}, function (_a) {
|
|
1027
1114
|
var color = _a.color;
|
|
1028
1115
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1029
1116
|
});
|
|
1030
|
-
var templateObject_1$
|
|
1117
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$3;
|
|
1031
1118
|
|
|
1032
1119
|
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)); };
|
|
1033
1120
|
|
|
1034
|
-
var
|
|
1121
|
+
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"])));
|
|
1122
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1123
|
+
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"])));
|
|
1124
|
+
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) {
|
|
1125
|
+
var weight = _a.weight;
|
|
1126
|
+
return weight || 500;
|
|
1127
|
+
}, theme.colors.darkGray.base);
|
|
1128
|
+
var templateObject_1$8, templateObject_2$7, templateObject_3$2, templateObject_4$2;
|
|
1129
|
+
|
|
1130
|
+
var RadioGroup = function (props) {
|
|
1131
|
+
var onChange = function (value) {
|
|
1132
|
+
if (props.onChange)
|
|
1133
|
+
props.onChange(props.name, value);
|
|
1134
|
+
};
|
|
1135
|
+
var onBlur = function () {
|
|
1136
|
+
if (props.onBlur)
|
|
1137
|
+
props.onBlur(props.name);
|
|
1138
|
+
};
|
|
1139
|
+
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) {
|
|
1140
|
+
var id = _a.id, value = _a.value, label = _a.label;
|
|
1141
|
+
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));
|
|
1142
|
+
}) }, void 0)] }, void 0));
|
|
1143
|
+
};
|
|
1144
|
+
|
|
1145
|
+
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"])));
|
|
1146
|
+
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);
|
|
1147
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1148
|
+
|
|
1149
|
+
var SelectField = function (props) {
|
|
1150
|
+
var onChange = function (value) {
|
|
1151
|
+
if (props.onChange)
|
|
1152
|
+
props.onChange(props.name, value);
|
|
1153
|
+
};
|
|
1154
|
+
var onBlur = function () {
|
|
1155
|
+
if (props.onBlur)
|
|
1156
|
+
props.onBlur(props.name);
|
|
1157
|
+
};
|
|
1158
|
+
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) {
|
|
1159
|
+
var value = _a.value, label = _a.label;
|
|
1160
|
+
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), value));
|
|
1161
|
+
}) }), void 0)] }, void 0));
|
|
1162
|
+
};
|
|
1163
|
+
|
|
1164
|
+
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"])));
|
|
1165
|
+
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);
|
|
1166
|
+
var templateObject_1$6, templateObject_2$5;
|
|
1167
|
+
|
|
1168
|
+
var ToggleField = function (props) {
|
|
1169
|
+
var onChange = function (value) {
|
|
1170
|
+
if (props.onChange)
|
|
1171
|
+
props.onChange(props.name, value);
|
|
1172
|
+
};
|
|
1173
|
+
var onBlur = function () {
|
|
1174
|
+
if (props.onBlur)
|
|
1175
|
+
props.onBlur(props.name);
|
|
1176
|
+
};
|
|
1177
|
+
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));
|
|
1178
|
+
};
|
|
1179
|
+
|
|
1180
|
+
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) {
|
|
1035
1181
|
var isVisible = _a.isVisible;
|
|
1036
1182
|
return (isVisible ? "100%" : "0%");
|
|
1037
1183
|
}, function (_a) {
|
|
@@ -1041,7 +1187,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$4 || (tem
|
|
|
1041
1187
|
var x = _a.x;
|
|
1042
1188
|
return (x ? "".concat(x, "px") : "");
|
|
1043
1189
|
});
|
|
1044
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
1190
|
+
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) {
|
|
1045
1191
|
var color = _a.color;
|
|
1046
1192
|
switch (color) {
|
|
1047
1193
|
default:
|
|
@@ -1051,7 +1197,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$3 || (templat
|
|
|
1051
1197
|
return theme.colors.lightGray.dark;
|
|
1052
1198
|
}
|
|
1053
1199
|
});
|
|
1054
|
-
var templateObject_1$
|
|
1200
|
+
var templateObject_1$5, templateObject_2$4;
|
|
1055
1201
|
|
|
1056
1202
|
var Tooltip = function (props) {
|
|
1057
1203
|
var tooltipRef = React.useRef(null);
|
|
@@ -1085,28 +1231,67 @@ var Tooltip = function (props) {
|
|
|
1085
1231
|
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));
|
|
1086
1232
|
};
|
|
1087
1233
|
|
|
1088
|
-
var
|
|
1089
|
-
|
|
1234
|
+
var FeedbackColors = {
|
|
1235
|
+
success: theme.colors.green.base,
|
|
1236
|
+
error: theme.colors.red.base,
|
|
1237
|
+
};
|
|
1238
|
+
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) {
|
|
1239
|
+
var status = _a.status;
|
|
1240
|
+
return FeedbackColors[status];
|
|
1241
|
+
});
|
|
1242
|
+
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) {
|
|
1243
|
+
var status = _a.status;
|
|
1244
|
+
return FeedbackColors[status];
|
|
1245
|
+
}, function (_a) {
|
|
1246
|
+
var status = _a.status;
|
|
1247
|
+
return FeedbackColors[status];
|
|
1248
|
+
});
|
|
1249
|
+
var templateObject_1$4, templateObject_2$3;
|
|
1250
|
+
|
|
1251
|
+
var WithValidation = function (_a) {
|
|
1252
|
+
var status = _a.status, message = _a.message, children = _a.children;
|
|
1253
|
+
if (!message)
|
|
1254
|
+
return jsxRuntime.jsx(FieldWrapper, __assign({ status: status }, { children: children }), void 0);
|
|
1255
|
+
var icons = {
|
|
1256
|
+
success: "check",
|
|
1257
|
+
error: "warning",
|
|
1258
|
+
};
|
|
1259
|
+
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));
|
|
1260
|
+
};
|
|
1261
|
+
|
|
1262
|
+
var FormWrapper = styled__default["default"].form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject([""], [""])));
|
|
1263
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n padding-top: 30px;\n"], ["\n padding-top: 30px;\n"])));
|
|
1090
1264
|
var templateObject_1$3, templateObject_2$2;
|
|
1091
1265
|
|
|
1092
1266
|
var Form = function (props) {
|
|
1093
|
-
var
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
initialValues
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1267
|
+
var _a = React.useState({}), values = _a[0], setValues = _a[1];
|
|
1268
|
+
var _b = React.useState({}), feedback = _b[0], setFeedback = _b[1];
|
|
1269
|
+
React.useEffect(function () {
|
|
1270
|
+
var initialValues = {};
|
|
1271
|
+
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
1272
|
+
var field = _a[_i];
|
|
1273
|
+
initialValues[field.name] = field.initialValue;
|
|
1274
|
+
}
|
|
1275
|
+
setValues(initialValues);
|
|
1276
|
+
}, []);
|
|
1100
1277
|
var onChangeFormField = function (fieldName, value) {
|
|
1101
|
-
var _a, _b;
|
|
1102
|
-
|
|
1103
|
-
|
|
1278
|
+
var _a, _b, _c;
|
|
1279
|
+
var feedbackForField = { status: undefined, message: undefined };
|
|
1280
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1281
|
+
if (field.validateTrigger && field.validateTrigger.includes("onChange")) {
|
|
1282
|
+
feedbackForField = field.validator(values[fieldName]);
|
|
1283
|
+
}
|
|
1284
|
+
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1285
|
+
var newValues = __assign(__assign({}, values), (_b = {}, _b[fieldName] = value, _b));
|
|
1286
|
+
setValues(newValues);
|
|
1287
|
+
if (props.onChangeFields)
|
|
1288
|
+
props.onChangeFields(newValues, __assign(__assign({}, values), (_c = {}, _c[fieldName] = value, _c)));
|
|
1104
1289
|
};
|
|
1105
|
-
var onBlurFormField = function (fieldName
|
|
1290
|
+
var onBlurFormField = function (fieldName) {
|
|
1106
1291
|
var _a;
|
|
1107
|
-
var field = props.fields.find(function (field) { return field.name === fieldName
|
|
1108
|
-
if (field && field.
|
|
1109
|
-
var feedbackForField = field.validator(
|
|
1292
|
+
var field = props.fields.find(function (field) { return field.name === fieldName; });
|
|
1293
|
+
if (field.validateTrigger && field.validateTrigger.includes("onBlur")) {
|
|
1294
|
+
var feedbackForField = field.validator(values[fieldName]);
|
|
1110
1295
|
setFeedback(__assign(__assign({}, feedback), (_a = {}, _a[fieldName] = feedbackForField, _a)));
|
|
1111
1296
|
}
|
|
1112
1297
|
};
|
|
@@ -1122,10 +1307,38 @@ var Form = function (props) {
|
|
|
1122
1307
|
}
|
|
1123
1308
|
}
|
|
1124
1309
|
setFeedback(feedback);
|
|
1125
|
-
if (isValid)
|
|
1310
|
+
if (isValid && !!props.onSubmit) {
|
|
1126
1311
|
props.onSubmit(values);
|
|
1312
|
+
}
|
|
1313
|
+
else if (!!props.onError) {
|
|
1314
|
+
props.onError(feedback);
|
|
1315
|
+
}
|
|
1127
1316
|
};
|
|
1128
|
-
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.
|
|
1317
|
+
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) {
|
|
1318
|
+
switch (field.type) {
|
|
1319
|
+
case "text":
|
|
1320
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1321
|
+
jsxRuntime.jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1322
|
+
case "password":
|
|
1323
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1324
|
+
jsxRuntime.jsx(InputField, __assign({ isPassword: true }, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1325
|
+
case "radio":
|
|
1326
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1327
|
+
jsxRuntime.jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1328
|
+
case "number":
|
|
1329
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1330
|
+
jsxRuntime.jsx(NumberField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1331
|
+
case "checkbox":
|
|
1332
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1333
|
+
jsxRuntime.jsx(Checkboxes, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1334
|
+
case "select":
|
|
1335
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1336
|
+
jsxRuntime.jsx(SelectField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1337
|
+
case "toggle":
|
|
1338
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1339
|
+
jsxRuntime.jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1340
|
+
}
|
|
1341
|
+
}) }, void 0), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" }), void 0) }, void 0))] }, void 0));
|
|
1129
1342
|
};
|
|
1130
1343
|
|
|
1131
1344
|
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) {
|
|
@@ -1184,7 +1397,7 @@ var CardWrapper = styled__default["default"].div(templateObject_2 || (templateOb
|
|
|
1184
1397
|
var width = _a.width;
|
|
1185
1398
|
return (width ? "".concat(width, "px") : "720px");
|
|
1186
1399
|
});
|
|
1187
|
-
var CloseIconWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n margin-bottom: -
|
|
1400
|
+
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);
|
|
1188
1401
|
var ChildrenWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0 35px 20px;\n"], ["\n padding: 0 35px 20px;\n"])));
|
|
1189
1402
|
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);
|
|
1190
1403
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -1206,14 +1419,15 @@ exports.Alert = Alert;
|
|
|
1206
1419
|
exports.Button = Button;
|
|
1207
1420
|
exports.Card = Card;
|
|
1208
1421
|
exports.Checkbox = Checkbox;
|
|
1422
|
+
exports.Checkboxes = Checkboxes;
|
|
1209
1423
|
exports.Flag = Flag;
|
|
1210
1424
|
exports.Form = Form;
|
|
1211
|
-
exports.FormField = FormField;
|
|
1212
1425
|
exports.Heading = Heading;
|
|
1213
1426
|
exports.Icon = Icon;
|
|
1214
1427
|
exports.IconButton = IconButton;
|
|
1215
1428
|
exports.Illustration = Illustration;
|
|
1216
1429
|
exports.Input = Input;
|
|
1430
|
+
exports.InputField = InputField;
|
|
1217
1431
|
exports.Keyboard = Keyboard;
|
|
1218
1432
|
exports.Link = Link;
|
|
1219
1433
|
exports.Loading = Loading;
|
|
@@ -1222,13 +1436,19 @@ exports.Medal = Medal;
|
|
|
1222
1436
|
exports.Medals = Medals;
|
|
1223
1437
|
exports.Modal = Modal;
|
|
1224
1438
|
exports.Notification = Notification;
|
|
1439
|
+
exports.Number = Number;
|
|
1440
|
+
exports.NumberField = NumberField;
|
|
1225
1441
|
exports.Paragraph = Paragraph;
|
|
1226
1442
|
exports.Popup = Popup;
|
|
1227
1443
|
exports.ProgressBar = ProgressBar;
|
|
1228
1444
|
exports.Radio = Radio;
|
|
1445
|
+
exports.RadioGroup = RadioGroup;
|
|
1229
1446
|
exports.Select = Select;
|
|
1447
|
+
exports.SelectField = SelectField;
|
|
1230
1448
|
exports.Spacer = Spacer;
|
|
1231
1449
|
exports.Subheading = Subheading;
|
|
1450
|
+
exports.Toggle = Toggle;
|
|
1451
|
+
exports.ToggleField = ToggleField;
|
|
1232
1452
|
exports.Tooltip = Tooltip;
|
|
1233
1453
|
exports.Trophy = Trophy;
|
|
1234
1454
|
exports.theme = theme;
|