beem-component 2.0.3 → 2.0.5

package/dist/components/Buttons/buttons.js

@@ -23,6 +23,7 @@ var ButtonText = _styledComponents.default.div.withConfig({
   if (size === 'large') return "".concat(_text.h3);
   if (size === 'medium') return "".concat(_text.h3);
   if (size === 'small') return "".concat(_text.h4);
+  if (size === 'xsmall') return "".concat(_text.h6);
   return "".concat(_text.h3);
 }, function (_ref2) {
   var variant = _ref2.variant,
@@ -41,16 +42,24 @@ var ButtonText = _styledComponents.default.div.withConfig({
 });
 var BeemButton = _styledComponents.default.button.withConfig({
   displayName: "buttons__BeemButton"
-})(["display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:0.25rem;padding:", ";background:", ";border:0.071rem solid ", ";&:hover{background:", ";border:0.071rem solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}&:hover ", "{color:", ";}&:active ", "{color:", ";}"], function (_ref3) {
+})(["display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:0.2857rem;padding:", ";line-height:", ";background:", ";border:0.071rem solid ", ";&:hover{background:", ";border:0.071rem solid ", ";}&:active{background:", ";box-shadow:", ";border:0.071rem solid ", ";}&:hover ", "{color:", ";}&:active ", "{color:", ";}"], function (_ref3) {
   var size = _ref3.size;
   if (size === 'large') return '0.625rem 1.5rem';
   if (size === 'medium') return '0.4375rem 1rem';
-  if (size === 'small') return '0.375rem 0.75rem';
-  return '0.625rem 1.5rem';
+  if (size === 'small') return '.375rem .75rem';
+  if (size === 'xsmall') return '.4286rem .8571rem';
+  return '.625rem 1.5rem';
 }, function (_ref4) {
-  var variant = _ref4.variant,
-    disabled = _ref4.disabled,
-    color = _ref4.color;
+  var size = _ref4.size;
+  // if (size === 'large') return '0.625rem 1.5rem';
+  // if (size === 'medium') return '0.4375rem 1rem';
+  // if (size === 'small') return '.375rem .75rem';
+  if (size === 'xsmall') return '1.4286rem';
+  return 'normal';
+}, function (_ref5) {
+  var variant = _ref5.variant,
+    disabled = _ref5.disabled,
+    color = _ref5.color;
   if (!disabled) {
     if (variant === 'primary') return "".concat(color || _colors.BmPrimaryBlue);
     if (variant === 'secondary') return 'none';
@@ -64,10 +73,10 @@ var BeemButton = _styledComponents.default.button.withConfig({
   if (variant === 'secondary') return 'none';
   if (variant === 'tertiary') return 'none';
   return "".concat(_colors.BmGrey100);
-}, function (_ref5) {
-  var variant = _ref5.variant,
-    disabled = _ref5.disabled,
-    color = _ref5.color;
+}, function (_ref6) {
+  var variant = _ref6.variant,
+    disabled = _ref6.disabled,
+    color = _ref6.color;
   if (!disabled) {
     if (variant === 'primary') return "".concat(color || _colors.BmPrimaryBlue);
     if (variant === 'secondary') return "".concat(color || _colors.BmPrimaryBlue);
@@ -80,10 +89,10 @@ var BeemButton = _styledComponents.default.button.withConfig({
   if (variant === 'primary') return "".concat(_colors.BmGrey100);
   if (variant === 'secondary') return "".concat(_colors.BmGrey400);
   if (variant === 'tertiary') return 'transparent';
-}, function (_ref6) {
-  var variant = _ref6.variant,
-    disabled = _ref6.disabled,
-    color = _ref6.color;
+}, function (_ref7) {
+  var variant = _ref7.variant,
+    disabled = _ref7.disabled,
+    color = _ref7.color;
   if (!disabled) {
     if (variant === 'primary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     if (variant === 'neutral') return "".concat(_colors.BmGrey50);
@@ -93,18 +102,18 @@ var BeemButton = _styledComponents.default.button.withConfig({
       return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     }
   }
-}, function (_ref7) {
-  var variant = _ref7.variant,
-    disabled = _ref7.disabled,
-    color = _ref7.color;
-  if (!disabled) {
-    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
-  }
-  return 'none';
 }, function (_ref8) {
   var variant = _ref8.variant,
     disabled = _ref8.disabled,
     color = _ref8.color;
+  if (!disabled) {
+    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
+  }
+  return 'none';
+}, function (_ref9) {
+  var variant = _ref9.variant,
+    disabled = _ref9.disabled,
+    color = _ref9.color;
   if (!disabled) {
     if (variant === 'primary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     if (variant === 'neutral') return "".concat(_colors.BmGrey100);
@@ -114,30 +123,23 @@ var BeemButton = _styledComponents.default.button.withConfig({
       return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
     }
   }
-}, function (_ref9) {
-  var variant = _ref9.variant,
-    disabled = _ref9.disabled;
+}, function (_ref10) {
+  var variant = _ref10.variant,
+    disabled = _ref10.disabled;
   if (!disabled) {
     if (variant === 'primary' || variant === 'success' || variant === 'destructive') return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
     if (!variant) {
       return 'inset 0rem 0.125rem 0.25rem rgba(0, 0, 0, 0.25)';
     }
   }
-}, function (_ref10) {
-  var variant = _ref10.variant,
-    disabled = _ref10.disabled,
-    color = _ref10.color;
-  if (!disabled) {
-    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
-  }
-  return 'none';
-}, ButtonText, function (_ref11) {
+}, function (_ref11) {
   var variant = _ref11.variant,
     disabled = _ref11.disabled,
     color = _ref11.color;
   if (!disabled) {
-    if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
+    if (variant === 'secondary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
   }
+  return 'none';
 }, ButtonText, function (_ref12) {
   var variant = _ref12.variant,
     disabled = _ref12.disabled,
@@ -145,6 +147,13 @@ var BeemButton = _styledComponents.default.button.withConfig({
   if (!disabled) {
     if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
   }
+}, ButtonText, function (_ref13) {
+  var variant = _ref13.variant,
+    disabled = _ref13.disabled,
+    color = _ref13.color;
+  if (!disabled) {
+    if (variant === 'secondary' || variant === 'tertiary') return "".concat((0, _polished.darken)(0.1, color || _colors.BmPrimaryBlue));
+  }
 });
 var BmLeftIcon = (0, _styledComponents.default)(_iconStyles.BmButtonIcon).withConfig({
   displayName: "buttons__BmLeftIcon"

package/dist/components/ChatComponents/ChatBody/chatBody.js

@@ -59,7 +59,7 @@ var Messages = _styledComponents.default.div.withConfig({
     return "".concat(_colors.BmPrimaryWhite);
   }
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "#F9FAFB";
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
@@ -77,8 +77,8 @@ var Messages = _styledComponents.default.div.withConfig({
     return '0rem';
   }
   if (state) {
-    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
-    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
+    if (state === 'inbound') return '.5714rem .5714rem .5714rem 0rem';
+    if (state === 'outbound') return '.5714rem .5714rem 0rem .5714rem';
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref5) {
@@ -93,11 +93,15 @@ var Messages = _styledComponents.default.div.withConfig({
   }
   return '';
 }, function (_ref6) {
-  var metadata = _ref6.metadata;
+  var metadata = _ref6.metadata,
+    state = _ref6.state;
   if (metadata) {
     return '';
   }
-  return "0.071rem solid ".concat(_colors.BmGrey200, ";");
+  if (state) {
+    if (state === 'inbound') return "0.071rem solid ".concat(_colors.BmGrey200, ";");
+  }
+  return '';
 });
 var MessagesSubDetails = _styledComponents.default.div.withConfig({
   displayName: "chatBody__MessagesSubDetails"
@@ -142,10 +146,10 @@ var handleState = function handleState(_ref8) {
 // Start of File Attachment
 var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__FileAttachmentWrapper"
-})(["display:flex;cursor:pointer;flex-direction:row;padding:1rem;background:", ";color:", ";border-radius:", ";border:0.071rem solid ", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], function (_ref9) {
+})(["display:flex;cursor:pointer;flex-direction:row;align-items:center;padding:1rem;background:", ";color:", ";border-radius:", ";border:", ";> *{&:last-child{margin-left:auto;}:not(:last-child){margin-right:0.5rem;}}&&& > *{align-items:center;color:", ";}", " ", ""], function (_ref9) {
   var state = _ref9.state;
   if (state) {
-    if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
+    if (state === 'inbound') return "#F9FAFB";
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
@@ -157,14 +161,31 @@ var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   }
   return "".concat(_colors.BmPrimaryWhite);
 }, function (_ref11) {
-  var state = _ref11.state;
+  var state = _ref11.state,
+    src = _ref11.src;
   if (state) {
-    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
-    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
+    if (state === 'inbound') {
+      if (src) {
+        return '0rem 0rem .5714rem 0rem';
+      }
+      return '.5714rem .5714rem .5714rem 0rem';
+    }
+    if (state === 'outbound') {
+      if (src) {
+        return '0rem 0rem 0rem .5714rem';
+      }
+      return '.5714rem .5714rem 0rem .5714rem';
+    }
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, _colors.BmGrey200, function (_ref12) {
+}, function (_ref12) {
   var state = _ref12.state;
+  if (state) {
+    if (state === 'inbound') return "0.071rem solid ".concat(_colors.BmGrey200, ";");
+  }
+  return '';
+}, function (_ref13) {
+  var state = _ref13.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlue);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -172,61 +193,67 @@ var FileAttachmentWrapper = _styledComponents.default.div.withConfig({
   return "".concat(_colors.BmPrimaryWhite);
 }, '' /* max-width: 100%; */, '' /* max-height: 100%; */);
 
-var BmFileAttachment = function BmFileAttachment(_ref13) {
-  var state = _ref13.state,
-    file = _ref13.file,
-    src = _ref13.src,
-    fileName = _ref13.fileName,
-    onDownload = _ref13.onDownload,
-    link = _ref13.link,
-    rest = _objectWithoutProperties(_ref13, _excluded);
+var BmFileAttachment = function BmFileAttachment(_ref14) {
+  var state = _ref14.state,
+    file = _ref14.file,
+    src = _ref14.src,
+    fileName = _ref14.fileName,
+    onDownload = _ref14.onDownload,
+    link = _ref14.link,
+    rest = _objectWithoutProperties(_ref14, _excluded);
   return /*#__PURE__*/_react.default.createElement(FileAttachmentWrapper, _extends({
-    state: state
+    state: state,
+    src: src
   }, rest), /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
     icon: /*#__PURE__*/_react.default.createElement(_FilePresent.default, null)
   }), fileName, /*#__PURE__*/_react.default.createElement("a", {
     href: link,
     download: true
   }, /*#__PURE__*/_react.default.createElement(_iconStyles.BmIcons, {
+    style: {
+      color: state === 'inbound' ? "".concat(_colors.BmPrimaryBlue) : "".concat(_colors.BmPrimaryWhite)
+    },
     icon: /*#__PURE__*/_react.default.createElement(_Download.default, null)
   })));
 };
 // Start of Component for Images
 var BmImageWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__BmImageWrapper"
-})(["display:flex;flex-direction:column;color:", ";border-radius:", ";border:0.071rem solid ", ";"], function (_ref14) {
-  var state = _ref14.state;
+})(["display:flex;flex-direction:column;color:", ";"], function (_ref15) {
+  var state = _ref15.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref15) {
-  var state = _ref15.state;
-  if (state) {
-    if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
-    if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
-  }
-  return "".concat(_colors.BmPrimaryWhite);
-}, _colors.BmGrey200);
+});
 exports.BmImageWrapper = BmImageWrapper;
 var BmImage = _styledComponents.default.img.withConfig({
   displayName: "chatBody__BmImage"
-})(["", " width:100%;object-fit:cover;flex-grow:1;"], '' /* Fix width */);
+})(["", " width:100%;object-fit:cover;flex-grow:1;border-radius:", ";"], '' /* Fix width */, function (_ref16) {
+  var state = _ref16.state;
+  if (state) {
+    if (state === 'inbound') return '.5714rem .5714rem 0rem 0rem';
+    if (state === 'outbound') return '.5714rem .5714rem 0rem 0rem';
+  }
+  return "".concat(_colors.BmPrimaryWhite);
+});
 exports.BmImage = BmImage;
-var BmImageChat = function BmImageChat(_ref16) {
-  var state = _ref16.state,
-    src = _ref16.src,
-    fileName = _ref16.fileName,
-    rest = _objectWithoutProperties(_ref16, _excluded2);
+var BmImageChat = function BmImageChat(_ref17) {
+  var state = _ref17.state,
+    src = _ref17.src,
+    fileName = _ref17.fileName,
+    rest = _objectWithoutProperties(_ref17, _excluded2);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BmImageWrapper, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(BmImage, {
     src: src,
-    alt: "src"
+    alt: "src",
+    state: state
   }), fileName && /*#__PURE__*/_react.default.createElement(BmFileAttachment, _extends({
     state: state,
     file: src,
+    src: src,
     fileName: fileName
   }, rest))));
 };
@@ -239,15 +266,15 @@ var MessageState = _styledComponents.default.div.withConfig({
 exports.MessageState = MessageState;
 var RepliedTextWrapper = _styledComponents.default.div.withConfig({
   displayName: "chatBody__RepliedTextWrapper"
-})(["display:flex;flex-direction:column;justify-content:center;padding:1.14286rem 1.14286rem 1.14286rem 0.35714rem;gap:1rem;border-radius:0.25rem 0.25rem 0.25rem 0.25rem;border:1px solid ", ";background:", ";color:", ";"], _colors.BmGrey200, function (_ref17) {
-  var state = _ref17.state;
+})(["display:flex;flex-direction:column;justify-content:center;padding:1.14286rem 1.14286rem 1.14286rem 0.35714rem;gap:1rem;border-radius:0.25rem 0.25rem 0.25rem 0.25rem;border:1px solid ", ";background:", ";color:", ";"], _colors.BmGrey200, function (_ref18) {
+  var state = _ref18.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryWhite);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryBlue);
   }
   return "".concat(_colors.BmPrimaryWhite);
-}, function (_ref18) {
-  var state = _ref18.state;
+}, function (_ref19) {
+  var state = _ref19.state;
   if (state) {
     if (state === 'inbound') return "".concat(_colors.BmPrimaryBlack);
     if (state === 'outbound') return "".concat(_colors.BmPrimaryWhite);
@@ -255,21 +282,21 @@ var RepliedTextWrapper = _styledComponents.default.div.withConfig({
   return "".concat(_colors.BmPrimaryWhite);
 });
 exports.RepliedTextWrapper = RepliedTextWrapper;
-BmChat.Details = function (_ref19) {
-  var children = _ref19.children,
-    state = _ref19.state,
-    displayTime = _ref19.displayTime,
-    status = _ref19.status,
-    session = _ref19.session,
-    src = _ref19.src,
-    file = _ref19.file,
-    fileName = _ref19.fileName,
-    sessionDetails = _ref19.sessionDetails,
-    sessionTimeline = _ref19.sessionTimeline,
-    feedPostComments = _ref19.feedPostComments,
-    agentName = _ref19.agentName,
-    metadata = _ref19.metadata,
-    rest = _objectWithoutProperties(_ref19, _excluded3);
+BmChat.Details = function (_ref20) {
+  var children = _ref20.children,
+    state = _ref20.state,
+    displayTime = _ref20.displayTime,
+    status = _ref20.status,
+    session = _ref20.session,
+    src = _ref20.src,
+    file = _ref20.file,
+    fileName = _ref20.fileName,
+    sessionDetails = _ref20.sessionDetails,
+    sessionTimeline = _ref20.sessionTimeline,
+    feedPostComments = _ref20.feedPostComments,
+    agentName = _ref20.agentName,
+    metadata = _ref20.metadata,
+    rest = _objectWithoutProperties(_ref20, _excluded3);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Details, _extends({
     state: state
   }, rest), /*#__PURE__*/_react.default.createElement(MessageState, null, state === 'inbound' && session && handleState({

package/dist/components/ChatComponents/ContactCards/contactCards.js

@@ -69,7 +69,7 @@ var BmContactCheckbox = function BmContactCheckbox(_ref4) {
 exports.BmContactCheckbox = BmContactCheckbox;
 var BmContactCard = _styledComponents.default.div.withConfig({
   displayName: "contactCards__BmContactCard"
-})(["display:flex;flex-direction:row;justify-content:space-between;> *:not(:last-child){margin-right:1rem;}&:hover{background:", ";", "{display:block;}}background:", ";", " cursor:pointer;padding:1rem 1.5rem;"], _colors.BmSecondaryBlue12, CheckboxContainer, function (_ref5) {
+})(["display:flex;flex-direction:row;justify-content:space-between;> *:not(:last-child){margin-right:1rem;}&:hover{background:", ";", "{display:block;}}background:", ";", " cursor:pointer;padding:1rem 1.5rem;border-bottom:0.0357rem solid #f2f4f7;"], _colors.BmSecondaryBlue12, CheckboxContainer, function (_ref5) {
   var isVisible = _ref5.isVisible;
   return isVisible ? "".concat(_colors.BmSecondaryBlue12) : '';
 }, function (_ref6) {

package/dist/components/Tags/tags.js

@@ -42,7 +42,7 @@ var Color = function Color(_ref) {
 };
 var BeemTag = _styledComponents.default.button.withConfig({
   displayName: "tags__BeemTag"
-})(["", " display:", ";flex-direction:row;justify-content:center;align-items:center;padding:0.2143rem 0.5714rem;border-radius:0.4286rem;background:", ";border:0.1071rem solid ", ";> *{color:", ";text-transform:capitalize;}> *:not(:last-child){margin-right:0.5rem;}"], '' /* display: flex; */, function (_ref2) {
+})(["", " display:", ";flex-direction:row;justify-content:center;align-items:center !important;padding:0.2143rem 0.5714rem;border-radius:0.4286rem;background:", ";border:0.1071rem solid ", ";> *{color:", ";text-transform:capitalize;}> *:not(:last-child){margin-right:0.5rem;}"], '' /* display: flex; */, function (_ref2) {
   var closeButton = _ref2.closeButton,
     show = _ref2.show;
   if (!closeButton) {

package/dist/components/dropdownButton.js

@@ -20,7 +20,7 @@ var Wrapper = _styledComponents.default.div.withConfig({
 })(["display:flex;padding:0rem;margin:0rem;"]);
 var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withConfig({
   displayName: "dropdownButton__Drop"
-})(["background:", ";border:0.071rem solid ", ";border-left:0.071rem solid ", ";border-top-left-radius:0.071rem;*/}border-bottom-left-radius:0.071rem;*/}padding:0rem */}"], function (_ref) {
+})(["background:", ";border:0.071rem solid ", ";border-left:0.0857rem solid ", ";border-top-left-radius:0.071rem;border-bottom-left-radius:0.071rem;border-radius:none;padding:0rem;"], function (_ref) {
   var variant = _ref.variant,
     disabled = _ref.disabled,
     color = _ref.color;
@@ -73,11 +73,25 @@ var Drop = (0, _styledComponents.default)(_buttonIconsOnly.BmBtnIcon).withConfig
 exports.Drop = Drop;
 var Button = (0, _styledComponents.default)(_buttons.BmButton).withConfig({
   displayName: "dropdownButton__Button"
-})(["border-top-right-radius:0.071rem;*/}border-bottom-right-radius:0.071rem;*/}border-radius:none;border-right:none;"]);
+})(["border-top-right-radius:0.071rem;border-bottom-right-radius:0.071rem;border-right:none;padding:", ";line-height:", ";"], function (_ref4) {
+  var size = _ref4.size;
+  // if (size === 'large') return '0.625rem 1.5rem';
+  // if (size === 'medium') return '0.4375rem 1rem';
+  // if (size === 'small') return '.375rem .75rem';
+  if (size === 'xsmall') return '.4286rem .8571rem';
+  return '.625rem 1.5rem';
+}, function (_ref5) {
+  var size = _ref5.size;
+  // if (size === 'large') return '0.625rem 1.5rem';
+  // if (size === 'medium') return '0.4375rem 1rem';
+  // if (size === 'small') return '.375rem .75rem';
+  if (size === 'xsmall') return '1.4286rem';
+  return 'normal';
+});
 exports.Button = Button;
-var BmButtonDropDown = function BmButtonDropDown(_ref4) {
-  var children = _ref4.children,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+var BmButtonDropDown = function BmButtonDropDown(_ref6) {
+  var children = _ref6.children,
+    rest = _objectWithoutProperties(_ref6, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Wrapper, rest, /*#__PURE__*/_react.default.createElement(Button, rest, children), /*#__PURE__*/_react.default.createElement(Drop, _extends({}, rest, {
     icon: /*#__PURE__*/_react.default.createElement(_icons.KeyboardArrowDown, null)
   }))));

package/dist/components/text.js

@@ -6,27 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 var _typography = require("./typography");
 // 32px
-var h1 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h1 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 24px
 exports.h1 = h1;
-var h2 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
+var h2 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
 
 // 18px
 exports.h2 = h2;
-var h3 = "font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h3 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 16px
 exports.h3 = h3;
-var h4 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h4 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
 exports.h4 = h4;
-var h5 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h5 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 12px
 exports.h5 = h5;
-var h6 = " font-family: ".concat(_typography.PoppinsMedium, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 0.857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+var h6 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: .857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
 exports.h6 = h6;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -15,9 +15,13 @@ import {
   BmChatAccordion,
   BmAccordion,
   BmChatForm,
+  BmButton,
+  BmButtonDropDown,
 } from './lib/components';
 
 const Chat = () => {
+  const image =
+    'https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExc2w1ZnI0OW5xdHk4eXU3bXg3ODFmMmxpZThnYmF2bnNudDN4dXlmaiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/sGsoN9tI8a1k04pNcf/giphy.webp';
   const msg = [
     {
       message: 'Me as user replying to the beem message',
@@ -189,9 +193,10 @@ const Chat = () => {
                   <BmCounter>10</BmCounter>
                 </BmContactCard.SubDetails>
                 <BmContactCard.SubDetails>
-                  <BmTag dot variant="success">
+                  <BmTag dot>
                     <p>{ms.id}</p>
                   </BmTag>
+
                   <p>10:00 am</p>
                 </BmContactCard.SubDetails>
               </BmContactCard.Details>
@@ -255,10 +260,105 @@ const Chat = () => {
         >
           <p>Pending</p>
         </BmTag>
-        <BmTag dot closeButton>
+        <BmTag dot>
           <p>Bot</p>
         </BmTag>
       </div>
+      <BmChat>
+        <BmChat.Body>
+          <BmChat.Details
+            state="inbound"
+            session="sms"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          >
+            <p>Inbound Text Message 1</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chat.png</p>}
+            src={image}
+            sessionDetails={{
+              message: <h3>Session Message</h3>,
+              time: <p>12:00pm</p>,
+            }}
+          />
+          <BmChat.Details
+            state="inbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+          />
+          <BmChat.Details
+            state="outbound"
+            session="bot"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+          >
+            <p>Outbound Text Message</p>
+          </BmChat.Details>
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>12:00pm</p>}
+            status="sent"
+            fileName={<p>chat.png</p>}
+            src={image}
+          />
+          <BmChat.Details
+            state="outbound"
+            session="live"
+            displayTime={<p>10:00am</p>}
+            status="failed"
+            fileName={<p>file.csv</p>}
+            file={image}
+            link={image}
+            onDownload={() => {
+              console.log('sdfsfs');
+            }}
+          />
+        </BmChat.Body>
+        {/* <BmChat.Footer>
+          <div className="chat-footer">
+            <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
+            <BmIcons icon={<AttachFileIcon />} size="xlarge" />
+            <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
+            <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
+            <BmIcons icon={<SendIcon />} size="xlarge" />
+          </div>
+        </BmChat.Footer> */}
+        <div className="w-20">
+          <BmButton size="xsmall" variant="neutral">
+            Hello
+          </BmButton>
+          <BmButton size="xsmall" variant="secondary">
+            Hello
+          </BmButton>
+          <BmButton size="xsmall" variant="primary">
+            Hello
+          </BmButton>
+          <BmButton size="xsmall" variant="destructive">
+            Hello
+          </BmButton>
+          <BmButton size="xsmall" variant="tertiary">
+            Hello
+          </BmButton>
+          <BmButton size="xsmall" variant="success">
+            Hello
+          </BmButton>
+          <BmButton variant="success">Test</BmButton>
+          <BmButtonDropDown size="xsmall">Test</BmButtonDropDown>
+        </div>
+      </BmChat>
     </>
   );
 };

package/src/lib/components/Buttons/buttons.js

@@ -16,13 +16,14 @@ import {
   BmSecondaryRed8,
 } from '../colors';
 import { BmButtonIcon } from '../iconStyles';
-import { h3, h4 } from '../text';
+import { h3, h4, h6 } from '../text';
 
 const ButtonText = styled.div`
   ${({ size }) => {
     if (size === 'large') return `${h3}`;
     if (size === 'medium') return `${h3}`;
     if (size === 'small') return `${h4}`;
+    if (size === 'xsmall') return `${h6}`;
     return `${h3}`;
   }}
   text-align: center;
@@ -46,12 +47,20 @@ const BeemButton = styled.button`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  border-radius: 0.25rem;
+  border-radius: 0.2857rem;
   padding: ${({ size }) => {
     if (size === 'large') return '0.625rem 1.5rem';
     if (size === 'medium') return '0.4375rem 1rem';
-    if (size === 'small') return '0.375rem 0.75rem';
-    return '0.625rem 1.5rem';
+    if (size === 'small') return '.375rem .75rem';
+    if (size === 'xsmall') return '.4286rem .8571rem';
+    return '.625rem 1.5rem';
+  }};
+  line-height: ${({ size }) => {
+    // if (size === 'large') return '0.625rem 1.5rem';
+    // if (size === 'medium') return '0.4375rem 1rem';
+    // if (size === 'small') return '.375rem .75rem';
+    if (size === 'xsmall') return '1.4286rem';
+    return 'normal';
   }};
   background: ${({ variant, disabled, color }) => {
     if (!disabled) {

package/src/lib/components/ChatComponents/ChatBody/chatBody.js

@@ -83,7 +83,7 @@ const Messages = styled.div`
       return `${BmPrimaryWhite}`;
     }
     if (state) {
-      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `#F9FAFB`;
       if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
@@ -100,8 +100,8 @@ const Messages = styled.div`
       return '0rem';
     }
     if (state) {
-      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
-      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
+      if (state === 'inbound') return '.5714rem .5714rem .5714rem 0rem';
+      if (state === 'outbound') return '.5714rem .5714rem 0rem .5714rem';
     }
     return `${BmPrimaryWhite}`;
   }};
@@ -116,11 +116,14 @@ const Messages = styled.div`
     return '';
   }};
 
-  border: ${({ metadata }) => {
+  border: ${({ metadata, state }) => {
     if (metadata) {
       return '';
     }
-    return `0.071rem solid ${BmGrey200};`;
+    if (state) {
+      if (state === 'inbound') return `0.071rem solid ${BmGrey200};`;
+    }
+    return '';
   }};
   word-break: break-word;
   margin: 0rem;
@@ -163,10 +166,11 @@ const FileAttachmentWrapper = styled.div`
   display: flex;
   cursor: pointer;
   flex-direction: row;
+  align-items: center;
   padding: 1rem;
   background: ${({ state }) => {
     if (state) {
-      if (state === 'inbound') return `${BmPrimaryWhite}`;
+      if (state === 'inbound') return `#F9FAFB`;
       if (state === 'outbound') return `${BmPrimaryBlue}`;
     }
     return `${BmPrimaryWhite}`;
@@ -178,14 +182,30 @@ const FileAttachmentWrapper = styled.div`
     }
     return `${BmPrimaryWhite}`;
   }};
-  border-radius: ${({ state }) => {
+  border-radius: ${({ state, src }) => {
     if (state) {
-      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
-      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
+      if (state === 'inbound') {
+        if (src) {
+          return '0rem 0rem .5714rem 0rem';
+        }
+
+        return '.5714rem .5714rem .5714rem 0rem';
+      }
+      if (state === 'outbound') {
+        if (src) {
+          return '0rem 0rem 0rem .5714rem';
+        }
+        return '.5714rem .5714rem 0rem .5714rem';
+      }
     }
     return `${BmPrimaryWhite}`;
   }};
-  border: 0.071rem solid ${BmGrey200};
+  border: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return `0.071rem solid ${BmGrey200};`;
+    }
+    return '';
+  }};
   > * {
     &:last-child {
       margin-left: auto;
@@ -218,12 +238,18 @@ const BmFileAttachment = ({
   ...rest
 }) => {
   return (
-    <FileAttachmentWrapper state={state} {...rest}>
+    <FileAttachmentWrapper state={state} src={src} {...rest}>
       <BmIcons icon={<FilePresentIcon />} />
       {/* {fileName} */}
       {fileName}
       <a href={link} download>
-        <BmIcons icon={<DownloadIcon />} />
+        <BmIcons
+          style={{
+            color:
+              state === 'inbound' ? `${BmPrimaryBlue}` : `${BmPrimaryWhite}`,
+          }}
+          icon={<DownloadIcon />}
+        />
       </a>
     </FileAttachmentWrapper>
   );
@@ -239,14 +265,6 @@ export const BmImageWrapper = styled.div`
     }
     return `${BmPrimaryWhite}`;
   }};
-  border-radius: ${({ state }) => {
-    if (state) {
-      if (state === 'inbound') return '0.21875rem 0.21875rem 0.21875rem 0rem';
-      if (state === 'outbound') return '0.21875rem 0.21875rem 0rem 0.21875rem';
-    }
-    return `${BmPrimaryWhite}`;
-  }};
-  border: 0.071rem solid ${BmGrey200};
 `;
 
 export const BmImage = styled.img`
@@ -254,17 +272,26 @@ export const BmImage = styled.img`
   width: 100%;
   object-fit: cover;
   flex-grow: 1;
+
+  border-radius: ${({ state }) => {
+    if (state) {
+      if (state === 'inbound') return '.5714rem .5714rem 0rem 0rem';
+      if (state === 'outbound') return '.5714rem .5714rem 0rem 0rem';
+    }
+    return `${BmPrimaryWhite}`;
+  }};
 `;
 
 export const BmImageChat = ({ state, src, fileName, ...rest }) => {
   return (
     <>
       <BmImageWrapper state={state} {...rest}>
-        <BmImage src={src} alt="src" />
+        <BmImage src={src} alt="src" state={state} />
         {fileName && (
           <BmFileAttachment
             state={state}
             file={src}
+            src={src}
             fileName={fileName}
             {...rest}
           />

package/src/lib/components/ChatComponents/ContactCards/contactCards.js

@@ -106,6 +106,7 @@ export const BmContactCard = styled.div`
   `}
   cursor: pointer;
   padding: 1rem 1.5rem;
+  border-bottom: 0.0357rem solid #f2f4f7;
 `;
 
 BmContactCard.Profile = styled.div`

package/src/lib/components/Tags/tags.js

@@ -41,7 +41,7 @@ const BeemTag = styled.button`
   }};
   flex-direction: row;
   justify-content: center;
-  align-items: center;
+  align-items: center !important;
   padding: 0.2143rem 0.5714rem;
   border-radius: 0.4286rem;
   background: ${({ variant }) => {

package/src/lib/components/dropdownButton.js

@@ -49,7 +49,7 @@ export const Drop = styled(BmBtnIcon)`
       if (variant === 'secondary') return `${BmGrey400}`;
       if (variant === 'tertiary') return 'transparent';
     }};
-    border-left:  0.071rem solid
+  border-left: 0.0857rem solid
     ${({ variant, disabled, color }) => {
       if (!disabled) {
         if (variant === 'primary') return `${BmPrimaryWhite}`;
@@ -64,16 +64,31 @@ export const Drop = styled(BmBtnIcon)`
       if (variant === 'secondary') return `${BmGrey400}`;
       if (variant === 'tertiary') return 'transparent';
     }};
-  border-top-left-radius: 0.071rem; */}
-  border-bottom-left-radius: 0.071rem; */}
-  padding: 0rem */}
+  border-top-left-radius: 0.071rem;
+  border-bottom-left-radius: 0.071rem;
+  border-radius: none;
+  padding: 0rem;
 `;
 
 export const Button = styled(BmButton)`
-  border-top-right-radius: 0.071rem; */}
-  border-bottom-right-radius: 0.071rem; */}
-  border-radius: none;
+  border-top-right-radius: 0.071rem;
+  border-bottom-right-radius: 0.071rem;
+  /* border-radius: none; */
   border-right: none;
+  padding: ${({ size }) => {
+    // if (size === 'large') return '0.625rem 1.5rem';
+    // if (size === 'medium') return '0.4375rem 1rem';
+    // if (size === 'small') return '.375rem .75rem';
+    if (size === 'xsmall') return '.4286rem .8571rem';
+    return '.625rem 1.5rem';
+  }};
+  line-height: ${({ size }) => {
+    // if (size === 'large') return '0.625rem 1.5rem';
+    // if (size === 'medium') return '0.4375rem 1rem';
+    // if (size === 'small') return '.375rem .75rem';
+    if (size === 'xsmall') return '1.4286rem';
+    return 'normal';
+  }};
 `;
 
 export const BmButtonDropDown = ({ children, ...rest }) => {

package/src/lib/components/text.js

@@ -1,7 +1,7 @@
-import { PoppinsMedium, OpenSans } from './typography';
+import { OpenSans } from './typography';
 
 // 32px
-export const h1 = `font-family: ${PoppinsMedium};
+export const h1 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 2.286rem;
@@ -9,7 +9,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 24px
-export const h2 = `font-family: ${PoppinsMedium};
+export const h2 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.714rem;
@@ -17,7 +17,7 @@ letter-spacing: -0.02em;
 margin: 0rem;`;
 
 // 18px
-export const h3 = `font-family: ${PoppinsMedium};
+export const h3 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.286rem;
@@ -25,7 +25,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 16px
-export const h4 = ` font-family: ${PoppinsMedium};
+export const h4 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.143rem;
@@ -33,7 +33,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 14px
-export const h5 = ` font-family: ${PoppinsMedium};
+export const h5 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1rem;
@@ -41,10 +41,10 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 12px
-export const h6 = ` font-family: ${PoppinsMedium};
+export const h6 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
-font-size: 0.857rem;
+font-size: .857rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;