@typeolymp/ui-components 1.19.9 → 1.19.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/Heading/index.d.ts +1 -0
- package/build/components/atoms/Paragraph/index.d.ts +1 -0
- package/build/components/molecules/DataSummary/index.d.ts +18 -0
- package/build/components/molecules/DataSummary/stories.d.ts +13 -0
- package/build/components/molecules/DataSummary/styles.d.ts +2 -0
- package/build/index.d.ts +3 -2
- package/build/index.es.js +108 -102
- package/build/index.es.js.map +1 -1
- package/build/index.js +108 -101
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -4204,7 +4204,7 @@ var flags = {
|
|
|
4204
4204
|
};
|
|
4205
4205
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign$2({}, props, { children: flags[parsers.getCountryCodeByLocale(props.locale)] }))); };
|
|
4206
4206
|
|
|
4207
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$R || (templateObject_1$R = __makeTemplateObject$1(["\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) {
|
|
4207
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$R || (templateObject_1$R = __makeTemplateObject$1(["\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 text-decoration: ", ";\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 text-decoration: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
4208
4208
|
var type = _a.type;
|
|
4209
4209
|
return theme.heading[type].fontSize;
|
|
4210
4210
|
}, function (_a) {
|
|
@@ -4227,6 +4227,9 @@ var StyledHeading = styled__default["default"].span(templateObject_1$R || (templ
|
|
|
4227
4227
|
}, function (_a) {
|
|
4228
4228
|
var align = _a.align;
|
|
4229
4229
|
return align;
|
|
4230
|
+
}, function (_a) {
|
|
4231
|
+
var decoration = _a.decoration;
|
|
4232
|
+
return decoration;
|
|
4230
4233
|
});
|
|
4231
4234
|
var templateObject_1$R;
|
|
4232
4235
|
|
|
@@ -4271,7 +4274,7 @@ var illustrations = {
|
|
|
4271
4274
|
};
|
|
4272
4275
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
4273
4276
|
|
|
4274
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\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 text-transform: ", ";\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 text-transform: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
4277
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$P || (templateObject_1$P = __makeTemplateObject$1(["\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 text-transform: ", ";\n text-decoration: ", ";\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 text-transform: ", ";\n text-decoration: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
4275
4278
|
var size = _a.size;
|
|
4276
4279
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4277
4280
|
}, function (_a) {
|
|
@@ -4305,6 +4308,9 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$P || (templa
|
|
|
4305
4308
|
}, function (_a) {
|
|
4306
4309
|
var transform = _a.transform;
|
|
4307
4310
|
return transform;
|
|
4311
|
+
}, function (_a) {
|
|
4312
|
+
var decoration = _a.decoration;
|
|
4313
|
+
return decoration;
|
|
4308
4314
|
});
|
|
4309
4315
|
var templateObject_1$P;
|
|
4310
4316
|
|
|
@@ -8247,18 +8253,7 @@ var templateObject_1$I;
|
|
|
8247
8253
|
|
|
8248
8254
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
8249
8255
|
|
|
8250
|
-
var Container$p = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n
|
|
8251
|
-
var Data = styled__default["default"].div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"], ["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"])));
|
|
8252
|
-
var templateObject_1$H, templateObject_2$y;
|
|
8253
|
-
|
|
8254
|
-
var DataSummary = function (_a) {
|
|
8255
|
-
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
8256
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$p, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsxRuntime.jsx("div", __assign$2({ onClick: onEdit }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsxRuntime.jsx(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
|
|
8257
|
-
return item instanceof Object ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value))) : (jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item })));
|
|
8258
|
-
}) })] }) }));
|
|
8259
|
-
};
|
|
8260
|
-
|
|
8261
|
-
var Container$o = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: ", ";\n border: 1px solid;\n border-color: ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: ", ";\n border: 1px solid;\n border-color: ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\n"])), function (_a) {
|
|
8256
|
+
var Container$p = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: ", ";\n border: 1px solid;\n border-color: ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\n"], ["\n padding: 7px 10px;\n background-color: ", ";\n box-shadow: ", ";\n border: 1px solid;\n border-color: ", ";\n border-radius: 4px;\n box-sizing: border-box;\n text-decoration: none;\n\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n color: ", ";\n"])), function (_a) {
|
|
8262
8257
|
var color = _a.color;
|
|
8263
8258
|
if (!color)
|
|
8264
8259
|
return theme.colors.lightGray.base;
|
|
@@ -8279,14 +8274,37 @@ var Container$o = styled__default["default"].div(templateObject_1$G || (template
|
|
|
8279
8274
|
return theme.colors.darkGray.light;
|
|
8280
8275
|
return theme.colors[color].darker;
|
|
8281
8276
|
});
|
|
8282
|
-
var templateObject_1$
|
|
8277
|
+
var templateObject_1$H;
|
|
8283
8278
|
|
|
8284
8279
|
var Tag = function (_a) {
|
|
8285
8280
|
var color = _a.color, children = _a.children;
|
|
8286
|
-
return jsxRuntime.jsx(Container$
|
|
8281
|
+
return jsxRuntime.jsx(Container$p, __assign$2({ color: color }, { children: children }));
|
|
8282
|
+
};
|
|
8283
|
+
|
|
8284
|
+
var StyledTextarea = styled__default["default"].textarea(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\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) {
|
|
8285
|
+
var disabled = _a.disabled;
|
|
8286
|
+
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8287
|
+
}, function (_a) {
|
|
8288
|
+
var disabled = _a.disabled;
|
|
8289
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
8290
|
+
}, function (_a) {
|
|
8291
|
+
var disabled = _a.disabled;
|
|
8292
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
8293
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
8294
|
+
var disabled = _a.disabled;
|
|
8295
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8296
|
+
}, 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));
|
|
8297
|
+
var templateObject_1$G;
|
|
8298
|
+
|
|
8299
|
+
var Textarea = function (props) {
|
|
8300
|
+
var onChange = function (e) {
|
|
8301
|
+
if (!props.disabled && !!props.onChange)
|
|
8302
|
+
props.onChange(e.target.value);
|
|
8303
|
+
};
|
|
8304
|
+
return jsxRuntime.jsx(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
8287
8305
|
};
|
|
8288
8306
|
|
|
8289
|
-
var Container$
|
|
8307
|
+
var Container$o = styled__default["default"].div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\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) {
|
|
8290
8308
|
var disabled = _a.disabled;
|
|
8291
8309
|
return (disabled ? "not-allowed" : "pointer");
|
|
8292
8310
|
}, function (_a) {
|
|
@@ -8332,7 +8350,7 @@ var Toggle = function (props) {
|
|
|
8332
8350
|
props.onChange(newValue);
|
|
8333
8351
|
}
|
|
8334
8352
|
};
|
|
8335
|
-
return (jsxRuntime.jsx(Container$
|
|
8353
|
+
return (jsxRuntime.jsx(Container$o, __assign$2({ 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 }) })));
|
|
8336
8354
|
};
|
|
8337
8355
|
|
|
8338
8356
|
var Wrapper$4 = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject$1(["\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) {
|
|
@@ -8382,7 +8400,7 @@ var trophies = {
|
|
|
8382
8400
|
};
|
|
8383
8401
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
8384
8402
|
|
|
8385
|
-
var Container$
|
|
8403
|
+
var Container$n = styled__default["default"].div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject$1(["\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 gap: 10px;\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 gap: 10px;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
8386
8404
|
var type = _a.type;
|
|
8387
8405
|
switch (type) {
|
|
8388
8406
|
case "success":
|
|
@@ -8401,7 +8419,7 @@ var Container$m = styled__default["default"].div(templateObject_1$D || (template
|
|
|
8401
8419
|
});
|
|
8402
8420
|
var templateObject_1$D;
|
|
8403
8421
|
|
|
8404
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
8422
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$n, __assign$2({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsxRuntime.jsx(Paragraph, { children: props.message })] }))); };
|
|
8405
8423
|
|
|
8406
8424
|
var StyledCard = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject$1(["\n background-color: ", ";\n border: ", ";\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 border: ", ";\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) {
|
|
8407
8425
|
var bordered = _a.bordered;
|
|
@@ -8415,12 +8433,12 @@ var StyledCard = styled__default["default"].div(templateObject_1$C || (templateO
|
|
|
8415
8433
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8416
8434
|
: "";
|
|
8417
8435
|
});
|
|
8418
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
8436
|
+
var Ellipse = styled__default["default"].div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\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) {
|
|
8419
8437
|
var color = _a.color;
|
|
8420
8438
|
return color ? theme.colors[color].light : "";
|
|
8421
8439
|
});
|
|
8422
8440
|
var Content = styled__default["default"].div(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\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"])));
|
|
8423
|
-
var templateObject_1$C, templateObject_2$
|
|
8441
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$c;
|
|
8424
8442
|
|
|
8425
8443
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
8426
8444
|
|
|
@@ -14670,13 +14688,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
14670
14688
|
htmlReactParser.Text;
|
|
14671
14689
|
|
|
14672
14690
|
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$B || (templateObject_1$B = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
14673
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
14691
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14674
14692
|
var CheckboxWrapper = styled__default["default"].div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\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"])));
|
|
14675
14693
|
var Label$b = styled__default["default"](StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
14676
14694
|
var weight = _a.weight;
|
|
14677
14695
|
return weight || 500;
|
|
14678
14696
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14679
|
-
var templateObject_1$B, templateObject_2$
|
|
14697
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$b, templateObject_4$6;
|
|
14680
14698
|
|
|
14681
14699
|
var Checkboxes = function (props) {
|
|
14682
14700
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14699,12 +14717,12 @@ var Checkboxes = function (props) {
|
|
|
14699
14717
|
}) })] }));
|
|
14700
14718
|
};
|
|
14701
14719
|
|
|
14702
|
-
var Container$
|
|
14703
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
14720
|
+
var Container$m = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject$1(["\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);
|
|
14721
|
+
var Item = styled__default["default"].div(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\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, > div:last-child {\n display: ", ";\n margin: 0;\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, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
14704
14722
|
var isOpen = _a.isOpen;
|
|
14705
14723
|
return (isOpen ? "" : "none");
|
|
14706
14724
|
}, theme.colors.lightGray.dark);
|
|
14707
|
-
var templateObject_1$A, templateObject_2$
|
|
14725
|
+
var templateObject_1$A, templateObject_2$w;
|
|
14708
14726
|
|
|
14709
14727
|
var Collapse = function (props) {
|
|
14710
14728
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14716,18 +14734,18 @@ var Collapse = function (props) {
|
|
|
14716
14734
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
14717
14735
|
}
|
|
14718
14736
|
};
|
|
14719
|
-
return (jsxRuntime.jsx(Container$
|
|
14737
|
+
return (jsxRuntime.jsx(Container$m, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
14720
14738
|
var isOpen = openItems.includes(index);
|
|
14721
14739
|
return (jsxRuntime.jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsxRuntime.jsx(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
14722
14740
|
}) })));
|
|
14723
14741
|
};
|
|
14724
14742
|
|
|
14725
14743
|
var Wrapper$3 = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14726
|
-
var Value = styled__default["default"].div(templateObject_2$
|
|
14744
|
+
var Value = styled__default["default"].div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"], ["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"])), function (_a) {
|
|
14727
14745
|
var contrast = _a.contrast;
|
|
14728
14746
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14729
14747
|
}, theme.colors.darkGray.base);
|
|
14730
|
-
var templateObject_1$z, templateObject_2$
|
|
14748
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14731
14749
|
|
|
14732
14750
|
var Countdown = function (_a) {
|
|
14733
14751
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14754,9 +14772,20 @@ var Countdown = function (_a) {
|
|
|
14754
14772
|
return (jsxRuntime.jsxs(Wrapper$3, { children: [jsxRuntime.jsx(Value, __assign$2({ contrast: contrast }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: HH })) })), jsxRuntime.jsx(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsxRuntime.jsx(Value, __assign$2({ contrast: contrast }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: MM })) })), jsxRuntime.jsx(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsxRuntime.jsx(Value, __assign$2({ contrast: contrast }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: SS })) }))] }));
|
|
14755
14773
|
};
|
|
14756
14774
|
|
|
14757
|
-
var Container$
|
|
14775
|
+
var Container$l = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"], ["\n width: fill-available;\n padding: 15px;\n border: 1px solid;\n border-radius: 6px;\n border-color: ", ";\n background-color: ", ";\n position: relative;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 50px;\n margin-bottom: 15px;\n\n h6 {\n font-size: 14px;\n\n :hover {\n color: ", ";\n cursor: pointer;\n }\n }\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.light, theme.colors.blue.base);
|
|
14776
|
+
var Data = styled__default["default"].div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"], ["\n > div {\n width: 100%;\n display: flex;\n align-items: end;\n gap: 10px;\n\n > p {\n width: 50%;\n }\n }\n"])));
|
|
14777
|
+
var templateObject_1$y, templateObject_2$u;
|
|
14778
|
+
|
|
14779
|
+
var DataSummary = function (_a) {
|
|
14780
|
+
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
14781
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$l, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsxRuntime.jsx("div", __assign$2({ onClick: onEdit }, { children: jsxRuntime.jsx(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsxRuntime.jsx(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
|
|
14782
|
+
return item instanceof Object ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value))) : (jsxRuntime.jsx(Paragraph, __assign$2({ weight: "regular" }, { children: item })));
|
|
14783
|
+
}) })] }) }));
|
|
14784
|
+
};
|
|
14785
|
+
|
|
14786
|
+
var Container$k = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\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"])));
|
|
14758
14787
|
var Label$a = styled__default["default"](StyledParagraph)(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
14759
|
-
var templateObject_1$
|
|
14788
|
+
var templateObject_1$x, templateObject_2$t;
|
|
14760
14789
|
|
|
14761
14790
|
var DateInputField = function (props) {
|
|
14762
14791
|
var onChange = function (value) {
|
|
@@ -14780,7 +14809,7 @@ var generateRandomString = function (length) {
|
|
|
14780
14809
|
return string;
|
|
14781
14810
|
};
|
|
14782
14811
|
|
|
14783
|
-
var Container$j = styled__default["default"].div(templateObject_1$
|
|
14812
|
+
var Container$j = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n width: fit-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"], ["\n width: fit-content;\n position: fixed;\n z-index: 9;\n opacity: ", ";\n top: ", ";\n left: ", ";\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 6px;\n box-shadow: 0 4px 0 ", ";\n pointer-events: ", ";\n"])), function (_a) {
|
|
14784
14813
|
var isVisible = _a.isVisible;
|
|
14785
14814
|
return (isVisible ? "100%" : "0%");
|
|
14786
14815
|
}, function (_a) {
|
|
@@ -14794,7 +14823,7 @@ var Container$j = styled__default["default"].div(templateObject_1$x || (template
|
|
|
14794
14823
|
return (isVisible ? "all" : "none");
|
|
14795
14824
|
});
|
|
14796
14825
|
var MenuItem = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\n }\n\n :hover {\n cursor: pointer;\n background-color: ", ";\n\n p {\n color: ", ";\n }\n svg {\n fill: ", ";\n }\n }\n"], ["\n padding: 10px 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n\n p {\n margin-top: 2px;\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.dark, theme.colors.lightGray.base, theme.colors.blue.base, theme.colors.blue.base);
|
|
14797
|
-
var templateObject_1$
|
|
14826
|
+
var templateObject_1$w, templateObject_2$s;
|
|
14798
14827
|
|
|
14799
14828
|
var Dropdown = function (_a) {
|
|
14800
14829
|
var menu = _a.menu, trigger = _a.trigger, props = __rest$1(_a, ["menu", "trigger"]);
|
|
@@ -17366,7 +17395,7 @@ function reducer$1(state, action) {
|
|
|
17366
17395
|
|
|
17367
17396
|
function noop$3() {}
|
|
17368
17397
|
|
|
17369
|
-
var Container$i = styled__default["default"].div(templateObject_1$
|
|
17398
|
+
var Container$i = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"])));
|
|
17370
17399
|
var DropZone = styled__default["default"].div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
|
|
17371
17400
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17372
17401
|
// if (isDragActive) return theme.colors.blue.base;
|
|
@@ -17387,7 +17416,7 @@ var DropZone = styled__default["default"].div(templateObject_2$r || (templateObj
|
|
|
17387
17416
|
return theme.colors.lightGray.base;
|
|
17388
17417
|
});
|
|
17389
17418
|
var FileList = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
17390
|
-
var templateObject_1$
|
|
17419
|
+
var templateObject_1$v, templateObject_2$r, templateObject_3$a;
|
|
17391
17420
|
|
|
17392
17421
|
var FileUpload = function (_a) {
|
|
17393
17422
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17407,7 +17436,7 @@ var FileUpload = function (_a) {
|
|
|
17407
17436
|
}), { children: [jsxRuntime.jsx("input", __assign$2({}, getInputProps())), jsxRuntime.jsx(Icon, { type: "fileArrow", size: "large" }), jsxRuntime.jsx(Spacer, { vertical: 15 }), !isDragActive && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Paragraph, { children: translations[locale]["or"] }), jsxRuntime.jsx(Spacer, { vertical: 10 }), jsxRuntime.jsx(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsxRuntime.jsx(FileList, { children: files.map(function (file, index) { return (jsxRuntime.jsx(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17408
17437
|
};
|
|
17409
17438
|
|
|
17410
|
-
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$
|
|
17439
|
+
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n pointer-events: none;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|
|
17411
17440
|
var size = _a.size;
|
|
17412
17441
|
return (size === "small" ? "30px" : "40px");
|
|
17413
17442
|
}, function (_a) {
|
|
@@ -17445,7 +17474,7 @@ var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$q
|
|
|
17445
17474
|
var size = _a.size;
|
|
17446
17475
|
return (size === "small" ? "30px" : "40px");
|
|
17447
17476
|
});
|
|
17448
|
-
var templateObject_1$
|
|
17477
|
+
var templateObject_1$u, templateObject_2$q;
|
|
17449
17478
|
|
|
17450
17479
|
var IconButton = function (props) {
|
|
17451
17480
|
if (props.color === "white")
|
|
@@ -17453,9 +17482,9 @@ var IconButton = function (props) {
|
|
|
17453
17482
|
return (jsxRuntime.jsx(StyledIconButton, __assign$2({}, props, { children: jsxRuntime.jsx(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17454
17483
|
};
|
|
17455
17484
|
|
|
17456
|
-
var Container$h = styled__default["default"].div(templateObject_1$
|
|
17485
|
+
var Container$h = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject$1(["\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"])));
|
|
17457
17486
|
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_2$p || (templateObject_2$p = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17458
|
-
var templateObject_1$
|
|
17487
|
+
var templateObject_1$t, templateObject_2$p;
|
|
17459
17488
|
|
|
17460
17489
|
var InputField = function (props) {
|
|
17461
17490
|
var onChange = function (value) {
|
|
@@ -17469,7 +17498,7 @@ var InputField = function (props) {
|
|
|
17469
17498
|
return (jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsx(Label$9, __assign$2({ 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$2({ style: { marginLeft: "5px" } }, { children: [jsxRuntime.jsx(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxRuntime.jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
17470
17499
|
};
|
|
17471
17500
|
|
|
17472
|
-
var Container$g = styled__default["default"].div(templateObject_1$
|
|
17501
|
+
var Container$g = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject$1(["\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) {
|
|
17473
17502
|
var status = _a.status, color = _a.color;
|
|
17474
17503
|
switch (status) {
|
|
17475
17504
|
case "passed":
|
|
@@ -17514,14 +17543,14 @@ var Container$g = styled__default["default"].div(templateObject_1$t || (template
|
|
|
17514
17543
|
}
|
|
17515
17544
|
});
|
|
17516
17545
|
var CheckIconWrapper = styled__default["default"].div(templateObject_2$o || (templateObject_2$o = __makeTemplateObject$1(["\n position: absolute;\n top: 0;\n right: 0;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n"])));
|
|
17517
|
-
var templateObject_1$
|
|
17546
|
+
var templateObject_1$s, templateObject_2$o;
|
|
17518
17547
|
|
|
17519
17548
|
var Key$1 = function (props) { return (jsxRuntime.jsxs(Container$g, __assign$2({}, props, { children: [props.status === "passed" && (jsxRuntime.jsx(CheckIconWrapper, { children: jsxRuntime.jsx(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsxRuntime.jsx("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
17520
17549
|
marginTop: "13px",
|
|
17521
17550
|
transform: "scale(2)",
|
|
17522
17551
|
} }, { 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$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
17523
17552
|
|
|
17524
|
-
var Wrapper$2 = styled__default["default"].a(templateObject_1$
|
|
17553
|
+
var Wrapper$2 = styled__default["default"].a(templateObject_1$r || (templateObject_1$r = __makeTemplateObject$1(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
17525
17554
|
var chevron = _a.chevron;
|
|
17526
17555
|
return (chevron === "left" ? "4px" : "");
|
|
17527
17556
|
}, function (_a) {
|
|
@@ -17529,7 +17558,7 @@ var Wrapper$2 = styled__default["default"].a(templateObject_1$s || (templateObje
|
|
|
17529
17558
|
return (chevron === "right" ? "4px" : "");
|
|
17530
17559
|
});
|
|
17531
17560
|
var StyledLink = styled__default["default"](StyledParagraph)(templateObject_2$n || (templateObject_2$n = __makeTemplateObject$1(["\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);
|
|
17532
|
-
var templateObject_1$
|
|
17561
|
+
var templateObject_1$r, templateObject_2$n;
|
|
17533
17562
|
|
|
17534
17563
|
var Link = function (props) {
|
|
17535
17564
|
var onClick = function (e) {
|
|
@@ -17541,15 +17570,15 @@ var Link = function (props) {
|
|
|
17541
17570
|
return (jsxRuntime.jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsxRuntime.jsx(Icon, { type: "chevronLeft", color: "green" }), jsxRuntime.jsx(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsxRuntime.jsx(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
17542
17571
|
};
|
|
17543
17572
|
|
|
17544
|
-
var Container$f = styled__default["default"].div(templateObject_1$
|
|
17573
|
+
var Container$f = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject$1(["\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) {
|
|
17545
17574
|
var text = _a.text;
|
|
17546
17575
|
return (text ? "20px" : "");
|
|
17547
17576
|
});
|
|
17548
|
-
var templateObject_1$
|
|
17577
|
+
var templateObject_1$q;
|
|
17549
17578
|
|
|
17550
17579
|
var Loading = function (props) { return (jsxRuntime.jsxs(Container$f, __assign$2({}, props, { children: [jsxRuntime.jsx(_default$1, { 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$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
17551
17580
|
|
|
17552
|
-
var Container$e = styled__default["default"].div(templateObject_1$
|
|
17581
|
+
var Container$e = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject$1(["\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) {
|
|
17553
17582
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
17554
17583
|
if (dropdownIsVisible) {
|
|
17555
17584
|
switch (color) {
|
|
@@ -17574,7 +17603,7 @@ var DropdownContainer = styled__default["default"].div(templateObject_3$9 || (te
|
|
|
17574
17603
|
}
|
|
17575
17604
|
});
|
|
17576
17605
|
var LocaleWrapper = styled__default["default"].div(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject$1(["\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);
|
|
17577
|
-
var templateObject_1$
|
|
17606
|
+
var templateObject_1$p, templateObject_2$m, templateObject_3$9, templateObject_4$5;
|
|
17578
17607
|
|
|
17579
17608
|
var LocaleSelect = function (props) {
|
|
17580
17609
|
var _a = React$3.useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17588,17 +17617,17 @@ var LocaleSelect = function (props) {
|
|
|
17588
17617
|
.map(function (locale) { return (jsxRuntime.jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Flag, { locale: locale }), jsxRuntime.jsx(Spacer, { horizontal: 10 }), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: parsers.getNativeLanguageByLocale(locale) }))] }), jsxRuntime.jsx(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
17589
17618
|
};
|
|
17590
17619
|
|
|
17591
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
17592
|
-
var templateObject_1$
|
|
17620
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject$1(["\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"])));
|
|
17621
|
+
var templateObject_1$o;
|
|
17593
17622
|
|
|
17594
17623
|
var Medals = function (props) { return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: enums.Medal.GOLD }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: enums.Medal.SILVER }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Medal, { type: enums.Medal.BRONZE }), jsxRuntime.jsx(Spacer, { horizontal: 5 }), jsxRuntime.jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
17595
17624
|
|
|
17596
|
-
var NotificationContainer = styled__default["default"].div(templateObject_1$
|
|
17625
|
+
var NotificationContainer = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject$1(["\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) {
|
|
17597
17626
|
var contrast = _a.contrast;
|
|
17598
17627
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17599
17628
|
});
|
|
17600
17629
|
var ButtonContainer = styled__default["default"].div(templateObject_2$l || (templateObject_2$l = __makeTemplateObject$1(["\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"])));
|
|
17601
|
-
var templateObject_1$
|
|
17630
|
+
var templateObject_1$n, templateObject_2$l;
|
|
17602
17631
|
|
|
17603
17632
|
var Notification = function (props) {
|
|
17604
17633
|
if (!props.isVisible)
|
|
@@ -17606,9 +17635,9 @@ var Notification = function (props) {
|
|
|
17606
17635
|
return (jsxRuntime.jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Heading, __assign$2({ 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$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsxRuntime.jsx(ButtonContainer, { children: props.buttons.map(function (button, index) { return (React$3.createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
17607
17636
|
};
|
|
17608
17637
|
|
|
17609
|
-
var Container$d = styled__default["default"].div(templateObject_1$
|
|
17638
|
+
var Container$d = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject$1(["\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"])));
|
|
17610
17639
|
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17611
|
-
var templateObject_1$
|
|
17640
|
+
var templateObject_1$m, templateObject_2$k;
|
|
17612
17641
|
|
|
17613
17642
|
var NumberField = function (props) {
|
|
17614
17643
|
var onChange = function (value) {
|
|
@@ -17622,9 +17651,9 @@ var NumberField = function (props) {
|
|
|
17622
17651
|
return (jsxRuntime.jsxs(Container$d, { children: [jsxRuntime.jsx(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Number$1, { 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 })] }));
|
|
17623
17652
|
};
|
|
17624
17653
|
|
|
17625
|
-
var Container$c = styled__default["default"].div(templateObject_1$
|
|
17654
|
+
var Container$c = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject$1(["\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"])));
|
|
17626
17655
|
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17627
|
-
var templateObject_1$
|
|
17656
|
+
var templateObject_1$l, templateObject_2$j;
|
|
17628
17657
|
|
|
17629
17658
|
var PasswordInputField = function (props) {
|
|
17630
17659
|
var onChange = function (value) {
|
|
@@ -17643,7 +17672,7 @@ var PasswordInputField = function (props) {
|
|
|
17643
17672
|
return (jsxRuntime.jsxs(Container$c, { children: [jsxRuntime.jsx(Label$7, __assign$2({ 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, helperLocale: props.helperLocale, id: props.name, onChange: onChange, onKeyPress: onKeyPress, onBlur: onBlur })] }));
|
|
17644
17673
|
};
|
|
17645
17674
|
|
|
17646
|
-
var PopupContainer = styled__default["default"].div(templateObject_1$
|
|
17675
|
+
var PopupContainer = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject$1(["\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 border: ", ";\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 border: ", ";\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) {
|
|
17647
17676
|
var isVisible = _a.isVisible;
|
|
17648
17677
|
return (isVisible ? "100%" : "0%");
|
|
17649
17678
|
}, function (_a) {
|
|
@@ -17656,7 +17685,7 @@ var PopupContainer = styled__default["default"].div(templateObject_1$l || (templ
|
|
|
17656
17685
|
var contrast = _a.contrast;
|
|
17657
17686
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17658
17687
|
});
|
|
17659
|
-
var templateObject_1$
|
|
17688
|
+
var templateObject_1$k;
|
|
17660
17689
|
|
|
17661
17690
|
var Popup = function (props) {
|
|
17662
17691
|
var popupRef = React$3.useRef(null);
|
|
@@ -17692,7 +17721,7 @@ var Popup = function (props) {
|
|
|
17692
17721
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [children, jsxRuntime.jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsxRuntime.jsx(Spacer, { vertical: 10 })] })), jsxRuntime.jsx(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
17693
17722
|
};
|
|
17694
17723
|
|
|
17695
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
17724
|
+
var Wrapper = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n align-items: center;\n"], ["\n width: 100%;\n display: flex;\n align-items: center;\n"])));
|
|
17696
17725
|
var StyledProgressBar = styled__default["default"].div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject$1(["\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) {
|
|
17697
17726
|
var showInfo = _a.showInfo;
|
|
17698
17727
|
return (showInfo ? "10px" : "");
|
|
@@ -17704,11 +17733,11 @@ var Indicator$1 = styled__default["default"].div(templateObject_3$8 || (template
|
|
|
17704
17733
|
var color = _a.color;
|
|
17705
17734
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17706
17735
|
});
|
|
17707
|
-
var templateObject_1$
|
|
17736
|
+
var templateObject_1$j, templateObject_2$i, templateObject_3$8;
|
|
17708
17737
|
|
|
17709
17738
|
var ProgressBar = function (props) { return (jsxRuntime.jsxs(Wrapper, { children: [jsxRuntime.jsx(StyledProgressBar, __assign$2({}, props, { children: jsxRuntime.jsx(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsxRuntime.jsx(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
17710
17739
|
|
|
17711
|
-
var Container$b = styled__default["default"].ol(templateObject_1$
|
|
17740
|
+
var Container$b = styled__default["default"].ol(templateObject_1$i || (templateObject_1$i = __makeTemplateObject$1(["\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"])));
|
|
17712
17741
|
var Step$2 = styled__default["default"].li(templateObject_2$h || (templateObject_2$h = __makeTemplateObject$1(["\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) {
|
|
17713
17742
|
var status = _a.status;
|
|
17714
17743
|
return (!!status ? "pointer" : "not-allowed");
|
|
@@ -17731,7 +17760,7 @@ var Step$2 = styled__default["default"].li(templateObject_2$h || (templateObject
|
|
|
17731
17760
|
var hasTitle = _a.hasTitle;
|
|
17732
17761
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
17733
17762
|
}, theme.colors.lightGray.dark);
|
|
17734
|
-
var templateObject_1$
|
|
17763
|
+
var templateObject_1$i, templateObject_2$h;
|
|
17735
17764
|
|
|
17736
17765
|
var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$b, { children: props.steps.map(function (_a, index) {
|
|
17737
17766
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -17748,7 +17777,7 @@ var Steps$2 = function (props) { return (jsxRuntime.jsx(Container$b, { children:
|
|
|
17748
17777
|
return (jsxRuntime.jsxs(Step$2, __assign$2({ status: status, hasTitle: !!title }, { children: [jsxRuntime.jsx("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsxRuntime.jsx(Icon, { type: "check", size: "small", color: "white" })) : (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsxRuntime.jsx(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
17749
17778
|
}) })); };
|
|
17750
17779
|
|
|
17751
|
-
var Container$a = styled__default["default"].ol(templateObject_1$
|
|
17780
|
+
var Container$a = styled__default["default"].ol(templateObject_1$h || (templateObject_1$h = __makeTemplateObject$1(["\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"])));
|
|
17752
17781
|
var Step$1 = styled__default["default"].li(templateObject_2$g || (templateObject_2$g = __makeTemplateObject$1(["\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) {
|
|
17753
17782
|
var status = _a.status;
|
|
17754
17783
|
return (!!status ? "pointer" : "not-allowed");
|
|
@@ -17768,7 +17797,7 @@ var Step$1 = styled__default["default"].li(templateObject_2$g || (templateObject
|
|
|
17768
17797
|
? theme.colors.lightGray.light
|
|
17769
17798
|
: theme.colors.darkGray.light;
|
|
17770
17799
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
17771
|
-
var templateObject_1$
|
|
17800
|
+
var templateObject_1$h, templateObject_2$g;
|
|
17772
17801
|
|
|
17773
17802
|
var Steps$1 = function (props) { return (jsxRuntime.jsx(Container$a, { children: props.steps.map(function (_a, index) {
|
|
17774
17803
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -17789,7 +17818,7 @@ var Steps = function (props) {
|
|
|
17789
17818
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Steps$1, __assign$2({}, props))) : (jsxRuntime.jsx(Steps$2, __assign$2({}, props)));
|
|
17790
17819
|
};
|
|
17791
17820
|
|
|
17792
|
-
var TabsContainer$1 = styled__default["default"].div(templateObject_1$
|
|
17821
|
+
var TabsContainer$1 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject$1(["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"], ["\n border-bottom: 1px solid ", ";\n display: flex;\n gap: 20px;\n padding: 0 30px;\n"])), theme.colors.lightGray.dark);
|
|
17793
17822
|
var Tab$1 = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 10px;\n cursor: pointer;\n border-bottom: ", ";\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
17794
17823
|
var isActive = _a.isActive;
|
|
17795
17824
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
@@ -17797,7 +17826,7 @@ var Tab$1 = styled__default["default"].div(templateObject_2$f || (templateObject
|
|
|
17797
17826
|
var isActive = _a.isActive;
|
|
17798
17827
|
return isActive ? theme.colors.blue.base : "";
|
|
17799
17828
|
}, theme.colors.blue.base);
|
|
17800
|
-
var templateObject_1$
|
|
17829
|
+
var templateObject_1$g, templateObject_2$f;
|
|
17801
17830
|
|
|
17802
17831
|
var Tabs$2 = function (_a) {
|
|
17803
17832
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17817,7 +17846,7 @@ var Tabs$2 = function (_a) {
|
|
|
17817
17846
|
}) }));
|
|
17818
17847
|
};
|
|
17819
17848
|
|
|
17820
|
-
var TabsContainer = styled__default["default"].div(templateObject_1$
|
|
17849
|
+
var TabsContainer = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject$1(["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"], ["\n width: fit-content;\n border-right: 1px solid ", ";\n display: flex;\n flex-direction: column;\n gap: 5px;\n padding: 30px 0 30px 30px;\n"])), theme.colors.lightGray.dark);
|
|
17821
17850
|
var Tab = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __makeTemplateObject$1(["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"], ["\n height: 50px;\n display: flex;\n align-items: center;\n padding: 0 30px 0 10px;\n cursor: pointer;\n position: relative;\n\n :after {\n content: \"\";\n width: 3px;\n height: 100%;\n display: ", ";\n background-color: ", ";\n position: absolute;\n right: 0;\n }\n\n p {\n color: ", ";\n }\n\n :hover p {\n color: ", ";\n }\n"])), function (_a) {
|
|
17822
17851
|
var isActive = _a.isActive;
|
|
17823
17852
|
return (isActive ? "block" : "none");
|
|
@@ -17825,7 +17854,7 @@ var Tab = styled__default["default"].div(templateObject_2$e || (templateObject_2
|
|
|
17825
17854
|
var isActive = _a.isActive;
|
|
17826
17855
|
return isActive ? theme.colors.blue.base : "";
|
|
17827
17856
|
}, theme.colors.blue.base);
|
|
17828
|
-
var templateObject_1$
|
|
17857
|
+
var templateObject_1$f, templateObject_2$e;
|
|
17829
17858
|
|
|
17830
17859
|
var Tabs$1 = function (_a) {
|
|
17831
17860
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17849,14 +17878,14 @@ var Tabs = function (props) {
|
|
|
17849
17878
|
return props.alignment === "vertical" ? (jsxRuntime.jsx(Tabs$1, __assign$2({}, props))) : (jsxRuntime.jsx(Tabs$2, __assign$2({}, props)));
|
|
17850
17879
|
};
|
|
17851
17880
|
|
|
17852
|
-
var Fieldset = styled__default["default"].fieldset(templateObject_1$
|
|
17881
|
+
var Fieldset = styled__default["default"].fieldset(templateObject_1$e || (templateObject_1$e = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
17853
17882
|
var RadioContainer = styled__default["default"].div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
17854
17883
|
var RadioWrapper = styled__default["default"].div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject$1(["\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"])));
|
|
17855
17884
|
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject$1(["\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) {
|
|
17856
17885
|
var weight = _a.weight;
|
|
17857
17886
|
return weight || 500;
|
|
17858
17887
|
}, theme.colors.darkGray.base);
|
|
17859
|
-
var templateObject_1$
|
|
17888
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$7, templateObject_4$4;
|
|
17860
17889
|
|
|
17861
17890
|
var RadioGroup = function (props) {
|
|
17862
17891
|
var onChange = function (value) {
|
|
@@ -17873,9 +17902,9 @@ var RadioGroup = function (props) {
|
|
|
17873
17902
|
}) })] }));
|
|
17874
17903
|
};
|
|
17875
17904
|
|
|
17876
|
-
var Container$9 = styled__default["default"].div(templateObject_1$
|
|
17905
|
+
var Container$9 = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
17877
17906
|
var Label$5 = styled__default["default"](StyledParagraph)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17878
|
-
var templateObject_1$
|
|
17907
|
+
var templateObject_1$d, templateObject_2$c;
|
|
17879
17908
|
|
|
17880
17909
|
var SelectField = function (props) {
|
|
17881
17910
|
var onChange = function (value) {
|
|
@@ -17892,9 +17921,9 @@ var SelectField = function (props) {
|
|
|
17892
17921
|
}) }))] }));
|
|
17893
17922
|
};
|
|
17894
17923
|
|
|
17895
|
-
var Container$8 = styled__default["default"].div(templateObject_1$
|
|
17924
|
+
var Container$8 = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n flex-wrap: wrap;\n"])));
|
|
17896
17925
|
var Label$4 = styled__default["default"](StyledParagraph)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
17897
|
-
var templateObject_1$
|
|
17926
|
+
var templateObject_1$c, templateObject_2$b;
|
|
17898
17927
|
|
|
17899
17928
|
var ToggleField = function (props) {
|
|
17900
17929
|
var onChange = function (value) {
|
|
@@ -17908,7 +17937,7 @@ var ToggleField = function (props) {
|
|
|
17908
17937
|
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsx(Label$4, __assign$2({ 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 })] }));
|
|
17909
17938
|
};
|
|
17910
17939
|
|
|
17911
|
-
var TooltipContainer = styled__default["default"].div(templateObject_1$
|
|
17940
|
+
var TooltipContainer = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject$1(["\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) {
|
|
17912
17941
|
var isVisible = _a.isVisible;
|
|
17913
17942
|
return (isVisible ? "100%" : "0%");
|
|
17914
17943
|
}, function (_a) {
|
|
@@ -17928,7 +17957,7 @@ var TooltipTitle = styled__default["default"].div(templateObject_2$a || (templat
|
|
|
17928
17957
|
return theme.colors.lightGray.dark;
|
|
17929
17958
|
}
|
|
17930
17959
|
});
|
|
17931
|
-
var templateObject_1$
|
|
17960
|
+
var templateObject_1$b, templateObject_2$a;
|
|
17932
17961
|
|
|
17933
17962
|
var Tooltip$2 = function (props) {
|
|
17934
17963
|
var tooltipRef = React$3.useRef(null);
|
|
@@ -47552,13 +47581,13 @@ var xAxis = {
|
|
|
47552
47581
|
domain: ["dataMin", "dataMax"],
|
|
47553
47582
|
};
|
|
47554
47583
|
|
|
47555
|
-
var Container$7 = styled__default["default"].div(templateObject_1$
|
|
47584
|
+
var Container$7 = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n padding: 10px 15px 6px;\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n border-radius: 4px;\n box-sizing: border-box;\n"], ["\n padding: 10px 15px 6px;\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: 0px 3px 0px rgba(0, 0, 0, 20%);\n border-radius: 4px;\n box-sizing: border-box;\n"])), theme.colors.lightGray.light, theme.colors.lightGray.dark);
|
|
47556
47585
|
var Label$2 = styled__default["default"].div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject$1(["\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 15px;\n\n > div:first-child {\n display: flex;\n gap: 10px;\n align-items: baseline;\n }\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n gap: 15px;\n\n > div:first-child {\n display: flex;\n gap: 10px;\n align-items: baseline;\n }\n"])));
|
|
47557
47586
|
var Dot = styled__default["default"].div(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject$1(["\n width: 10px;\n min-width: 10px;\n height: 10px;\n min-height: 10px;\n border-radius: 50%;\n background-color: ", ";\n"], ["\n width: 10px;\n min-width: 10px;\n height: 10px;\n min-height: 10px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (_a) {
|
|
47558
47587
|
var color = _a.color;
|
|
47559
47588
|
return color;
|
|
47560
47589
|
});
|
|
47561
|
-
var templateObject_1$
|
|
47590
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$6;
|
|
47562
47591
|
|
|
47563
47592
|
var Tooltip = function (_a) {
|
|
47564
47593
|
var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
|
|
@@ -47793,29 +47822,6 @@ var Chart = function (_a) {
|
|
|
47793
47822
|
}) }), period)] })), renderChart()] }));
|
|
47794
47823
|
};
|
|
47795
47824
|
|
|
47796
|
-
var StyledTextarea = styled__default["default"].textarea(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\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) {
|
|
47797
|
-
var disabled = _a.disabled;
|
|
47798
|
-
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
47799
|
-
}, function (_a) {
|
|
47800
|
-
var disabled = _a.disabled;
|
|
47801
|
-
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
47802
|
-
}, function (_a) {
|
|
47803
|
-
var disabled = _a.disabled;
|
|
47804
|
-
return (disabled ? "not-allowed" : "pointer");
|
|
47805
|
-
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
47806
|
-
var disabled = _a.disabled;
|
|
47807
|
-
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
47808
|
-
}, 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));
|
|
47809
|
-
var templateObject_1$a;
|
|
47810
|
-
|
|
47811
|
-
var Textarea = function (props) {
|
|
47812
|
-
var onChange = function (e) {
|
|
47813
|
-
if (!props.disabled && !!props.onChange)
|
|
47814
|
-
props.onChange(e.target.value);
|
|
47815
|
-
};
|
|
47816
|
-
return jsxRuntime.jsx(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
47817
|
-
};
|
|
47818
|
-
|
|
47819
47825
|
var Container$6 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject$1(["\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"])));
|
|
47820
47826
|
var Label$1 = styled__default["default"](StyledParagraph)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
47821
47827
|
var templateObject_1$9, templateObject_2$8;
|
|
@@ -48440,6 +48446,7 @@ exports.Subheading = Subheading;
|
|
|
48440
48446
|
exports.Table = Table;
|
|
48441
48447
|
exports.Tabs = Tabs;
|
|
48442
48448
|
exports.Tag = Tag;
|
|
48449
|
+
exports.Textarea = Textarea;
|
|
48443
48450
|
exports.Toggle = Toggle;
|
|
48444
48451
|
exports.ToggleField = ToggleField;
|
|
48445
48452
|
exports.Tooltip = Tooltip$2;
|