@hexure/ui 1.6.2 → 1.6.3

package/dist/cjs/types/Theme.d.ts

@@ -31,6 +31,10 @@ export declare const Colors: {
         Hex: string;
         Rgb: string;
     };
+    SUBTLE_GRAY: {
+        Hex: string;
+        Rgb: string;
+    };
 };
 export declare const FontStyles: {
     DEFAULT: string;

package/dist/cjs/types/components/Tag/Tag.d.ts

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { AccessibleProps } from '../../utils/Accessibility';
 export interface TagProps extends AccessibleProps {
     /** It is used to select tag-type either default or removable. */
-    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK';
+    color?: 'PRIMARY' | 'GREEN' | 'RED' | 'YELLOW' | 'BLACK' | 'SUBTLE_GRAY';
     /** It is used to give label to tag. */
-    children: string | number;
+    children: string | React.ReactNode;
+    /** Method to run when the tag is clicked */
     onClick?: (e?: any) => void;
     /** It is callback function called when user wants to close the tag. */
     removable?: boolean;

package/dist/esm/index.js

@@ -2024,6 +2024,10 @@ var Colors = {
         Hex: '#E7E6E6',
         Rgb: '231, 230, 230',
     },
+    SUBTLE_GRAY: {
+        Hex: '#f5f5f5',
+        Rgb: '245, 245, 245',
+    },
 };
 var FontStyles = {
     DEFAULT: '"Roboto", Helvetica, Arial, sans-serif',
@@ -3150,15 +3154,15 @@ var templateObject_1$3, templateObject_2$3, templateObject_3$2;
 
 var Wrapper$1 = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  display: inline-block;\n  border-radius: 4px;\n  padding: 4px 6px;\n  background: ", ";\n  color: #ffffff;\n  box-sizing: border-box;\n  cursor: ", ";\n"], ["\n  display: inline-block;\n  border-radius: 4px;\n  padding: 4px 6px;\n  background: ", ";\n  color: #ffffff;\n  box-sizing: border-box;\n  cursor: ", ";\n"])), function (props) { return Colors[props.$color].Hex; }, function (props) { return (props.$removable ? 'pointer' : 'default'); });
 var Content = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
-var Label = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  color: #ffffff;\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"], ["\n  color: #ffffff;\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"])), FontSizes.SMALL, FontStyles.DEFAULT);
+var Label = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"], ["\n  color: ", ";\n  font-size: ", ";\n  font-weight: 500;\n  font-family: ", ";\n  line-height: 1.2em;\n"])), function (props) { return (props.$color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff'); }, FontSizes.SMALL, FontStyles.DEFAULT);
 var Remove = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 10px;\n  display: flex;\n  align-items: center;\n"], ["\n  margin-left: 10px;\n  display: flex;\n  align-items: center;\n"])));
 var Tag = function (_a) {
     var children = _a.children, _b = _a.color, color = _b === void 0 ? 'PRIMARY' : _b, removable = _a.removable, onClick = _a.onClick, accessibleProps = __rest(_a, ["children", "color", "removable", "onClick"]);
     return (React.createElement(Wrapper$1, __assign({ "$color": color, "$removable": removable, onClick: onClick }, accessibleProps),
         React.createElement(Content, null,
-            React.createElement(Label, null, children),
+            React.createElement(Label, { "$color": color }, children),
             removable ? (React.createElement(Remove, null,
-                React.createElement(Icon, { color: '#ffffff', path: mdiClose, size: '15px' }))) : null)));
+                React.createElement(Icon, { color: color === 'SUBTLE_GRAY' ? '#000000' : '#ffffff', path: mdiClose, size: '15px' }))) : null)));
 };
 var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4;