@typeolymp/ui-components 1.9.9 → 1.9.11
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/Button/styles.d.ts +1 -0
- package/build/components/atoms/Range/index.d.ts +13 -0
- package/build/components/atoms/Range/stories.d.ts +7 -0
- package/build/components/atoms/Range/styles.d.ts +1 -0
- package/build/components/molecules/RangeField/index.d.ts +12 -0
- package/build/components/molecules/RangeField/styles.d.ts +2 -0
- package/build/components/organisms/Form/index.d.ts +5 -1
- package/build/components/organisms/Form/stories.d.ts +1 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +242 -134
- package/build/index.es.js.map +1 -1
- package/build/index.js +243 -134
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4,15 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
|
-
var styled = require('styled-components');
|
|
8
7
|
var BeatLoader = require('react-spinners/BeatLoader');
|
|
8
|
+
var styled = require('styled-components');
|
|
9
9
|
var parse = require('html-react-parser');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
12
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
14
|
-
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
15
14
|
var BeatLoader__default = /*#__PURE__*/_interopDefaultLegacy(BeatLoader);
|
|
15
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
16
16
|
var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
|
|
17
17
|
|
|
18
18
|
var theme = {
|
|
@@ -185,6 +185,18 @@ var __assign = function() {
|
|
|
185
185
|
return __assign.apply(this, arguments);
|
|
186
186
|
};
|
|
187
187
|
|
|
188
|
+
function __rest(s, e) {
|
|
189
|
+
var t = {};
|
|
190
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
191
|
+
t[p] = s[p];
|
|
192
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
193
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
194
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
195
|
+
t[p[i]] = s[p[i]];
|
|
196
|
+
}
|
|
197
|
+
return t;
|
|
198
|
+
}
|
|
199
|
+
|
|
188
200
|
function __spreadArray(to, from, pack) {
|
|
189
201
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
190
202
|
if (ar || !(i in from)) {
|
|
@@ -200,7 +212,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
200
212
|
return cooked;
|
|
201
213
|
}
|
|
202
214
|
|
|
203
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
215
|
+
var StyledButton = styled__default["default"].button(templateObject_1$N || (templateObject_1$N = __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 box-sizing: border-box;\n text-decoration: none;\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 box-sizing: border-box;\n text-decoration: none;\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) {
|
|
204
216
|
var fluid = _a.fluid;
|
|
205
217
|
return (fluid ? "100%" : "fit-content");
|
|
206
218
|
}, function (_a) {
|
|
@@ -250,7 +262,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$L || (temp
|
|
|
250
262
|
? theme.button.medium.heightActive
|
|
251
263
|
: theme.button[size].heightActive;
|
|
252
264
|
});
|
|
253
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
265
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$t || (templateObject_2$t = __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) {
|
|
254
266
|
var size = _a.size;
|
|
255
267
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
256
268
|
});
|
|
@@ -270,20 +282,50 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$a ||
|
|
|
270
282
|
? theme.button.medium.marginTopActive
|
|
271
283
|
: theme.button[size].marginTopActive;
|
|
272
284
|
});
|
|
273
|
-
var
|
|
285
|
+
var LoaderWrapper = styled__default["default"].div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n width: ", ";\n margin-top: ", ";\n"], ["\n width: ", ";\n margin-top: ", ";\n"])), function (_a) {
|
|
286
|
+
var width = _a.width;
|
|
287
|
+
return "".concat(width, "px");
|
|
288
|
+
}, function (_a) {
|
|
289
|
+
var size = _a.size;
|
|
290
|
+
return (size === "small" ? "3px" : "");
|
|
291
|
+
});
|
|
292
|
+
var templateObject_1$N, templateObject_2$t, templateObject_3$a, templateObject_4$7;
|
|
274
293
|
|
|
275
294
|
var Button = React.forwardRef(function (_a, ref) {
|
|
276
|
-
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor,
|
|
295
|
+
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
296
|
+
var buttonRef = React.useRef(null);
|
|
297
|
+
var _b = React.useState(false), isLoading = _b[0], setIsLoading = _b[1];
|
|
277
298
|
var as = href || asAnchor ? "a" : "button";
|
|
299
|
+
var onClick = function () {
|
|
300
|
+
if (props.onClickAsync) {
|
|
301
|
+
setIsLoading(true);
|
|
302
|
+
new Promise(function (resolve) {
|
|
303
|
+
props.onClickAsync(resolve);
|
|
304
|
+
}).then(function () { return setIsLoading(false); });
|
|
305
|
+
}
|
|
306
|
+
else if (props.onClick) {
|
|
307
|
+
props.onClick();
|
|
308
|
+
}
|
|
309
|
+
};
|
|
310
|
+
var Loader = function (_a) {
|
|
311
|
+
var _b;
|
|
312
|
+
var dark = _a.dark;
|
|
313
|
+
var width = ((_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) - 40;
|
|
314
|
+
if (dark)
|
|
315
|
+
width = width + 4;
|
|
316
|
+
return (jsxRuntime.jsx(LoaderWrapper, __assign({ width: width, size: size }, { children: jsxRuntime.jsx(BeatLoader__default["default"], { size: 10, color: dark
|
|
317
|
+
? theme.colors.lightGray.darker
|
|
318
|
+
: theme.colors.lightGray.light, speedMultiplier: 0.5 }) })));
|
|
319
|
+
};
|
|
278
320
|
if (disabled) {
|
|
279
|
-
return (jsxRuntime.jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref }, { children: jsxRuntime.jsx("span", { children: label }) })));
|
|
321
|
+
return (jsxRuntime.jsx(DisabledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef }, { children: jsxRuntime.jsx("span", { children: label }) })));
|
|
280
322
|
}
|
|
281
323
|
if (color === "white")
|
|
282
|
-
return (jsxRuntime.jsx(GhostButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: label }) })));
|
|
283
|
-
return (jsxRuntime.jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref, onClick: onClick }, { children: jsxRuntime.jsx("span", { children: label }) })));
|
|
324
|
+
return (jsxRuntime.jsx(GhostButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsxRuntime.jsx(Loader, { dark: true }) : jsxRuntime.jsx("span", { children: label }) })));
|
|
325
|
+
return (jsxRuntime.jsx(StyledButton, __assign({ color: color, size: size, fluid: fluid, type: type, tabIndex: tabIndex, as: as, href: href, ref: ref ? ref : buttonRef, onClick: onClick }, { children: isLoading ? jsxRuntime.jsx(Loader, {}) : jsxRuntime.jsx("span", { children: label }) })));
|
|
284
326
|
});
|
|
285
327
|
|
|
286
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
328
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-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 min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-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) {
|
|
287
329
|
var checked = _a.checked, disabled = _a.disabled;
|
|
288
330
|
if (disabled)
|
|
289
331
|
return theme.colors.lightGray.darker;
|
|
@@ -304,7 +346,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$K || (templ
|
|
|
304
346
|
return theme.colors.green.base;
|
|
305
347
|
return theme.colors.lightGray.darker;
|
|
306
348
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
307
|
-
var templateObject_1$
|
|
349
|
+
var templateObject_1$M;
|
|
308
350
|
|
|
309
351
|
var Checkbox = function (props) {
|
|
310
352
|
var _a;
|
|
@@ -337,7 +379,7 @@ var Checkbox = function (props) {
|
|
|
337
379
|
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" }) }))), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef })] })));
|
|
338
380
|
};
|
|
339
381
|
|
|
340
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
382
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
341
383
|
var size = _a.size;
|
|
342
384
|
switch (size) {
|
|
343
385
|
case "small":
|
|
@@ -360,7 +402,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$J || (templateOb
|
|
|
360
402
|
return "27px";
|
|
361
403
|
}
|
|
362
404
|
});
|
|
363
|
-
var templateObject_1$
|
|
405
|
+
var templateObject_1$L;
|
|
364
406
|
|
|
365
407
|
var parsers = {};
|
|
366
408
|
|
|
@@ -408,7 +450,7 @@ var flags = {
|
|
|
408
450
|
};
|
|
409
451
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[getCountryCodeByLocale_1(props.locale)] }))); };
|
|
410
452
|
|
|
411
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
453
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$K || (templateObject_1$K = __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) {
|
|
412
454
|
var type = _a.type;
|
|
413
455
|
return theme.heading[type].fontSize;
|
|
414
456
|
}, function (_a) {
|
|
@@ -432,14 +474,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$I || (templ
|
|
|
432
474
|
var align = _a.align;
|
|
433
475
|
return align;
|
|
434
476
|
});
|
|
435
|
-
var templateObject_1$
|
|
477
|
+
var templateObject_1$K;
|
|
436
478
|
|
|
437
479
|
var Heading = function (props) {
|
|
438
480
|
var element = !!props.as ? props.as : props.type;
|
|
439
481
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children })));
|
|
440
482
|
};
|
|
441
483
|
|
|
442
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
484
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$J || (templateObject_1$J = __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) {
|
|
443
485
|
var size = _a.size;
|
|
444
486
|
return theme.icon[size] || theme.icon.medium;
|
|
445
487
|
}, function (_a) {
|
|
@@ -469,7 +511,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$H || (templateOb
|
|
|
469
511
|
return theme.colors.lightGray.light;
|
|
470
512
|
}
|
|
471
513
|
});
|
|
472
|
-
var templateObject_1$
|
|
514
|
+
var templateObject_1$J;
|
|
473
515
|
|
|
474
516
|
var icons = {
|
|
475
517
|
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" })),
|
|
@@ -498,7 +540,7 @@ var icons = {
|
|
|
498
540
|
};
|
|
499
541
|
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] })) }))); };
|
|
500
542
|
|
|
501
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
543
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
502
544
|
var size = _a.size;
|
|
503
545
|
switch (size) {
|
|
504
546
|
default:
|
|
@@ -510,7 +552,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$G || (templateOb
|
|
|
510
552
|
return "118px";
|
|
511
553
|
}
|
|
512
554
|
});
|
|
513
|
-
var templateObject_1$
|
|
555
|
+
var templateObject_1$I;
|
|
514
556
|
|
|
515
557
|
var illustrations = {
|
|
516
558
|
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" }), 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" }), 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" }), 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" }), 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" }), 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" })] }))),
|
|
@@ -526,14 +568,14 @@ var illustrations = {
|
|
|
526
568
|
};
|
|
527
569
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }))); };
|
|
528
570
|
|
|
529
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_1$
|
|
571
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\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 input[type=\"date\"] {\n color: ", ";\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) {
|
|
530
572
|
var isChanged = _a.isChanged;
|
|
531
573
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
532
574
|
}, function (_a) {
|
|
533
575
|
var disabled = _a.disabled;
|
|
534
576
|
return (disabled ? "not-allowed" : "pointer");
|
|
535
577
|
});
|
|
536
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
578
|
+
var StyledInput = styled__default["default"].input(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\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 ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\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 ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
537
579
|
var disabled = _a.disabled;
|
|
538
580
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
539
581
|
}, function (_a) {
|
|
@@ -546,7 +588,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$r || (templa
|
|
|
546
588
|
var disabled = _a.disabled;
|
|
547
589
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
548
590
|
}, 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));
|
|
549
|
-
var templateObject_1$
|
|
591
|
+
var templateObject_1$H, templateObject_2$s;
|
|
550
592
|
|
|
551
593
|
var PasswordInput = function (props) {
|
|
552
594
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -726,7 +768,7 @@ Input.Date = DateInput;
|
|
|
726
768
|
|
|
727
769
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 662.8 118.1", fill: "none", xmlSpace: "preserve" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M61.6 23.5c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L42 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L4.1 22C1.5 24.6 0 28 0 31.7c0 3.6 1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2-4.9-4.8c-.5-.5-.9-1-1.3-1.5L35.7 53.1c-.5.5-1 .8-1.6 1.1-.6.2-1.3.4-1.9.4-.7 0-1.3-.1-1.9-.4-.6-.2-1.2-.6-1.6-1.1l-18.3-18c-.9-.9-1.5-2.2-1.5-3.5 0-1.3.5-2.5 1.5-3.5l18.3-18c.5-.5 1-.8 1.6-1.1.6-.2 1.3-.4 1.9-.4.7 0 1.3.1 1.9.4.6.2 1.2.6 1.6 1.1l13.5 13.3 4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7c1.8-2.4 2.7-5.2 2.7-8.1-.1-3-1.1-5.8-2.9-8.2z", fill: "#e62743" }), jsxRuntime.jsx("path", { d: "M153.3 22L135 4c-1.3-1.3-2.8-2.3-4.5-3-1.7-.7-3.5-1-5.3-1-1.8 0-3.6.4-5.3 1-1.7.7-3.2 1.7-4.5 3L102 17.2 97.1 22c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.8 5.2-2.8 8.2 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9.2-.6.6-1.1 1.1-1.6l4.8-4.7 13.5-13.3c.5-.5 1-.8 1.6-1.1.6-.2 1.2-.4 1.9-.4s1.3.1 1.9.4c.6.2 1.1.6 1.6 1.1l18.3 18c.5.5.8 1 1.1 1.6.3.6.4 1.2.4 1.9 0 .6-.1 1.3-.4 1.9-.3.6-.6 1.1-1.1 1.6l-18.3 18c-.5.5-1 .8-1.6 1.1-.6.2-1.2.4-1.9.4s-1.3-.1-1.9-.4c-.6-.2-1.1-.6-1.6-1.1l-13.5-13.3c-.4.5-.8 1.1-1.3 1.5l-4.9 4.8 13.4 13.2c1.3 1.3 2.8 2.3 4.5 3 1.7.7 3.5 1 5.3 1 1.8 0 3.6-.4 5.3-1 1.7-.7 3.2-1.7 4.5-3l18.3-18c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.8-1.5-1.8-3-3.1-4.3z", fill: "#53b476" }), jsxRuntime.jsx("path", { d: "M61.9 23.3l-.3.3c-.4-.5-.9-1.1-1.3-1.5l-4.9-4.8L68.8 4c1.3-1.3 2.8-2.3 4.5-3 1.7-.7 3.5-1 5.3-1s3.6.4 5.3 1c1.7.7 3.2 1.7 4.5 3l13.4 13.1-4.7 4.9c-.5.5-.9 1-1.3 1.5L82.2 10.2c-.5-.5-1-.8-1.6-1.1-.6-.2-1.3-.4-1.9-.4-.7 0-1.3.1-1.9.4-.6.2-1.2.6-1.6 1.1L61.9 23.3zm41.5 4.9l4.8-4.7c1.8 2.4 2.7 5.2 2.7 8.2 0 2.9-1 5.8-2.7 8.2-.4.5-.8 1.1-1.3 1.5l-4.9 4.8-13.5 13.2c-2.6 2.6-6.2 4-9.8 4s-7.2-1.4-9.8-4L55.4 46.1l-4.9-4.8c-.5-.5-.9-1-1.3-1.5-1.8-2.4-2.7-5.2-2.7-8.1 0-2.9 1-5.8 2.7-8.1l4.8 4.7c.5.4.8 1 1.1 1.6.2.6.4 1.2.4 1.9v.1c0 1.3.5 2.5 1.5 3.4l4.8 4.7 13.5 13.3c.5.5 1 .8 1.6 1.1s1.3.4 1.9.4 1.3-.1 1.9-.4 1.2-.6 1.6-1.1L95.8 40l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-.6.1-1.3.4-1.9 0-.8.4-1.3.9-1.8z", fillRule: "evenodd", clipRule: "evenodd", fill: "#ffd800" }), jsxRuntime.jsx("path", { d: "M130 76.6l-18.3-18c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4L78.7 71.9l-4.9 4.8c-.5.5-.9 1-1.3 1.5-1.8 2.4-2.7 5.2-2.7 8.1 0 2.9 1 5.8 2.7 8.1l4.8-4.7c.9-.9 1.4-2.1 1.5-3.4 0-1.3.5-2.5 1.5-3.4l4.8-4.7 13.5-13.3c.9-.9 2.2-1.4 3.5-1.4 1.3 0 2.6.5 3.5 1.4l18.3 18c.9.9 1.5 2.2 1.5 3.5 0 1.3-.5 2.5-1.5 3.5l-18.3 18c-.9.9-2.2 1.4-3.5 1.4-1.3 0-2.6-.5-3.5-1.4L84.9 94.5c-.4.6-.8 1.1-1.3 1.5l-4.9 4.8L92.1 114c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4L130 96c1.3-1.3 2.3-2.8 3-4.5.7-1.7 1.1-3.5 1.1-5.3 0-1.8-.4-3.6-1.1-5.3-.6-1.5-1.7-3-3-4.3z", fill: "#8c5ca2" }), jsxRuntime.jsx("path", { d: "M84.9 78.2l-4.8 4.7c-.9.9-1.4 2.1-1.5 3.4 0 1.3-.5 2.5-1.5 3.4l-4.8 4.7-13.5 13.3c-.9.9-2.2 1.4-3.5 1.4s-2.6-.5-3.5-1.4l-18.3-18c-.9-.9-1.4-2.2-1.4-3.5s.5-2.5 1.4-3.5l18.3-18c.9-.9 2.2-1.4 3.5-1.4s2.6.5 3.5 1.4L72.3 78c.4-.5.8-1.1 1.3-1.5l4.9-4.8-13.3-13c-2.6-2.6-6.2-4-9.8-4-3.7 0-7.2 1.4-9.8 4l-18.3 18c-2.6 2.6-4.1 6.1-4.1 9.7s1.5 7.1 4.1 9.7l18.3 18c2.6 2.6 6.2 4 9.8 4 3.7 0 7.2-1.4 9.8-4l13.4-13.2 4.9-4.8c.5-.5.9-1 1.3-1.5 1.8-2.4 2.7-5.2 2.7-8.1.1-3.1-.9-5.9-2.6-8.3z", fill: "#3da9e1" })] }), jsxRuntime.jsxs("g", __assign({ fill: "#23292f" }, { children: [jsxRuntime.jsx("path", { d: "M236.6 21.5c-1.1-1-2.4-1.5-3.9-1.5h-40.2c-1.6 0-2.9.5-3.9 1.4-1.1.9-1.6 2.2-1.6 3.8 0 1.6.5 2.8 1.6 3.8s2.4 1.5 3.9 1.5h14.2V78c0 1.6.5 2.9 1.6 3.9 1.1 1.1 2.5 1.6 4.2 1.6 1.8 0 3.2-.5 4.3-1.6 1.1-1.1 1.7-2.4 1.7-3.9V30.4h14.2c1.6 0 2.9-.5 3.9-1.4 1.1-.9 1.6-2.2 1.6-3.8 0-1.5-.5-2.8-1.6-3.7z" }), jsxRuntime.jsx("path", { d: "M270.6 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.5.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.3-1.6-.8-2.9-1.8-3.9zM327.5 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3 2.1.8 4.4 1.2 6.8 1.2 4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1s-1-9.3-2.9-13.1zm-9.2 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.6-3.2-4.7-5.5-1.7-4.9-1.7-7.8c0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8 0 2.9-.6 5.5-1.7 7.8zM380.4 61.6c1.1-.9 1.7-2.1 1.7-3.5 0-3.3-.6-6.3-1.9-9.2-1.2-2.9-2.9-5.5-5-7.7s-4.5-3.9-7.3-5.2c-2.8-1.3-5.7-1.9-8.7-1.9-4 0-7.8 1-11.3 3.1-3.6 2.1-6.5 5-8.7 8.8-2.2 3.8-3.3 8.5-3.3 13.9 0 4.7 1 8.8 3 12.5 2 3.7 4.9 6.6 8.7 8.7 3.8 2.1 8.2 3.2 13.4 3.2 3 0 6-.5 8.8-1.5 2.8-1 5-2.2 6.6-3.5 1.7-1.3 2.5-2.8 2.5-4.4 0-1.2-.4-2.3-1.3-3.2-.9-.9-2-1.4-3.3-1.4-1 0-2 .3-3.1.8-.7.4-1.4.8-2.2 1.3-.8.5-1.9 1-3.2 1.3-1.3.4-3.1.5-5.3.5-2.4 0-4.7-.6-6.8-1.8-2.1-1.2-3.9-2.9-5.3-5.2-.8-1.3-1.3-2.8-1.7-4.5h29.9c1.4.3 2.7-.2 3.8-1.1zM350 47.2c1.1-1.1 2.5-2 4.1-2.4 1.6-.5 3.3-.7 5.1-.7 1.9 0 3.6.4 5.3 1.2 1.7.8 3.1 1.9 4.2 3.3s1.7 3 1.9 4.7v.6h-23.7c.1-.7.3-1.5.5-2.1.5-1.9 1.5-3.4 2.6-4.6zM447.3 39.1c-1.5-3.9-3.6-7.4-6.4-10.4-2.8-3-6-5.3-9.8-7-3.8-1.7-7.9-2.5-12.4-2.5s-8.6.8-12.3 2.5c-3.7 1.7-7 4-9.7 7-2.8 3-4.9 6.5-6.4 10.4-1.5 3.9-2.3 8.2-2.3 12.7s.8 8.8 2.3 12.7c1.5 3.9 3.6 7.4 6.4 10.4 2.7 3 6 5.3 9.7 7 3.7 1.7 7.9 2.5 12.3 2.5 4.5 0 8.6-.8 12.4-2.5 3.8-1.7 7-4 9.8-7 2.8-3 4.9-6.5 6.4-10.4 1.5-3.9 2.3-8.2 2.3-12.7-.1-4.6-.8-8.8-2.3-12.7zm-12 23.7c-1.6 3.3-3.9 5.9-6.7 7.8-2.8 1.9-6.1 2.9-9.9 2.9-3.7 0-7-1-9.9-2.9-2.8-1.9-5.1-4.5-6.7-7.8-1.6-3.3-2.4-7-2.4-11 0-4.1.8-7.8 2.4-11.1 1.6-3.3 3.8-5.9 6.7-7.8 2.8-1.9 6.1-2.9 9.9-2.9 3.7 0 7 1 9.9 2.9 2.8 1.9 5.1 4.5 6.7 7.8 1.6 3.3 2.4 7 2.4 11 .1 4.1-.8 7.8-2.4 11.1zM468.4 18c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6c-1.1 1.1-1.6 2.4-1.6 3.9v56c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.8 1.6 1.6 0 2.9-.5 3.9-1.6 1.1-1.1 1.6-2.4 1.6-3.9v-56c.1-1.5-.4-2.9-1.4-3.9zM520.2 36.6c-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v23.2c0 2.3-.4 4.2-1.2 5.8-.8 1.6-1.9 2.8-3.4 3.6-1.4.8-3.2 1.2-5.3 1.2-3.1 0-5.5-.8-7.2-2.4-1.7-1.6-2.6-4.4-2.6-8.3V40.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V67c0 3.4.7 6.4 2 9 1.3 2.6 3.2 4.7 5.6 6.2 2.4 1.5 5.2 2.2 8.4 2.2 2.7 0 5.1-.3 7.3-1 2.1-.7 3.9-1.6 5.5-2.9.7-.6 1.3-1.3 1.9-2v1c0 3.1-.5 5.5-1.4 7.3-.9 1.8-2.3 3.1-4.2 3.8-1.8.8-4.2 1.1-6.9 1.1-2.1 0-3.9-.3-5.4-1-1.6-.6-2.8-1.1-3.8-1.4-1.3-.5-2.6-.4-3.8.2-1.2.6-2.1 1.8-2.6 3.6-.4 1.3-.3 2.6.4 3.8.7 1.2 1.9 2.2 3.8 2.9 1.4.6 3.2 1.1 5.3 1.4 2.2.3 4.2.5 6.2.5 4.4 0 8.3-.7 11.8-2.2 3.5-1.4 6.3-3.8 8.4-7.1 2.1-3.3 3.1-7.7 3.1-13.3V40.5c-.2-1.6-.7-2.9-1.8-3.9zM603.2 44.4c-.8-3.1-2.4-5.6-4.7-7.5s-5.6-2.8-9.9-2.8c-2.7 0-5.1.6-7.2 1.7-2.1 1.1-4 2.5-5.5 4.1-1.4 1.5-2.5 2.9-3.2 4.2-.8-2.6-2.1-4.7-3.9-6.5-2.3-2.3-5.9-3.5-10.7-3.5-2 0-3.8.3-5.5 1-1.7.6-3.2 1.5-4.6 2.5-1.4 1-2.6 2.1-3.5 3.3l-.9 1.2v-1.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9V78c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c0-2 .4-3.8 1.2-5.4.8-1.6 2-2.9 3.7-3.9 1.6-1 3.6-1.4 5.9-1.4 2.4 0 4.2.5 5.4 1.4 1.3 1 2.1 2.3 2.6 3.9s.7 3.4.7 5.4v23.2c0 1.6.5 2.9 1.5 3.9 1 1.1 2.3 1.6 3.9 1.6s2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V54.7c.3-3.8-.2-7.2-1-10.3zM659.8 46.1c-2-3.7-4.6-6.7-8-8.8-3.4-2.1-7.1-3.2-11.4-3.2-2.1 0-4.1.4-6 1.1-1.9.7-3.6 1.6-5 2.8-1.3 1-2.4 2-3.2 3.1v-.5c0-1.6-.5-2.9-1.5-3.9-1-1.1-2.3-1.6-3.9-1.6s-2.9.5-3.9 1.6-1.5 2.4-1.5 3.9v55.6c0 1.6.5 3 1.5 4s2.3 1.5 3.9 1.5 2.9-.5 3.9-1.6 1.5-2.4 1.5-3.9V78.3c.6.6 1.4 1.3 2.2 1.9 1.6 1.2 3.5 2.2 5.6 3s4.4 1.2 6.8 1.2c4.1 0 7.8-1.1 11.1-3.2s5.9-5.1 7.9-8.9c2-3.8 2.9-8.1 2.9-13.1.1-5-.9-9.3-2.9-13.1zm-9.1 20.8c-1.1 2.3-2.7 4.2-4.6 5.5-2 1.3-4.3 2-6.9 2s-5-.7-7-2-3.5-3.2-4.7-5.5c-1.1-2.3-1.7-4.9-1.7-7.8 0-2.9.6-5.5 1.7-7.8s2.7-4.1 4.7-5.4c2-1.3 4.3-2 7-2s5 .7 6.9 2c2 1.3 3.5 3.1 4.6 5.4 1.1 2.3 1.7 4.8 1.7 7.8-.1 2.9-.6 5.5-1.7 7.8z" })] }))] }))); };
|
|
728
770
|
|
|
729
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
771
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
730
772
|
var size = _a.size;
|
|
731
773
|
switch (size) {
|
|
732
774
|
default:
|
|
@@ -736,7 +778,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$E || (templateOb
|
|
|
736
778
|
return "116px";
|
|
737
779
|
}
|
|
738
780
|
});
|
|
739
|
-
var templateObject_1$
|
|
781
|
+
var templateObject_1$G;
|
|
740
782
|
|
|
741
783
|
var medals = {
|
|
742
784
|
small: {
|
|
@@ -752,11 +794,11 @@ var medals = {
|
|
|
752
794
|
};
|
|
753
795
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }))); };
|
|
754
796
|
|
|
755
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
797
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$F || (templateObject_1$F = __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) {
|
|
756
798
|
var disabled = _a.disabled;
|
|
757
799
|
return (disabled ? "49.5px" : "");
|
|
758
800
|
});
|
|
759
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
801
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$r || (templateObject_2$r = __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 -moz-appearance: textfield;\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 -moz-appearance: textfield;\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) {
|
|
760
802
|
var disabled = _a.disabled;
|
|
761
803
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
762
804
|
}, function (_a) {
|
|
@@ -769,7 +811,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$q || (
|
|
|
769
811
|
var disabled = _a.disabled;
|
|
770
812
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
771
813
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
772
|
-
var templateObject_1$
|
|
814
|
+
var templateObject_1$F, templateObject_2$r;
|
|
773
815
|
|
|
774
816
|
var Number = function (props) {
|
|
775
817
|
var inputRef = React.useRef(null);
|
|
@@ -806,7 +848,7 @@ var Number = function (props) {
|
|
|
806
848
|
return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { defaultValue: props.defaultValue || props.min || 0, onChange: onChange, onBlur: props.onBlur, ref: inputRef })), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" })] })));
|
|
807
849
|
};
|
|
808
850
|
|
|
809
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
851
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$E || (templateObject_1$E = __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) {
|
|
810
852
|
var size = _a.size;
|
|
811
853
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
812
854
|
}, function (_a) {
|
|
@@ -838,11 +880,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$C || (templa
|
|
|
838
880
|
var align = _a.align;
|
|
839
881
|
return align;
|
|
840
882
|
});
|
|
841
|
-
var templateObject_1$
|
|
883
|
+
var templateObject_1$E;
|
|
842
884
|
|
|
843
885
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }))); };
|
|
844
886
|
|
|
845
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
887
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-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 min-height: 25px;\n max-height: 25px;\n min-width: 25px;\n max-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) {
|
|
846
888
|
var checked = _a.checked, disabled = _a.disabled;
|
|
847
889
|
if (disabled)
|
|
848
890
|
return theme.colors.lightGray.darker;
|
|
@@ -870,7 +912,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$B || (template
|
|
|
870
912
|
return theme.colors.green.base;
|
|
871
913
|
return "";
|
|
872
914
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
873
|
-
var templateObject_1$
|
|
915
|
+
var templateObject_1$D;
|
|
874
916
|
|
|
875
917
|
var Radio = function (props) {
|
|
876
918
|
var _a, _b;
|
|
@@ -902,11 +944,50 @@ var Radio = function (props) {
|
|
|
902
944
|
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 }) })));
|
|
903
945
|
};
|
|
904
946
|
|
|
905
|
-
var
|
|
947
|
+
var StyledRange = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"], ["\n input {\n appearance: none;\n width: 100%;\n height: 11px;\n border: ", ";\n border-radius: 8px;\n position: relative;\n background: ", ";\n\n ::-webkit-slider-thumb {\n appearance: none;\n width: 24px;\n height: 24px;\n background-color: ", ";\n border: ", ";\n border-radius: 50%;\n cursor: ", ";\n }\n }\n"])), function () { return "2px solid ".concat(theme.colors.lightGray.dark); }, function (_a) {
|
|
948
|
+
var value = _a.value, disabled = _a.disabled;
|
|
949
|
+
return "linear-gradient(90deg,\n ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " 0%,\n ").concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " ").concat(value, "%,\n ").concat(theme.colors.lightGray.dark, " 100%\n )");
|
|
950
|
+
}, function () { return theme.colors.lightGray.light; }, function (_a) {
|
|
951
|
+
var disabled = _a.disabled;
|
|
952
|
+
return "7px solid ".concat(disabled ? theme.colors.lightGray.darker : theme.colors.green.base);
|
|
953
|
+
}, function (_a) {
|
|
954
|
+
var disabled = _a.disabled;
|
|
955
|
+
return disabled ? "not-allowed" : "pointer";
|
|
956
|
+
});
|
|
957
|
+
var templateObject_1$C;
|
|
958
|
+
|
|
959
|
+
var Range = function (props) {
|
|
960
|
+
var _a;
|
|
961
|
+
var rangeRef = React.useRef(null);
|
|
962
|
+
var _b = React.useState(props.defaultValue || 0), value = _b[0], setValue = _b[1];
|
|
963
|
+
React.useEffect(function () {
|
|
964
|
+
if (props.autoFocus)
|
|
965
|
+
rangeRef.current.focus();
|
|
966
|
+
}, []);
|
|
967
|
+
React.useEffect(function () {
|
|
968
|
+
var value = parseInt(rangeRef.current.value);
|
|
969
|
+
setValue(value);
|
|
970
|
+
}, [(_a = rangeRef.current) === null || _a === void 0 ? void 0 : _a.value]);
|
|
971
|
+
React.useEffect(function () {
|
|
972
|
+
rangeRef.current.value = "".concat(value);
|
|
973
|
+
}, [value]);
|
|
974
|
+
var onChange = function () {
|
|
975
|
+
if (!props.disabled) {
|
|
976
|
+
var value_1 = parseInt(rangeRef.current.value);
|
|
977
|
+
if (!!props.onChange) {
|
|
978
|
+
props.onChange(value_1);
|
|
979
|
+
setValue(value_1);
|
|
980
|
+
}
|
|
981
|
+
}
|
|
982
|
+
};
|
|
983
|
+
return (jsxRuntime.jsx(StyledRange, __assign({ value: value, disabled: props.disabled }, { children: jsxRuntime.jsx("input", { type: "range", disabled: !!props.disabled, id: props.id, min: props.min || 0, max: props.max || 100, ref: rangeRef, defaultValue: props.defaultValue, onChange: onChange, onBlur: props.onBlur }) })));
|
|
984
|
+
};
|
|
985
|
+
|
|
986
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __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) {
|
|
906
987
|
var disabled = _a.disabled;
|
|
907
988
|
return (disabled ? "not-allowed" : "pointer");
|
|
908
989
|
});
|
|
909
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
990
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$q || (templateObject_2$q = __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) {
|
|
910
991
|
var disabled = _a.disabled;
|
|
911
992
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
912
993
|
}, function (_a) {
|
|
@@ -919,7 +1000,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$p || (temp
|
|
|
919
1000
|
var isChanged = _a.isChanged;
|
|
920
1001
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
921
1002
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
922
|
-
var templateObject_1$
|
|
1003
|
+
var templateObject_1$B, templateObject_2$q;
|
|
923
1004
|
|
|
924
1005
|
var Select = function (props) {
|
|
925
1006
|
var _a;
|
|
@@ -941,18 +1022,18 @@ var Select = function (props) {
|
|
|
941
1022
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged || props.defaultValue, ref: inputRef }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder })), props.children] }))] }));
|
|
942
1023
|
};
|
|
943
1024
|
|
|
944
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
1025
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
945
1026
|
var horizontal = _a.horizontal;
|
|
946
1027
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
947
1028
|
}, function (_a) {
|
|
948
1029
|
var vertical = _a.vertical;
|
|
949
1030
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
950
1031
|
});
|
|
951
|
-
var templateObject_1$
|
|
1032
|
+
var templateObject_1$A;
|
|
952
1033
|
|
|
953
1034
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props))); };
|
|
954
1035
|
|
|
955
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
1036
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$z || (templateObject_1$z = __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) {
|
|
956
1037
|
var size = _a.size;
|
|
957
1038
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
958
1039
|
}, function (_a) {
|
|
@@ -980,18 +1061,18 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$y || (templ
|
|
|
980
1061
|
return theme.colors.darkGray.dark;
|
|
981
1062
|
}
|
|
982
1063
|
});
|
|
983
|
-
var templateObject_1$
|
|
1064
|
+
var templateObject_1$z;
|
|
984
1065
|
|
|
985
1066
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }))); };
|
|
986
1067
|
|
|
987
|
-
var Container$
|
|
988
|
-
var templateObject_1$
|
|
1068
|
+
var Container$j = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: 0 2px 0 ", ";\n border: 1px solid ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker);
|
|
1069
|
+
var templateObject_1$y;
|
|
989
1070
|
|
|
990
1071
|
var Tag = function (props) {
|
|
991
|
-
return jsxRuntime.jsx(Container$
|
|
1072
|
+
return jsxRuntime.jsx(Container$j, { children: props.children });
|
|
992
1073
|
};
|
|
993
1074
|
|
|
994
|
-
var Container$
|
|
1075
|
+
var Container$i = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n width: 46px;\n min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-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 min-width: 46px;\n max-width: 46px;\n height: 27px;\n min-height: 27px;\n max-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) {
|
|
995
1076
|
var disabled = _a.disabled;
|
|
996
1077
|
return (disabled ? "not-allowed" : "pointer");
|
|
997
1078
|
}, function (_a) {
|
|
@@ -1009,7 +1090,7 @@ var Container$h = styled__default["default"].div(templateObject_1$w || (template
|
|
|
1009
1090
|
var disabled = _a.disabled;
|
|
1010
1091
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
1011
1092
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
1012
|
-
var templateObject_1$
|
|
1093
|
+
var templateObject_1$x;
|
|
1013
1094
|
|
|
1014
1095
|
var Toggle = function (props) {
|
|
1015
1096
|
var _a;
|
|
@@ -1037,10 +1118,10 @@ var Toggle = function (props) {
|
|
|
1037
1118
|
props.onChange(newValue);
|
|
1038
1119
|
}
|
|
1039
1120
|
};
|
|
1040
|
-
return (jsxRuntime.jsx(Container$
|
|
1121
|
+
return (jsxRuntime.jsx(Container$i, __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 }) })));
|
|
1041
1122
|
};
|
|
1042
1123
|
|
|
1043
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
1124
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __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) {
|
|
1044
1125
|
var level = _a.level;
|
|
1045
1126
|
switch (level) {
|
|
1046
1127
|
case 1:
|
|
@@ -1051,7 +1132,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$v || (templateOb
|
|
|
1051
1132
|
return "70px";
|
|
1052
1133
|
}
|
|
1053
1134
|
});
|
|
1054
|
-
var templateObject_1$
|
|
1135
|
+
var templateObject_1$w;
|
|
1055
1136
|
|
|
1056
1137
|
var trophies = {
|
|
1057
1138
|
1: {
|
|
@@ -1087,7 +1168,7 @@ var trophies = {
|
|
|
1087
1168
|
};
|
|
1088
1169
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
1089
1170
|
|
|
1090
|
-
var Container$
|
|
1171
|
+
var Container$h = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __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) {
|
|
1091
1172
|
var type = _a.type;
|
|
1092
1173
|
switch (type) {
|
|
1093
1174
|
case "success":
|
|
@@ -1104,11 +1185,11 @@ var Container$g = styled__default["default"].div(templateObject_1$u || (template
|
|
|
1104
1185
|
return theme.colors.red.base;
|
|
1105
1186
|
}
|
|
1106
1187
|
});
|
|
1107
|
-
var templateObject_1$
|
|
1188
|
+
var templateObject_1$v;
|
|
1108
1189
|
|
|
1109
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1190
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$h, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
|
|
1110
1191
|
|
|
1111
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
1192
|
+
var StyledCard = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __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) {
|
|
1112
1193
|
var ellipse = _a.ellipse;
|
|
1113
1194
|
return ellipse
|
|
1114
1195
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -1117,23 +1198,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$t || (templateO
|
|
|
1117
1198
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
1118
1199
|
: "";
|
|
1119
1200
|
});
|
|
1120
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
1201
|
+
var Ellipse = styled__default["default"].div(templateObject_2$p || (templateObject_2$p = __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) {
|
|
1121
1202
|
var color = _a.color;
|
|
1122
1203
|
return color ? theme.colors[color].light : "";
|
|
1123
1204
|
});
|
|
1124
1205
|
var Content = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
1125
|
-
var templateObject_1$
|
|
1206
|
+
var templateObject_1$u, templateObject_2$p, templateObject_3$9;
|
|
1126
1207
|
|
|
1127
1208
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
1128
1209
|
|
|
1129
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
1130
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
1210
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1211
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1131
1212
|
var CheckboxWrapper = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
1132
|
-
var Label$
|
|
1213
|
+
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __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) {
|
|
1133
1214
|
var weight = _a.weight;
|
|
1134
1215
|
return weight || 500;
|
|
1135
1216
|
}, theme.colors.darkGray.base);
|
|
1136
|
-
var templateObject_1$
|
|
1217
|
+
var templateObject_1$t, templateObject_2$o, templateObject_3$8, templateObject_4$6;
|
|
1137
1218
|
|
|
1138
1219
|
var Checkboxes = function (props) {
|
|
1139
1220
|
var _a = React.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -1150,18 +1231,18 @@ var Checkboxes = function (props) {
|
|
|
1150
1231
|
if (props.onBlur)
|
|
1151
1232
|
props.onBlur(props.name);
|
|
1152
1233
|
};
|
|
1153
|
-
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1234
|
+
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$9, __assign({ as: "legend" }, { children: props.legend })), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
1154
1235
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1155
|
-
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 }), jsxRuntime.jsx(Label$
|
|
1236
|
+
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 }), jsxRuntime.jsx(Label$9, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1156
1237
|
}) })] }));
|
|
1157
1238
|
};
|
|
1158
1239
|
|
|
1159
|
-
var Container$
|
|
1160
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
1240
|
+
var Container$g = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
1241
|
+
var Item = styled__default["default"].div(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p {\n display: ", ";\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
1161
1242
|
var isOpen = _a.isOpen;
|
|
1162
1243
|
return (isOpen ? "" : "none");
|
|
1163
1244
|
}, theme.colors.lightGray.darker);
|
|
1164
|
-
var templateObject_1$
|
|
1245
|
+
var templateObject_1$s, templateObject_2$n;
|
|
1165
1246
|
|
|
1166
1247
|
var Collapse = function (props) {
|
|
1167
1248
|
var _a = React.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -1173,15 +1254,15 @@ var Collapse = function (props) {
|
|
|
1173
1254
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
1174
1255
|
}
|
|
1175
1256
|
};
|
|
1176
|
-
return (jsxRuntime.jsx(Container$
|
|
1257
|
+
return (jsxRuntime.jsx(Container$g, __assign({}, props, { children: props.items.map(function (item, index) {
|
|
1177
1258
|
var isOpen = openItems.includes(index);
|
|
1178
1259
|
return (jsxRuntime.jsxs(Item, __assign({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: item.title })), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsxRuntime.jsx(Paragraph, __assign({ weight: "regular" }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
1179
1260
|
}) })));
|
|
1180
1261
|
};
|
|
1181
1262
|
|
|
1182
|
-
var Container$
|
|
1183
|
-
var Label$
|
|
1184
|
-
var templateObject_1$
|
|
1263
|
+
var Container$f = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
1264
|
+
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1265
|
+
var templateObject_1$r, templateObject_2$m;
|
|
1185
1266
|
|
|
1186
1267
|
var DateInputField = function (props) {
|
|
1187
1268
|
var onChange = function (value) {
|
|
@@ -1192,12 +1273,12 @@ var DateInputField = function (props) {
|
|
|
1192
1273
|
if (props.onBlur)
|
|
1193
1274
|
props.onBlur(props.name);
|
|
1194
1275
|
};
|
|
1195
|
-
return (jsxRuntime.jsxs(Container$
|
|
1276
|
+
return (jsxRuntime.jsxs(Container$f, { children: [jsxRuntime.jsx(Label$8, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Date, { defaultValue: props.defaultValue, min: props.min, max: props.max, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1196
1277
|
};
|
|
1197
1278
|
|
|
1198
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
1199
|
-
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$
|
|
1200
|
-
var templateObject_1$
|
|
1279
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
1280
|
+
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
1281
|
+
var templateObject_1$q, templateObject_2$l;
|
|
1201
1282
|
|
|
1202
1283
|
var IconButton = function (props) {
|
|
1203
1284
|
if (props.color === "white")
|
|
@@ -1205,9 +1286,9 @@ var IconButton = function (props) {
|
|
|
1205
1286
|
return (jsxRuntime.jsx(StyledIconButton, __assign({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: "small", color: "white" }) })));
|
|
1206
1287
|
};
|
|
1207
1288
|
|
|
1208
|
-
var Container$
|
|
1209
|
-
var Label$
|
|
1210
|
-
var templateObject_1$
|
|
1289
|
+
var Container$e = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
1290
|
+
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1291
|
+
var templateObject_1$p, templateObject_2$k;
|
|
1211
1292
|
|
|
1212
1293
|
var InputField = function (props) {
|
|
1213
1294
|
var onChange = function (value) {
|
|
@@ -1218,10 +1299,10 @@ var InputField = function (props) {
|
|
|
1218
1299
|
if (props.onBlur)
|
|
1219
1300
|
props.onBlur(props.name);
|
|
1220
1301
|
};
|
|
1221
|
-
return (jsxRuntime.jsxs(Container$
|
|
1302
|
+
return (jsxRuntime.jsxs(Container$e, { children: [jsxRuntime.jsx(Label$7, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1222
1303
|
};
|
|
1223
1304
|
|
|
1224
|
-
var Container$
|
|
1305
|
+
var Container$d = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"], ["\n min-width: 74px;\n max-width: 74px;\n width: fit-content;\n height: 74px;\n background-color: ", ";\n box-sizing: border-box;\n\n border: 4px solid;\n border-radius: 6px;\n border-color: ", ";\n\n padding: 8px 24px;\n margin-right: 6px;\n margin-left: 6px;\n margin-bottom: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n position: relative;\n text-transform: uppercase;\n\n h1 {\n color: ", ";\n }\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
1225
1306
|
var status = _a.status, color = _a.color;
|
|
1226
1307
|
switch (status) {
|
|
1227
1308
|
case "passed":
|
|
@@ -1265,23 +1346,23 @@ var Container$c = styled__default["default"].div(templateObject_1$n || (template
|
|
|
1265
1346
|
return theme.colors.darkGray.light;
|
|
1266
1347
|
}
|
|
1267
1348
|
});
|
|
1268
|
-
var CheckIconWrapper = styled__default["default"].div(templateObject_2$
|
|
1269
|
-
var templateObject_1$
|
|
1349
|
+
var CheckIconWrapper = styled__default["default"].div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
1350
|
+
var templateObject_1$o, templateObject_2$j;
|
|
1270
1351
|
|
|
1271
|
-
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1352
|
+
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$d, __assign({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
1272
1353
|
marginTop: "13px",
|
|
1273
1354
|
transform: "scale(2)",
|
|
1274
1355
|
} }, { children: jsxRuntime.jsx("path", { d: "M0 4.5V1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V4H25V1C25 0.447715 25.4477 0 26 0H27C27.5523 0 28 0.447715 28 1V4.5C28 5.88071 26.8807 7 25.5 7H2.5C1.11929 7 0 5.88071 0 4.5Z" }) }))) : (jsxRuntime.jsx(Heading, __assign({ type: "h1" }, { children: props.char })))] }))); };
|
|
1275
1356
|
|
|
1276
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
1357
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$n || (templateObject_1$n = __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-top: 3px;\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-top: 3px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
1277
1358
|
var chevron = _a.chevron;
|
|
1278
1359
|
return (chevron === "left" ? "4px" : "");
|
|
1279
1360
|
}, function (_a) {
|
|
1280
1361
|
var chevron = _a.chevron;
|
|
1281
1362
|
return (chevron === "right" ? "4px" : "");
|
|
1282
1363
|
});
|
|
1283
|
-
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
1284
|
-
var templateObject_1$
|
|
1364
|
+
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$i || (templateObject_2$i = __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);
|
|
1365
|
+
var templateObject_1$n, templateObject_2$i;
|
|
1285
1366
|
|
|
1286
1367
|
var Link = function (props) {
|
|
1287
1368
|
var onClick = function (e) {
|
|
@@ -1293,15 +1374,15 @@ var Link = function (props) {
|
|
|
1293
1374
|
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" }), jsxRuntime.jsx(StyledLink, __assign({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
1294
1375
|
};
|
|
1295
1376
|
|
|
1296
|
-
var Container$
|
|
1377
|
+
var Container$c = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __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) {
|
|
1297
1378
|
var text = _a.text;
|
|
1298
1379
|
return (text ? "20px" : "");
|
|
1299
1380
|
});
|
|
1300
|
-
var templateObject_1$
|
|
1381
|
+
var templateObject_1$m;
|
|
1301
1382
|
|
|
1302
|
-
var Loading = function (props) { return (jsxRuntime.jsxs(Container$
|
|
1383
|
+
var Loading = function (props) { return (jsxRuntime.jsxs(Container$c, __assign({}, props, { children: [jsxRuntime.jsx(BeatLoader__default["default"], { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { vertical: 20 }), jsxRuntime.jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
1303
1384
|
|
|
1304
|
-
var Container$
|
|
1385
|
+
var Container$b = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"], ["\n padding: 15px;\n background-color: ", ";\n border-radius: 6px 6px 0 0;\n position: relative;\n cursor: pointer;\n"])), function (_a) {
|
|
1305
1386
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
1306
1387
|
if (dropdownIsVisible) {
|
|
1307
1388
|
switch (color) {
|
|
@@ -1314,7 +1395,7 @@ var Container$a = styled__default["default"].div(templateObject_1$k || (template
|
|
|
1314
1395
|
}
|
|
1315
1396
|
return "";
|
|
1316
1397
|
});
|
|
1317
|
-
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$
|
|
1398
|
+
var SelectedLocaleWrapper = styled__default["default"].div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n"])));
|
|
1318
1399
|
var DropdownContainer = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"], ["\n min-width: 100%;\n background-color: ", ";\n overflow: hidden;\n border-radius: 6px 0 6px 6px;\n box-shadow: 0px 2px 0px rgb(0 0 0 / 20%);\n position: absolute;\n top: 50px;\n right: 0;\n"])), function (_a) {
|
|
1319
1400
|
var color = _a.color;
|
|
1320
1401
|
switch (color) {
|
|
@@ -1326,7 +1407,7 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$7 || (te
|
|
|
1326
1407
|
}
|
|
1327
1408
|
});
|
|
1328
1409
|
var Locale = styled__default["default"].div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n > div:first-child {\n display: flex;\n align-items: center;\n margin-right: 10px;\n }\n\n p {\n white-space: nowrap;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"])), theme.colors.lightGray.darker, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
1329
|
-
var templateObject_1$
|
|
1410
|
+
var templateObject_1$l, templateObject_2$h, templateObject_3$7, templateObject_4$5;
|
|
1330
1411
|
|
|
1331
1412
|
var LocaleSelect = function (props) {
|
|
1332
1413
|
var _a = React.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -1335,22 +1416,22 @@ var LocaleSelect = function (props) {
|
|
|
1335
1416
|
setLocale(locale);
|
|
1336
1417
|
props.onChange(locale);
|
|
1337
1418
|
};
|
|
1338
|
-
return (jsxRuntime.jsxs(Container$
|
|
1419
|
+
return (jsxRuntime.jsxs(Container$b, __assign({ color: props.color || "light", dropdownIsVisible: dropdownIsVisible, onClick: function () { return setDropdownIsVisible(!dropdownIsVisible); }, onMouseLeave: function () { return setDropdownIsVisible(false); } }, { children: [jsxRuntime.jsxs(SelectedLocaleWrapper, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: getNativeLanguageByLocale_1(locale) }))] }), dropdownIsVisible ? (jsxRuntime.jsx(Icon, { type: "chevronUp", size: "small", color: "darkGray" })) : (jsxRuntime.jsx(Icon, { type: "chevronDown", size: "small", color: "darkGray" }))] }), dropdownIsVisible && (jsxRuntime.jsx(DropdownContainer, __assign({ color: props.color || "light" }, { children: props.locales
|
|
1339
1420
|
.filter(function (l) { return l !== locale; })
|
|
1340
1421
|
.map(function (locale) { return (jsxRuntime.jsxs(Locale, __assign({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: getNativeLanguageByLocale_1(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
1341
1422
|
};
|
|
1342
1423
|
|
|
1343
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
1344
|
-
var templateObject_1$
|
|
1424
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
1425
|
+
var templateObject_1$k;
|
|
1345
1426
|
|
|
1346
1427
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "gold" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "silver" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: "bronze" }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
1347
1428
|
|
|
1348
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
1429
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __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) {
|
|
1349
1430
|
var contrast = _a.contrast;
|
|
1350
1431
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1351
1432
|
});
|
|
1352
|
-
var ButtonContainer = styled__default["default"].div(templateObject_2$
|
|
1353
|
-
var templateObject_1$
|
|
1433
|
+
var ButtonContainer = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"], ["\n margin-top: 20px;\n display: flex;\n\n > *:first-child {\n margin-right: 10px;\n }\n"])));
|
|
1434
|
+
var templateObject_1$j, templateObject_2$g;
|
|
1354
1435
|
|
|
1355
1436
|
var Notification = function (props) {
|
|
1356
1437
|
if (!props.isVisible)
|
|
@@ -1358,9 +1439,9 @@ var Notification = function (props) {
|
|
|
1358
1439
|
return (jsxRuntime.jsxs(NotificationContainer, __assign({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign({ type: "h4" }, { children: props.title })), props.onClose && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spacer, { horizontal: 15 }), jsxRuntime.jsx(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React.createElement(Button, __assign({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
1359
1440
|
};
|
|
1360
1441
|
|
|
1361
|
-
var Container$
|
|
1362
|
-
var Label$
|
|
1363
|
-
var templateObject_1$
|
|
1442
|
+
var Container$a = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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"])));
|
|
1443
|
+
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1444
|
+
var templateObject_1$i, templateObject_2$f;
|
|
1364
1445
|
|
|
1365
1446
|
var NumberField = function (props) {
|
|
1366
1447
|
var onChange = function (value) {
|
|
@@ -1371,7 +1452,7 @@ var NumberField = function (props) {
|
|
|
1371
1452
|
if (props.onBlur)
|
|
1372
1453
|
props.onBlur(props.name);
|
|
1373
1454
|
};
|
|
1374
|
-
return (jsxRuntime.jsxs(Container$
|
|
1455
|
+
return (jsxRuntime.jsxs(Container$a, { children: [jsxRuntime.jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Number, { min: props.min, max: props.max, defaultValue: props.defaultValue, autoComplete: props.autoComplete, disabled: props.disabled, autoFocus: props.autoFocus, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1375
1456
|
};
|
|
1376
1457
|
|
|
1377
1458
|
var expressions = {};
|
|
@@ -1422,15 +1503,15 @@ var isStrongPassword = function (password) {
|
|
|
1422
1503
|
exports.isStrongPassword = isStrongPassword;
|
|
1423
1504
|
}(expressions));
|
|
1424
1505
|
|
|
1425
|
-
var Container$
|
|
1426
|
-
var Label$
|
|
1506
|
+
var Container$9 = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __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"])));
|
|
1507
|
+
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1427
1508
|
var HelperContainer = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n margin-top: 5px;\n padding-left: 5px;\n"], ["\n margin-top: 5px;\n padding-left: 5px;\n"])));
|
|
1428
1509
|
var fadeIn = styled.keyframes(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
1429
1510
|
var Helper = styled__default["default"](StyledParagraph)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"], ["\n font-weight: 400;\n font-size: 14px;\n color: ", ";\n animation: ", " 0.3s linear;\n"])), function (_a) {
|
|
1430
1511
|
var isOk = _a.isOk;
|
|
1431
1512
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
1432
1513
|
}, fadeIn);
|
|
1433
|
-
var templateObject_1$
|
|
1514
|
+
var templateObject_1$h, templateObject_2$e, templateObject_3$6, templateObject_4$4, templateObject_5$2;
|
|
1434
1515
|
|
|
1435
1516
|
var translations = {
|
|
1436
1517
|
"nl-NL": {
|
|
@@ -1487,7 +1568,7 @@ var PasswordInputField = function (props) {
|
|
|
1487
1568
|
if (props.onBlur)
|
|
1488
1569
|
props.onBlur(props.name);
|
|
1489
1570
|
};
|
|
1490
|
-
return (jsxRuntime.jsxs(Container$
|
|
1571
|
+
return (jsxRuntime.jsxs(Container$9, { children: [jsxRuntime.jsx(Label$5, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Input.Password, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur }), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale].capitalLetter] })), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale].number] })), jsxRuntime.jsxs(Helper, __assign({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale].specialCharacter] })), jsxRuntime.jsxs(Helper, __assign({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale].length] }))] })) : null] }));
|
|
1491
1572
|
};
|
|
1492
1573
|
|
|
1493
1574
|
var generateRandomString = function (length) {
|
|
@@ -1500,7 +1581,7 @@ var generateRandomString = function (length) {
|
|
|
1500
1581
|
return string;
|
|
1501
1582
|
};
|
|
1502
1583
|
|
|
1503
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
1584
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __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) {
|
|
1504
1585
|
var isVisible = _a.isVisible;
|
|
1505
1586
|
return (isVisible ? "100%" : "0%");
|
|
1506
1587
|
}, function (_a) {
|
|
@@ -1513,7 +1594,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$f || (templ
|
|
|
1513
1594
|
var contrast = _a.contrast;
|
|
1514
1595
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
1515
1596
|
});
|
|
1516
|
-
var templateObject_1$
|
|
1597
|
+
var templateObject_1$g;
|
|
1517
1598
|
|
|
1518
1599
|
var Popup = function (props) {
|
|
1519
1600
|
var popupRef = React.useRef(null);
|
|
@@ -1549,8 +1630,8 @@ var Popup = function (props) {
|
|
|
1549
1630
|
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 })), jsxRuntime.jsx(Spacer, { vertical: 10 })] })), jsxRuntime.jsx(Paragraph, __assign({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
1550
1631
|
};
|
|
1551
1632
|
|
|
1552
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
1553
|
-
var StyledProgressBar = styled__default["default"].div(templateObject_2$
|
|
1633
|
+
var Wrapper = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
1634
|
+
var StyledProgressBar = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __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) {
|
|
1554
1635
|
var showInfo = _a.showInfo;
|
|
1555
1636
|
return (showInfo ? "10px" : "");
|
|
1556
1637
|
});
|
|
@@ -1561,12 +1642,12 @@ var Indicator$1 = styled__default["default"].div(templateObject_3$5 || (template
|
|
|
1561
1642
|
var color = _a.color;
|
|
1562
1643
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
1563
1644
|
});
|
|
1564
|
-
var templateObject_1$
|
|
1645
|
+
var templateObject_1$f, templateObject_2$d, templateObject_3$5;
|
|
1565
1646
|
|
|
1566
1647
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign({}, props, { children: jsxRuntime.jsx(Indicator$1, __assign({}, props)) })), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
1567
1648
|
|
|
1568
|
-
var Container$
|
|
1569
|
-
var Step$1 = styled__default["default"].li(templateObject_2$
|
|
1649
|
+
var Container$8 = styled__default["default"].ol(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
1650
|
+
var Step$1 = styled__default["default"].li(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"], ["\n flex: 1;\n display: flex;\n flex-direction: column;\n text-align: center;\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin: 0 auto;\n cursor: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n border: 10px solid ", ";\n position: relative;\n z-index: 1;\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :not(:last-child):after {\n content: \"\";\n height: 4px;\n position: relative;\n top: ", ";\n left: 50%;\n background-color: ", ";\n order: -1;\n }\n\n :last-child {\n margin-top: 4px;\n }\n"])), function (_a) {
|
|
1570
1651
|
var status = _a.status;
|
|
1571
1652
|
return (!!status ? "pointer" : "not-allowed");
|
|
1572
1653
|
}, function (_a) {
|
|
@@ -1588,9 +1669,9 @@ var Step$1 = styled__default["default"].li(templateObject_2$b || (templateObject
|
|
|
1588
1669
|
var hasTitle = _a.hasTitle;
|
|
1589
1670
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
1590
1671
|
}, theme.colors.lightGray.dark);
|
|
1591
|
-
var templateObject_1$
|
|
1672
|
+
var templateObject_1$e, templateObject_2$c;
|
|
1592
1673
|
|
|
1593
|
-
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1674
|
+
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$8, { children: props.steps.map(function (_a, index) {
|
|
1594
1675
|
var title = _a.title, onClick = _a.onClick;
|
|
1595
1676
|
var step = index + 1;
|
|
1596
1677
|
var status = props.current > step
|
|
@@ -1605,8 +1686,8 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$7, { children:
|
|
|
1605
1686
|
return (jsxRuntime.jsxs(Step$1, __assign({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: step }))) })), title && jsxRuntime.jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
1606
1687
|
}) })); };
|
|
1607
1688
|
|
|
1608
|
-
var Container$
|
|
1609
|
-
var Step = styled__default["default"].li(templateObject_2$
|
|
1689
|
+
var Container$7 = styled__default["default"].ol(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n"])));
|
|
1690
|
+
var Step = styled__default["default"].li(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n box-shadow: inset 0px -1px 0px ", ";\n padding: 20px 0 20px 20px;\n cursor: ", ";\n\n > div:first-child {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n box-sizing: initial;\n margin-right: 10px;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n background-color: ", ";\n }\n\n > div h6 {\n color: ", ";\n }\n\n p {\n color: ", ";\n }\n\n :hover {\n background-color: ", ";\n }\n"])), theme.colors.lightGray.dark, function (_a) {
|
|
1610
1691
|
var status = _a.status;
|
|
1611
1692
|
return (!!status ? "pointer" : "not-allowed");
|
|
1612
1693
|
}, function (_a) {
|
|
@@ -1625,9 +1706,9 @@ var Step = styled__default["default"].li(templateObject_2$a || (templateObject_2
|
|
|
1625
1706
|
? theme.colors.lightGray.light
|
|
1626
1707
|
: theme.colors.darkGray.light;
|
|
1627
1708
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
1628
|
-
var templateObject_1$
|
|
1709
|
+
var templateObject_1$d, templateObject_2$b;
|
|
1629
1710
|
|
|
1630
|
-
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$
|
|
1711
|
+
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$7, { children: props.steps.map(function (_a, index) {
|
|
1631
1712
|
var title = _a.title, onClick = _a.onClick;
|
|
1632
1713
|
var step = index + 1;
|
|
1633
1714
|
var status = props.current > step
|
|
@@ -1646,14 +1727,14 @@ var Steps = function (props) {
|
|
|
1646
1727
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign({}, props))) : (jsxRuntime.jsx(Steps$2, __assign({}, props)));
|
|
1647
1728
|
};
|
|
1648
1729
|
|
|
1649
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
1650
|
-
var RadioContainer = styled__default["default"].div(templateObject_2$
|
|
1730
|
+
var Fieldset = styled__default["default"].fieldset(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
1731
|
+
var RadioContainer = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
1651
1732
|
var RadioWrapper = 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"])));
|
|
1652
|
-
var Label$
|
|
1733
|
+
var Label$4 = 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) {
|
|
1653
1734
|
var weight = _a.weight;
|
|
1654
1735
|
return weight || 500;
|
|
1655
1736
|
}, theme.colors.darkGray.base);
|
|
1656
|
-
var templateObject_1$
|
|
1737
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$4, templateObject_4$3;
|
|
1657
1738
|
|
|
1658
1739
|
var RadioGroup = function (props) {
|
|
1659
1740
|
var onChange = function (value) {
|
|
@@ -1664,15 +1745,15 @@ var RadioGroup = function (props) {
|
|
|
1664
1745
|
if (props.onBlur)
|
|
1665
1746
|
props.onBlur(props.name);
|
|
1666
1747
|
};
|
|
1667
|
-
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
1748
|
+
return (jsxRuntime.jsxs(Fieldset, { children: [props.legend && jsxRuntime.jsx(Label$4, __assign({ as: "legend" }, { children: props.legend })), jsxRuntime.jsx(RadioContainer, { children: props.items.map(function (_a, index) {
|
|
1668
1749
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
1669
|
-
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsxRuntime.jsx(Label$
|
|
1750
|
+
return (jsxRuntime.jsxs(RadioWrapper, { children: [jsxRuntime.jsx(Radio, { id: id, name: props.name, value: value, defaultValue: props.defaultValue === value, autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }), jsxRuntime.jsx(Label$4, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }))] }, "".concat(value, "-").concat(index)));
|
|
1670
1751
|
}) })] }));
|
|
1671
1752
|
};
|
|
1672
1753
|
|
|
1673
|
-
var Container$
|
|
1674
|
-
var Label$
|
|
1675
|
-
var templateObject_1$
|
|
1754
|
+
var Container$6 = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
1755
|
+
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);
|
|
1756
|
+
var templateObject_1$b, templateObject_2$9;
|
|
1676
1757
|
|
|
1677
1758
|
var SelectField = function (props) {
|
|
1678
1759
|
var onChange = function (value) {
|
|
@@ -1683,15 +1764,15 @@ var SelectField = function (props) {
|
|
|
1683
1764
|
if (props.onBlur)
|
|
1684
1765
|
props.onBlur(props.name);
|
|
1685
1766
|
};
|
|
1686
|
-
return (jsxRuntime.jsxs(Container$
|
|
1767
|
+
return (jsxRuntime.jsxs(Container$6, { children: [jsxRuntime.jsx(Label$3, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Select, __assign({ id: props.name, name: props.name, disabled: props.disabled, defaultValue: props.defaultValue, placeholder: props.placeholder, autoFocus: props.autoFocus, onChange: onChange, onBlur: onBlur }, { children: props.options.map(function (_a, index) {
|
|
1687
1768
|
var value = _a.value, label = _a.label;
|
|
1688
1769
|
return (jsxRuntime.jsx("option", __assign({ value: value }, { children: label }), "".concat(value, "-").concat(value)));
|
|
1689
1770
|
}) }))] }));
|
|
1690
1771
|
};
|
|
1691
1772
|
|
|
1692
|
-
var Container$
|
|
1693
|
-
var Label$
|
|
1694
|
-
var templateObject_1$
|
|
1773
|
+
var Container$5 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __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"])));
|
|
1774
|
+
var Label$2 = styled__default["default"](StyledParagraph)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
1775
|
+
var templateObject_1$a, templateObject_2$8;
|
|
1695
1776
|
|
|
1696
1777
|
var ToggleField = function (props) {
|
|
1697
1778
|
var onChange = function (value) {
|
|
@@ -1702,10 +1783,10 @@ var ToggleField = function (props) {
|
|
|
1702
1783
|
if (props.onBlur)
|
|
1703
1784
|
props.onBlur(props.name);
|
|
1704
1785
|
};
|
|
1705
|
-
return (jsxRuntime.jsxs(Container$
|
|
1786
|
+
return (jsxRuntime.jsxs(Container$5, { children: [jsxRuntime.jsx(Label$2, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
1706
1787
|
};
|
|
1707
1788
|
|
|
1708
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
1789
|
+
var TooltipContainer = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __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) {
|
|
1709
1790
|
var isVisible = _a.isVisible;
|
|
1710
1791
|
return (isVisible ? "100%" : "0%");
|
|
1711
1792
|
}, function (_a) {
|
|
@@ -1715,7 +1796,7 @@ var TooltipContainer = styled__default["default"].div(templateObject_1$8 || (tem
|
|
|
1715
1796
|
var x = _a.x;
|
|
1716
1797
|
return (x ? "".concat(x, "px") : "");
|
|
1717
1798
|
});
|
|
1718
|
-
var TooltipTitle = styled__default["default"].div(templateObject_2$
|
|
1799
|
+
var TooltipTitle = styled__default["default"].div(templateObject_2$7 || (templateObject_2$7 = __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) {
|
|
1719
1800
|
var color = _a.color;
|
|
1720
1801
|
switch (color) {
|
|
1721
1802
|
default:
|
|
@@ -1725,7 +1806,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$6 || (templat
|
|
|
1725
1806
|
return theme.colors.lightGray.dark;
|
|
1726
1807
|
}
|
|
1727
1808
|
});
|
|
1728
|
-
var templateObject_1$
|
|
1809
|
+
var templateObject_1$9, templateObject_2$7;
|
|
1729
1810
|
|
|
1730
1811
|
var Tooltip = function (props) {
|
|
1731
1812
|
var tooltipRef = React.useRef(null);
|
|
@@ -1759,7 +1840,7 @@ var Tooltip = function (props) {
|
|
|
1759
1840
|
theme.colors.lightGray.light }) })), jsxRuntime.jsx(TooltipTitle, __assign({ color: props.color }, { children: jsxRuntime.jsx(Heading, __assign({ type: "h6" }, { children: props.title })) }))] }))] }));
|
|
1760
1841
|
};
|
|
1761
1842
|
|
|
1762
|
-
var StyledTextarea = styled__default["default"].textarea(templateObject_1$
|
|
1843
|
+
var StyledTextarea = styled__default["default"].textarea(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\n min-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 resize: vertical;\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 ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n min-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 resize: vertical;\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 ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
1763
1844
|
var disabled = _a.disabled;
|
|
1764
1845
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
1765
1846
|
}, function (_a) {
|
|
@@ -1772,7 +1853,7 @@ var StyledTextarea = styled__default["default"].textarea(templateObject_1$7 || (
|
|
|
1772
1853
|
var disabled = _a.disabled;
|
|
1773
1854
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
1774
1855
|
}, 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));
|
|
1775
|
-
var templateObject_1$
|
|
1856
|
+
var templateObject_1$8;
|
|
1776
1857
|
|
|
1777
1858
|
var Textarea = function (props) {
|
|
1778
1859
|
var onChange = function (e) {
|
|
@@ -1782,11 +1863,27 @@ var Textarea = function (props) {
|
|
|
1782
1863
|
return jsxRuntime.jsx(StyledTextarea, __assign({}, props, { onChange: onChange }));
|
|
1783
1864
|
};
|
|
1784
1865
|
|
|
1866
|
+
var Container$4 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __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"])));
|
|
1867
|
+
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);
|
|
1868
|
+
var templateObject_1$7, templateObject_2$6;
|
|
1869
|
+
|
|
1870
|
+
var TextareaField = function (props) {
|
|
1871
|
+
var onChange = function (value) {
|
|
1872
|
+
if (props.onChange)
|
|
1873
|
+
props.onChange(props.name, value);
|
|
1874
|
+
};
|
|
1875
|
+
var onBlur = function () {
|
|
1876
|
+
if (props.onBlur)
|
|
1877
|
+
props.onBlur(props.name);
|
|
1878
|
+
};
|
|
1879
|
+
return (jsxRuntime.jsxs(Container$4, { children: [jsxRuntime.jsx(Label$1, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Textarea, { defaultValue: props.defaultValue, autoComplete: props.autoComplete, autoFocus: props.autoFocus, disabled: props.disabled, placeholder: props.placeholder, id: props.name, rows: props.rows, onChange: onChange, onBlur: onBlur }), props.tips && (jsxRuntime.jsxs("div", __assign({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
1880
|
+
};
|
|
1881
|
+
|
|
1785
1882
|
var Container$3 = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
1786
1883
|
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);
|
|
1787
1884
|
var templateObject_1$6, templateObject_2$5;
|
|
1788
1885
|
|
|
1789
|
-
var
|
|
1886
|
+
var RangeField = function (props) {
|
|
1790
1887
|
var onChange = function (value) {
|
|
1791
1888
|
if (props.onChange)
|
|
1792
1889
|
props.onChange(props.name, value);
|
|
@@ -1795,7 +1892,7 @@ var TextareaField = function (props) {
|
|
|
1795
1892
|
if (props.onBlur)
|
|
1796
1893
|
props.onBlur(props.name);
|
|
1797
1894
|
};
|
|
1798
|
-
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(
|
|
1895
|
+
return (jsxRuntime.jsxs(Container$3, { children: [jsxRuntime.jsx(Label, __assign({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Range, { defaultValue: props.defaultValue, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur })] }));
|
|
1799
1896
|
};
|
|
1800
1897
|
|
|
1801
1898
|
var FeedbackColors = {
|
|
@@ -1921,6 +2018,14 @@ var Form = React.forwardRef(function (props, ref) {
|
|
|
1921
2018
|
}
|
|
1922
2019
|
break;
|
|
1923
2020
|
}
|
|
2021
|
+
case "range": {
|
|
2022
|
+
var element = document.getElementById(field.name);
|
|
2023
|
+
if (!field.defaultValue)
|
|
2024
|
+
element.value = "0";
|
|
2025
|
+
else
|
|
2026
|
+
element.value = "".concat(field.defaultValue);
|
|
2027
|
+
break;
|
|
2028
|
+
}
|
|
1924
2029
|
}
|
|
1925
2030
|
};
|
|
1926
2031
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1997,6 +2102,9 @@ var Form = React.forwardRef(function (props, ref) {
|
|
|
1997
2102
|
case "toggle":
|
|
1998
2103
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1999
2104
|
jsxRuntime.jsx(ToggleField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
2105
|
+
case "range":
|
|
2106
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
2107
|
+
jsxRuntime.jsx(RangeField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }))));
|
|
2000
2108
|
}
|
|
2001
2109
|
}) }), props.button && (jsxRuntime.jsx(ButtonWrapper, { children: jsxRuntime.jsx(Button, __assign({}, props.button, { onClick: onSubmit, type: "submit" })) }))] }));
|
|
2002
2110
|
});
|
|
@@ -2193,6 +2301,7 @@ exports.Popup = Popup;
|
|
|
2193
2301
|
exports.ProgressBar = ProgressBar;
|
|
2194
2302
|
exports.Radio = Radio;
|
|
2195
2303
|
exports.RadioGroup = RadioGroup;
|
|
2304
|
+
exports.Range = Range;
|
|
2196
2305
|
exports.Result = Result;
|
|
2197
2306
|
exports.Select = Select;
|
|
2198
2307
|
exports.SelectField = SelectField;
|