@hexure/ui 1.6.1 → 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',
@@ -2604,7 +2608,7 @@ var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTem
     return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
 });
 var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n  appearance: none;\n  box-shadow: none;\n  outline: none;\n  border: none;\n  color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 2.9em;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0px 30px 0px 10px;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 2;\n"], ["\n  appearance: none;\n  box-shadow: none;\n  outline: none;\n  border: none;\n  color: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 2.9em;\n  background-color: transparent;\n  background-image: none;\n  cursor: pointer;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0px 30px 0px 10px;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 2;\n"])), Colors.BLACK.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
-var IconWrapper$2 = styled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  position: absolute;\n  right: 4px;\n  height: 22px;\n  z-index: 1;\n"], ["\n  position: absolute;\n  right: 4px;\n  height: 22px;\n  z-index: 1;\n"])));
+var IconWrapper$2 = styled(Icon)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n  position: absolute;\n  right: 9px;\n  z-index: 1;\n"], ["\n  position: absolute;\n  right: 9px;\n  z-index: 1;\n"])));
 var Select = function (_a) {
     var options = _a.options, optionGroups = _a.optionGroups, placeholder = _a.placeholder, readOnly = _a.readOnly, invalid = _a.invalid, value = _a.value, onChange = _a.onChange, style = _a.style, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
     return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
@@ -2620,8 +2624,7 @@ var Select = function (_a) {
                 options.map(function (option, i) {
                     return (React.createElement("option", { key: i, value: option.value }, option.label || option.value));
                 })),
-        React.createElement(IconWrapper$2, null,
-            React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' }))));
+        React.createElement(IconWrapper$2, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })));
 };
 var templateObject_1$g, templateObject_2$e, templateObject_3$c;
 
@@ -3041,7 +3044,7 @@ var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTempl
     }
 }, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
 var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 2.9em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 2.9em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"])), Colors.BLACK.Hex, FontStyles.DEFAULT, FontSizes.DEFAULT);
-var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  background: #fff;\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n  max-height: 220px;\n  overflow: auto;\n"], ["\n  background: #fff;\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n  max-height: 220px;\n  overflow: auto;\n"])), Colors.PRIMARY.Hex);
+var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  background: #fff;\n  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n  max-height: 220px;\n  overflow: auto;\n"], ["\n  background: #fff;\n  box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n  max-height: 220px;\n  overflow: auto;\n"])), Colors.PRIMARY.Hex);
 var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 9;\n"], ["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 9;\n"])));
 var MultiSelect = function (_a) {
     var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.selected, selected = _d === void 0 ? [] : _d, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll"]);
@@ -3151,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;