beem-component 1.0.2 → 1.0.6

package/dist/components/Tabs/tabs.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BmTab = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _colors = require("../colors");
+
+var _iconStyles = require("../iconStyles");
+
+var _excluded = ["leadingIcon", "trailingIcon", "children", "size", "color", "icon", "disabled"];
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var BmTabWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: 0.714rem 1.714rem;\n  background: ", ";\n  box-shadow: ", ";\n  > *:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n  ", "\n"])), _colors.BmPrimaryWhite, function (_ref) {
+  var state = _ref.state;
+
+  if (state === "active") {
+    return "inset 0px -3px 0px ".concat(_colors.BmPrimaryBlue);
+  }
+
+  if (state === "inactive") {
+    return "inset 0px -3px 0px ".concat(_colors.BmGrey400);
+  }
+
+  return "none";
+}, function (_ref2) {
+  var color = _ref2.color,
+      children = _ref2.children,
+      disabled = _ref2.disabled;
+  return children && disabled ? "\n    > * {\n     color: ".concat(_colors.BmGrey400, ";\n  }\n  ") : "\n    > * {\n     color: ".concat(color, ";\n  }\n  ");
+});
+
+var BmTab = function BmTab(_ref3) {
+  var leadingIcon = _ref3.leadingIcon,
+      trailingIcon = _ref3.trailingIcon,
+      children = _ref3.children,
+      size = _ref3.size,
+      color = _ref3.color,
+      icon = _ref3.icon,
+      disabled = _ref3.disabled,
+      rest = _objectWithoutProperties(_ref3, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(BmTabWrapper, _extends({
+    leadingIcon: leadingIcon,
+    trailingIcon: trailingIcon,
+    color: color,
+    disabled: disabled
+  }, rest), leadingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: leadingIcon,
+    size: size || 'large',
+    color: disabled ? "".concat(_colors.BmGrey400) : color
+  }), children, trailingIcon && /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    icon: trailingIcon,
+    size: size || 'large',
+    color: disabled ? "".concat(_colors.BmGrey400) : color
+  }));
+};
+
+exports.BmTab = BmTab;
+BmTab.propTypes = {
+  children: _propTypes.default.object,
+  trailingIcon: _propTypes.default.node,
+  leadingIcon: _propTypes.default.node,
+  state: _propTypes.default.string,
+  color: _propTypes.default.string,
+  size: _propTypes.default.string
+};

package/dist/components/Tabs/tabs.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Tabs = void 0;
+
+var _icons = require("@material-ui/icons");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tabs = require("./tabs");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable import/no-anonymous-default-export */
+var _default = {
+  component: _tabs.BmTab,
+  title: "components/Tabs",
+  argTypes: {
+    color: {
+      control: {
+        type: "text"
+      },
+      description: "Color of the Icons and Text"
+    },
+    state: {
+      options: ["active", "inactive"],
+      control: {
+        type: "select"
+      },
+      description: "State of the Tabs (optional)"
+    },
+    size: {
+      options: ["small", "medium", "large"],
+      control: {
+        type: "select"
+      },
+      description: "Size of the icons",
+      defaultValue: {
+        summary: "large"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var MainTab = function MainTab(args) {
+  return /*#__PURE__*/_react.default.createElement(_tabs.BmTab, args);
+};
+
+var Tabs = MainTab.bind({});
+exports.Tabs = Tabs;
+Tabs.args = {
+  children: /*#__PURE__*/_react.default.createElement("h3", null, "Tabs"),
+  leadingIcon: /*#__PURE__*/_react.default.createElement(_icons.Favorite, null),
+  trailingIcon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null),
+  disabled: false,
+  state: 'active'
+};

package/dist/components/breakpoints.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.size = exports.device = void 0;
+var size = {
+  xs: "320px",
+  sm: "768px",
+  lg: "1200px"
+};
+exports.size = size;
+var device = {
+  xs: "(min-width: ".concat(size.xs, ")"),
+  sm: "(min-width: ".concat(size.sm, ")"),
+  lg: "(min-width: ".concat(size.lg, ")")
+};
+exports.device = device;

package/dist/components/chatHeader.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmChatHeader = exports.BmChatHeaderInfoIcon = exports.BmChatHeaderTime = exports.BmChatHeaderText = exports.BmChatHeaderWrapper = void 0;
+exports.BmChatHeaderWrapper = exports.BmChatHeaderTime = exports.BmChatHeaderText = exports.BmChatHeaderInfoIcon = exports.BmChatHeader = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 

package/dist/components/checkboxToggler.js

@@ -11,9 +11,9 @@ var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/dist/components/colors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey50 = exports.BmGrey100 = exports.BmGrey200 = exports.BmGrey400 = exports.BmGrey500 = exports.BmGrey600 = exports.BmBgGreyBlue = exports.BmBgLightBlue = exports.BmSecondaryGold15 = exports.BmSecondaryGreen15 = exports.BmSecondaryRed15 = exports.BmSecondaryRed8 = exports.BmSecondaryGreen8 = exports.BmSecondaryDarkGreen = exports.BmSecondaryPurple = exports.BmSecondaryYellow = exports.BmSecondaryGreen = exports.BmSecondaryRed = exports.BmSecondaryGrey = exports.BmSecondaryCyan = exports.BmPrimaryBlack = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = void 0;
+exports.BmSecondaryYellow = exports.BmSecondaryRed8 = exports.BmSecondaryRed15 = exports.BmSecondaryRed = exports.BmSecondaryPurple = exports.BmSecondaryGrey = exports.BmSecondaryGreen8 = exports.BmSecondaryGreen15 = exports.BmSecondaryGreen = exports.BmSecondaryGold15 = exports.BmSecondaryDarkGreen = exports.BmSecondaryCyan = exports.BmPrimaryWhite = exports.BmPrimaryGold = exports.BmPrimaryBlue = exports.BmPrimaryBlack = exports.BmPictogramGold = exports.BmPictogramBlue = exports.BmGrey600 = exports.BmGrey500 = exports.BmGrey50 = exports.BmGrey400 = exports.BmGrey200 = exports.BmGrey100 = exports.BmBgLightBlue = exports.BmBgGreyBlue = exports.BmBgGrey45 = void 0;
 // Primary Colors
 var BmPrimaryBlue = "#33B1BA";
 exports.BmPrimaryBlue = BmPrimaryBlue;
@@ -41,9 +41,11 @@ var BmSecondaryGold15 = "rgba(243, 169, 41, 0.15)"; // Background Colors
 exports.BmSecondaryGold15 = BmSecondaryGold15;
 var BmBgLightBlue = "#E1EAFC";
 exports.BmBgLightBlue = BmBgLightBlue;
-var BmBgGreyBlue = "#F5F6FA"; // Grey Colors
-
+var BmBgGreyBlue = "#F5F6FA";
 exports.BmBgGreyBlue = BmBgGreyBlue;
+var BmBgGrey45 = "rgba(0, 0, 0, 0.5)"; // Grey Colors
+
+exports.BmBgGrey45 = BmBgGrey45;
 var BmGrey600 = "#545454";
 exports.BmGrey600 = BmGrey600;
 var BmGrey500 = "#757575";

package/dist/components/contacts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmContactTime = exports.BmContactDetails = exports.BmContactMessage = exports.BmUnreadMessage = exports.BmMessageContact = exports.BmMessageText = exports.BmMessageTexts = exports.BmContactIcon = exports.BmContactName = exports.BmContactTextWrapper = exports.BmContactText = exports.BmContactItem = exports.BmContact = exports.BmContactSideBar = void 0;
+exports.BmUnreadMessage = exports.BmMessageTexts = exports.BmMessageText = exports.BmMessageContact = exports.BmContactTime = exports.BmContactTextWrapper = exports.BmContactText = exports.BmContactSideBar = exports.BmContactName = exports.BmContactMessage = exports.BmContactItem = exports.BmContactIcon = exports.BmContactDetails = exports.BmContact = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/components/dropdown.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true

package/dist/components/dropdownButton.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmButtonDropDown = exports.Button = exports.Drop = void 0;
+exports.Drop = exports.Button = exports.BmButtonDropDown = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,9 +11,9 @@ var _icons = require("@material-ui/icons");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _buttonIconsOnly = require("./buttonIconsOnly");
+var _buttonIconsOnly = require("../components/Buttons/buttonIconsOnly");
 
-var _buttons = require("./buttons");
+var _buttons = require("../components/Buttons/buttons");
 
 var _colors = require("./colors");
 

package/dist/components/dropdownItems.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BmDropDownItem = exports.ItemText = exports.RightItemIcon = exports.LeftItemIcon = exports.ItemWrapper = exports.BmDropDownMenu = exports.BmButtonDropdownItem = exports.BmCustomizedDropdown = void 0;
+exports.RightItemIcon = exports.LeftItemIcon = exports.ItemWrapper = exports.ItemText = exports.BmDropDownMenu = exports.BmDropDownItem = exports.BmCustomizedDropdown = exports.BmButtonDropdownItem = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/components/example.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _excluded = ["variant"];
+
+var _variantStyles;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var btnVariants = {
+  primary: "primary",
+  danger: "danger",
+  tertiary: "tertiary"
+}; // Variant styles
+
+var variantStyles = (_variantStyles = {}, _defineProperty(_variantStyles, btnVariants.primary, {
+  background: "#1890ff"
+}), _defineProperty(_variantStyles, btnVariants.danger, {
+  background: "#f81d22"
+}), _defineProperty(_variantStyles, btnVariants.tertiary, {
+  background: "#fff",
+  color: "#000"
+}), _variantStyles);
+
+function BaseButton(_ref) {
+  var variant = _ref.variant,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var btnStyle = _objectSpread({
+    color: "#fff",
+    border: "none",
+    padding: "5px 10px"
+  }, variantStyles[variant]);
+
+  return /*#__PURE__*/React.createElement("button", _extends({}, props, {
+    style: btnStyle
+  }));
+}

package/dist/components/iconStyles.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CopyToClipBoard = exports.BmArrowCircleUp = exports.BmArrowCircleDown = exports.BmSupport = exports.BmChatbot = exports.BmIcons = exports.BmQuickReplyIcon = exports.BmEmojiIcon = exports.BmChatbotIcon = exports.BmAvatarIcon = exports.BmTagIcon = exports.BmDropupIcon = exports.BmDropdownIcon = exports.BmSearchIcon = exports.BmErrorIcon = exports.BmSuccessIcon = exports.BmButtonIcon = void 0;
+exports.CopyToClipBoard = exports.BmTagIcon = exports.BmSupport = exports.BmQuickReplyIcon = exports.BmIcons = exports.BmEmojiIcon = exports.BmChatbotIcon = exports.BmChatbot = exports.BmButtonIcon = exports.BmAvatarIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _icons = require("@material-ui/icons");
-
 var _styles = require("@material-ui/core/styles");
 
 var _colors = require("./colors");
@@ -27,20 +25,9 @@ var size = function size(props) {
   if (props.size === "xlarge") return "2.286rem !important";
   if (!props.size) return "1.714rem !important";
   return props.size;
-};
-
-var DropdownIcon = {
-  root: {
-    fill: "".concat(_colors.BmSecondaryGrey),
-    height: function height(props) {
-      return size(props);
-    },
-    width: function width(props) {
-      return size(props);
-    }
-  }
 }; // Button Icons
 
+
 var ButtonIcon = {
   root: {
     height: function height(props) {
@@ -55,6 +42,26 @@ var ButtonIcon = {
           color = _ref.color;
       if (color) return color;
 
+      if (!disabled) {
+        if (variant === "active") return "".concat(_colors.BmPrimaryWhite);
+        if (variant === "enabled") return "".concat(_colors.BmPrimaryBlack);
+        if (variant === "destructive") return "".concat(_colors.BmPrimaryWhite);
+        if (variant === "success") return "".concat(_colors.BmPrimaryWhite);
+        if (variant === "neutral") return "".concat(_colors.BmPrimaryBlue);
+        if (variant === "primary") return "".concat(_colors.BmPrimaryWhite);
+        if (variant === "secondary") return "".concat(_colors.BmPrimaryBlue);
+        if (variant === "tertiary") return "".concat(_colors.BmPrimaryBlue);
+        return "".concat(_colors.BmPrimaryWhite);
+      } else {
+        return "".concat(_colors.BmGrey400);
+      }
+    },
+    color: function color(_ref2) {
+      var variant = _ref2.variant,
+          disabled = _ref2.disabled,
+          _color = _ref2.color;
+      if (_color) return _color;
+
       if (!disabled) {
         if (variant === "active") return "".concat(_colors.BmPrimaryWhite);
         if (variant === "enabled") return "".concat(_colors.BmPrimaryBlack);
@@ -80,83 +87,20 @@ var BmButtonIcon = (0, _styles.withStyles)(ButtonIcon)(function (props) {
   }
 
   return null;
-});
+}); // Tags
+
 exports.BmButtonIcon = BmButtonIcon;
-var SuccessIcon = {
-  root: {
-    fill: "".concat(_colors.BmSecondaryDarkGreen),
-    height: function height(props) {
-      return size(props);
-    },
-    width: function width(props) {
-      return size(props);
-    },
-    margin: "0rem 0.571rem !important"
-  }
-};
-var BmSuccessIcon = (0, _styles.withStyles)(SuccessIcon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_icons.Done, _extends({
-    action: true
-  }, props));
-});
-exports.BmSuccessIcon = BmSuccessIcon;
-var ErrorIcon = {
+var TagIcon = {
   root: {
-    fill: "".concat(_colors.BmSecondaryRed),
     height: function height(props) {
-      return size(props);
+      return size(props) || "1.143rem !important";
     },
     width: function width(props) {
-      return size(props);
-    },
-    margin: "0rem 0.571rem !important"
-  }
-};
-var BmErrorIcon = (0, _styles.withStyles)(ErrorIcon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_icons.ErrorOutline, _extends({
-    action: true
-  }, props));
-}); // Search Icon for Search Component
-
-exports.BmErrorIcon = BmErrorIcon;
-var SearchIcon = {
-  root: {
-    fill: "".concat(_colors.BmSecondaryGrey),
-    height: function height(props) {
-      return size(props);
+      return size(props) || "1.143rem !important";
     },
-    width: function width(props) {
-      return size(props);
-    } // margin: "0rem 0.571rem",
-
-  }
-};
-var BmSearchIcon = (0, _styles.withStyles)(SearchIcon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_icons.Search, _extends({
-    action: true
-  }, props));
-});
-exports.BmSearchIcon = BmSearchIcon;
-var BmDropdownIcon = (0, _styles.withStyles)(DropdownIcon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, _extends({
-    action: true
-  }, props));
-});
-exports.BmDropdownIcon = BmDropdownIcon;
-var BmDropupIcon = (0, _styles.withStyles)(DropdownIcon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowUp, _extends({
-    action: true
-  }, props));
-}); // Tags
-
-exports.BmDropupIcon = BmDropupIcon;
-var TagIcon = {
-  root: {
-    height: "1.143rem !important",
-    width: "1.143rem !important",
-    fill: function fill(_ref2) {
-      var variant = _ref2.variant,
-          color = _ref2.color;
+    fill: function fill(_ref3) {
+      var variant = _ref3.variant,
+          color = _ref3.color;
 
       if (color) {
         return color;
@@ -164,8 +108,18 @@ var TagIcon = {
 
       if (variant === "neutral" || variant === "light") return "".concat(_colors.BmPrimaryBlack);
       return "".concat(_colors.BmPrimaryWhite);
-    } // margin: "0rem 0.571rem",
+    },
+    color: function color(_ref4) {
+      var variant = _ref4.variant,
+          _color2 = _ref4.color;
+
+      if (_color2) {
+        return _color2;
+      }
 
+      if (variant === "neutral" || variant === "light") return "".concat(_colors.BmPrimaryBlack);
+      return "".concat(_colors.BmPrimaryWhite);
+    }
   }
 };
 var BmTagIcon = (0, _styles.withStyles)(TagIcon)(function (props) {
@@ -182,11 +136,12 @@ var BmTagIcon = (0, _styles.withStyles)(TagIcon)(function (props) {
 exports.BmTagIcon = BmTagIcon;
 
 var Avatarsize = function Avatarsize(props) {
-  if (props.size === "xsmall") return "0.857rem";
-  if (props.size === "small") return "1.143rem";
-  if (props.size === "medium") return "1.429rem";
-  if (props.size === "large") return "2.286rem";
-  return "2.286rem";
+  if (props.size === "xsmall") return "0.857rem !important";
+  if (props.size === "small") return "1.143rem !important";
+  if (props.size === "medium") return "1.429rem !important";
+  if (props.size === "large") return "2.286rem !important";
+  if (!props.size) return "2.286rem !important";
+  return props.size;
 };
 
 var AvatarIcon = {
@@ -194,6 +149,9 @@ var AvatarIcon = {
     fill: function fill(props) {
       return props.color || "".concat(_colors.BmPrimaryWhite);
     },
+    color: function color(props) {
+      return props.color || "".concat(_colors.BmPrimaryWhite);
+    },
     height: function height(props) {
       return Avatarsize(props);
     },
@@ -211,16 +169,18 @@ var BmAvatarIcon = (0, _styles.withStyles)(AvatarIcon)(function (props) {
   }
 
   return null;
-});
+}); //check on sizing
+
 exports.BmAvatarIcon = BmAvatarIcon;
 var BmChatbotIcon = (0, _styles.withStyles)(AvatarIcon)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, _extends({
     action: true
   }, props), /*#__PURE__*/_react.default.createElement("path", {
     d: "M19 8.975V6C19 5.46957 18.7893 4.96086 18.4142 4.58579C18.0391 4.21072 17.5304 4 17 4H11V2.688C11.305 2.414 11.5 2.02 11.5 1.578C11.5 1.18018 11.342 0.798647 11.0607 0.517343C10.7794 0.236038 10.3978 0.0780029 10 0.0780029C9.60218 0.0780029 9.22064 0.236038 8.93934 0.517343C8.65804 0.798647 8.5 1.18018 8.5 1.578C8.5 2.02 8.695 2.414 9 2.688V4H3C2.46957 4 1.96086 4.21072 1.58579 4.58579C1.21071 4.96086 1 5.46957 1 6V8.998L0.928 9.003C0.675888 9.02097 0.439955 9.13382 0.26775 9.31883C0.095544 9.50384 -0.000132994 9.74725 1.38752e-07 10V12C1.38752e-07 12.2652 0.105357 12.5196 0.292893 12.7071C0.48043 12.8946 0.734784 13 1 13V18C1 18.5304 1.21071 19.0391 1.58579 19.4142C1.96086 19.7893 2.46957 20 3 20H17C17.5304 20 18.0391 19.7893 18.4142 19.4142C18.7893 19.0391 19 18.5304 19 18V13C19.2652 13 19.5196 12.8946 19.7071 12.7071C19.8946 12.5196 20 12.2652 20 12V10.062C20.0116 9.90681 19.9869 9.75104 19.928 9.607C19.726 9.119 19.293 9.002 19 8.975ZM5 10C5 8.896 5.672 8 6.5 8C7.328 8 8 8.896 8 10C8 11.104 7.328 12 6.5 12C5.672 12 5 11.104 5 10ZM13.998 16C12.997 15.997 6.001 16 6 16V14C6 14 13.001 13.998 14.002 14L13.998 16ZM13.5 12C12.672 12 12 11.104 12 10C12 8.896 12.672 8 13.5 8C14.328 8 15 8.896 15 10C15 11.104 14.328 12 13.5 12Z",
-    fill: "white"
+    fill: props.color || "white"
   }));
-}); // Emoji Icons
+}); // To be refacotored
+// Emoji Icons
 
 exports.BmChatbotIcon = BmChatbotIcon;
 
@@ -236,6 +196,9 @@ var EmojiIcon = {
     fill: function fill(props) {
       return props.color || "".concat(_colors.BmSecondaryGrey);
     },
+    color: function color(props) {
+      return props.color || "".concat(_colors.BmSecondaryGrey);
+    },
     height: function height(props) {
       return EmojiSize(props);
     },
@@ -260,7 +223,7 @@ var BmQuickReplyIcon = (0, _styles.withStyles)(EmojiIcon)(function (props) {
     action: true
   }, props), /*#__PURE__*/_react.default.createElement("path", {
     d: "M5.33332 23.3932V5.83317H26.6667V13.8332H29.3333V5.83317C29.3333 4.3665 28.1333 3.1665 26.6667 3.1665H5.33332C3.86666 3.1665 2.67999 4.3665 2.67999 5.83317L2.66666 29.8332L7.99999 24.4998H20V21.8332H6.89332L5.33332 23.3932Z",
-    fill: "#575757"
+    fill: props.color || "#575757"
   }));
 });
 exports.BmQuickReplyIcon = BmQuickReplyIcon;
@@ -274,6 +237,9 @@ var icon = {
     },
     width: function width(props) {
       return size(props);
+    },
+    color: function color(props) {
+      return props.color || "".concat(_colors.BmSecondaryGrey);
     }
   }
 };
@@ -282,7 +248,9 @@ var BmIcons = (0, _styles.withStyles)(icon)(function (props) {
     var Icon = props.icon.type;
     return /*#__PURE__*/_react.default.createElement(Icon, _extends({
       action: true
-    }, props));
+    }, props, {
+      fill: props.color
+    }));
   }
 
   return null;
@@ -302,37 +270,19 @@ var BmSupport = (0, _styles.withStyles)(icon)(function (props) {
     action: true
   }, props), /*#__PURE__*/_react.default.createElement("path", {
     d: "M21 12.22C21 6.73 16.74 3 12 3C7.31 3 3 6.65 3 12.28C2.4 12.62 2 13.26 2 14V16C2 17.1 2.9 18 4 18H5V11.9C5 8.03 8.13 4.9 12 4.9C15.87 4.9 19 8.03 19 11.9V19H11V21H19C20.1 21 21 20.1 21 19V17.78C21.59 17.47 22 16.86 22 16.14V13.84C22 13.14 21.59 12.53 21 12.22Z",
-    fill: "black"
+    fill: props.color || "black"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M9 14C9.55228 14 10 13.5523 10 13C10 12.4477 9.55228 12 9 12C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14Z",
-    fill: "black"
+    fill: props.color || "black"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M15 14C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12C14.4477 12 14 12.4477 14 13C14 13.5523 14.4477 14 15 14Z",
-    fill: "black"
+    fill: props.color || "black"
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M18 11.03C17.7615 9.62413 17.0334 8.34796 15.9444 7.42738C14.8555 6.5068 13.4759 6.00117 12.05 6C9.01997 6 5.75997 8.51 6.01997 12.45C7.2531 11.9454 8.34221 11.1435 9.1902 10.1158C10.0382 9.08808 10.6187 7.86652 10.88 6.56C12.19 9.19 14.88 11 18 11.03Z",
-    fill: "black"
+    fill: props.color || "black"
   }));
 });
 exports.BmSupport = BmSupport;
-var BmArrowCircleDown = (0, _styles.withStyles)(icon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, _extends({
-    action: true
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M16 5.33329C21.88 5.33329 26.6667 10.12 26.6667 16C26.6667 21.88 21.88 26.6666 16 26.6666C10.12 26.6666 5.33335 21.88 5.33335 16C5.33335 10.12 10.12 5.33329 16 5.33329ZM16 2.66663C8.64002 2.66663 2.66669 8.63996 2.66669 16C2.66669 23.36 8.64002 29.3333 16 29.3333C23.36 29.3333 29.3334 23.36 29.3334 16C29.3334 8.63996 23.36 2.66663 16 2.66663ZM17.3334 16V10.6666H14.6667V16H10.6667L16 21.3333L21.3334 16H17.3334Z",
-    fill: "#AFAFAF" || props.color
-  }));
-});
-exports.BmArrowCircleDown = BmArrowCircleDown;
-var BmArrowCircleUp = (0, _styles.withStyles)(icon)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, _extends({
-    action: true
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M9.99997 18C5.58997 18 1.99997 14.41 1.99997 10C1.99997 5.59 5.58997 2 9.99997 2C14.41 2 18 5.59 18 10C18 14.41 14.41 18 9.99997 18ZM9.99997 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 9.99997 0C4.47997 0 -3.05176e-05 4.48 -3.05176e-05 10C-3.05176e-05 15.52 4.47997 20 9.99997 20ZM8.99997 10V14H11V10H14L9.99997 6L5.99997 10H8.99997Z",
-    fill: "#AFAFAF" || props.color
-  }));
-});
-exports.BmArrowCircleUp = BmArrowCircleUp;
 var CopyToClipBoard = (0, _styles.withStyles)(icon)(function (props) {
   return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, _extends({
     action: true