@typeolymp/ui-components 1.0.0 → 1.0.1
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/Flag/index.d.ts +2 -1
- package/build/components/molecules/Alert/index.d.ts +7 -0
- package/build/components/molecules/Alert/stories.d.ts +8 -0
- package/build/components/molecules/Alert/styles.d.ts +1 -0
- package/build/components/molecules/Loading/index.d.ts +9 -0
- package/build/components/molecules/Loading/stories.d.ts +25 -0
- package/build/components/molecules/Loading/styles.d.ts +1 -0
- package/build/index.d.ts +3 -1
- package/build/index.es.js +71 -39
- package/build/index.es.js.map +1 -1
- package/build/index.js +72 -38
- package/build/index.js.map +1 -1
- package/build/lib/types.d.ts +1 -0
- package/package.json +2 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Container: any;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { PropsType } from ".";
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: React.FC<PropsType>;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
8
|
+
export declare const Overview: () => JSX.Element;
|
|
9
|
+
export declare const Playground: {
|
|
10
|
+
(args: any): JSX.Element;
|
|
11
|
+
args: {
|
|
12
|
+
color: string;
|
|
13
|
+
text: string;
|
|
14
|
+
textColor: string;
|
|
15
|
+
} | {
|
|
16
|
+
color: {
|
|
17
|
+
options: string[];
|
|
18
|
+
control: {
|
|
19
|
+
type: string;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
text?: undefined;
|
|
23
|
+
textColor?: undefined;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Container: any;
|
package/build/index.d.ts
CHANGED
|
@@ -14,10 +14,12 @@ import Select from "./components/atoms/Select";
|
|
|
14
14
|
import Spacer from "./components/atoms/Spacer";
|
|
15
15
|
import Subheading from "./components/atoms/Subheading";
|
|
16
16
|
import Trophy from "./components/atoms/Trophy";
|
|
17
|
+
import Alert from "./components/molecules/Alert";
|
|
17
18
|
import Card from "./components/molecules/Card";
|
|
18
19
|
import FormField from "./components/molecules/FormField";
|
|
19
20
|
import IconButton from "./components/molecules/IconButton";
|
|
20
21
|
import Link from "./components/molecules/Link";
|
|
22
|
+
import Loading from "./components/molecules/Loading";
|
|
21
23
|
import Medals from "./components/molecules/Medals";
|
|
22
24
|
import Notification from "./components/molecules/Notification";
|
|
23
25
|
import Popup from "./components/molecules/Popup";
|
|
@@ -26,4 +28,4 @@ import Tooltip from "./components/molecules/Tooltip";
|
|
|
26
28
|
import Form from "./components/organisms/Form";
|
|
27
29
|
import Keyboard from "./components/organisms/Keyboard";
|
|
28
30
|
import Modal from "./components/organisms/Modal";
|
|
29
|
-
export { theme, Button, Checkbox, Flag, Heading, Icon, Illustration, Input, Logo, Medal, Paragraph, Radio, Select, Spacer, Subheading, Trophy, Card, FormField, IconButton, Link, Medals, Notification, Popup, ProgressBar, Tooltip, Form, Keyboard, Modal, };
|
|
31
|
+
export { theme, Button, Checkbox, Flag, Heading, Icon, Illustration, Input, Logo, Medal, Paragraph, Radio, Select, Spacer, Subheading, Trophy, Alert, Card, FormField, IconButton, Link, Loading, Medals, Notification, Popup, ProgressBar, Tooltip, Form, Keyboard, Modal, };
|
package/build/index.es.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
import React, { useRef, useState, useEffect, createElement } from 'react';
|
|
4
|
+
import { ImpulseSpinner } from 'react-spinners-kit';
|
|
4
5
|
|
|
5
6
|
var theme = {
|
|
6
7
|
colors: {
|
|
@@ -177,7 +178,7 @@ function __makeTemplateObject(cooked, raw) {
|
|
|
177
178
|
return cooked;
|
|
178
179
|
}
|
|
179
180
|
|
|
180
|
-
var StyledButton = styled.button(templateObject_1$
|
|
181
|
+
var StyledButton = styled.button(templateObject_1$t || (templateObject_1$t = __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) {
|
|
181
182
|
var fluid = _a.fluid;
|
|
182
183
|
return (fluid ? "100%" : "fit-content");
|
|
183
184
|
}, function (_a) {
|
|
@@ -247,7 +248,7 @@ var GhostButton = styled(StyledButton)(templateObject_3$5 || (templateObject_3$5
|
|
|
247
248
|
? theme.button.medium.marginTopActive
|
|
248
249
|
: theme.button[size].marginTopActive;
|
|
249
250
|
});
|
|
250
|
-
var templateObject_1$
|
|
251
|
+
var templateObject_1$t, templateObject_2$d, templateObject_3$5;
|
|
251
252
|
|
|
252
253
|
var Button = function (props) {
|
|
253
254
|
var onClick = function () {
|
|
@@ -264,7 +265,7 @@ var Button = function (props) {
|
|
|
264
265
|
return (jsx(StyledButton, __assign({}, props, { onClick: onClick }, { children: jsx("span", { children: props.label }, void 0) }), void 0));
|
|
265
266
|
};
|
|
266
267
|
|
|
267
|
-
var StyledCheckbox = styled.div(templateObject_1$
|
|
268
|
+
var StyledCheckbox = styled.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: 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) {
|
|
268
269
|
var checked = _a.checked, disabled = _a.disabled;
|
|
269
270
|
if (disabled)
|
|
270
271
|
return theme.colors.lightGray.darker;
|
|
@@ -285,7 +286,7 @@ var StyledCheckbox = styled.div(templateObject_1$q || (templateObject_1$q = __ma
|
|
|
285
286
|
return theme.colors.green.base;
|
|
286
287
|
return theme.colors.lightGray.darker;
|
|
287
288
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
288
|
-
var templateObject_1$
|
|
289
|
+
var templateObject_1$s;
|
|
289
290
|
|
|
290
291
|
var Checkbox = function (props) {
|
|
291
292
|
var ref = useRef(null);
|
|
@@ -307,7 +308,7 @@ var Checkbox = function (props) {
|
|
|
307
308
|
return (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: ref }, { children: [checked && (jsx("svg", __assign({ width: 16, height: 12, viewBox: "0 0 16 12", fill: "none" }, { children: 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)), jsx("input", { type: "checkbox", checked: checked, onChange: toggle, disabled: !!props.disabled, id: props.id }, void 0)] }), void 0));
|
|
308
309
|
};
|
|
309
310
|
|
|
310
|
-
var Wrapper$9 = styled.div(templateObject_1$
|
|
311
|
+
var Wrapper$9 = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
311
312
|
var size = _a.size;
|
|
312
313
|
switch (size) {
|
|
313
314
|
case "small":
|
|
@@ -330,7 +331,7 @@ var Wrapper$9 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTem
|
|
|
330
331
|
return "27px";
|
|
331
332
|
}
|
|
332
333
|
});
|
|
333
|
-
var templateObject_1$
|
|
334
|
+
var templateObject_1$r;
|
|
334
335
|
|
|
335
336
|
var flags = {
|
|
336
337
|
"nl-NL": (jsxs("svg", __assign({ viewBox: "0 0 22 18", xmlSpace: "preserve" }, { children: [jsx("path", { d: "M0 1c0-.6.4-1 1-1h20c.6 0 1 .4 1 1v5H0V1z", fill: "#e62743" }, void 0), jsx("path", { fill: "#fff", d: "M0 6H22V12H0z" }, void 0), jsx("path", { d: "M0 12h22v5c0 .6-.4 1-1 1H1c-.6 0-1-.4-1-1v-5z", fill: "#148cc6" }, void 0)] }), void 0)),
|
|
@@ -338,7 +339,7 @@ var flags = {
|
|
|
338
339
|
};
|
|
339
340
|
var Flag = function (props) { return (jsx(Wrapper$9, __assign({}, props, { children: flags[props.locale] }), void 0)); };
|
|
340
341
|
|
|
341
|
-
var StyledHeading = styled.span(templateObject_1$
|
|
342
|
+
var StyledHeading = styled.span(templateObject_1$q || (templateObject_1$q = __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) {
|
|
342
343
|
var type = _a.type;
|
|
343
344
|
return theme.heading[type].fontSize;
|
|
344
345
|
}, function (_a) {
|
|
@@ -362,14 +363,14 @@ var StyledHeading = styled.span(templateObject_1$o || (templateObject_1$o = __ma
|
|
|
362
363
|
var align = _a.align;
|
|
363
364
|
return align;
|
|
364
365
|
});
|
|
365
|
-
var templateObject_1$
|
|
366
|
+
var templateObject_1$q;
|
|
366
367
|
|
|
367
368
|
var Heading = function (props) {
|
|
368
369
|
var element = !!props.as ? props.as : props.type;
|
|
369
370
|
return (jsx(StyledHeading, __assign({}, props, { as: element }, { children: props.children }), void 0));
|
|
370
371
|
};
|
|
371
372
|
|
|
372
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
373
|
+
var Wrapper$8 = styled.div(templateObject_1$p || (templateObject_1$p = __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) {
|
|
373
374
|
var size = _a.size;
|
|
374
375
|
return theme.icon[size] || theme.icon.medium;
|
|
375
376
|
}, function (_a) {
|
|
@@ -397,7 +398,7 @@ var Wrapper$8 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTem
|
|
|
397
398
|
return theme.colors.lightGray.light;
|
|
398
399
|
}
|
|
399
400
|
});
|
|
400
|
-
var templateObject_1$
|
|
401
|
+
var templateObject_1$p;
|
|
401
402
|
|
|
402
403
|
var icons = {
|
|
403
404
|
check: (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)),
|
|
@@ -420,7 +421,7 @@ var icons = {
|
|
|
420
421
|
};
|
|
421
422
|
var Icon = function (props) { return (jsx(Wrapper$8, __assign({}, props, { children: jsx("svg", __assign({ viewBox: "0 0 24 24" }, { children: icons[props.type] }), void 0) }), void 0)); };
|
|
422
423
|
|
|
423
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
424
|
+
var Wrapper$7 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n > svg {\n height: ", ";\n }\n"], ["\n > svg {\n height: ", ";\n }\n"])), function (_a) {
|
|
424
425
|
var size = _a.size;
|
|
425
426
|
switch (size) {
|
|
426
427
|
default:
|
|
@@ -432,7 +433,7 @@ var Wrapper$7 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTem
|
|
|
432
433
|
return "118px";
|
|
433
434
|
}
|
|
434
435
|
});
|
|
435
|
-
var templateObject_1$
|
|
436
|
+
var templateObject_1$o;
|
|
436
437
|
|
|
437
438
|
var illustrations = {
|
|
438
439
|
keyboard: (jsxs("svg", __assign({ viewBox: "0 0 32.9 20.8" }, { children: [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), 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), 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), 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), 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), 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)),
|
|
@@ -447,7 +448,7 @@ var illustrations = {
|
|
|
447
448
|
};
|
|
448
449
|
var Illustration = function (props) { return (jsx(Wrapper$7, __assign({}, props, { children: illustrations[props.type] }), void 0)); };
|
|
449
450
|
|
|
450
|
-
var PasswordInputWrapper = styled.div(templateObject_1$
|
|
451
|
+
var PasswordInputWrapper = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\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 div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
451
452
|
var disabled = _a.disabled;
|
|
452
453
|
return (disabled ? "not-allowed" : "pointer");
|
|
453
454
|
});
|
|
@@ -464,7 +465,7 @@ var StyledInput = styled.input(templateObject_2$c || (templateObject_2$c = __mak
|
|
|
464
465
|
var disabled = _a.disabled;
|
|
465
466
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
466
467
|
}, 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));
|
|
467
|
-
var templateObject_1$
|
|
468
|
+
var templateObject_1$n, templateObject_2$c;
|
|
468
469
|
|
|
469
470
|
var PasswordInput = function (props) {
|
|
470
471
|
var _a = useState(false), isVisible = _a[0], setIsVisible = _a[1];
|
|
@@ -500,7 +501,7 @@ Input.Password = PasswordInput;
|
|
|
500
501
|
|
|
501
502
|
var Logo = function (props) { return (jsxs("svg", __assign({ width: 396, height: 66, viewBox: "0 0 196 33", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [jsxs("g", { children: [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), 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), 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), 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), 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), 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), jsx("defs", { children: jsx("clipPath", { children: jsx("path", { fill: "#fff", d: "M0 0H44V33H0z" }, void 0) }, void 0) }, void 0)] }), void 0)); };
|
|
502
503
|
|
|
503
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
504
|
+
var Wrapper$6 = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n width: ", ";\n"], ["\n width: ", ";\n"])), function (_a) {
|
|
504
505
|
var size = _a.size;
|
|
505
506
|
switch (size) {
|
|
506
507
|
default:
|
|
@@ -510,7 +511,7 @@ var Wrapper$6 = styled.div(templateObject_1$k || (templateObject_1$k = __makeTem
|
|
|
510
511
|
return "116px";
|
|
511
512
|
}
|
|
512
513
|
});
|
|
513
|
-
var templateObject_1$
|
|
514
|
+
var templateObject_1$m;
|
|
514
515
|
|
|
515
516
|
var medals = {
|
|
516
517
|
small: {
|
|
@@ -526,7 +527,7 @@ var medals = {
|
|
|
526
527
|
};
|
|
527
528
|
var Medal = function (props) { return (jsx(Wrapper$6, __assign({}, props, { children: medals[props.size || "small"][props.type] }), void 0)); };
|
|
528
529
|
|
|
529
|
-
var StyledParagraph = styled.p(templateObject_1$
|
|
530
|
+
var StyledParagraph = styled.p(templateObject_1$l || (templateObject_1$l = __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) {
|
|
530
531
|
var size = _a.size;
|
|
531
532
|
return size ? theme.paragraph[size].fontSize : theme.paragraph.medium.fontSize;
|
|
532
533
|
}, function (_a) {
|
|
@@ -558,11 +559,11 @@ var StyledParagraph = styled.p(templateObject_1$j || (templateObject_1$j = __mak
|
|
|
558
559
|
var align = _a.align;
|
|
559
560
|
return align;
|
|
560
561
|
});
|
|
561
|
-
var templateObject_1$
|
|
562
|
+
var templateObject_1$l;
|
|
562
563
|
|
|
563
564
|
var Paragraph = function (props) { return (jsx(StyledParagraph, __assign({}, props, { children: props.children }), void 0)); };
|
|
564
565
|
|
|
565
|
-
var StyledRadio = styled.div(templateObject_1$
|
|
566
|
+
var StyledRadio = styled.div(templateObject_1$k || (templateObject_1$k = __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 :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 :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
566
567
|
var checked = _a.checked, disabled = _a.disabled;
|
|
567
568
|
if (disabled)
|
|
568
569
|
return theme.colors.lightGray.darker;
|
|
@@ -591,7 +592,7 @@ var CheckedDot = styled.div(templateObject_2$b || (templateObject_2$b = __makeTe
|
|
|
591
592
|
return theme.colors.green.base;
|
|
592
593
|
return "";
|
|
593
594
|
});
|
|
594
|
-
var templateObject_1$
|
|
595
|
+
var templateObject_1$k, templateObject_2$b;
|
|
595
596
|
|
|
596
597
|
var Radio = function (props) {
|
|
597
598
|
var ref = useRef(null);
|
|
@@ -613,7 +614,7 @@ var Radio = function (props) {
|
|
|
613
614
|
return (jsxs(StyledRadio, __assign({ checked: checked, disabled: props.disabled, tabIndex: 0, onClick: toggle, onBlur: props.onBlur, onKeyPress: function (e) { return (e.key === "Enter" ? toggle() : null); }, ref: ref }, { children: [checked && jsx(CheckedDot, { disabled: props.disabled, checked: checked }, void 0), jsx("input", { type: "radio", checked: checked, onChange: toggle, disabled: !!props.disabled, id: props.id }, void 0)] }), void 0));
|
|
614
615
|
};
|
|
615
616
|
|
|
616
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
617
|
+
var Wrapper$5 = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n position: relative;\n\n select {\n padding-right: 43px;\n }\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 select {\n padding-right: 43px;\n }\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) {
|
|
617
618
|
var disabled = _a.disabled;
|
|
618
619
|
return (disabled ? "not-allowed" : "pointer");
|
|
619
620
|
});
|
|
@@ -630,7 +631,7 @@ var StyledSelect = styled.select(templateObject_2$a || (templateObject_2$a = __m
|
|
|
630
631
|
var isChanged = _a.isChanged;
|
|
631
632
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
632
633
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
633
|
-
var templateObject_1$
|
|
634
|
+
var templateObject_1$j, templateObject_2$a;
|
|
634
635
|
|
|
635
636
|
var Select = function (props) {
|
|
636
637
|
var _a = useState(false), isChanged = _a[0], setIsChanged = _a[1];
|
|
@@ -643,18 +644,18 @@ var Select = function (props) {
|
|
|
643
644
|
return (jsxs(Wrapper$5, { children: [jsx(Icon, { type: "chevronDown", color: "gray", size: "small" }, void 0), jsxs(StyledSelect, __assign({}, props, { onChange: onChange, isChanged: isChanged }, { children: [props.placeholder && jsx("option", __assign({ hidden: true }, { children: props.placeholder }), void 0), props.children] }), void 0)] }, void 0));
|
|
644
645
|
};
|
|
645
646
|
|
|
646
|
-
var StyledSpacer = styled.div(templateObject_1$
|
|
647
|
+
var StyledSpacer = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n"], ["\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
647
648
|
var horizontal = _a.horizontal;
|
|
648
649
|
return (horizontal ? "".concat(horizontal, "px") : "");
|
|
649
650
|
}, function (_a) {
|
|
650
651
|
var vertical = _a.vertical;
|
|
651
652
|
return (vertical ? "".concat(vertical, "px") : "");
|
|
652
653
|
});
|
|
653
|
-
var templateObject_1$
|
|
654
|
+
var templateObject_1$i;
|
|
654
655
|
|
|
655
656
|
var Spacer = function (props) { return (jsx(StyledSpacer, __assign({}, props), void 0)); };
|
|
656
657
|
|
|
657
|
-
var StyledSubheading = styled.p(templateObject_1$
|
|
658
|
+
var StyledSubheading = styled.p(templateObject_1$h || (templateObject_1$h = __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) {
|
|
658
659
|
var size = _a.size;
|
|
659
660
|
return size ? theme.subheading[size].fontSize : theme.subheading.medium.fontSize;
|
|
660
661
|
}, function (_a) {
|
|
@@ -682,11 +683,11 @@ var StyledSubheading = styled.p(templateObject_1$f || (templateObject_1$f = __ma
|
|
|
682
683
|
return theme.colors.darkGray.dark;
|
|
683
684
|
}
|
|
684
685
|
});
|
|
685
|
-
var templateObject_1$
|
|
686
|
+
var templateObject_1$h;
|
|
686
687
|
|
|
687
688
|
var Subheading = function (props) { return (jsx(StyledSubheading, __assign({}, props, { children: props.children }), void 0)); };
|
|
688
689
|
|
|
689
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
690
|
+
var Wrapper$4 = styled.div(templateObject_1$g || (templateObject_1$g = __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) {
|
|
690
691
|
var level = _a.level;
|
|
691
692
|
switch (level) {
|
|
692
693
|
case 1:
|
|
@@ -697,7 +698,7 @@ var Wrapper$4 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTem
|
|
|
697
698
|
return "70px";
|
|
698
699
|
}
|
|
699
700
|
});
|
|
700
|
-
var templateObject_1$
|
|
701
|
+
var templateObject_1$g;
|
|
701
702
|
|
|
702
703
|
var trophies = {
|
|
703
704
|
1: {
|
|
@@ -733,7 +734,30 @@ var trophies = {
|
|
|
733
734
|
};
|
|
734
735
|
var Trophy = function (props) { return (jsx(Wrapper$4, __assign({}, props, { children: trophies[props.variant][props.level] }), void 0)); };
|
|
735
736
|
|
|
736
|
-
var
|
|
737
|
+
var Container$3 = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n width: fit-content;\n 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 p {\n color: ", ";\n }\n"], ["\n width: fit-content;\n 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 p {\n color: ", ";\n }\n"])), function (_a) {
|
|
738
|
+
var type = _a.type;
|
|
739
|
+
switch (type) {
|
|
740
|
+
case "success":
|
|
741
|
+
return "rgba(139, 220, 174, 20%)";
|
|
742
|
+
case "error":
|
|
743
|
+
return "rgba(247, 119, 140, 20%)";
|
|
744
|
+
}
|
|
745
|
+
}, function (_a) {
|
|
746
|
+
var type = _a.type;
|
|
747
|
+
switch (type) {
|
|
748
|
+
case "success":
|
|
749
|
+
return theme.colors.green.base;
|
|
750
|
+
case "error":
|
|
751
|
+
return theme.colors.red.base;
|
|
752
|
+
}
|
|
753
|
+
});
|
|
754
|
+
var templateObject_1$f;
|
|
755
|
+
|
|
756
|
+
var Alert = function (props) {
|
|
757
|
+
return (jsxs(Container$3, __assign({}, props, { children: [jsx(Icon, { size: "small", type: props.type === "success" ? "check" : "warning", color: props.type === "success" ? "green" : "red" }, void 0), jsx(Spacer, { horizontal: 10 }, void 0), jsx(Paragraph, { children: props.message }, void 0)] }), void 0));
|
|
758
|
+
};
|
|
759
|
+
|
|
760
|
+
var StyledCard = styled.div(templateObject_1$e || (templateObject_1$e = __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) {
|
|
737
761
|
var ellipse = _a.ellipse;
|
|
738
762
|
return ellipse
|
|
739
763
|
? ":hover {\n box-shadow: 0px 4px 0px ".concat(function (_a) {
|
|
@@ -747,11 +771,11 @@ var Ellipse = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTempl
|
|
|
747
771
|
return color ? theme.colors[color].light : "";
|
|
748
772
|
});
|
|
749
773
|
var Content = styled.div(templateObject_3$4 || (templateObject_3$4 = __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"])));
|
|
750
|
-
var templateObject_1$
|
|
774
|
+
var templateObject_1$e, templateObject_2$9, templateObject_3$4;
|
|
751
775
|
|
|
752
776
|
var Card = function (props) { return (jsxs(StyledCard, __assign({}, props, { children: [props.ellipse && jsx(Ellipse, { color: props.ellipse }, void 0), jsx(Content, { children: props.children }, void 0)] }), void 0)); };
|
|
753
777
|
|
|
754
|
-
var Wrapper$3 = styled.div(templateObject_1$
|
|
778
|
+
var Wrapper$3 = styled.div(templateObject_1$d || (templateObject_1$d = __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) {
|
|
755
779
|
var disabled = _a.disabled;
|
|
756
780
|
return (disabled ? "49.5px" : "");
|
|
757
781
|
});
|
|
@@ -768,7 +792,7 @@ var StyledInputNumber = styled.input(templateObject_2$8 || (templateObject_2$8 =
|
|
|
768
792
|
var disabled = _a.disabled;
|
|
769
793
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
770
794
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
771
|
-
var templateObject_1$
|
|
795
|
+
var templateObject_1$d, templateObject_2$8;
|
|
772
796
|
|
|
773
797
|
var Number = function (props) {
|
|
774
798
|
var ref = useRef(null);
|
|
@@ -811,7 +835,7 @@ var FeedbackColors = {
|
|
|
811
835
|
error: theme.colors.red.base,
|
|
812
836
|
};
|
|
813
837
|
|
|
814
|
-
var FieldWrapper = styled.div(templateObject_1$
|
|
838
|
+
var FieldWrapper = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n flex-wrap: wrap;\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n\n input,\n > div:first-child {\n border-color: ", ";\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n flex-wrap: wrap;\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n\n input,\n > div:first-child {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
815
839
|
var inline = _a.inline;
|
|
816
840
|
return (inline ? "row" : "column");
|
|
817
841
|
}, function (_a) {
|
|
@@ -829,7 +853,7 @@ var FeedbackWrapper = styled.div(templateObject_3$3 || (templateObject_3$3 = __m
|
|
|
829
853
|
var status = _a.status;
|
|
830
854
|
return "\n svg {\n fill: ".concat(FeedbackColors[status], ";\n }\n p {\n color: ").concat(FeedbackColors[status], ";\n }\n ");
|
|
831
855
|
});
|
|
832
|
-
var templateObject_1$
|
|
856
|
+
var templateObject_1$c, templateObject_2$7, templateObject_3$3;
|
|
833
857
|
|
|
834
858
|
var Feedback = function (_a) {
|
|
835
859
|
var status = _a.status, message = _a.message;
|
|
@@ -868,9 +892,9 @@ var FormField = function (props) {
|
|
|
868
892
|
}
|
|
869
893
|
};
|
|
870
894
|
|
|
871
|
-
var StyledIconButton = styled(StyledButton)(templateObject_1$
|
|
895
|
+
var StyledIconButton = styled(StyledButton)(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
872
896
|
var GhostIconButton = styled(GhostButton)(templateObject_2$6 || (templateObject_2$6 = __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"])));
|
|
873
|
-
var templateObject_1$
|
|
897
|
+
var templateObject_1$b, templateObject_2$6;
|
|
874
898
|
|
|
875
899
|
var IconButton = function (props) {
|
|
876
900
|
if (props.color === "white")
|
|
@@ -878,7 +902,7 @@ var IconButton = function (props) {
|
|
|
878
902
|
return (jsx(StyledIconButton, __assign({}, props, { children: jsx(Icon, { type: props.icon, size: "small", color: "white" }, void 0) }), void 0));
|
|
879
903
|
};
|
|
880
904
|
|
|
881
|
-
var Wrapper$2 = styled.div(templateObject_1$
|
|
905
|
+
var Wrapper$2 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n width: fit-content;\n display: flex;\n align-items: center;\n cursor: pointer;\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\n > div {\n width: 19px;\n height: 19px;\n margin-right: ", ";\n margin-left: ", ";\n }\n"])), function (_a) {
|
|
882
906
|
var chevron = _a.chevron;
|
|
883
907
|
return (chevron === "left" ? "4px" : "");
|
|
884
908
|
}, function (_a) {
|
|
@@ -886,7 +910,7 @@ var Wrapper$2 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTem
|
|
|
886
910
|
return (chevron === "right" ? "4px" : "");
|
|
887
911
|
});
|
|
888
912
|
var StyledLink = styled(StyledParagraph)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n text-decoration: none;\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"], ["\n text-decoration: none;\n color: ", ";\n\n :hover {\n text-decoration: underline;\n }\n"])), theme.colors.darkGray.dark);
|
|
889
|
-
var templateObject_1$
|
|
913
|
+
var templateObject_1$a, templateObject_2$5;
|
|
890
914
|
|
|
891
915
|
var Link = function (props) {
|
|
892
916
|
var onClick = function (e) {
|
|
@@ -898,6 +922,14 @@ var Link = function (props) {
|
|
|
898
922
|
return (jsxs(Wrapper$2, __assign({ chevron: props.chevron }, { children: [props.chevron === "left" && (jsx(Icon, { type: "chevronLeft", color: "green", onClick: onClick }, void 0)), jsx(StyledLink, __assign({ href: props.href, onClick: onClick, size: "large", as: "a" }, { children: props.children }), void 0), props.chevron !== "none" && props.chevron !== "left" && (jsx(Icon, { type: "chevronRight", color: "green", onClick: onClick }, void 0))] }), void 0));
|
|
899
923
|
};
|
|
900
924
|
|
|
925
|
+
var Container$2 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: ", ";\n"])), function (_a) {
|
|
926
|
+
var text = _a.text;
|
|
927
|
+
return (text ? "20px" : "");
|
|
928
|
+
});
|
|
929
|
+
var templateObject_1$9;
|
|
930
|
+
|
|
931
|
+
var Loading = function (props) { return (jsxs(Container$2, __assign({}, props, { children: [jsx(ImpulseSpinner, { size: 60, frontColor: theme.colors[props.color].base, backColor: theme.colors[props.color].light }, void 0), props.text && (jsxs(Fragment, { children: [jsx(Spacer, { vertical: 20 }, void 0), jsx(Heading, __assign({ type: "h6", color: props.textColor || "black" }, { children: props.text }), void 0)] }, void 0))] }), void 0)); };
|
|
932
|
+
|
|
901
933
|
var Wrapper$1 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"], ["\n width: 100%;\n min-width: 200px;\n display: flex;\n justify-content: space-between;\n\n > div {\n display: flex;\n align-items: center;\n }\n"])));
|
|
902
934
|
var templateObject_1$8;
|
|
903
935
|
|
|
@@ -1161,5 +1193,5 @@ var Modal = function (props) {
|
|
|
1161
1193
|
return (jsx(Mask, { children: jsx(CardWrapper, __assign({}, props, { children: jsxs(Card, { children: [jsx(CloseIconWrapper, { children: jsx(Icon, { type: "cross", onClick: onClose }, void 0) }, void 0), jsx(ChildrenWrapper, { children: props.children }, void 0), props.footer && jsx(FooterContainer, { children: props.footer }, void 0)] }, void 0) }), void 0) }, void 0));
|
|
1162
1194
|
};
|
|
1163
1195
|
|
|
1164
|
-
export { Button, Card, Checkbox, Flag, Form, FormField, Heading, Icon, IconButton, Illustration, Input, Keyboard, Link, Logo, Medal, Medals, Modal, Notification, Paragraph, Popup, ProgressBar, Radio, Select, Spacer, Subheading, Tooltip, Trophy, theme };
|
|
1196
|
+
export { Alert, Button, Card, Checkbox, Flag, Form, FormField, Heading, Icon, IconButton, Illustration, Input, Keyboard, Link, Loading, Logo, Medal, Medals, Modal, Notification, Paragraph, Popup, ProgressBar, Radio, Select, Spacer, Subheading, Tooltip, Trophy, theme };
|
|
1165
1197
|
//# sourceMappingURL=index.es.js.map
|