@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.es.js
CHANGED
|
@@ -4177,7 +4177,7 @@ var flags = {
|
|
|
4177
4177
|
};
|
|
4178
4178
|
var Flag = function (props) { return (jsx$1(Wrapper$9, __assign$2({}, props, { children: flags[parsers.getCountryCodeByLocale(props.locale)] }))); };
|
|
4179
4179
|
|
|
4180
|
-
var StyledHeading = styled.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) {
|
|
4180
|
+
var StyledHeading = styled.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) {
|
|
4181
4181
|
var type = _a.type;
|
|
4182
4182
|
return theme.heading[type].fontSize;
|
|
4183
4183
|
}, function (_a) {
|
|
@@ -4200,6 +4200,9 @@ var StyledHeading = styled.span(templateObject_1$R || (templateObject_1$R = __ma
|
|
|
4200
4200
|
}, function (_a) {
|
|
4201
4201
|
var align = _a.align;
|
|
4202
4202
|
return align;
|
|
4203
|
+
}, function (_a) {
|
|
4204
|
+
var decoration = _a.decoration;
|
|
4205
|
+
return decoration;
|
|
4203
4206
|
});
|
|
4204
4207
|
var templateObject_1$R;
|
|
4205
4208
|
|
|
@@ -4244,7 +4247,7 @@ var illustrations = {
|
|
|
4244
4247
|
};
|
|
4245
4248
|
var Illustration = function (props) { return (jsx$1(Wrapper$8, __assign$2({}, props, { children: illustrations[props.type] }))); };
|
|
4246
4249
|
|
|
4247
|
-
var StyledParagraph = styled.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) {
|
|
4250
|
+
var StyledParagraph = styled.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) {
|
|
4248
4251
|
var size = _a.size;
|
|
4249
4252
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
4250
4253
|
}, function (_a) {
|
|
@@ -4278,6 +4281,9 @@ var StyledParagraph = styled.p(templateObject_1$P || (templateObject_1$P = __mak
|
|
|
4278
4281
|
}, function (_a) {
|
|
4279
4282
|
var transform = _a.transform;
|
|
4280
4283
|
return transform;
|
|
4284
|
+
}, function (_a) {
|
|
4285
|
+
var decoration = _a.decoration;
|
|
4286
|
+
return decoration;
|
|
4281
4287
|
});
|
|
4282
4288
|
var templateObject_1$P;
|
|
4283
4289
|
|
|
@@ -8220,18 +8226,7 @@ var templateObject_1$I;
|
|
|
8220
8226
|
|
|
8221
8227
|
var Subheading = function (props) { return (jsx$1(StyledSubheading, __assign$2({}, props, { children: props.children }))); };
|
|
8222
8228
|
|
|
8223
|
-
var Container$p = styled.div(templateObject_1$H || (templateObject_1$H = __makeTemplateObject$1(["\n
|
|
8224
|
-
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"])));
|
|
8225
|
-
var templateObject_1$H, templateObject_2$y;
|
|
8226
|
-
|
|
8227
|
-
var DataSummary = function (_a) {
|
|
8228
|
-
var title = _a.title, data = _a.data, onEdit = _a.onEdit, locale = _a.locale;
|
|
8229
|
-
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) {
|
|
8230
|
-
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 })));
|
|
8231
|
-
}) })] }) }));
|
|
8232
|
-
};
|
|
8233
|
-
|
|
8234
|
-
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) {
|
|
8235
8230
|
var color = _a.color;
|
|
8236
8231
|
if (!color)
|
|
8237
8232
|
return theme.colors.lightGray.base;
|
|
@@ -8252,14 +8247,37 @@ var Container$o = styled.div(templateObject_1$G || (templateObject_1$G = __makeT
|
|
|
8252
8247
|
return theme.colors.darkGray.light;
|
|
8253
8248
|
return theme.colors[color].darker;
|
|
8254
8249
|
});
|
|
8255
|
-
var templateObject_1$
|
|
8250
|
+
var templateObject_1$H;
|
|
8256
8251
|
|
|
8257
8252
|
var Tag = function (_a) {
|
|
8258
8253
|
var color = _a.color, children = _a.children;
|
|
8259
|
-
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 }));
|
|
8260
8278
|
};
|
|
8261
8279
|
|
|
8262
|
-
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) {
|
|
8263
8281
|
var disabled = _a.disabled;
|
|
8264
8282
|
return (disabled ? "not-allowed" : "pointer");
|
|
8265
8283
|
}, function (_a) {
|
|
@@ -8305,7 +8323,7 @@ var Toggle = function (props) {
|
|
|
8305
8323
|
props.onChange(newValue);
|
|
8306
8324
|
}
|
|
8307
8325
|
};
|
|
8308
|
-
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 }) })));
|
|
8309
8327
|
};
|
|
8310
8328
|
|
|
8311
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) {
|
|
@@ -8355,7 +8373,7 @@ var trophies = {
|
|
|
8355
8373
|
};
|
|
8356
8374
|
var Trophy = function (props) { return (jsx$1(Wrapper$4, __assign$2({}, props, { children: trophies[props.variant][props.level] }))); };
|
|
8357
8375
|
|
|
8358
|
-
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) {
|
|
8359
8377
|
var type = _a.type;
|
|
8360
8378
|
switch (type) {
|
|
8361
8379
|
case "success":
|
|
@@ -8374,7 +8392,7 @@ var Container$m = styled.div(templateObject_1$D || (templateObject_1$D = __makeT
|
|
|
8374
8392
|
});
|
|
8375
8393
|
var templateObject_1$D;
|
|
8376
8394
|
|
|
8377
|
-
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 })] }))); };
|
|
8378
8396
|
|
|
8379
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) {
|
|
8380
8398
|
var bordered = _a.bordered;
|
|
@@ -8388,12 +8406,12 @@ var StyledCard = styled.div(templateObject_1$C || (templateObject_1$C = __makeTe
|
|
|
8388
8406
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
8389
8407
|
: "";
|
|
8390
8408
|
});
|
|
8391
|
-
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) {
|
|
8392
8410
|
var color = _a.color;
|
|
8393
8411
|
return color ? theme.colors[color].light : "";
|
|
8394
8412
|
});
|
|
8395
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"])));
|
|
8396
|
-
var templateObject_1$C, templateObject_2$
|
|
8414
|
+
var templateObject_1$C, templateObject_2$y, templateObject_3$c;
|
|
8397
8415
|
|
|
8398
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 })] }))); };
|
|
8399
8417
|
|
|
@@ -14643,13 +14661,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
14643
14661
|
htmlReactParser.Text;
|
|
14644
14662
|
|
|
14645
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"])));
|
|
14646
|
-
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"])));
|
|
14647
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"])));
|
|
14648
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) {
|
|
14649
14667
|
var weight = _a.weight;
|
|
14650
14668
|
return weight || 500;
|
|
14651
14669
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
14652
|
-
var templateObject_1$B, templateObject_2$
|
|
14670
|
+
var templateObject_1$B, templateObject_2$x, templateObject_3$b, templateObject_4$6;
|
|
14653
14671
|
|
|
14654
14672
|
var Checkboxes = function (props) {
|
|
14655
14673
|
var _a = useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -14672,12 +14690,12 @@ var Checkboxes = function (props) {
|
|
|
14672
14690
|
}) })] }));
|
|
14673
14691
|
};
|
|
14674
14692
|
|
|
14675
|
-
var Container$
|
|
14676
|
-
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) {
|
|
14677
14695
|
var isOpen = _a.isOpen;
|
|
14678
14696
|
return (isOpen ? "" : "none");
|
|
14679
14697
|
}, theme.colors.lightGray.dark);
|
|
14680
|
-
var templateObject_1$A, templateObject_2$
|
|
14698
|
+
var templateObject_1$A, templateObject_2$w;
|
|
14681
14699
|
|
|
14682
14700
|
var Collapse = function (props) {
|
|
14683
14701
|
var _a = useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -14689,18 +14707,18 @@ var Collapse = function (props) {
|
|
|
14689
14707
|
setOpenItems(function (prevState) { return __spreadArray(__spreadArray([], prevState, true), [index], false); });
|
|
14690
14708
|
}
|
|
14691
14709
|
};
|
|
14692
|
-
return (jsx$1(Container$
|
|
14710
|
+
return (jsx$1(Container$m, __assign$2({}, props, { children: props.items.map(function (item, index) {
|
|
14693
14711
|
var isOpen = openItems.includes(index);
|
|
14694
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)));
|
|
14695
14713
|
}) })));
|
|
14696
14714
|
};
|
|
14697
14715
|
|
|
14698
14716
|
var Wrapper$3 = styled.div(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
14699
|
-
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) {
|
|
14700
14718
|
var contrast = _a.contrast;
|
|
14701
14719
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
14702
14720
|
}, theme.colors.darkGray.base);
|
|
14703
|
-
var templateObject_1$z, templateObject_2$
|
|
14721
|
+
var templateObject_1$z, templateObject_2$v;
|
|
14704
14722
|
|
|
14705
14723
|
var Countdown = function (_a) {
|
|
14706
14724
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -14727,9 +14745,20 @@ var Countdown = function (_a) {
|
|
|
14727
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 })) }))] }));
|
|
14728
14746
|
};
|
|
14729
14747
|
|
|
14730
|
-
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"])));
|
|
14731
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);
|
|
14732
|
-
var templateObject_1$
|
|
14761
|
+
var templateObject_1$x, templateObject_2$t;
|
|
14733
14762
|
|
|
14734
14763
|
var DateInputField = function (props) {
|
|
14735
14764
|
var onChange = function (value) {
|
|
@@ -14753,7 +14782,7 @@ var generateRandomString = function (length) {
|
|
|
14753
14782
|
return string;
|
|
14754
14783
|
};
|
|
14755
14784
|
|
|
14756
|
-
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) {
|
|
14757
14786
|
var isVisible = _a.isVisible;
|
|
14758
14787
|
return (isVisible ? "100%" : "0%");
|
|
14759
14788
|
}, function (_a) {
|
|
@@ -14767,7 +14796,7 @@ var Container$j = styled.div(templateObject_1$x || (templateObject_1$x = __makeT
|
|
|
14767
14796
|
return (isVisible ? "all" : "none");
|
|
14768
14797
|
});
|
|
14769
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);
|
|
14770
|
-
var templateObject_1$
|
|
14799
|
+
var templateObject_1$w, templateObject_2$s;
|
|
14771
14800
|
|
|
14772
14801
|
var Dropdown = function (_a) {
|
|
14773
14802
|
var menu = _a.menu, trigger = _a.trigger, props = __rest$1(_a, ["menu", "trigger"]);
|
|
@@ -17339,7 +17368,7 @@ function reducer$1(state, action) {
|
|
|
17339
17368
|
|
|
17340
17369
|
function noop$3() {}
|
|
17341
17370
|
|
|
17342
|
-
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"])));
|
|
17343
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) {
|
|
17344
17373
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
17345
17374
|
// if (isDragActive) return theme.colors.blue.base;
|
|
@@ -17360,7 +17389,7 @@ var DropZone = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemp
|
|
|
17360
17389
|
return theme.colors.lightGray.base;
|
|
17361
17390
|
});
|
|
17362
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"])));
|
|
17363
|
-
var templateObject_1$
|
|
17392
|
+
var templateObject_1$v, templateObject_2$r, templateObject_3$a;
|
|
17364
17393
|
|
|
17365
17394
|
var FileUpload = function (_a) {
|
|
17366
17395
|
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
@@ -17380,7 +17409,7 @@ var FileUpload = function (_a) {
|
|
|
17380
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))); }) }))] }) }));
|
|
17381
17410
|
};
|
|
17382
17411
|
|
|
17383
|
-
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) {
|
|
17384
17413
|
var size = _a.size;
|
|
17385
17414
|
return (size === "small" ? "30px" : "40px");
|
|
17386
17415
|
}, function (_a) {
|
|
@@ -17418,7 +17447,7 @@ var GhostIconButton = styled(GhostButton)(templateObject_2$q || (templateObject_
|
|
|
17418
17447
|
var size = _a.size;
|
|
17419
17448
|
return (size === "small" ? "30px" : "40px");
|
|
17420
17449
|
});
|
|
17421
|
-
var templateObject_1$
|
|
17450
|
+
var templateObject_1$u, templateObject_2$q;
|
|
17422
17451
|
|
|
17423
17452
|
var IconButton = function (props) {
|
|
17424
17453
|
if (props.color === "white")
|
|
@@ -17426,9 +17455,9 @@ var IconButton = function (props) {
|
|
|
17426
17455
|
return (jsx$1(StyledIconButton, __assign$2({}, props, { children: jsx$1(Icon, { type: props.icon, size: props.size === "small" ? "tiny" : "small", color: "white" }) })));
|
|
17427
17456
|
};
|
|
17428
17457
|
|
|
17429
|
-
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"])));
|
|
17430
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);
|
|
17431
|
-
var templateObject_1$
|
|
17460
|
+
var templateObject_1$t, templateObject_2$p;
|
|
17432
17461
|
|
|
17433
17462
|
var InputField = function (props) {
|
|
17434
17463
|
var onChange = function (value) {
|
|
@@ -17442,7 +17471,7 @@ var InputField = function (props) {
|
|
|
17442
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))); })] })))] }));
|
|
17443
17472
|
};
|
|
17444
17473
|
|
|
17445
|
-
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) {
|
|
17446
17475
|
var status = _a.status, color = _a.color;
|
|
17447
17476
|
switch (status) {
|
|
17448
17477
|
case "passed":
|
|
@@ -17487,14 +17516,14 @@ var Container$g = styled.div(templateObject_1$t || (templateObject_1$t = __makeT
|
|
|
17487
17516
|
}
|
|
17488
17517
|
});
|
|
17489
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"])));
|
|
17490
|
-
var templateObject_1$
|
|
17519
|
+
var templateObject_1$s, templateObject_2$o;
|
|
17491
17520
|
|
|
17492
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: {
|
|
17493
17522
|
marginTop: "13px",
|
|
17494
17523
|
transform: "scale(2)",
|
|
17495
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 })))] }))); };
|
|
17496
17525
|
|
|
17497
|
-
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) {
|
|
17498
17527
|
var chevron = _a.chevron;
|
|
17499
17528
|
return (chevron === "left" ? "4px" : "");
|
|
17500
17529
|
}, function (_a) {
|
|
@@ -17502,7 +17531,7 @@ var Wrapper$2 = styled.a(templateObject_1$s || (templateObject_1$s = __makeTempl
|
|
|
17502
17531
|
return (chevron === "right" ? "4px" : "");
|
|
17503
17532
|
});
|
|
17504
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);
|
|
17505
|
-
var templateObject_1$
|
|
17534
|
+
var templateObject_1$r, templateObject_2$n;
|
|
17506
17535
|
|
|
17507
17536
|
var Link = function (props) {
|
|
17508
17537
|
var onClick = function (e) {
|
|
@@ -17514,15 +17543,15 @@ var Link = function (props) {
|
|
|
17514
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" }))] })));
|
|
17515
17544
|
};
|
|
17516
17545
|
|
|
17517
|
-
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) {
|
|
17518
17547
|
var text = _a.text;
|
|
17519
17548
|
return (text ? "20px" : "");
|
|
17520
17549
|
});
|
|
17521
|
-
var templateObject_1$
|
|
17550
|
+
var templateObject_1$q;
|
|
17522
17551
|
|
|
17523
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 }))] }))] }))); };
|
|
17524
17553
|
|
|
17525
|
-
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) {
|
|
17526
17555
|
var dropdownIsVisible = _a.dropdownIsVisible, color = _a.color;
|
|
17527
17556
|
if (dropdownIsVisible) {
|
|
17528
17557
|
switch (color) {
|
|
@@ -17547,7 +17576,7 @@ var DropdownContainer = styled.div(templateObject_3$9 || (templateObject_3$9 = _
|
|
|
17547
17576
|
}
|
|
17548
17577
|
});
|
|
17549
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);
|
|
17550
|
-
var templateObject_1$
|
|
17579
|
+
var templateObject_1$p, templateObject_2$m, templateObject_3$9, templateObject_4$5;
|
|
17551
17580
|
|
|
17552
17581
|
var LocaleSelect = function (props) {
|
|
17553
17582
|
var _a = useState(false), dropdownIsVisible = _a[0], setDropdownIsVisible = _a[1];
|
|
@@ -17561,17 +17590,17 @@ var LocaleSelect = function (props) {
|
|
|
17561
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)); }) })))] })));
|
|
17562
17591
|
};
|
|
17563
17592
|
|
|
17564
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
17565
|
-
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;
|
|
17566
17595
|
|
|
17567
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] }))] })] })); };
|
|
17568
17597
|
|
|
17569
|
-
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) {
|
|
17570
17599
|
var contrast = _a.contrast;
|
|
17571
17600
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17572
17601
|
});
|
|
17573
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"])));
|
|
17574
|
-
var templateObject_1$
|
|
17603
|
+
var templateObject_1$n, templateObject_2$l;
|
|
17575
17604
|
|
|
17576
17605
|
var Notification = function (props) {
|
|
17577
17606
|
if (!props.isVisible)
|
|
@@ -17579,9 +17608,9 @@ var Notification = function (props) {
|
|
|
17579
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) }))); }) }))] })));
|
|
17580
17609
|
};
|
|
17581
17610
|
|
|
17582
|
-
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"])));
|
|
17583
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);
|
|
17584
|
-
var templateObject_1$
|
|
17613
|
+
var templateObject_1$m, templateObject_2$k;
|
|
17585
17614
|
|
|
17586
17615
|
var NumberField = function (props) {
|
|
17587
17616
|
var onChange = function (value) {
|
|
@@ -17595,9 +17624,9 @@ var NumberField = function (props) {
|
|
|
17595
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 })] }));
|
|
17596
17625
|
};
|
|
17597
17626
|
|
|
17598
|
-
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"])));
|
|
17599
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);
|
|
17600
|
-
var templateObject_1$
|
|
17629
|
+
var templateObject_1$l, templateObject_2$j;
|
|
17601
17630
|
|
|
17602
17631
|
var PasswordInputField = function (props) {
|
|
17603
17632
|
var onChange = function (value) {
|
|
@@ -17616,7 +17645,7 @@ var PasswordInputField = function (props) {
|
|
|
17616
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 })] }));
|
|
17617
17646
|
};
|
|
17618
17647
|
|
|
17619
|
-
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) {
|
|
17620
17649
|
var isVisible = _a.isVisible;
|
|
17621
17650
|
return (isVisible ? "100%" : "0%");
|
|
17622
17651
|
}, function (_a) {
|
|
@@ -17629,7 +17658,7 @@ var PopupContainer = styled.div(templateObject_1$l || (templateObject_1$l = __ma
|
|
|
17629
17658
|
var contrast = _a.contrast;
|
|
17630
17659
|
return contrast ? theme.colors.lightGray.light : theme.colors.lightGray.base;
|
|
17631
17660
|
});
|
|
17632
|
-
var templateObject_1$
|
|
17661
|
+
var templateObject_1$k;
|
|
17633
17662
|
|
|
17634
17663
|
var Popup = function (props) {
|
|
17635
17664
|
var popupRef = useRef(null);
|
|
@@ -17665,7 +17694,7 @@ var Popup = function (props) {
|
|
|
17665
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 }))] }))] }));
|
|
17666
17695
|
};
|
|
17667
17696
|
|
|
17668
|
-
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"])));
|
|
17669
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) {
|
|
17670
17699
|
var showInfo = _a.showInfo;
|
|
17671
17700
|
return (showInfo ? "10px" : "");
|
|
@@ -17677,11 +17706,11 @@ var Indicator$1 = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeT
|
|
|
17677
17706
|
var color = _a.color;
|
|
17678
17707
|
return color ? theme.colors[color].base : theme.colors.green.base;
|
|
17679
17708
|
});
|
|
17680
|
-
var templateObject_1$
|
|
17709
|
+
var templateObject_1$j, templateObject_2$i, templateObject_3$8;
|
|
17681
17710
|
|
|
17682
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, "%") })))] })); };
|
|
17683
17712
|
|
|
17684
|
-
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"])));
|
|
17685
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) {
|
|
17686
17715
|
var status = _a.status;
|
|
17687
17716
|
return (!!status ? "pointer" : "not-allowed");
|
|
@@ -17704,7 +17733,7 @@ var Step$2 = styled.li(templateObject_2$h || (templateObject_2$h = __makeTemplat
|
|
|
17704
17733
|
var hasTitle = _a.hasTitle;
|
|
17705
17734
|
return (hasTitle ? "calc(50% - 12px)" : "50%");
|
|
17706
17735
|
}, theme.colors.lightGray.dark);
|
|
17707
|
-
var templateObject_1$
|
|
17736
|
+
var templateObject_1$i, templateObject_2$h;
|
|
17708
17737
|
|
|
17709
17738
|
var Steps$2 = function (props) { return (jsx$1(Container$b, { children: props.steps.map(function (_a, index) {
|
|
17710
17739
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -17721,7 +17750,7 @@ var Steps$2 = function (props) { return (jsx$1(Container$b, { children: props.st
|
|
|
17721
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)));
|
|
17722
17751
|
}) })); };
|
|
17723
17752
|
|
|
17724
|
-
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"])));
|
|
17725
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) {
|
|
17726
17755
|
var status = _a.status;
|
|
17727
17756
|
return (!!status ? "pointer" : "not-allowed");
|
|
@@ -17741,7 +17770,7 @@ var Step$1 = styled.li(templateObject_2$g || (templateObject_2$g = __makeTemplat
|
|
|
17741
17770
|
? theme.colors.lightGray.light
|
|
17742
17771
|
: theme.colors.darkGray.light;
|
|
17743
17772
|
}, theme.colors.darkGray.base, theme.colors.lightGray.base);
|
|
17744
|
-
var templateObject_1$
|
|
17773
|
+
var templateObject_1$h, templateObject_2$g;
|
|
17745
17774
|
|
|
17746
17775
|
var Steps$1 = function (props) { return (jsx$1(Container$a, { children: props.steps.map(function (_a, index) {
|
|
17747
17776
|
var title = _a.title, onClick = _a.onClick;
|
|
@@ -17762,7 +17791,7 @@ var Steps = function (props) {
|
|
|
17762
17791
|
return props.alignment === "vertical" ? (jsx$1(Steps$1, __assign$2({}, props))) : (jsx$1(Steps$2, __assign$2({}, props)));
|
|
17763
17792
|
};
|
|
17764
17793
|
|
|
17765
|
-
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);
|
|
17766
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) {
|
|
17767
17796
|
var isActive = _a.isActive;
|
|
17768
17797
|
return isActive ? "3px solid ".concat(theme.colors.blue.base) : "";
|
|
@@ -17770,7 +17799,7 @@ var Tab$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplat
|
|
|
17770
17799
|
var isActive = _a.isActive;
|
|
17771
17800
|
return isActive ? theme.colors.blue.base : "";
|
|
17772
17801
|
}, theme.colors.blue.base);
|
|
17773
|
-
var templateObject_1$
|
|
17802
|
+
var templateObject_1$g, templateObject_2$f;
|
|
17774
17803
|
|
|
17775
17804
|
var Tabs$2 = function (_a) {
|
|
17776
17805
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17790,7 +17819,7 @@ var Tabs$2 = function (_a) {
|
|
|
17790
17819
|
}) }));
|
|
17791
17820
|
};
|
|
17792
17821
|
|
|
17793
|
-
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);
|
|
17794
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) {
|
|
17795
17824
|
var isActive = _a.isActive;
|
|
17796
17825
|
return (isActive ? "block" : "none");
|
|
@@ -17798,7 +17827,7 @@ var Tab = styled.div(templateObject_2$e || (templateObject_2$e = __makeTemplateO
|
|
|
17798
17827
|
var isActive = _a.isActive;
|
|
17799
17828
|
return isActive ? theme.colors.blue.base : "";
|
|
17800
17829
|
}, theme.colors.blue.base);
|
|
17801
|
-
var templateObject_1$
|
|
17830
|
+
var templateObject_1$f, templateObject_2$e;
|
|
17802
17831
|
|
|
17803
17832
|
var Tabs$1 = function (_a) {
|
|
17804
17833
|
var items = _a.items, activeKey = _a.activeKey, onChange = _a.onChange;
|
|
@@ -17822,14 +17851,14 @@ var Tabs = function (props) {
|
|
|
17822
17851
|
return props.alignment === "vertical" ? (jsx$1(Tabs$1, __assign$2({}, props))) : (jsx$1(Tabs$2, __assign$2({}, props)));
|
|
17823
17852
|
};
|
|
17824
17853
|
|
|
17825
|
-
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"])));
|
|
17826
17855
|
var RadioContainer = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
17827
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"])));
|
|
17828
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) {
|
|
17829
17858
|
var weight = _a.weight;
|
|
17830
17859
|
return weight || 500;
|
|
17831
17860
|
}, theme.colors.darkGray.base);
|
|
17832
|
-
var templateObject_1$
|
|
17861
|
+
var templateObject_1$e, templateObject_2$d, templateObject_3$7, templateObject_4$4;
|
|
17833
17862
|
|
|
17834
17863
|
var RadioGroup = function (props) {
|
|
17835
17864
|
var onChange = function (value) {
|
|
@@ -17846,9 +17875,9 @@ var RadioGroup = function (props) {
|
|
|
17846
17875
|
}) })] }));
|
|
17847
17876
|
};
|
|
17848
17877
|
|
|
17849
|
-
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"])));
|
|
17850
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);
|
|
17851
|
-
var templateObject_1$
|
|
17880
|
+
var templateObject_1$d, templateObject_2$c;
|
|
17852
17881
|
|
|
17853
17882
|
var SelectField = function (props) {
|
|
17854
17883
|
var onChange = function (value) {
|
|
@@ -17865,9 +17894,9 @@ var SelectField = function (props) {
|
|
|
17865
17894
|
}) }))] }));
|
|
17866
17895
|
};
|
|
17867
17896
|
|
|
17868
|
-
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"])));
|
|
17869
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);
|
|
17870
|
-
var templateObject_1$
|
|
17899
|
+
var templateObject_1$c, templateObject_2$b;
|
|
17871
17900
|
|
|
17872
17901
|
var ToggleField = function (props) {
|
|
17873
17902
|
var onChange = function (value) {
|
|
@@ -17881,7 +17910,7 @@ var ToggleField = function (props) {
|
|
|
17881
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 })] }));
|
|
17882
17911
|
};
|
|
17883
17912
|
|
|
17884
|
-
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) {
|
|
17885
17914
|
var isVisible = _a.isVisible;
|
|
17886
17915
|
return (isVisible ? "100%" : "0%");
|
|
17887
17916
|
}, function (_a) {
|
|
@@ -17901,7 +17930,7 @@ var TooltipTitle = styled.div(templateObject_2$a || (templateObject_2$a = __make
|
|
|
17901
17930
|
return theme.colors.lightGray.dark;
|
|
17902
17931
|
}
|
|
17903
17932
|
});
|
|
17904
|
-
var templateObject_1$
|
|
17933
|
+
var templateObject_1$b, templateObject_2$a;
|
|
17905
17934
|
|
|
17906
17935
|
var Tooltip$2 = function (props) {
|
|
17907
17936
|
var tooltipRef = useRef(null);
|
|
@@ -47525,13 +47554,13 @@ var xAxis = {
|
|
|
47525
47554
|
domain: ["dataMin", "dataMax"],
|
|
47526
47555
|
};
|
|
47527
47556
|
|
|
47528
|
-
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);
|
|
47529
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"])));
|
|
47530
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) {
|
|
47531
47560
|
var color = _a.color;
|
|
47532
47561
|
return color;
|
|
47533
47562
|
});
|
|
47534
|
-
var templateObject_1$
|
|
47563
|
+
var templateObject_1$a, templateObject_2$9, templateObject_3$6;
|
|
47535
47564
|
|
|
47536
47565
|
var Tooltip = function (_a) {
|
|
47537
47566
|
var active = _a.active, label = _a.label, payload = _a.payload, locale = _a.locale, period = _a.period, valueFormatter = _a.valueFormatter;
|
|
@@ -47766,29 +47795,6 @@ var Chart = function (_a) {
|
|
|
47766
47795
|
}) }), period)] })), renderChart()] }));
|
|
47767
47796
|
};
|
|
47768
47797
|
|
|
47769
|
-
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) {
|
|
47770
|
-
var disabled = _a.disabled;
|
|
47771
|
-
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
47772
|
-
}, function (_a) {
|
|
47773
|
-
var disabled = _a.disabled;
|
|
47774
|
-
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.darker;
|
|
47775
|
-
}, function (_a) {
|
|
47776
|
-
var disabled = _a.disabled;
|
|
47777
|
-
return (disabled ? "not-allowed" : "pointer");
|
|
47778
|
-
}, theme.fonts.paragraph, theme.paragraph.medium.fontSize, theme.paragraph.medium.lineHeight, function (_a) {
|
|
47779
|
-
var disabled = _a.disabled;
|
|
47780
|
-
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
47781
|
-
}, 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));
|
|
47782
|
-
var templateObject_1$a;
|
|
47783
|
-
|
|
47784
|
-
var Textarea = function (props) {
|
|
47785
|
-
var onChange = function (e) {
|
|
47786
|
-
if (!props.disabled && !!props.onChange)
|
|
47787
|
-
props.onChange(e.target.value);
|
|
47788
|
-
};
|
|
47789
|
-
return jsx$1(StyledTextarea, __assign$2({}, props, { onChange: onChange }));
|
|
47790
|
-
};
|
|
47791
|
-
|
|
47792
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"])));
|
|
47793
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);
|
|
47794
47800
|
var templateObject_1$9, templateObject_2$8;
|
|
@@ -48365,5 +48371,5 @@ var Transfer = function (props) {
|
|
|
48365
48371
|
}) }) }, selectedTargetKeys)] }))] }));
|
|
48366
48372
|
};
|
|
48367
48373
|
|
|
48368
|
-
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 };
|
|
48369
48375
|
//# sourceMappingURL=index.es.js.map
|