@typeolymp/ui-components 1.19.10 → 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/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 +100 -100
- package/build/index.es.js.map +1 -1
- package/build/index.js +100 -99
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -8226,18 +8226,7 @@ var templateObject_1$I;
|
|
|
8226
8226
|
|
|
8227
8227
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
8228
8228
|
|
|
8229
|
-
var Container$p = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n
|
|
8230
|
-
var Data = styled.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"])));
|
|
8231
|
-
var templateObject_1$H, templateObject_2$y;
|
|
8232
|
-
|
|
8233
|
-
var DataSummary = function (_a) {
|
|
8234
|
-
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
8235
|
-
return (jsx$1(Fragment$1, { children: jsxs(Container$p, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsx$1("div", __assign$2({ onClick: onEdit }, { children: jsx$1(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsx$1(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
|
|
8236
|
-
return item instanceof Object ? (jsxs("div", { children: [jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value))) : (jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item })));
|
|
8237
|
-
}) })] }) }));
|
|
8238
|
-
};
|
|
8239
|
-
|
|
8240
|
-
var Container$o = styled.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) {
|
|
8229
|
+
var Container$p = styled.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) {
|
|
8241
8230
|
var color = _a.color;
|
|
8242
8231
|
if (!color)
|
|
8243
8232
|
return theme.colors.lightGray.base;
|
|
@@ -8258,14 +8247,37 @@ var Container$o = styled.div(templateObject_1$G || (templateObject_1$G = __makeT
|
|
|
8258
8247
|
return theme.colors.darkGray.light;
|
|
8259
8248
|
return theme.colors[color].darker;
|
|
8260
8249
|
});
|
|
8261
|
-
var templateObject_1$
|
|
8250
|
+
var templateObject_1$H;
|
|
8262
8251
|
|
|
8263
8252
|
var Tag = function (_a) {
|
|
8264
8253
|
var color = _a.color, children = _a.children;
|
|
8265
|
-
return jsx$1(Container$
|
|
8254
|
+
return jsx$1(Container$p, __assign$2({ color: color }, { children: children }));
|
|
8255
|
+
};
|
|
8256
|
+
|
|
8257
|
+
var StyledTextarea = styled.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) {
|
|
8258
|
+
var disabled = _a.disabled;
|
|
8259
|
+
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
8260
|
+
}, function (_a) {
|
|
8261
|
+
var disabled = _a.disabled;
|
|
8262
|
+
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
8263
|
+
}, function (_a) {
|
|
8264
|
+
var disabled = _a.disabled;
|
|
8265
|
+
return (disabled ? "not-allowed" : "pointer");
|
|
8266
|
+
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
8267
|
+
var disabled = _a.disabled;
|
|
8268
|
+
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
8269
|
+
}, 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));
|
|
8270
|
+
var templateObject_1$G;
|
|
8271
|
+
|
|
8272
|
+
var Textarea = function (props) {
|
|
8273
|
+
var onChange = function (e) {
|
|
8274
|
+
if (!props.disabled && !!props.onChange)
|
|
8275
|
+
props.onChange(e.target.value);
|
|
8276
|
+
};
|
|
8277
|
+
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
8266
8278
|
};
|
|
8267
8279
|
|
|
8268
|
-
var Container$
|
|
8280
|
+
var Container$o = styled.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) {
|
|
8269
8281
|
var disabled = _a.disabled;
|
|
8270
8282
|
return (disabled ? "not-allowed" : "pointer");
|
|
8271
8283
|
}, function (_a) {
|
|
@@ -8311,7 +8323,7 @@ var Toggle = function (props) {
|
|
|
8311
8323
|
props.onChange(newValue);
|
|
8312
8324
|
}
|
|
8313
8325
|
};
|
|
8314
|
-
return (jsx$1(Container$
|
|
8326
|
+
return (jsx$1(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: jsx$1("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }) })));
|
|
8315
8327
|
};
|
|
8316
8328
|
|
|
8317
8329
|
var Wrapper$4 = styled.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) {
|
|
@@ -8361,7 +8373,7 @@ var trophies = {
|
|
|
8361
8373
|
};
|
|
8362
8374
|
var Trophy = function (props) { return (jsx$1(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
8363
8375
|
|
|
8364
|
-
var Container$
|
|
8376
|
+
var Container$n = styled.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) {
|
|
8365
8377
|
var type = _a.type;
|
|
8366
8378
|
switch (type) {
|
|
8367
8379
|
case "success":
|
|
@@ -8380,7 +8392,7 @@ var Container$m = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
8380
8392
|
});
|
|
8381
8393
|
var templateObject_1$D;
|
|
8382
8394
|
|
|
8383
|
-
var Alert = function (props) { return (jsxs(Container$
|
|
8395
|
+
var Alert = function (props) { return (jsxs(Container$n, __assign$2({}, props, { children: [jsx$1(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }), jsx$1(Paragraph, { children: props.message })] }))); };
|
|
8384
8396
|
|
|
8385
8397
|
var StyledCard = styled.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) {
|
|
8386
8398
|
var bordered = _a.bordered;
|
|
@@ -8394,12 +8406,12 @@ var StyledCard = styled.div(templateObject_1$C || (templateObject_1$C = __makeTe
|
|
|
8394
8406
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8395
8407
|
: "";
|
|
8396
8408
|
});
|
|
8397
|
-
var Ellipse = styled.div(templateObject_2$
|
|
8409
|
+
var Ellipse = styled.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) {
|
|
8398
8410
|
var color = _a.color;
|
|
8399
8411
|
return color ? theme.colors[color].light : "";
|
|
8400
8412
|
});
|
|
8401
8413
|
var Content = styled.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"])));
|
|
8402
|
-
var templateObject_1$C, templateObject_2$
|
|
8414
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$c;
|
|
8403
8415
|
|
|
8404
8416
|
var Card = function (props) { return (jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsx$1(Ellipse, { color: props.ellipse }), jsx$1(Content, { children: props.children })] }))); };
|
|
8405
8417
|
|
|
@@ -14649,13 +14661,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
14649
14661
|
htmlReactParser.Text;
|
|
14650
14662
|
|
|
14651
14663
|
var Fieldset$1 = styled.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"])));
|
|
14652
|
-
var CheckboxContainer = styled.div(templateObject_2$
|
|
14664
|
+
var CheckboxContainer = styled.div(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
14653
14665
|
var CheckboxWrapper = styled.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"])));
|
|
14654
14666
|
var Label$b = styled(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) {
|
|
14655
14667
|
var weight = _a.weight;
|
|
14656
14668
|
return weight || 500;
|
|
14657
14669
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14658
|
-
var templateObject_1$B, templateObject_2$
|
|
14670
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$b, templateObject_4$6;
|
|
14659
14671
|
|
|
14660
14672
|
var Checkboxes = function (props) {
|
|
14661
14673
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14678,12 +14690,12 @@ var Checkboxes = function (props) {
|
|
|
14678
14690
|
}) })] }));
|
|
14679
14691
|
};
|
|
14680
14692
|
|
|
14681
|
-
var Container$
|
|
14682
|
-
var Item = styled.div(templateObject_2$
|
|
14693
|
+
var Container$m = styled.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);
|
|
14694
|
+
var Item = styled.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) {
|
|
14683
14695
|
var isOpen = _a.isOpen;
|
|
14684
14696
|
return (isOpen ? "" : "none");
|
|
14685
14697
|
}, theme.colors.lightGray.dark);
|
|
14686
|
-
var templateObject_1$A, templateObject_2$
|
|
14698
|
+
var templateObject_1$A, templateObject_2$w;
|
|
14687
14699
|
|
|
14688
14700
|
var Collapse = function (props) {
|
|
14689
14701
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14695,18 +14707,18 @@ var Collapse = function (props) {
|
|
|
14695
14707
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
14696
14708
|
}
|
|
14697
14709
|
};
|
|
14698
|
-
return (jsx$1(Container$
|
|
14710
|
+
return (jsx$1(Container$m, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
14699
14711
|
var isOpen = openItems.includes(index);
|
|
14700
14712
|
return (jsxs(Item, __assign$2({ isOpen: isOpen, onClick: function () { return onClickItem(index, isOpen); } }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: item.title })), jsx$1(Icon, { type: isOpen ? "chevronUp" : "chevronDown", color: "blue" })] }), jsx$1(Paragraph, __assign$2({ weight: "regular", as: typeof item.content !== "string" ? "div" : undefined }, { children: item.content }))] }), "".concat(item.title, "-").concat(index)));
|
|
14701
14713
|
}) })));
|
|
14702
14714
|
};
|
|
14703
14715
|
|
|
14704
14716
|
var Wrapper$3 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14705
|
-
var Value = styled.div(templateObject_2$
|
|
14717
|
+
var Value = styled.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) {
|
|
14706
14718
|
var contrast = _a.contrast;
|
|
14707
14719
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14708
14720
|
}, theme.colors.darkGray.base);
|
|
14709
|
-
var templateObject_1$z, templateObject_2$
|
|
14721
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14710
14722
|
|
|
14711
14723
|
var Countdown = function (_a) {
|
|
14712
14724
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14733,9 +14745,20 @@ var Countdown = function (_a) {
|
|
|
14733
14745
|
return (jsxs(Wrapper$3, { children: [jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: HH })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: MM })) })), jsx$1(Heading, __assign$2({ type: "h5", color: color }, { children: ":" })), jsx$1(Value, __assign$2({ contrast: contrast }, { children: jsx$1(Heading, __assign$2({ type: "h5" }, { children: SS })) }))] }));
|
|
14734
14746
|
};
|
|
14735
14747
|
|
|
14736
|
-
var Container$
|
|
14748
|
+
var Container$l = styled.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);
|
|
14749
|
+
var Data = styled.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"])));
|
|
14750
|
+
var templateObject_1$y, templateObject_2$u;
|
|
14751
|
+
|
|
14752
|
+
var DataSummary = function (_a) {
|
|
14753
|
+
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
14754
|
+
return (jsx$1(Fragment$1, { children: jsxs(Container$l, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h5" }, { children: title })), onEdit && (jsx$1("div", __assign$2({ onClick: onEdit }, { children: jsx$1(Heading, __assign$2({ type: "h6", color: "gray" }, { children: translations[locale]["Edit"] })) })))] }), jsx$1(Data, { children: data === null || data === void 0 ? void 0 : data.map(function (item) {
|
|
14755
|
+
return item instanceof Object ? (jsxs("div", { children: [jsxs(Paragraph, __assign$2({ weight: "regular" }, { children: [item.label, ":"] })), jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item.value }))] }, "".concat(item.label, "-").concat(item.value))) : (jsx$1(Paragraph, __assign$2({ weight: "regular" }, { children: item })));
|
|
14756
|
+
}) })] }) }));
|
|
14757
|
+
};
|
|
14758
|
+
|
|
14759
|
+
var Container$k = styled.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"])));
|
|
14737
14760
|
var Label$a = styled(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);
|
|
14738
|
-
var templateObject_1$
|
|
14761
|
+
var templateObject_1$x, templateObject_2$t;
|
|
14739
14762
|
|
|
14740
14763
|
var DateInputField = function (props) {
|
|
14741
14764
|
var onChange = function (value) {
|
|
@@ -14759,7 +14782,7 @@ var generateRandomString = function (length) {
|
|
|
14759
14782
|
return string;
|
|
14760
14783
|
};
|
|
14761
14784
|
|
|
14762
|
-
var Container$j = styled.div(templateObject_1$
|
|
14785
|
+
var Container$j = styled.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) {
|
|
14763
14786
|
var isVisible = _a.isVisible;
|
|
14764
14787
|
return (isVisible ? "100%" : "0%");
|
|
14765
14788
|
}, function (_a) {
|
|
@@ -14773,7 +14796,7 @@ var Container$j = styled.div(templateObject_1$x || (templateObject_1$x = __makeT
|
|
|
14773
14796
|
return (isVisible ? "all" : "none");
|
|
14774
14797
|
});
|
|
14775
14798
|
var MenuItem = styled.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);
|
|
14776
|
-
var templateObject_1$
|
|
14799
|
+
var templateObject_1$w, templateObject_2$s;
|
|
14777
14800
|
|
|
14778
14801
|
var Dropdown = function (_a) {
|
|
14779
14802
|
var menu = _a.menu, trigger = _a.trigger, props = __rest$1(_a, ["menu", "trigger"]);
|
|
@@ -17345,7 +17368,7 @@ function reducer$1(state, action) {
|
|
|
17345
17368
|
|
|
17346
17369
|
function noop$3() {}
|
|
17347
17370
|
|
|
17348
|
-
var Container$i = styled.div(templateObject_1$
|
|
17371
|
+
var Container$i = styled.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"])));
|
|
17349
17372
|
var DropZone = styled.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) {
|
|
17350
17373
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17351
17374
|
// if (isDragActive) return theme.colors.blue.base;
|
|
@@ -17366,7 +17389,7 @@ var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemp
|
|
|
17366
17389
|
return theme.colors.lightGray.base;
|
|
17367
17390
|
});
|
|
17368
17391
|
var FileList = styled.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"])));
|
|
17369
|
-
var templateObject_1$
|
|
17392
|
+
var templateObject_1$v, templateObject_2$r, templateObject_3$a;
|
|
17370
17393
|
|
|
17371
17394
|
var FileUpload = function (_a) {
|
|
17372
17395
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17386,7 +17409,7 @@ var FileUpload = function (_a) {
|
|
|
17386
17409
|
}), { children: [jsx$1("input", __assign$2({}, getInputProps())), jsx$1(Icon, { type: "fileArrow", size: "large" }), jsx$1(Spacer, { vertical: 15 }), !isDragActive && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Paragraph, { children: translations[locale]["or"] }), jsx$1(Spacer, { vertical: 10 }), jsx$1(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsx$1(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsx$1(FileList, { children: files.map(function (file, index) { return (jsx$1(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
17387
17410
|
};
|
|
17388
17411
|
|
|
17389
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
17412
|
+
var StyledIconButton = styled(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) {
|
|
17390
17413
|
var size = _a.size;
|
|
17391
17414
|
return (size === "small" ? "30px" : "40px");
|
|
17392
17415
|
}, function (_a) {
|
|
@@ -17424,7 +17447,7 @@ var GhostIconButton = styled(GhostButton)(templateObject_2$q || (templateObject_
|
|
|
17424
17447
|
var size = _a.size;
|
|
17425
17448
|
return (size === "small" ? "30px" : "40px");
|
|
17426
17449
|
});
|
|
17427
|
-
var templateObject_1$
|
|
17450
|
+
var templateObject_1$u, templateObject_2$q;
|
|
17428
17451
|
|
|
17429
17452
|
var IconButton = function (props) {
|
|
17430
17453
|
if (props.color === "white")
|
|
@@ -17432,9 +17455,9 @@ var IconButton = function (props) {
|
|
|
17432
17455
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17433
17456
|
};
|
|
17434
17457
|
|
|
17435
|
-
var Container$h = styled.div(templateObject_1$
|
|
17458
|
+
var Container$h = styled.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"])));
|
|
17436
17459
|
var Label$9 = styled(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);
|
|
17437
|
-
var templateObject_1$
|
|
17460
|
+
var templateObject_1$t, templateObject_2$p;
|
|
17438
17461
|
|
|
17439
17462
|
var InputField = function (props) {
|
|
17440
17463
|
var onChange = function (value) {
|
|
@@ -17448,7 +17471,7 @@ var InputField = function (props) {
|
|
|
17448
17471
|
return (jsxs(Container$h, { children: [jsx$1(Label$9, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 && (jsxs("div", __assign$2({ style: { marginLeft: "5px" } }, { children: [jsx$1(Spacer, { vertical: 5 }), props.tips.map(function (tip, index) { return (jsxs(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: ["\u2022 ", tip] }), "".concat(tip, "-").concat(index))); })] })))] }));
|
|
17449
17472
|
};
|
|
17450
17473
|
|
|
17451
|
-
var Container$g = styled.div(templateObject_1$
|
|
17474
|
+
var Container$g = styled.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) {
|
|
17452
17475
|
var status = _a.status, color = _a.color;
|
|
17453
17476
|
switch (status) {
|
|
17454
17477
|
case "passed":
|
|
@@ -17493,14 +17516,14 @@ var Container$g = styled.div(templateObject_1$t || (templateObject_1$t = __makeT
|
|
|
17493
17516
|
}
|
|
17494
17517
|
});
|
|
17495
17518
|
var CheckIconWrapper = styled.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"])));
|
|
17496
|
-
var templateObject_1$
|
|
17519
|
+
var templateObject_1$s, templateObject_2$o;
|
|
17497
17520
|
|
|
17498
17521
|
var Key$1 = function (props) { return (jsxs(Container$g, __assign$2({}, props, { children: [props.status === "passed" && (jsx$1(CheckIconWrapper, { children: jsx$1(Icon, { type: "check", color: "green", size: "small" }) })), props.char === " " ? (jsx$1("svg", __assign$2({ width: "28", height: "28", viewBox: "0 0 28 1", style: {
|
|
17499
17522
|
marginTop: "13px",
|
|
17500
17523
|
transform: "scale(2)",
|
|
17501
17524
|
} }, { children: jsx$1("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" }) }))) : (jsx$1(Heading, __assign$2({ type: "h1" }, { children: props.char })))] }))); };
|
|
17502
17525
|
|
|
17503
|
-
var Wrapper$2 = styled.a(templateObject_1$
|
|
17526
|
+
var Wrapper$2 = styled.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) {
|
|
17504
17527
|
var chevron = _a.chevron;
|
|
17505
17528
|
return (chevron === "left" ? "4px" : "");
|
|
17506
17529
|
}, function (_a) {
|
|
@@ -17508,7 +17531,7 @@ var Wrapper$2 = styled.a(templateObject_1$s || (templateObject_1$s = __makeTempl
|
|
|
17508
17531
|
return (chevron === "right" ? "4px" : "");
|
|
17509
17532
|
});
|
|
17510
17533
|
var StyledLink = styled(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);
|
|
17511
|
-
var templateObject_1$
|
|
17534
|
+
var templateObject_1$r, templateObject_2$n;
|
|
17512
17535
|
|
|
17513
17536
|
var Link = function (props) {
|
|
17514
17537
|
var onClick = function (e) {
|
|
@@ -17520,15 +17543,15 @@ var Link = function (props) {
|
|
|
17520
17543
|
return (jsxs(Wrapper$2, __assign$2({ chevron: props.chevron, href: props.href, onClick: onClick }, { children: [props.chevron === "left" && jsx$1(Icon, { type: "chevronLeft", color: "green" }), jsx$1(StyledLink, __assign$2({ size: "large" }, { children: props.children })), props.chevron !== "none" && props.chevron !== "left" && (jsx$1(Icon, { type: "chevronRight", color: "green" }))] })));
|
|
17521
17544
|
};
|
|
17522
17545
|
|
|
17523
|
-
var Container$f = styled.div(templateObject_1$
|
|
17546
|
+
var Container$f = styled.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) {
|
|
17524
17547
|
var text = _a.text;
|
|
17525
17548
|
return (text ? "20px" : "");
|
|
17526
17549
|
});
|
|
17527
|
-
var templateObject_1$
|
|
17550
|
+
var templateObject_1$q;
|
|
17528
17551
|
|
|
17529
17552
|
var Loading = function (props) { return (jsxs(Container$f, __assign$2({}, props, { children: [jsx$1(_default$1, { color: theme.colors[props.color].base, speedMultiplier: 0.5 }), props.text && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { vertical: 20 }), jsx$1(Heading, __assign$2({ type: "h6", color: props.textColor || "black" }, { children: props.text }))] }))] }))); };
|
|
17530
17553
|
|
|
17531
|
-
var Container$e = styled.div(templateObject_1$
|
|
17554
|
+
var Container$e = styled.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) {
|
|
17532
17555
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
17533
17556
|
if (dropdownIsVisible) {
|
|
17534
17557
|
switch (color) {
|
|
@@ -17553,7 +17576,7 @@ var DropdownContainer = styled.div(templateObject_3$9 || (templateObject_3$9 = _
|
|
|
17553
17576
|
}
|
|
17554
17577
|
});
|
|
17555
17578
|
var LocaleWrapper = styled.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);
|
|
17556
|
-
var templateObject_1$
|
|
17579
|
+
var templateObject_1$p, templateObject_2$m, templateObject_3$9, templateObject_4$5;
|
|
17557
17580
|
|
|
17558
17581
|
var LocaleSelect = function (props) {
|
|
17559
17582
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17567,17 +17590,17 @@ var LocaleSelect = function (props) {
|
|
|
17567
17590
|
.map(function (locale) { return (jsxs(LocaleWrapper, __assign$2({ onClick: function () { return onSelectLocale(locale); } }, { children: [jsxs("div", { children: [jsx$1(Flag, { locale: locale }), jsx$1(Spacer, { horizontal: 10 }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: parsers.getNativeLanguageByLocale(locale) }))] }), jsx$1(Icon, { type: "chevronRight", size: "small", color: "darkGray" })] }), locale)); }) })))] })));
|
|
17568
17591
|
};
|
|
17569
17592
|
|
|
17570
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
17571
|
-
var templateObject_1$
|
|
17593
|
+
var Wrapper$1 = styled.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"])));
|
|
17594
|
+
var templateObject_1$o;
|
|
17572
17595
|
|
|
17573
17596
|
var Medals = function (props) { return (jsxs(Wrapper$1, { children: [jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.GOLD }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.gold || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.SILVER }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.silver || 0] }))] }), jsxs("div", { children: [jsx$1(Medal, { type: enums.Medal.BRONZE }), jsx$1(Spacer, { horizontal: 5 }), jsxs(Heading, __assign$2({ type: "h6" }, { children: ["x ", props.bronze || 0] }))] })] })); };
|
|
17574
17597
|
|
|
17575
|
-
var NotificationContainer = styled.div(templateObject_1$
|
|
17598
|
+
var NotificationContainer = styled.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) {
|
|
17576
17599
|
var contrast = _a.contrast;
|
|
17577
17600
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17578
17601
|
});
|
|
17579
17602
|
var ButtonContainer = styled.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"])));
|
|
17580
|
-
var templateObject_1$
|
|
17603
|
+
var templateObject_1$n, templateObject_2$l;
|
|
17581
17604
|
|
|
17582
17605
|
var Notification = function (props) {
|
|
17583
17606
|
if (!props.isVisible)
|
|
@@ -17585,9 +17608,9 @@ var Notification = function (props) {
|
|
|
17585
17608
|
return (jsxs(NotificationContainer, __assign$2({ contrast: !!props.contrast }, { children: [jsxs("div", { children: [jsx$1(Heading, __assign$2({ type: "h4" }, { children: props.title })), props.onClose && (jsxs(Fragment$1, { children: [jsx$1(Spacer, { horizontal: 15 }), jsx$1(IconButton, { icon: "cross", color: "green", onClick: props.onClose })] }))] }), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular", color: "darkGray" }, { children: props.content })), props.buttons && (jsx$1(ButtonContainer, { children: props.buttons.map(function (button, index) { return (createElement(Button, __assign$2({}, button, { size: "small", color: index + 1 === props.buttons.length ? "blue" : "white", key: "button-".concat(index) }))); }) }))] })));
|
|
17586
17609
|
};
|
|
17587
17610
|
|
|
17588
|
-
var Container$d = styled.div(templateObject_1$
|
|
17611
|
+
var Container$d = styled.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"])));
|
|
17589
17612
|
var Label$8 = styled(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);
|
|
17590
|
-
var templateObject_1$
|
|
17613
|
+
var templateObject_1$m, templateObject_2$k;
|
|
17591
17614
|
|
|
17592
17615
|
var NumberField = function (props) {
|
|
17593
17616
|
var onChange = function (value) {
|
|
@@ -17601,9 +17624,9 @@ var NumberField = function (props) {
|
|
|
17601
17624
|
return (jsxs(Container$d, { children: [jsx$1(Label$8, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 })] }));
|
|
17602
17625
|
};
|
|
17603
17626
|
|
|
17604
|
-
var Container$c = styled.div(templateObject_1$
|
|
17627
|
+
var Container$c = styled.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"])));
|
|
17605
17628
|
var Label$7 = styled(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);
|
|
17606
|
-
var templateObject_1$
|
|
17629
|
+
var templateObject_1$l, templateObject_2$j;
|
|
17607
17630
|
|
|
17608
17631
|
var PasswordInputField = function (props) {
|
|
17609
17632
|
var onChange = function (value) {
|
|
@@ -17622,7 +17645,7 @@ var PasswordInputField = function (props) {
|
|
|
17622
17645
|
return (jsxs(Container$c, { children: [jsx$1(Label$7, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(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 })] }));
|
|
17623
17646
|
};
|
|
17624
17647
|
|
|
17625
|
-
var PopupContainer = styled.div(templateObject_1$
|
|
17648
|
+
var PopupContainer = styled.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) {
|
|
17626
17649
|
var isVisible = _a.isVisible;
|
|
17627
17650
|
return (isVisible ? "100%" : "0%");
|
|
17628
17651
|
}, function (_a) {
|
|
@@ -17635,7 +17658,7 @@ var PopupContainer = styled.div(templateObject_1$l || (templateObject_1$l = __ma
|
|
|
17635
17658
|
var contrast = _a.contrast;
|
|
17636
17659
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17637
17660
|
});
|
|
17638
|
-
var templateObject_1$
|
|
17661
|
+
var templateObject_1$k;
|
|
17639
17662
|
|
|
17640
17663
|
var Popup = function (props) {
|
|
17641
17664
|
var popupRef = useRef(null);
|
|
@@ -17671,7 +17694,7 @@ var Popup = function (props) {
|
|
|
17671
17694
|
return (jsxs(Fragment$1, { children: [children, jsxs(PopupContainer, __assign$2({}, position, { isVisible: isVisible, ref: popupRef, contrast: props.contrast }, { children: [props.title && (jsxs(Fragment$1, { children: [jsx$1(Heading, __assign$2({ type: "h6" }, { children: props.title })), jsx$1(Spacer, { vertical: 10 })] })), jsx$1(Paragraph, __assign$2({ size: "small", weight: "regular" }, { children: props.content }))] }))] }));
|
|
17672
17695
|
};
|
|
17673
17696
|
|
|
17674
|
-
var Wrapper = styled.div(templateObject_1$
|
|
17697
|
+
var Wrapper = styled.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"])));
|
|
17675
17698
|
var StyledProgressBar = styled.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) {
|
|
17676
17699
|
var showInfo = _a.showInfo;
|
|
17677
17700
|
return (showInfo ? "10px" : "");
|
|
@@ -17683,11 +17706,11 @@ var Indicator$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeT
|
|
|
17683
17706
|
var color = _a.color;
|
|
17684
17707
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17685
17708
|
});
|
|
17686
|
-
var templateObject_1$
|
|
17709
|
+
var templateObject_1$j, templateObject_2$i, templateObject_3$8;
|
|
17687
17710
|
|
|
17688
17711
|
var ProgressBar = function (props) { return (jsxs(Wrapper, { children: [jsx$1(StyledProgressBar, __assign$2({}, props, { children: jsx$1(Indicator$1, __assign$2({}, props)) })), props.showInfo && (jsx$1(Paragraph, __assign$2({ size: "small" }, { children: props.info ? props.info : "".concat(props.percent, "%") })))] })); };
|
|
17689
17712
|
|
|
17690
|
-
var Container$b = styled.ol(templateObject_1$
|
|
17713
|
+
var Container$b = styled.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"])));
|
|
17691
17714
|
var Step$2 = styled.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) {
|
|
17692
17715
|
var status = _a.status;
|
|
17693
17716
|
return (!!status ? "pointer" : "not-allowed");
|
|
@@ -17710,7 +17733,7 @@ var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplat
|
|
|
17710
17733
|
var hasTitle = _a.hasTitle;
|
|
17711
17734
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
17712
17735
|
}, theme.colors.lightGray.dark);
|
|
17713
|
-
var templateObject_1$
|
|
17736
|
+
var templateObject_1$i, templateObject_2$h;
|
|
17714
17737
|
|
|
17715
17738
|
var Steps$2 = function (props) { return (jsx$1(Container$b, { children: props.steps.map(function (_a, index) {
|
|
17716
17739
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -17727,7 +17750,7 @@ var Steps$2 = function (props) { return (jsx$1(Container$b, { children: props.st
|
|
|
17727
17750
|
return (jsxs(Step$2, __assign$2({ status: status, hasTitle: !!title }, { children: [jsx$1("div", __assign$2({ onClick: onClickStep }, { children: status === "passed" ? (jsx$1(Icon, { type: "check", size: "small", color: "white" })) : (jsx$1(Heading, __assign$2({ type: "h6" }, { children: step }))) })), title && jsx$1(Paragraph, { children: title })] }), "".concat(title, "-").concat(step)));
|
|
17728
17751
|
}) })); };
|
|
17729
17752
|
|
|
17730
|
-
var Container$a = styled.ol(templateObject_1$
|
|
17753
|
+
var Container$a = styled.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"])));
|
|
17731
17754
|
var Step$1 = styled.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) {
|
|
17732
17755
|
var status = _a.status;
|
|
17733
17756
|
return (!!status ? "pointer" : "not-allowed");
|
|
@@ -17747,7 +17770,7 @@ var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplat
|
|
|
17747
17770
|
? theme.colors.lightGray.light
|
|
17748
17771
|
: theme.colors.darkGray.light;
|
|
17749
17772
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
17750
|
-
var templateObject_1$
|
|
17773
|
+
var templateObject_1$h, templateObject_2$g;
|
|
17751
17774
|
|
|
17752
17775
|
var Steps$1 = function (props) { return (jsx$1(Container$a, { children: props.steps.map(function (_a, index) {
|
|
17753
17776
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -17768,7 +17791,7 @@ var Steps = function (props) {
|
|
|
17768
17791
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
17769
17792
|
};
|
|
17770
17793
|
|
|
17771
|
-
var TabsContainer$1 = styled.div(templateObject_1$
|
|
17794
|
+
var TabsContainer$1 = styled.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);
|
|
17772
17795
|
var Tab$1 = styled.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) {
|
|
17773
17796
|
var isActive = _a.isActive;
|
|
17774
17797
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
@@ -17776,7 +17799,7 @@ var Tab$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplat
|
|
|
17776
17799
|
var isActive = _a.isActive;
|
|
17777
17800
|
return isActive ? theme.colors.blue.base : "";
|
|
17778
17801
|
}, theme.colors.blue.base);
|
|
17779
|
-
var templateObject_1$
|
|
17802
|
+
var templateObject_1$g, templateObject_2$f;
|
|
17780
17803
|
|
|
17781
17804
|
var Tabs$2 = function (_a) {
|
|
17782
17805
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17796,7 +17819,7 @@ var Tabs$2 = function (_a) {
|
|
|
17796
17819
|
}) }));
|
|
17797
17820
|
};
|
|
17798
17821
|
|
|
17799
|
-
var TabsContainer = styled.div(templateObject_1$
|
|
17822
|
+
var TabsContainer = styled.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);
|
|
17800
17823
|
var Tab = styled.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) {
|
|
17801
17824
|
var isActive = _a.isActive;
|
|
17802
17825
|
return (isActive ? "block" : "none");
|
|
@@ -17804,7 +17827,7 @@ var Tab = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateO
|
|
|
17804
17827
|
var isActive = _a.isActive;
|
|
17805
17828
|
return isActive ? theme.colors.blue.base : "";
|
|
17806
17829
|
}, theme.colors.blue.base);
|
|
17807
|
-
var templateObject_1$
|
|
17830
|
+
var templateObject_1$f, templateObject_2$e;
|
|
17808
17831
|
|
|
17809
17832
|
var Tabs$1 = function (_a) {
|
|
17810
17833
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17828,14 +17851,14 @@ var Tabs = function (props) {
|
|
|
17828
17851
|
return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
|
|
17829
17852
|
};
|
|
17830
17853
|
|
|
17831
|
-
var Fieldset = styled.fieldset(templateObject_1$
|
|
17854
|
+
var Fieldset = styled.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"])));
|
|
17832
17855
|
var RadioContainer = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
17833
17856
|
var RadioWrapper = styled.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"])));
|
|
17834
17857
|
var Label$6 = styled(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) {
|
|
17835
17858
|
var weight = _a.weight;
|
|
17836
17859
|
return weight || 500;
|
|
17837
17860
|
}, theme.colors.darkGray.base);
|
|
17838
|
-
var templateObject_1$
|
|
17861
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$7, templateObject_4$4;
|
|
17839
17862
|
|
|
17840
17863
|
var RadioGroup = function (props) {
|
|
17841
17864
|
var onChange = function (value) {
|
|
@@ -17852,9 +17875,9 @@ var RadioGroup = function (props) {
|
|
|
17852
17875
|
}) })] }));
|
|
17853
17876
|
};
|
|
17854
17877
|
|
|
17855
|
-
var Container$9 = styled.div(templateObject_1$
|
|
17878
|
+
var Container$9 = styled.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"])));
|
|
17856
17879
|
var Label$5 = styled(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);
|
|
17857
|
-
var templateObject_1$
|
|
17880
|
+
var templateObject_1$d, templateObject_2$c;
|
|
17858
17881
|
|
|
17859
17882
|
var SelectField = function (props) {
|
|
17860
17883
|
var onChange = function (value) {
|
|
@@ -17871,9 +17894,9 @@ var SelectField = function (props) {
|
|
|
17871
17894
|
}) }))] }));
|
|
17872
17895
|
};
|
|
17873
17896
|
|
|
17874
|
-
var Container$8 = styled.div(templateObject_1$
|
|
17897
|
+
var Container$8 = styled.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"])));
|
|
17875
17898
|
var Label$4 = styled(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);
|
|
17876
|
-
var templateObject_1$
|
|
17899
|
+
var templateObject_1$c, templateObject_2$b;
|
|
17877
17900
|
|
|
17878
17901
|
var ToggleField = function (props) {
|
|
17879
17902
|
var onChange = function (value) {
|
|
@@ -17887,7 +17910,7 @@ var ToggleField = function (props) {
|
|
|
17887
17910
|
return (jsxs(Container$8, { children: [jsx$1(Label$4, __assign$2({ as: "label", htmlFor: props.name }, { children: props.label })), jsx$1(Spacer, { vertical: 5 }), jsx$1(Toggle, { id: props.name, name: props.name, disabled: props.disabled, autoFocus: props.autoFocus, defaultValue: props.defaultValue, onChange: onChange, onBlur: onBlur })] }));
|
|
17888
17911
|
};
|
|
17889
17912
|
|
|
17890
|
-
var TooltipContainer = styled.div(templateObject_1$
|
|
17913
|
+
var TooltipContainer = styled.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) {
|
|
17891
17914
|
var isVisible = _a.isVisible;
|
|
17892
17915
|
return (isVisible ? "100%" : "0%");
|
|
17893
17916
|
}, function (_a) {
|
|
@@ -17907,7 +17930,7 @@ var TooltipTitle = styled.div(templateObject_2$a || (templateObject_2$a = __make
|
|
|
17907
17930
|
return theme.colors.lightGray.dark;
|
|
17908
17931
|
}
|
|
17909
17932
|
});
|
|
17910
|
-
var templateObject_1$
|
|
17933
|
+
var templateObject_1$b, templateObject_2$a;
|
|
17911
17934
|
|
|
17912
17935
|
var Tooltip$2 = function (props) {
|
|
17913
17936
|
var tooltipRef = useRef(null);
|
|
@@ -47531,13 +47554,13 @@ var xAxis = {
|
|
|
47531
47554
|
domain: ["dataMin", "dataMax"],
|
|
47532
47555
|
};
|
|
47533
47556
|
|
|
47534
|
-
var Container$7 = styled.div(templateObject_1$
|
|
47557
|
+
var Container$7 = styled.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);
|
|
47535
47558
|
var Label$2 = styled.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"])));
|
|
47536
47559
|
var Dot = styled.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) {
|
|
47537
47560
|
var color = _a.color;
|
|
47538
47561
|
return color;
|
|
47539
47562
|
});
|
|
47540
|
-
var templateObject_1$
|
|
47563
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$6;
|
|
47541
47564
|
|
|
47542
47565
|
var Tooltip = function (_a) {
|
|
47543
47566
|
var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
|
|
@@ -47772,29 +47795,6 @@ var Chart = function (_a) {
|
|
|
47772
47795
|
}) }), period)] })), renderChart()] }));
|
|
47773
47796
|
};
|
|
47774
47797
|
|
|
47775
|
-
var StyledTextarea = styled.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) {
|
|
47776
|
-
var disabled = _a.disabled;
|
|
47777
|
-
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
47778
|
-
}, function (_a) {
|
|
47779
|
-
var disabled = _a.disabled;
|
|
47780
|
-
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
47781
|
-
}, function (_a) {
|
|
47782
|
-
var disabled = _a.disabled;
|
|
47783
|
-
return (disabled ? "not-allowed" : "pointer");
|
|
47784
|
-
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
47785
|
-
var disabled = _a.disabled;
|
|
47786
|
-
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
47787
|
-
}, 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));
|
|
47788
|
-
var templateObject_1$a;
|
|
47789
|
-
|
|
47790
|
-
var Textarea = function (props) {
|
|
47791
|
-
var onChange = function (e) {
|
|
47792
|
-
if (!props.disabled && !!props.onChange)
|
|
47793
|
-
props.onChange(e.target.value);
|
|
47794
|
-
};
|
|
47795
|
-
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
47796
|
-
};
|
|
47797
|
-
|
|
47798
47798
|
var Container$6 = styled.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"])));
|
|
47799
47799
|
var Label$1 = styled(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);
|
|
47800
47800
|
var templateObject_1$9, templateObject_2$8;
|
|
@@ -48371,5 +48371,5 @@ var Transfer = function (props) {
|
|
|
48371
48371
|
}) }) }, selectedTargetKeys)] }))] }));
|
|
48372
48372
|
};
|
|
48373
48373
|
|
|
48374
|
-
export { Alert, Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Toggle, ToggleField, Tooltip$2 as Tooltip, Transfer, Trophy, theme };
|
|
48374
|
+
export { Alert, Button, Card, Chart, Period as ChartPeriod, Checkbox, Checkboxes, Collapse, Countdown, DataSummary, DateInputField, Dropdown, FileUpload, Flag, Form, Heading, Icon, IconButton, Illustration, Input, InputField, Key$1 as Key, Keyboard, Link, Loading, LocaleSelect, Logo, Medal, Medals, Modal, Notification, Number$1 as Number, NumberField, Paragraph, PasswordInputField, Popup, ProgressBar, Radio, RadioGroup, Range, Result, Select, SelectField, Spacer, Steps, Subheading, Table, Tabs, Tag, Textarea, Toggle, ToggleField, Tooltip$2 as Tooltip, Transfer, Trophy, theme };
|
|
48375
48375
|
//# sourceMappingURL=index.es.js.map
|