@typeolymp/ui-components 1.3.1 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/atoms/Icon/index.d.ts +1 -1
- package/build/components/atoms/Input/Date.d.ts +9 -0
- package/build/components/atoms/Input/index.d.ts +2 -0
- package/build/components/atoms/Input/stories.d.ts +1 -0
- package/build/components/atoms/Input/styles.d.ts +1 -1
- package/build/components/molecules/DateInputField/index.d.ts +13 -0
- package/build/components/molecules/DateInputField/styles.d.ts +2 -0
- package/build/components/molecules/PasswordInputField/index.d.ts +1 -1
- package/build/components/organisms/Form/index.d.ts +5 -1
- package/build/components/organisms/Form/stories.d.ts +1 -0
- package/build/index.d.ts +2 -1
- package/build/index.es.js +103 -57
- package/build/index.es.js.map +1 -1
- package/build/index.js +103 -56
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -198,7 +198,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
198
198
|
return cooked;
|
|
199
199
|
}
|
|
200
200
|
|
|
201
|
-
var StyledButton = styled__default["default"].button(templateObject_1$
|
|
201
|
+
var StyledButton = styled__default["default"].button(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
202
202
|
var fluid = _a.fluid;
|
|
203
203
|
return (fluid ? "100%" : "fit-content");
|
|
204
204
|
}, function (_a) {
|
|
@@ -248,7 +248,7 @@ var StyledButton = styled__default["default"].button(templateObject_1$B || (temp
|
|
|
248
248
|
? theme.button.medium.heightActive
|
|
249
249
|
: theme.button[size].heightActive;
|
|
250
250
|
});
|
|
251
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
251
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 2px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
252
252
|
var size = _a.size;
|
|
253
253
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
254
254
|
});
|
|
@@ -268,7 +268,7 @@ var GhostButton = styled__default["default"](StyledButton)(templateObject_3$6 ||
|
|
|
268
268
|
? theme.button.medium.marginTopActive
|
|
269
269
|
: theme.button[size].marginTopActive;
|
|
270
270
|
});
|
|
271
|
-
var templateObject_1$
|
|
271
|
+
var templateObject_1$C, templateObject_2$k, templateObject_3$6;
|
|
272
272
|
|
|
273
273
|
var Button = function (props) {
|
|
274
274
|
var onClick = function () {
|
|
@@ -285,7 +285,7 @@ var Button = function (props) {
|
|
|
285
285
|
return (jsxRuntime.jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsxRuntime.jsx("span", { children: props.label }, void 0) }), void 0));
|
|
286
286
|
};
|
|
287
287
|
|
|
288
|
-
var StyledCheckbox = styled__default["default"].div(templateObject_1$
|
|
288
|
+
var StyledCheckbox = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
289
289
|
var checked = _a.checked, disabled = _a.disabled;
|
|
290
290
|
if (disabled)
|
|
291
291
|
return theme.colors.lightGray.darker;
|
|
@@ -306,7 +306,7 @@ var StyledCheckbox = styled__default["default"].div(templateObject_1$A || (templ
|
|
|
306
306
|
return theme.colors.green.base;
|
|
307
307
|
return theme.colors.lightGray.darker;
|
|
308
308
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
309
|
-
var templateObject_1$
|
|
309
|
+
var templateObject_1$B;
|
|
310
310
|
|
|
311
311
|
var Checkbox = function (props) {
|
|
312
312
|
var _a;
|
|
@@ -339,7 +339,7 @@ var Checkbox = function (props) {
|
|
|
339
339
|
return (jsxRuntime.jsxs(StyledCheckbox, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: [checked && (jsxRuntime.jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: jsxRuntime.jsx("path", { d: "M12.61.563l-6.585 6.6L3.439 4.57a1.997 1.997 0 00-3.374.885c-.183.7.026 1.446.546 1.949l4 4.008a1.997 1.997 0 002.828 0l8-8.017a2.007 2.007 0 00-.025-2.809 1.997 1.997 0 00-2.803-.024z" }, void 0) }), void 0)), jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0)] }), void 0));
|
|
340
340
|
};
|
|
341
341
|
|
|
342
|
-
var Wrapper$9 = styled__default["default"].div(templateObject_1$
|
|
342
|
+
var Wrapper$9 = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
343
343
|
var size = _a.size;
|
|
344
344
|
switch (size) {
|
|
345
345
|
case "small":
|
|
@@ -362,7 +362,7 @@ var Wrapper$9 = styled__default["default"].div(templateObject_1$z || (templateOb
|
|
|
362
362
|
return "27px";
|
|
363
363
|
}
|
|
364
364
|
});
|
|
365
|
-
var templateObject_1$
|
|
365
|
+
var templateObject_1$A;
|
|
366
366
|
|
|
367
367
|
var flags = {
|
|
368
368
|
"nl-NL": (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsxRuntime.jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsxRuntime.jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsxRuntime.jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -371,7 +371,7 @@ var flags = {
|
|
|
371
371
|
};
|
|
372
372
|
var Flag = function (props) { return (jsxRuntime.jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
373
373
|
|
|
374
|
-
var StyledHeading = styled__default["default"].span(templateObject_1$
|
|
374
|
+
var StyledHeading = styled__default["default"].span(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 700;\n font-style: normal;\n line-height: ", ";\n letter-spacing: ", ";\n margin: 0;\n color: ", ";\n text-align: ", ";\n"])), theme.fonts.heading, function (_a) {
|
|
375
375
|
var type = _a.type;
|
|
376
376
|
return theme.heading[type].fontSize;
|
|
377
377
|
}, function (_a) {
|
|
@@ -395,14 +395,14 @@ var StyledHeading = styled__default["default"].span(templateObject_1$y || (templ
|
|
|
395
395
|
var align = _a.align;
|
|
396
396
|
return align;
|
|
397
397
|
});
|
|
398
|
-
var templateObject_1$
|
|
398
|
+
var templateObject_1$z;
|
|
399
399
|
|
|
400
400
|
var Heading = function (props) {
|
|
401
401
|
var element = !!props.as ? props.as : props.type;
|
|
402
402
|
return (jsxRuntime.jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
403
403
|
};
|
|
404
404
|
|
|
405
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
405
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n\n > svg {\n fill: ", ";\n }\n"])), function (_a) {
|
|
406
406
|
var size = _a.size;
|
|
407
407
|
return theme.icon[size] || theme.icon.medium;
|
|
408
408
|
}, function (_a) {
|
|
@@ -432,7 +432,7 @@ var Wrapper$8 = styled__default["default"].div(templateObject_1$x || (templateOb
|
|
|
432
432
|
return theme.colors.lightGray.light;
|
|
433
433
|
}
|
|
434
434
|
});
|
|
435
|
-
var templateObject_1$
|
|
435
|
+
var templateObject_1$y;
|
|
436
436
|
|
|
437
437
|
var icons = {
|
|
438
438
|
check: (jsxRuntime.jsx("path", { d: "M16.6107 6.5626L10.0247 13.1623L7.43866 10.5709C6.9365 10.0499 6.19289 9.841 5.49363 10.0244C4.79436 10.2078 4.24826 10.7551 4.06523 11.4558C3.8822 12.1565 4.09071 12.9017 4.61063 13.4049L8.61067 17.4132C9.39168 18.1956 10.6577 18.1956 11.4387 17.4132L19.4388 9.3965C20.1967 8.6101 20.1859 7.36009 19.4144 6.58701C18.6429 5.81393 17.3955 5.80307 16.6107 6.5626Z" }, void 0)),
|
|
@@ -452,10 +452,11 @@ var icons = {
|
|
|
452
452
|
setting: (jsxRuntime.jsx("path", { d: "M10.5145 2H13.4674C13.7167 2.00125 13.9575 2.09128 14.1467 2.25398C14.3364 2.41792 14.4643 2.642 14.509 2.88889L14.6811 3.94104C15.0485 4.06092 15.4059 4.20952 15.75 4.38548L16.6558 3.75963C16.8336 3.63488 17.0456 3.56835 17.2626 3.56916H17.3533C17.604 3.58716 17.8394 3.69692 18.0145 3.87755L20.1341 5.97277C20.3138 6.14482 20.4235 6.37749 20.442 6.62583C20.4621 6.87658 20.3949 7.12657 20.2518 7.3333L19.6268 8.24033C19.797 8.5843 19.9453 8.93877 20.0707 9.30156L21.1213 9.48294C21.3663 9.51899 21.5892 9.64511 21.7464 9.8367C21.9102 10.0289 22.0001 10.2733 22 10.526V13.492C22.0001 13.7447 21.9102 13.9891 21.7464 14.1813C21.6107 14.3456 21.4269 14.463 21.221 14.5169H21.1213L20.0707 14.6983C19.9453 15.0611 19.797 15.4156 19.6268 15.7596L20.2428 16.6666C20.3856 16.8706 20.4529 17.1181 20.433 17.3664C20.4132 17.6148 20.3075 17.8485 20.1341 18.0271L18.0326 20.1314C17.8575 20.312 17.6221 20.4218 17.3713 20.4398H17.2808C17.0637 20.4406 16.8517 20.3741 16.6739 20.2493L15.7681 19.6235C15.424 19.7994 15.0666 19.948 14.6993 20.0679L14.5272 21.1201C14.4824 21.367 14.3545 21.591 14.1648 21.755C13.9756 21.9165 13.7341 22.0036 13.4855 21.9999H10.4873C10.2389 22.002 9.99801 21.9151 9.80796 21.755C9.6439 21.6192 9.52665 21.4351 9.47282 21.2289V21.1291L9.30072 20.077C8.93397 19.9554 8.57672 19.8069 8.23188 19.6325L7.32609 20.2584C7.1483 20.3831 6.93631 20.4497 6.71922 20.4489H6.62861C6.37785 20.4309 6.1425 20.3211 5.96739 20.1405L3.86594 18.0362C3.69251 17.8575 3.58674 17.6239 3.5669 17.3755C3.54706 17.1272 3.61439 16.8796 3.75725 16.6756L4.37318 15.7686C4.20296 15.4246 4.05472 15.0702 3.92935 14.7074L2.8786 14.526C2.63444 14.4875 2.41244 14.3619 2.25359 14.1723C2.08979 13.9801 1.99989 13.7356 2 13.4829V10.517C1.99989 10.2643 2.08979 10.0198 2.25359 9.82762C2.38922 9.66333 2.57303 9.54593 2.77897 9.49202H2.8786L3.92935 9.31061C4.05472 8.94782 4.20296 8.59338 4.37318 8.24941L3.75725 7.34238C3.61439 7.13839 3.54706 6.89088 3.5669 6.64252C3.58674 6.39415 3.69251 6.1605 3.86594 5.98185L5.96739 3.87755C6.1425 3.69692 6.37785 3.58716 6.62861 3.56916H6.71922C6.93631 3.56835 7.1483 3.63488 7.32609 3.75963L8.23188 4.38548C8.57672 4.21112 8.93397 4.06257 9.30072 3.94104L9.47282 2.88889C9.51756 2.642 9.6454 2.41792 9.83511 2.25398C10.0243 2.09128 10.2651 2.00125 10.5145 2ZM12.5797 4.1043H11.4202L11.3297 4.08616L11.1938 4.90249C11.1599 5.10978 11.0653 5.30232 10.9221 5.45576C10.7796 5.60618 10.5974 5.7131 10.3968 5.76414C9.75859 5.91381 9.14747 6.16167 8.58516 6.49886C8.42145 6.59897 8.23347 6.65228 8.04165 6.65304C7.83358 6.64211 7.63273 6.57298 7.46192 6.45349L6.78258 5.96369L5.94926 6.80724L6.43837 7.47843C6.55492 7.65022 6.62086 7.85137 6.62861 8.05891C6.63703 8.2664 6.58343 8.47171 6.47464 8.6485C6.13986 9.19635 5.89233 9.79305 5.74094 10.4172C5.6974 10.6211 5.58938 10.8056 5.43295 10.9433C5.28314 11.0865 5.09381 11.1813 4.88949 11.2154L4.06519 11.3605V12.594L4.88949 12.7301C5.09167 12.7651 5.27995 12.8562 5.43295 12.9931C5.58565 13.1338 5.69291 13.317 5.74094 13.5192C5.89041 14.1582 6.13791 14.7702 6.47464 15.3333C6.58727 15.5059 6.64724 15.7076 6.64724 15.9137C6.64724 16.1199 6.58727 16.3216 6.47464 16.4942L5.98547 17.1745L6.81884 18.018L7.49819 17.5282C7.66574 17.409 7.86362 17.3398 8.06885 17.3287C8.26067 17.3295 8.4486 17.3828 8.6123 17.4829C9.17462 17.8201 9.78574 18.0679 10.4239 18.2176C10.6242 18.2695 10.8062 18.3763 10.9493 18.526C11.0881 18.6777 11.1794 18.867 11.2119 19.0702L11.3569 19.8956H12.5344L12.6703 19.0702C12.7063 18.8663 12.8008 18.6772 12.942 18.526C13.0852 18.3763 13.267 18.2695 13.4674 18.2176C14.1055 18.0679 14.7166 17.8201 15.279 17.4829C15.4427 17.3828 15.6306 17.3295 15.8225 17.3287C16.0305 17.3396 16.2313 17.4088 16.4021 17.5282L17.0815 18.009L17.9148 17.1745L17.4257 16.4942C17.3131 16.3216 17.2531 16.1199 17.2531 15.9137C17.2531 15.7076 17.3131 15.5059 17.4257 15.3333C17.7624 14.7702 18.0099 14.1582 18.1594 13.5192C18.2074 13.317 18.3147 13.1338 18.4674 12.9931C18.618 12.8527 18.8074 12.7611 19.0108 12.7301L19.8351 12.594V11.4058L19.0108 11.2698C18.8092 11.233 18.6214 11.142 18.4674 11.0067C18.3147 10.866 18.2074 10.6828 18.1594 10.4807C18.0099 9.84166 17.7624 9.2297 17.4257 8.66663C17.3169 8.48984 17.2633 8.28456 17.2717 8.07707C17.2768 7.87042 17.3466 7.67057 17.471 7.50564L17.9511 6.82537L17.1177 5.98185L16.4384 6.47162C16.2708 6.59082 16.073 6.66001 15.8677 6.67117C15.6759 6.67041 15.488 6.6171 15.3243 6.51699C14.762 6.1798 14.1508 5.93197 13.5127 5.7823C13.3138 5.72702 13.1327 5.62073 12.9873 5.47392C12.8485 5.32214 12.7571 5.13292 12.7246 4.9297L12.5797 4.1043ZM9.67144 8.44754C10.3629 7.98301 11.1764 7.73413 12.009 7.73234C13.1263 7.7324 14.1979 8.17597 14.9891 8.96588C15.7754 9.76053 16.2208 10.8313 16.2301 11.95C16.2301 12.7838 15.9832 13.5989 15.5208 14.2923C15.0584 14.9857 14.4011 15.5262 13.632 15.8457C12.8629 16.1652 12.0165 16.2493 11.1997 16.0873C10.3829 15.9253 9.63237 15.5245 9.04296 14.9355C8.45355 14.3466 8.0517 13.5959 7.88815 12.7784C7.72461 11.9608 7.80676 11.1131 8.12417 10.3422C8.44157 9.57141 8.97998 8.91207 9.67144 8.44754ZM10.6474 13.595C11.0315 13.9099 11.5126 14.0819 12.009 14.0815V14.1359C12.2958 14.1287 12.5782 14.0639 12.8396 13.9455C13.1009 13.8271 13.336 13.6575 13.5308 13.4466C13.8805 13.0939 14.0975 12.6307 14.1446 12.1359C14.1917 11.641 14.0661 11.1451 13.7892 10.7326C13.5122 10.3201 13.1011 10.0164 12.6257 9.87326C12.1503 9.73013 11.6401 9.7564 11.1818 9.94758C10.7236 10.1388 10.3457 10.4831 10.1125 10.9218C9.87927 11.3606 9.80507 11.8668 9.90259 12.3542C10.0001 12.8416 10.2633 13.2801 10.6474 13.595Z" }, void 0)),
|
|
453
453
|
reload: (jsxRuntime.jsx("path", { d: "M20.6354 11.2888C20.4446 11.2757 20.253 11.2998 20.0716 11.3597C19.8903 11.4195 19.7226 11.514 19.5783 11.6377C19.434 11.7614 19.3158 11.9119 19.2306 12.0806C19.1453 12.2493 19.0947 12.4329 19.0815 12.6209C18.9739 14.1387 18.3662 15.5804 17.3506 16.7268C16.335 17.8732 14.9672 18.6615 13.4551 18.9718C11.943 19.2821 10.3695 19.0975 8.97365 18.446C7.57786 17.7945 6.43622 16.7118 5.72234 15.3626C5.00847 14.0133 4.76142 12.4713 5.01877 10.971C5.27612 9.47075 6.02378 8.09431 7.14805 7.05103C8.27233 6.00774 9.71171 5.35469 11.2473 5.19118C12.7829 5.02767 14.3307 5.36264 15.6553 6.14516L15.0687 6.1882C14.8324 6.20792 14.6055 6.28802 14.4104 6.42057C14.2152 6.55313 14.0585 6.73355 13.9558 6.94402C13.853 7.15449 13.8078 7.38773 13.8246 7.62068C13.8414 7.85363 13.9196 8.07824 14.0514 8.27231C14.1758 8.45551 14.3442 8.60561 14.5416 8.70929C14.739 8.81296 14.9594 8.867 15.1831 8.8666H15.2601L19.2729 8.58175C19.4513 8.56929 19.6255 8.52227 19.7855 8.44339C19.9455 8.36452 20.0881 8.25533 20.2052 8.12209C20.3223 7.98884 20.4116 7.83415 20.4679 7.66688C20.5242 7.4996 20.5465 7.32303 20.5335 7.14726L20.2527 3.20036C20.2154 2.85494 20.0436 2.53721 19.7735 2.31395C19.5033 2.0907 19.1558 1.9793 18.8041 2.00318C18.4523 2.02706 18.1236 2.18436 17.8871 2.44201C17.6506 2.69966 17.5247 3.0376 17.5359 3.38479L17.5754 3.9422C15.7452 2.7363 13.5624 2.1585 11.3651 2.29828C9.16781 2.43806 7.07861 3.28763 5.42104 4.71541C3.76347 6.1432 2.63001 8.06953 2.19621 10.1961C1.7624 12.3226 2.05246 14.5308 3.02144 16.4785C3.99043 18.4263 5.58428 20.0049 7.55618 20.9701C9.52807 21.9352 11.768 22.2329 13.929 21.8171C16.09 21.4013 18.0516 20.2953 19.51 18.6702C20.9683 17.0451 21.8421 14.9916 21.9959 12.8278C22.0103 12.6386 21.9865 12.4483 21.9257 12.2682C21.865 12.088 21.7685 11.9216 21.642 11.7784C21.5154 11.6353 21.3613 11.5183 21.1885 11.4342C21.0157 11.3502 20.8277 11.3008 20.6354 11.2888Z" }, void 0)),
|
|
454
454
|
expand: (jsxRuntime.jsx("path", { d: "M13.1519 2.65848C12.2656 2.65848 11.5471 3.37694 11.5471 4.26321C11.5471 5.14947 12.2656 5.86793 13.1519 5.86793L15.8968 5.86793L5.82737 15.9374L5.8678 13.1752C5.88077 12.2891 5.1729 11.5602 4.28672 11.5472C3.40055 11.5342 2.67166 12.2421 2.65869 13.1283L2.56131 19.7822C2.55612 20.1373 2.66667 20.4671 2.85807 20.7358C3.13154 21.2301 3.65827 21.5648 4.26318 21.5648L11.0715 21.5648C11.9577 21.5648 12.6762 20.8463 12.6762 19.9601C12.6762 19.0738 11.9577 18.3553 11.0715 18.3553L8.1374 18.3553L18.3988 8.09397L18.3555 11.048C18.3426 11.9342 19.0504 12.6631 19.9366 12.6761C20.8228 12.689 21.5517 11.9812 21.5646 11.095L21.662 4.44109C21.6672 4.08598 21.5567 3.75612 21.3653 3.48747C21.0918 2.99317 20.5651 2.65848 19.9602 2.65848L13.1519 2.65848Z" }, void 0)),
|
|
455
|
+
calendar: (jsxRuntime.jsx("path", { d: "M21 3h-2V2c0-1.1-.9-2-2-2s-2 .9-2 2v1H9V2c0-1.1-.9-2-2-2S5 .9 5 2v1H3C1.3 3 0 4.3 0 6v14c0 1.7 1.3 3 3 3h18c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3zM3 6h2v1c0 1.1.9 2 2 2s2-.9 2-2V6h6v1c0 1.1.9 2 2 2s2-.9 2-2V6h2v4H3V6zm0 14v-7h18v7H3z" }, void 0)),
|
|
455
456
|
};
|
|
456
|
-
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
457
|
+
var Icon = function (props) { return (jsxRuntime.jsx(Wrapper$8, __assign({}, props, { children: jsxRuntime.jsx("svg", __assign({ viewBox: "0 0 24 24", fill: "none" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
457
458
|
|
|
458
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
459
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
459
460
|
var size = _a.size;
|
|
460
461
|
switch (size) {
|
|
461
462
|
default:
|
|
@@ -467,7 +468,7 @@ var Wrapper$7 = styled__default["default"].div(templateObject_1$w || (templateOb
|
|
|
467
468
|
return "118px";
|
|
468
469
|
}
|
|
469
470
|
});
|
|
470
|
-
var templateObject_1$
|
|
471
|
+
var templateObject_1$x;
|
|
471
472
|
|
|
472
473
|
var illustrations = {
|
|
473
474
|
keyboard: (jsxRuntime.jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [jsxRuntime.jsx("path", { d: "M31.5 1H1.4C.6 1 0 1.6 0 2.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V2.4c0-.8-.6-1.4-1.4-1.4z", fill: "#829190" }, void 0), jsxRuntime.jsx("path", { d: "M31.5 0H1.4C.6 0 0 .6 0 1.4v17.1c0 .8.6 1.4 1.4 1.4h30.1c.8 0 1.4-.6 1.4-1.4V1.4c0-.8-.6-1.4-1.4-1.4z", fill: "#99adac" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 14.2H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.6H2.1c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V9c0-.2-.2-.4-.5-.4zM13.8 8.6h-3.3c-.3 0-.5.2-.5.4v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM5.4 3.3H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM10.5 3.3H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c-.1-.3-.3-.5-.5-.5zM15.5 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM20.6 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM25.7 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM30.8 3.3h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.8c0-.3-.2-.5-.5-.5zM18.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9c-.1-.2-.3-.4-.5-.4zM23.9 8.6h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5zM30.7 8.6h-4.9c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V9.1c0-.3-.2-.5-.5-.5z", fill: "#899a99" }, void 0), jsxRuntime.jsx("path", { d: "M27.1 13.7H5.7c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h21.4c.3 0 .5-.2.5-.5v-3.4c-.1-.3-.3-.5-.5-.5zM8.4 8.1H2.1c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h6.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM13.8 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5z", fill: "#eeeded" }, void 0), jsxRuntime.jsx("path", { d: "M5.4 2.8H2.1c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5z", fill: "#e62944" }, void 0), jsxRuntime.jsx("path", { d: "M10.5 2.8H7.2c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.5-.5zM15.5 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM20.6 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM25.7 2.8h-3.3c-.2 0-.4.2-.4.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c-.1-.3-.3-.5-.6-.5zM30.8 2.8h-3.3c-.3 0-.5.2-.5.5v3.4c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V3.3c0-.3-.2-.5-.5-.5zM18.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c-.1-.3-.3-.5-.5-.5zM23.9 8.1h-3.3c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h3.3c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5zM30.7 8.1h-4.9c-.3 0-.5.2-.5.5V12c0 .3.2.5.5.5h4.9c.3 0 .5-.2.5-.5V8.6c0-.3-.2-.5-.5-.5z", fill: "#eeeded" }, void 0)] }), void 0)),
|
|
@@ -482,11 +483,14 @@ var illustrations = {
|
|
|
482
483
|
};
|
|
483
484
|
var Illustration = function (props) { return (jsxRuntime.jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
484
485
|
|
|
485
|
-
var
|
|
486
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
487
|
+
var disabled = _a.disabled, value = _a.value;
|
|
488
|
+
return disabled && !value ? theme.colors.lightGray.darker : "";
|
|
489
|
+
}, function (_a) {
|
|
486
490
|
var disabled = _a.disabled;
|
|
487
491
|
return (disabled ? "not-allowed" : "pointer");
|
|
488
492
|
});
|
|
489
|
-
var StyledInput = styled__default["default"].input(templateObject_2$
|
|
493
|
+
var StyledInput = styled__default["default"].input(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
490
494
|
var disabled = _a.disabled;
|
|
491
495
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
492
496
|
}, function (_a) {
|
|
@@ -499,7 +503,7 @@ var StyledInput = styled__default["default"].input(templateObject_2$i || (templa
|
|
|
499
503
|
var disabled = _a.disabled;
|
|
500
504
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
501
505
|
}, 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));
|
|
502
|
-
var templateObject_1$
|
|
506
|
+
var templateObject_1$w, templateObject_2$j;
|
|
503
507
|
|
|
504
508
|
var PasswordInput = function (props) {
|
|
505
509
|
var _a = React.useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -520,7 +524,30 @@ var PasswordInput = function (props) {
|
|
|
520
524
|
if (props.onKeyPress)
|
|
521
525
|
props.onKeyPress(e);
|
|
522
526
|
};
|
|
523
|
-
return (jsxRuntime.jsxs(
|
|
527
|
+
return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: isVisible ? "text" : "password" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress }), void 0)] }), void 0));
|
|
528
|
+
};
|
|
529
|
+
|
|
530
|
+
var DateInput = function (props) {
|
|
531
|
+
var inputRef = React.useRef(null);
|
|
532
|
+
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
533
|
+
var showPicker = function () {
|
|
534
|
+
if (!props.disabled) {
|
|
535
|
+
inputRef.current.showPicker();
|
|
536
|
+
}
|
|
537
|
+
};
|
|
538
|
+
var onKeyPress = function (e) {
|
|
539
|
+
if (e.key === "Enter")
|
|
540
|
+
showPicker();
|
|
541
|
+
};
|
|
542
|
+
var onChange = function (e) {
|
|
543
|
+
if (!props.disabled) {
|
|
544
|
+
var value_1 = e.target.value;
|
|
545
|
+
setValue(value_1);
|
|
546
|
+
if (!!props.onChange)
|
|
547
|
+
props.onChange(value_1);
|
|
548
|
+
}
|
|
549
|
+
};
|
|
550
|
+
return (jsxRuntime.jsxs(InputIconWrapper, __assign({ disabled: props.disabled, value: value }, { children: [jsxRuntime.jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }, void 0), jsxRuntime.jsx(StyledInput, __assign({ type: "date" }, props, { value: value, onChange: onChange, onKeyPress: onKeyPress, ref: inputRef }), void 0)] }), void 0));
|
|
524
551
|
};
|
|
525
552
|
|
|
526
553
|
var Input = function (props) {
|
|
@@ -535,11 +562,12 @@ var Input = function (props) {
|
|
|
535
562
|
};
|
|
536
563
|
return (jsxRuntime.jsx(StyledInput, __assign({ type: "text" }, props, { value: value, onChange: onChange }), void 0));
|
|
537
564
|
};
|
|
538
|
-
Input.Password = PasswordInput;
|
|
565
|
+
Input.Password = PasswordInput;
|
|
566
|
+
Input.Date = DateInput;
|
|
539
567
|
|
|
540
568
|
var Logo = function (props) { return (jsxRuntime.jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M17.238 6.583a4.46 4.46 0 00-.372-.433L15.5 4.809l-3.745-3.684c-.36-.357-.79-.64-1.262-.833a3.94 3.94 0 00-4.242.833L1.14 6.15A3.802 3.802 0 00.001 8.857c0 1.016.41 1.99 1.138 2.708l5.11 5.028c.731.718 1.72 1.121 2.753 1.121a3.927 3.927 0 002.752-1.12l3.745-3.685-1.363-1.344a3.465 3.465 0 01-.372-.43l-3.778 3.718a1.39 1.39 0 01-.984.402 1.407 1.407 0 01-.983-.402L2.909 9.825a1.357 1.357 0 01-.406-.966c0-.362.146-.71.406-.966l5.11-5.028a1.39 1.39 0 01.984-.402 1.407 1.407 0 01.984.402l3.778 3.718 1.332 1.31a1.35 1.35 0 01.403.957v.018c.001.36.147.704.406.957l1.332 1.31A3.79 3.79 0 0018 8.86a3.79 3.79 0 00-.762-2.276z", fill: "#F21C40" }, void 0), jsxRuntime.jsx("path", { d: "M42.86 6.15L37.76 1.125c-.361-.357-.79-.64-1.263-.833a3.94 3.94 0 00-2.98 0 3.889 3.889 0 00-1.262.833l-3.748 3.684-1.363 1.34c-.135.136-.26.28-.374.434a3.798 3.798 0 00-.76 2.276c0 .82.266 1.617.76 2.276l1.332-1.31c.258-.255.404-.6.405-.96a1.332 1.332 0 01.406-.96l1.329-1.31 3.782-3.718a1.385 1.385 0 01.982-.402 1.404 1.404 0 01.982.402l5.11 5.028a1.362 1.362 0 01.41.966 1.343 1.343 0 01-.41.966l-5.11 5.028a1.387 1.387 0 01-.982.402 1.406 1.406 0 01-.982-.402l-3.782-3.717a3.467 3.467 0 01-.372.43l-1.363 1.343 3.748 3.684c.361.356.79.638 1.262.83a3.943 3.943 0 004.24-.83l5.11-5.028c.363-.356.65-.78.846-1.245a3.78 3.78 0 00-.004-2.938 3.828 3.828 0 00-.848-1.244z", fill: "#3DC478" }, void 0), jsxRuntime.jsx("path", { d: "M17.309 6.512l-.071.07a4.456 4.456 0 00-.375-.432l-1.366-1.341 3.748-3.684c.36-.357.79-.64 1.262-.833a3.94 3.94 0 012.98 0c.472.193.901.476 1.262.833l3.76 3.675-1.363 1.34c-.134.136-.26.28-.374.433l-3.78-3.717a1.39 1.39 0 00-.983-.402 1.407 1.407 0 00-.983.402l-3.717 3.656zm11.597 1.38l1.329-1.31a3.79 3.79 0 01.764 2.28c0 .82-.268 1.62-.764 2.28a3.467 3.467 0 01-.372.43L28.5 12.914l-3.748 3.684A3.926 3.926 0 0122 17.72a3.926 3.926 0 01-2.752-1.12L15.5 12.896l-1.363-1.344a3.474 3.474 0 01-.372-.43 3.79 3.79 0 01-.762-2.276c0-.82.267-1.618.762-2.277l1.332 1.31a1.348 1.348 0 01.403.958v.018c.001.36.147.703.406.957l1.332 1.31 3.779 3.718a1.389 1.389 0 00.983.402 1.407 1.407 0 00.983-.402l3.78-3.718 1.331-1.31c.259-.255.405-.6.406-.96a1.33 1.33 0 01.406-.96z", fill: "#FFD801" }, void 0), jsxRuntime.jsx("path", { d: "M36.365 21.435l-5.111-5.028a3.926 3.926 0 00-2.753-1.12 3.926 3.926 0 00-2.752 1.12l-3.748 3.687-1.363 1.341c-.134.135-.259.28-.371.433a3.786 3.786 0 00-.762 2.275c0 .819.267 1.616.762 2.275l1.329-1.308c.258-.254.404-.6.405-.96.002-.36.148-.705.406-.96l1.329-1.307 3.782-3.72a1.406 1.406 0 011.967 0l5.11 5.027c.261.258.407.605.407.968s-.146.71-.406.968l-5.111 5.028a1.406 1.406 0 01-1.967 0l-3.782-3.721a3.486 3.486 0 01-.372.433l-1.363 1.34 3.748 3.688c.73.718 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l5.11-5.028c.364-.357.652-.78.849-1.246a3.78 3.78 0 00-.848-4.185z", fill: "#A059C1" }, void 0), jsxRuntime.jsx("path", { d: "M23.736 21.868l-1.329 1.307c-.258.255-.404.6-.405.96-.002.36-.148.705-.406.96l-1.33 1.307-3.781 3.721c-.261.256-.615.4-.984.4-.368 0-.722-.144-.983-.4l-5.111-5.028a1.363 1.363 0 01-.405-.967c0-.363.146-.71.405-.968l5.11-5.028c.262-.256.616-.4.984-.4.369 0 .723.144.984.4l3.782 3.72c.112-.153.237-.297.372-.432l1.363-1.34-3.758-3.673a3.926 3.926 0 00-2.752-1.12 3.926 3.926 0 00-2.752 1.12l-5.11 5.028a3.802 3.802 0 00-1.139 2.708c0 1.015.41 1.989 1.138 2.707l5.11 5.029c.731.717 1.72 1.12 2.753 1.12a3.926 3.926 0 002.752-1.12l3.748-3.688 1.363-1.34c.136-.135.26-.28.372-.433a3.786 3.786 0 00.766-2.274 3.786 3.786 0 00-.757-2.276z", fill: "#1AAFF6" }, void 0)] }, void 0), jsxRuntime.jsx("path", { d: "M137.46 22.78c0 .48-.166.886-.499 1.218-.314.313-.712.47-1.193.47-.462 0-.85-.157-1.165-.47a1.705 1.705 0 01-.471-1.217V5.687c0-.48.157-.876.471-1.19.333-.331.74-.497 1.221-.497.481 0 .869.166 1.165.498.314.313.471.71.471 1.19V22.78zm-6.356-4.12c.462-1.199.693-2.49.693-3.873s-.231-2.674-.693-3.872a9.58 9.58 0 00-1.969-3.153 8.772 8.772 0 00-2.996-2.158c-1.146-.516-2.403-.774-3.772-.774-1.368 0-2.625.258-3.772.774a9.138 9.138 0 00-2.995 2.158 9.835 9.835 0 00-1.942 3.153c-.462 1.199-.693 2.49-.693 3.872 0 1.383.231 2.674.693 3.873a10.17 10.17 0 001.942 3.18 9.332 9.332 0 002.995 2.13c1.147.517 2.404.775 3.772.775 1.369 0 2.626-.259 3.772-.775a8.95 8.95 0 002.996-2.13 9.9 9.9 0 001.969-3.18zm-3.661-7.22c.499.996.749 2.112.749 3.347 0 1.236-.25 2.36-.749 3.375-.499.995-1.184 1.788-2.053 2.378-.869.59-1.876.886-3.023.886-1.146 0-2.154-.295-3.023-.886-.869-.59-1.553-1.383-2.052-2.378-.481-1.014-.721-2.14-.721-3.375 0-1.254.24-2.379.721-3.374.499-.996 1.183-1.789 2.052-2.379.869-.59 1.877-.885 3.023-.885 1.147 0 2.154.295 3.023.885.869.59 1.554 1.392 2.053 2.406zM58.545 23.998c.333.313.759.47 1.276.47.537 0 .971-.157 1.304-.47a1.61 1.61 0 00.527-1.217V8.287h4.354c.481 0 .879-.138 1.193-.415.333-.295.5-.682.5-1.161 0-.48-.167-.867-.5-1.162-.314-.295-.712-.443-1.193-.443H53.692c-.48 0-.888.148-1.22.443-.315.277-.472.655-.472 1.134 0 .48.157.867.471 1.162.333.295.74.442 1.22.442h4.355v14.494c0 .48.167.885.5 1.217zm34.186-13.609c-1.017-.663-2.173-.995-3.467-.995-.647 0-1.267.11-1.858.332a5.83 5.83 0 00-1.526.857 5.266 5.266 0 00-.97.915v-.14c0-.48-.158-.876-.472-1.19-.314-.332-.712-.498-1.193-.498-.48 0-.878.166-1.192.498-.315.314-.472.71-.472 1.19v16.955c0 .498.157.903.472 1.217.314.313.712.47 1.192.47.481 0 .879-.166 1.193-.498.314-.313.471-.71.471-1.19V22.9c.195.191.417.382.666.573.5.37 1.072.673 1.72.913.647.24 1.34.36 2.08.36 1.257 0 2.385-.323 3.383-.968 1.017-.664 1.822-1.568 2.413-2.711.61-1.162.916-2.499.916-4.01 0-1.513-.305-2.84-.916-3.984-.591-1.143-1.405-2.037-2.44-2.683zm-6.019 2.656c.61-.406 1.322-.609 2.136-.609.813 0 1.516.203 2.108.609.61.405 1.081.959 1.414 1.66.352.681.527 1.465.527 2.35 0 .867-.175 1.66-.527 2.379a4.014 4.014 0 01-1.414 1.66c-.592.405-1.295.608-2.108.608-.814 0-1.526-.203-2.136-.608a4.215 4.215 0 01-1.442-1.66c-.333-.72-.5-1.512-.5-2.379 0-.885.167-1.668.5-2.35.351-.701.832-1.255 1.442-1.66zm18.425 11.7c-1.571 0-2.94-.323-4.105-.968a7.012 7.012 0 01-2.662-2.683c-.61-1.125-.916-2.398-.916-3.817 0-1.66.333-3.07.999-4.232.684-1.18 1.572-2.084 2.663-2.711a6.85 6.85 0 013.467-.94c.943 0 1.83.193 2.662.58.851.388 1.6.922 2.247 1.605a7.36 7.36 0 011.525 2.323 6.95 6.95 0 01.583 2.821 1.423 1.423 0 01-.527 1.08 1.77 1.77 0 01-1.165.414h-9.159a4.4 4.4 0 00.505 1.383c.426.682.962 1.208 1.609 1.577.666.35 1.368.525 2.108.525.684 0 1.229-.055 1.636-.166.407-.11.731-.24.971-.387.259-.166.49-.304.693-.415.333-.166.647-.249.943-.249.407 0 .74.138.999.415.277.277.416.6.416.968 0 .498-.259.95-.777 1.355-.481.406-1.155.766-2.024 1.08a8.312 8.312 0 01-2.691.442zm-4.188-9.93a4.807 4.807 0 00-.168.636h7.268v-.194a2.476 2.476 0 00-.582-1.438 3.417 3.417 0 00-1.276-.996 3.448 3.448 0 00-1.608-.387c-.555 0-1.073.074-1.554.221-.48.148-.896.397-1.248.747-.351.35-.628.82-.832 1.41zm65.892-4.343c-.702-.719-1.793-1.078-3.272-1.078-.611 0-1.175.101-1.692.304-.518.184-.99.433-1.415.747a5.722 5.722 0 00-1.081 1.023 7.27 7.27 0 00-.278.348v-.459c0-.479-.157-.875-.471-1.189-.315-.332-.712-.498-1.193-.498-.481 0-.878.166-1.193.498-.314.314-.471.71-.471 1.19V22.78c0 .48.157.885.471 1.217.315.313.712.47 1.193.47.481 0 .878-.157 1.193-.47.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-.608.12-1.152.361-1.632a2.936 2.936 0 011.137-1.19c.499-.294 1.1-.442 1.803-.442.721 0 1.276.148 1.664.443.388.295.656.691.804 1.19.148.478.222 1.022.222 1.631v7.08c0 .48.157.886.472 1.218.314.313.711.47 1.192.47s.878-.157 1.193-.47c.314-.332.471-.738.471-1.217V15.7c0-1.162-.129-2.213-.388-3.153-.259-.96-.74-1.724-1.442-2.296-.684-.572-1.692-.857-3.023-.857-.814 0-1.554.175-2.219.525a5.952 5.952 0 00-1.664 1.245c-.431.447-.758.87-.98 1.269a4.88 4.88 0 00-1.184-1.96zm21.336-1.078c1.294 0 2.45.332 3.467.995 1.035.646 1.849 1.54 2.441 2.683.61 1.144.915 2.471.915 3.983s-.305 2.85-.915 4.011c-.592 1.143-1.396 2.047-2.413 2.71-.999.646-2.127.969-3.384.969-.74 0-1.433-.12-2.08-.36a6.938 6.938 0 01-1.72-.913 7.139 7.139 0 01-.665-.573v5.414c0 .48-.158.876-.472 1.19-.314.331-.712.497-1.192.497-.481 0-.879-.157-1.193-.47-.314-.314-.472-.72-.472-1.217V11.357c0-.479.158-.875.472-1.189.314-.332.712-.498 1.193-.498.48 0 .878.166 1.192.498.314.314.472.71.472 1.19v.14c.249-.312.572-.617.97-.915.444-.35.953-.636 1.526-.857a5.262 5.262 0 011.858-.332zm-.416 3.042c-.813 0-1.525.203-2.136.609-.61.405-1.09.959-1.442 1.66-.333.681-.499 1.465-.499 2.35 0 .867.166 1.66.499 2.379.352.7.832 1.254 1.442 1.66.611.405 1.323.608 2.136.608.814 0 1.516-.203 2.108-.608a4.007 4.007 0 001.414-1.66c.352-.72.527-1.512.527-2.379 0-.885-.175-1.668-.527-2.35a4.007 4.007 0 00-1.414-1.66c-.592-.406-1.294-.609-2.108-.609zM151.357 9.67c.48 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.955-.546 3.504-1.637 4.647-.793.831-1.841 1.36-3.142 1.587v3.798a1.557 1.557 0 01-3.113 0v-3.793c-1.317-.223-2.375-.754-3.175-1.592-1.072-1.143-1.608-2.692-1.608-4.647v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.481 0 .878.166 1.192.498.315.314.472.71.472 1.19v7.025c0 1.125.25 1.964.749 2.517.499.535 1.248.802 2.246.802 1.017 0 1.775-.267 2.275-.802.499-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.314-.332.712-.498 1.193-.498zM70.979 24.63c-1.337-.22-2.41-.753-3.218-1.6-1.073-1.143-1.61-2.692-1.61-4.647v-7.026c0-.479.158-.875.472-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.125.25 1.964.749 2.517.5.535 1.248.802 2.247.802 1.017 0 1.775-.267 2.274-.802.5-.553.749-1.392.749-2.517v-7.026c0-.479.157-.875.471-1.189.315-.332.712-.498 1.193-.498.48 0 .878.166 1.193.498.314.314.471.71.471 1.19v7.025c0 1.955-.546 3.504-1.636 4.647-.785.822-1.818 1.348-3.099 1.58v3.805a1.557 1.557 0 11-3.113 0V24.63z", fill: "#000" }, void 0), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { children: jsxRuntime.jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
541
569
|
|
|
542
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
570
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
543
571
|
var size = _a.size;
|
|
544
572
|
switch (size) {
|
|
545
573
|
default:
|
|
@@ -549,7 +577,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$u || (templateOb
|
|
|
549
577
|
return "116px";
|
|
550
578
|
}
|
|
551
579
|
});
|
|
552
|
-
var templateObject_1$
|
|
580
|
+
var templateObject_1$v;
|
|
553
581
|
|
|
554
582
|
var medals = {
|
|
555
583
|
small: {
|
|
@@ -565,11 +593,11 @@ var medals = {
|
|
|
565
593
|
};
|
|
566
594
|
var Medal = function (props) { return (jsxRuntime.jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
567
595
|
|
|
568
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
596
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"], ["\n width: fit-content;\n display: flex;\n\n button:first-child {\n border-radius: 6px 0 0 6px;\n border-width: 2px 1px 2px 2px;\n }\n\n button:last-child {\n border-radius: 0 6px 6px 0;\n border-width: 2px 2px 2px 1px;\n }\n\n button {\n width: ", ";\n }\n"])), function (_a) {
|
|
569
597
|
var disabled = _a.disabled;
|
|
570
598
|
return (disabled ? "49.5px" : "");
|
|
571
599
|
});
|
|
572
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
600
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
573
601
|
var disabled = _a.disabled;
|
|
574
602
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
575
603
|
}, function (_a) {
|
|
@@ -582,7 +610,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$h || (
|
|
|
582
610
|
var disabled = _a.disabled;
|
|
583
611
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
584
612
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
585
|
-
var templateObject_1$
|
|
613
|
+
var templateObject_1$u, templateObject_2$i;
|
|
586
614
|
|
|
587
615
|
var Number = function (props) {
|
|
588
616
|
var ref = React.useRef(null);
|
|
@@ -624,7 +652,7 @@ var Number = function (props) {
|
|
|
624
652
|
return (jsxRuntime.jsxs(Wrapper$5, __assign({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Button, { label: "-", disabled: props.disabled, onClick: decrease, tabIndex: -1, type: "button" }, void 0), jsxRuntime.jsx(StyledInputNumber, __assign({ type: "number" }, props, { value: isNaN(value) ? "" : value, onChange: onChange, onBlur: props.onBlur, ref: ref }), void 0), jsxRuntime.jsx(Button, { label: "+", disabled: props.disabled, onClick: increase, tabIndex: -1, type: "button" }, void 0)] }), void 0));
|
|
625
653
|
};
|
|
626
654
|
|
|
627
|
-
var StyledParagraph = styled__default["default"].p(templateObject_1$
|
|
655
|
+
var StyledParagraph = styled__default["default"].p(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: normal;\n line-height: ", ";\n color: ", ";\n margin: 0;\n text-align: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
628
656
|
var size = _a.size;
|
|
629
657
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
630
658
|
}, function (_a) {
|
|
@@ -656,11 +684,11 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$s || (templa
|
|
|
656
684
|
var align = _a.align;
|
|
657
685
|
return align;
|
|
658
686
|
});
|
|
659
|
-
var templateObject_1$
|
|
687
|
+
var templateObject_1$t;
|
|
660
688
|
|
|
661
689
|
var Paragraph = function (props) { return (jsxRuntime.jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
662
690
|
|
|
663
|
-
var StyledRadio = styled__default["default"].div(templateObject_1$
|
|
691
|
+
var StyledRadio = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n height: 25px;\n width: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 14px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n cursor: ", ";\n background-color: ", ";\n\n svg {\n margin-left: -1px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n\n :after {\n content: \"\";\n width: 15px;\n height: 15px;\n border-radius: 50%;\n background-color: ", ";\n position: absolute;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
664
692
|
var checked = _a.checked, disabled = _a.disabled;
|
|
665
693
|
if (disabled)
|
|
666
694
|
return theme.colors.lightGray.darker;
|
|
@@ -688,7 +716,7 @@ var StyledRadio = styled__default["default"].div(templateObject_1$r || (template
|
|
|
688
716
|
return theme.colors.green.base;
|
|
689
717
|
return "";
|
|
690
718
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
691
|
-
var templateObject_1$
|
|
719
|
+
var templateObject_1$s;
|
|
692
720
|
|
|
693
721
|
var Radio = function (props) {
|
|
694
722
|
var _a;
|
|
@@ -717,11 +745,11 @@ var Radio = function (props) {
|
|
|
717
745
|
return (jsxRuntime.jsx(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: wrapperRef }, { children: jsxRuntime.jsx("input", { type: "radio", disabled: !!props.disabled, id: props.id, name: props.name, value: props.value, ref: inputRef }, void 0) }), void 0));
|
|
718
746
|
};
|
|
719
747
|
|
|
720
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
748
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n\n div {\n pointer-events: none;\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
721
749
|
var disabled = _a.disabled;
|
|
722
750
|
return (disabled ? "not-allowed" : "pointer");
|
|
723
751
|
});
|
|
724
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
752
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
725
753
|
var disabled = _a.disabled;
|
|
726
754
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
727
755
|
}, function (_a) {
|
|
@@ -734,7 +762,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$g || (temp
|
|
|
734
762
|
var isChanged = _a.isChanged;
|
|
735
763
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
736
764
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
737
|
-
var templateObject_1$
|
|
765
|
+
var templateObject_1$r, templateObject_2$h;
|
|
738
766
|
|
|
739
767
|
var Select = function (props) {
|
|
740
768
|
var _a = React.useState(props.initialValue || ""), value = _a[0], setValue = _a[1];
|
|
@@ -751,18 +779,18 @@ var Select = function (props) {
|
|
|
751
779
|
return (jsxRuntime.jsxs(Wrapper$4, { children: [jsxRuntime.jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxRuntime.jsxs(StyledSelect, __assign({}, props, { value: value, onChange: onChange, isChanged: isChanged || props.initialValue }, { children: [props.placeholder && jsxRuntime.jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
752
780
|
};
|
|
753
781
|
|
|
754
|
-
var StyledSpacer = styled__default["default"].div(templateObject_1$
|
|
782
|
+
var StyledSpacer = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
755
783
|
var horizontal = _a.horizontal;
|
|
756
784
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
757
785
|
}, function (_a) {
|
|
758
786
|
var vertical = _a.vertical;
|
|
759
787
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
760
788
|
});
|
|
761
|
-
var templateObject_1$
|
|
789
|
+
var templateObject_1$q;
|
|
762
790
|
|
|
763
791
|
var Spacer = function (props) { return (jsxRuntime.jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
764
792
|
|
|
765
|
-
var StyledSubheading = styled__default["default"].p(templateObject_1$
|
|
793
|
+
var StyledSubheading = styled__default["default"].p(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"], ["\n font-family: ", ";\n font-style: normal;\n font-size: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin: 0;\n color: ", ";\n"])), theme.fonts.paragraph, function (_a) {
|
|
766
794
|
var size = _a.size;
|
|
767
795
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
768
796
|
}, function (_a) {
|
|
@@ -790,11 +818,11 @@ var StyledSubheading = styled__default["default"].p(templateObject_1$o || (templ
|
|
|
790
818
|
return theme.colors.darkGray.dark;
|
|
791
819
|
}
|
|
792
820
|
});
|
|
793
|
-
var templateObject_1$
|
|
821
|
+
var templateObject_1$p;
|
|
794
822
|
|
|
795
823
|
var Subheading = function (props) { return (jsxRuntime.jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
796
824
|
|
|
797
|
-
var Container$
|
|
825
|
+
var Container$a = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 46px;\n height: 27px;\n border-radius: 14px;\n cursor: ", ";\n position: relative;\n background-color: ", ";\n\n :after {\n content: \"\";\n width: 21px;\n height: 21px;\n border-radius: 50%;\n position: absolute;\n top: 3px;\n right: ", ";\n left: ", ";\n background-color: ", ";\n }\n\n input {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
798
826
|
var disabled = _a.disabled;
|
|
799
827
|
return (disabled ? "not-allowed" : "pointer");
|
|
800
828
|
}, function (_a) {
|
|
@@ -812,7 +840,7 @@ var Container$9 = styled__default["default"].div(templateObject_1$n || (template
|
|
|
812
840
|
var disabled = _a.disabled;
|
|
813
841
|
return disabled ? theme.colors.lightGray.darker : theme.colors.lightGray.light;
|
|
814
842
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
815
|
-
var templateObject_1$
|
|
843
|
+
var templateObject_1$o;
|
|
816
844
|
|
|
817
845
|
var Toggle = function (props) {
|
|
818
846
|
var _a;
|
|
@@ -840,10 +868,10 @@ var Toggle = function (props) {
|
|
|
840
868
|
props.onChange(newValue);
|
|
841
869
|
}
|
|
842
870
|
};
|
|
843
|
-
return (jsxRuntime.jsx(Container$
|
|
871
|
+
return (jsxRuntime.jsx(Container$a, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: containerRef }, { children: jsxRuntime.jsx("input", { type: "checkbox", disabled: !!props.disabled, id: props.id, name: props.name, ref: inputRef }, void 0) }), void 0));
|
|
844
872
|
};
|
|
845
873
|
|
|
846
|
-
var Wrapper$3 = styled__default["default"].div(templateObject_1$
|
|
874
|
+
var Wrapper$3 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"], ["\n display: flex;\n align-items: flex-end;\n\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
847
875
|
var level = _a.level;
|
|
848
876
|
switch (level) {
|
|
849
877
|
case 1:
|
|
@@ -854,7 +882,7 @@ var Wrapper$3 = styled__default["default"].div(templateObject_1$m || (templateOb
|
|
|
854
882
|
return "70px";
|
|
855
883
|
}
|
|
856
884
|
});
|
|
857
|
-
var templateObject_1$
|
|
885
|
+
var templateObject_1$n;
|
|
858
886
|
|
|
859
887
|
var trophies = {
|
|
860
888
|
1: {
|
|
@@ -890,7 +918,7 @@ var trophies = {
|
|
|
890
918
|
};
|
|
891
919
|
var Trophy = function (props) { return (jsxRuntime.jsx(Wrapper$3, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
892
920
|
|
|
893
|
-
var Container$
|
|
921
|
+
var Container$9 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"], ["\n min-height: 44px;\n padding: 10px;\n background-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n display: flex;\n align-items: center;\n\n > div:first-child {\n min-width: 24px;\n min-height: 24px;\n }\n\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
894
922
|
var type = _a.type;
|
|
895
923
|
switch (type) {
|
|
896
924
|
case "success":
|
|
@@ -907,11 +935,11 @@ var Container$8 = styled__default["default"].div(templateObject_1$l || (template
|
|
|
907
935
|
return theme.colors.red.base;
|
|
908
936
|
}
|
|
909
937
|
});
|
|
910
|
-
var templateObject_1$
|
|
938
|
+
var templateObject_1$m;
|
|
911
939
|
|
|
912
|
-
var Alert = function (props) { return (jsxRuntime.jsxs(Container$
|
|
940
|
+
var Alert = function (props) { return (jsxRuntime.jsxs(Container$9, __assign({}, props, { children: [jsxRuntime.jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsxRuntime.jsx(Spacer, { horizontal: 10 }, void 0), jsxRuntime.jsx(Paragraph, { children: props.message }, void 0)] }), void 0)); };
|
|
913
941
|
|
|
914
|
-
var StyledCard = styled__default["default"].div(templateObject_1$
|
|
942
|
+
var StyledCard = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"], ["\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n\n ", "\n"])), theme.colors.lightGray.light, function (_a) {
|
|
915
943
|
var ellipse = _a.ellipse;
|
|
916
944
|
return ellipse
|
|
917
945
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -920,23 +948,23 @@ var StyledCard = styled__default["default"].div(templateObject_1$k || (templateO
|
|
|
920
948
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
921
949
|
: "";
|
|
922
950
|
});
|
|
923
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
951
|
+
var Ellipse = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
924
952
|
var color = _a.color;
|
|
925
953
|
return color ? theme.colors[color].light : "";
|
|
926
954
|
});
|
|
927
955
|
var Content = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
928
|
-
var templateObject_1$
|
|
956
|
+
var templateObject_1$l, templateObject_2$g, templateObject_3$5;
|
|
929
957
|
|
|
930
958
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }, void 0), jsxRuntime.jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
931
959
|
|
|
932
|
-
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$
|
|
933
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
960
|
+
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
961
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
934
962
|
var CheckboxWrapper = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
935
|
-
var Label$
|
|
963
|
+
var Label$7 = styled__default["default"](StyledParagraph)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n align-items: center;\n cursor: pointer;\n"])), function (_a) {
|
|
936
964
|
var weight = _a.weight;
|
|
937
965
|
return weight || 500;
|
|
938
966
|
}, theme.colors.darkGray.base);
|
|
939
|
-
var templateObject_1$
|
|
967
|
+
var templateObject_1$k, templateObject_2$f, templateObject_3$4, templateObject_4$3;
|
|
940
968
|
|
|
941
969
|
var Checkboxes = function (props) {
|
|
942
970
|
var _a = React.useState(props.initialValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -953,12 +981,28 @@ var Checkboxes = function (props) {
|
|
|
953
981
|
if (props.onBlur)
|
|
954
982
|
props.onBlur(props.name);
|
|
955
983
|
};
|
|
956
|
-
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$
|
|
984
|
+
return (jsxRuntime.jsxs(Fieldset$1, { children: [props.legend && jsxRuntime.jsx(Label$7, __assign({ as: "legend" }, { children: props.legend }), void 0), jsxRuntime.jsx(CheckboxContainer, { children: props.items.map(function (_a, index) {
|
|
957
985
|
var id = _a.id, value = _a.value, label = _a.label;
|
|
958
|
-
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$
|
|
986
|
+
return (jsxRuntime.jsxs(CheckboxWrapper, { children: [jsxRuntime.jsx(Checkbox, { id: id, name: props.name, value: value, checked: values.includes(value), autoFocus: props.autoFocus && index === 0, onChange: function () { return onChange(value); }, onBlur: onBlur }, void 0), jsxRuntime.jsx(Label$7, __assign({ as: "label", htmlFor: id, weight: 400 }, { children: label }), void 0)] }, id));
|
|
959
987
|
}) }, void 0)] }, void 0));
|
|
960
988
|
};
|
|
961
989
|
|
|
990
|
+
var Container$8 = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
991
|
+
var Label$6 = styled__default["default"](StyledParagraph)(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
992
|
+
var templateObject_1$j, templateObject_2$e;
|
|
993
|
+
|
|
994
|
+
var DateInputField = function (props) {
|
|
995
|
+
var onChange = function (value) {
|
|
996
|
+
if (props.onChange)
|
|
997
|
+
props.onChange(props.name, value);
|
|
998
|
+
};
|
|
999
|
+
var onBlur = function () {
|
|
1000
|
+
if (props.onBlur)
|
|
1001
|
+
props.onBlur(props.name);
|
|
1002
|
+
};
|
|
1003
|
+
return (jsxRuntime.jsxs(Container$8, { children: [jsxRuntime.jsx(Label$6, __assign({ as: "label", htmlFor: props.name }, { children: props.label }), void 0), jsxRuntime.jsx(Spacer, { vertical: 5 }, void 0), jsxRuntime.jsx(Input.Date, { initialValue: props.initialValue, autocomplete: props.autocomplete, autoFocus: props.autoFocus, disabled: props.disabled, id: props.name, onChange: onChange, onBlur: onBlur }, void 0)] }, void 0));
|
|
1004
|
+
};
|
|
1005
|
+
|
|
962
1006
|
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: 38px;\n max-height: 38px;\n margin-top: 2px;\n }\n"])));
|
|
963
1007
|
var GhostIconButton = styled__default["default"](GhostButton)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"], ["\n min-width: 40px;\n max-width: 40px;\n min-height: 40px;\n max-height: 40px;\n padding: 2px 0 0 0;\n\n :active {\n min-height: 40px;\n max-height: 40px;\n margin-top: 2px;\n }\n"])));
|
|
964
1008
|
var templateObject_1$i, templateObject_2$d;
|
|
@@ -1056,8 +1100,8 @@ var PasswordInputField = function (props) {
|
|
|
1056
1100
|
props.onChange(props.name, value);
|
|
1057
1101
|
};
|
|
1058
1102
|
var onKeyPress = function (e) {
|
|
1059
|
-
if (e.key === "Enter" && props.
|
|
1060
|
-
props.
|
|
1103
|
+
if (e.key === "Enter" && props.onKeyPress) {
|
|
1104
|
+
props.onKeyPress(e);
|
|
1061
1105
|
}
|
|
1062
1106
|
};
|
|
1063
1107
|
var onBlur = function () {
|
|
@@ -1320,7 +1364,6 @@ var Form = function (props) {
|
|
|
1320
1364
|
}
|
|
1321
1365
|
};
|
|
1322
1366
|
var onSubmit = function () {
|
|
1323
|
-
console.log("submit");
|
|
1324
1367
|
var isValid = true;
|
|
1325
1368
|
var feedback = {};
|
|
1326
1369
|
for (var _i = 0, _a = props.fields; _i < _a.length; _i++) {
|
|
@@ -1346,7 +1389,10 @@ var Form = function (props) {
|
|
|
1346
1389
|
jsxRuntime.jsx(InputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1347
1390
|
case "password":
|
|
1348
1391
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1349
|
-
jsxRuntime.jsx(PasswordInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField,
|
|
1392
|
+
jsxRuntime.jsx(PasswordInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField, onKeyPress: field.submitOnEnter && onSubmit }), void 0)));
|
|
1393
|
+
case "date":
|
|
1394
|
+
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1395
|
+
jsxRuntime.jsx(DateInputField, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
1350
1396
|
case "radio":
|
|
1351
1397
|
return (React.createElement(WithValidation, __assign({}, feedback[field.name], { key: "field-".concat(index) }),
|
|
1352
1398
|
jsxRuntime.jsx(RadioGroup, __assign({}, field, { onChange: onChangeFormField, onBlur: onBlurFormField }), void 0)));
|
|
@@ -1445,6 +1491,7 @@ exports.Button = Button;
|
|
|
1445
1491
|
exports.Card = Card;
|
|
1446
1492
|
exports.Checkbox = Checkbox;
|
|
1447
1493
|
exports.Checkboxes = Checkboxes;
|
|
1494
|
+
exports.DateInputField = DateInputField;
|
|
1448
1495
|
exports.Flag = Flag;
|
|
1449
1496
|
exports.Form = Form;
|
|
1450
1497
|
exports.Heading = Heading;
|