@typeolymp/ui-components 1.19.1 → 1.19.3

package/build/index.js

@@ -8252,11 +8252,32 @@ var DataSummary = function (_a) {
                     }) })] }) }));
 };
 
-var Container$o = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: 0 2px 0 ", ";\n  border: 1px solid ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"])), theme.colors.lightGray.base, theme.colors.lightGray.darker, theme.colors.lightGray.darker, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, theme.colors.darkGray.light);
+var Container$o = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject$1(["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"], ["\n  padding: 7px 10px;\n  background-color: ", ";\n  box-shadow: ", ";\n  border: 1px solid;\n  border-color: ", ";\n  border-radius: 4px;\n  box-sizing: border-box;\n  text-decoration: none;\n\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: normal;\n  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    if (!color)
+        return theme.colors.lightGray.base;
+    return theme.colors[color].light;
+}, function (_a) {
+    var color = _a.color;
+    if (!color)
+        return "0 2px 0 ".concat(theme.colors.lightGray.darker);
+    return "0 2px 0 ".concat(theme.colors[color].dark);
+}, function (_a) {
+    var color = _a.color;
+    if (!color)
+        return theme.colors.lightGray.darker;
+    return theme.colors[color].dark;
+}, theme.fonts.paragraph, theme.subheading.small.fontSize, theme.subheading.small.fontWeight, function (_a) {
+    var color = _a.color;
+    if (!color)
+        return theme.colors.darkGray.light;
+    return theme.colors[color].darker;
+});
 var templateObject_1$G;
 
-var Tag = function (props) {
-    return jsxRuntime.jsx(Container$o, { children: props.children });
+var Tag = function (_a) {
+    var color = _a.color, children = _a.children;
+    return jsxRuntime.jsx(Container$o, __assign$2({ color: color }, { children: children }));
 };
 
 var Container$n = styled__default["default"].div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {
@@ -47849,8 +47870,11 @@ var TimeChart = function (_a) {
 };
 
 var Chart = function (_a) {
-    var type = _a.type, locale = _a.locale, exerciseResults = _a.exerciseResults, nExercisesInCourse = _a.nExercisesInCourse;
-    var _b = React$3.useState(Period.TODAY), period = _b[0], setPeriod = _b[1];
+    var type = _a.type, locale = _a.locale, exerciseResults = _a.exerciseResults, _b = _a.defaultPeriod, defaultPeriod = _b === void 0 ? Period.TODAY : _b, onChangePeriod = _a.onChangePeriod, nExercisesInCourse = _a.nExercisesInCourse;
+    var _c = React$3.useState(defaultPeriod), period = _c[0], setPeriod = _c[1];
+    React$3.useEffect(function () {
+        setPeriod(defaultPeriod);
+    }, [defaultPeriod]);
     var periods = [
         { value: Period.TODAY, label: translations[locale]["Today"] },
         { value: Period.LAST_7_DAYS, label: translations[locale]["Last 7 days"] },
@@ -47890,10 +47914,13 @@ var Chart = function (_a) {
                     justifyContent: "space-between",
                     marginBottom: 10,
                     padding: "0 15px 0 5px",
-                } }, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), jsxRuntime.jsx(Select, __assign$2({ defaultValue: period, onChange: function (value) { return setPeriod(value); }, id: "period", name: "period" }, { children: periods.map(function (_a) {
+                } }, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h3" }, { children: titles[type] })), jsxRuntime.jsx(Select, __assign$2({ defaultValue: period, onChange: function (value) {
+                            setPeriod(value);
+                            onChangePeriod(value);
+                        }, id: "period", name: "period" }, { children: periods.map(function (_a) {
                             var value = _a.value, label = _a.label;
                             return (jsxRuntime.jsx("option", __assign$2({ value: value }, { children: label }), value));
-                        }) }))] })), renderChart()] }));
+                        }) }), period)] })), renderChart()] }));
 };
 
 var StyledTextarea = styled__default["default"].textarea(templateObject_1$a || (templateObject_1$a = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 100%;\n  min-width: 228px;\n  min-height: 50px;\n  background-color: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n  box-sizing: border-box;\n  border-radius: 4px;\n  padding: 13px 15px;\n  cursor: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-style: normal;\n  line-height: ", ";\n  color: ", ";\n  resize: vertical;\n\n  ::placeholder {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 500;\n    font-style: normal;\n    line-height: ", ";\n    color: ", ";\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {