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