@typeolymp/ui-components 1.19.2 → 1.19.3

package/build/components/atoms/Tag/index.d.ts

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from "react";
+import { Color } from "@typeolymp/utils/enums";
 export declare type PropsType = {
     children?: ReactNode;
+    color?: Color;
 };
 declare const Tag: FC<PropsType>;
 export default Tag;

package/build/components/atoms/Tag/stories.d.ts

@@ -5,3 +5,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Overview: () => JSX.Element;
+export declare const Playground: (args: any) => JSX.Element;

package/build/index.es.js

@@ -8225,11 +8225,32 @@ var DataSummary = function (_a) {
                     }) })] }) }));
 };
 
-var Container$o = styled.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.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 jsx$1(Container$o, { children: props.children });
+var Tag = function (_a) {
+    var color = _a.color, children = _a.children;
+    return jsx$1(Container$o, __assign$2({ color: color }, { children: children }));
 };
 
 var Container$n = styled.div(templateObject_1$F || (templateObject_1$F = __makeTemplateObject$1(["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"], ["\n  width: 46px;\n  min-width: 46px;\n  max-width: 46px;\n  height: 27px;\n  min-height: 27px;\n  max-height: 27px;\n  border-radius: 14px;\n  cursor: ", ";\n  position: relative;\n  background-color: ", ";\n\n  :after {\n    content: \"\";\n    width: 21px;\n    height: 21px;\n    border-radius: 50%;\n    position: absolute;\n    top: 3px;\n    right: ", ";\n    left: ", ";\n    background-color: ", ";\n  }\n\n  input {\n    display: none;\n  }\n\n  :focus {\n    outline: 0;\n    border-color: ", ";\n    box-shadow: ", ";\n  }\n"])), function (_a) {