@helpscout/hsds-react/components/Message/Message.Bubble.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.MessageBubbleUI = exports.MessageBubbleTypingUI = exports.MessageBubbleTitleUI = exports.MessageBubbleIconWrapperUI = exports.MessageBubbleFromUI = exports.MessageBubbleBodyUI = exports.config = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _classNames = require("../../utilities/classNames");

var _Heading = _interopRequireDefault(require("../Heading"));

var bem = (0, _classNames.BEM)('.c-MessageBubble');
var config = {
  borderRadius: {
    sm: 4,
    md: 12
  },
  icon: {
    left: 14,
    offset: {
      md: 20,
      sm: 32
    }
  },
  maxWidth: 700,
  padding: {
    notification: '18px 20px',
    embed: '12px 15px',
    md: '13px 20px 13px',
    fromMd: '13px 20px 14px',
    sm: '5px'
  }
};
exports.config = config;
var MessageBubbleBodyUI = (0, _styledComponents.default)('span').withConfig({
  displayName: "MessageBubblecss__MessageBubbleBodyUI",
  componentId: "l2urzn-0"
})(["color:", ";line-height:24px;word-break:break-word;", " ", ""], (0, _color.getColor)('charcoal.700'), function (_ref) {
  var showEmojiOnlyStyles = _ref.showEmojiOnlyStyles;
  return showEmojiOnlyStyles && "line-height: 1";
}, function (_ref2) {
  var isEmbed = _ref2.isEmbed;
  return isEmbed && "\n      color: " + (0, _color.getColor)('charcoal.500') + ";\n      line-height: 19px;\n      line-height: calc(19 / 13);\n    ";
});
exports.MessageBubbleBodyUI = MessageBubbleBodyUI;
var MessageBubbleFromUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "MessageBubblecss__MessageBubbleFromUI",
  componentId: "l2urzn-1"
})(["color:", ";margin-bottom:5px;text-align:right;", ""], (0, _color.getColor)('charcoal.700'), function (_ref3) {
  var isEmbed = _ref3.isEmbed;
  return isEmbed && "color: " + (0, _color.getColor)('grey.800') + ";";
});
exports.MessageBubbleFromUI = MessageBubbleFromUI;
var MessageBubbleIconWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "MessageBubblecss__MessageBubbleIconWrapperUI",
  componentId: "l2urzn-2"
})(["left:", "px;position:absolute;"], config.icon.left);
exports.MessageBubbleIconWrapperUI = MessageBubbleIconWrapperUI;
var MessageBubbleTitleUI = (0, _styledComponents.default)(_Heading.default).withConfig({
  displayName: "MessageBubblecss__MessageBubbleTitleUI",
  componentId: "l2urzn-3"
})(["margin-bottom:2px;"]);
exports.MessageBubbleTitleUI = MessageBubbleTitleUI;
var MessageBubbleTypingUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "MessageBubblecss__MessageBubbleTypingUI",
  componentId: "l2urzn-4"
})(["margin-left:-5px;margin-right:-5px;padding:7px 0;"]);
exports.MessageBubbleTypingUI = MessageBubbleTypingUI;
var MessageBubbleUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "MessageBubblecss__MessageBubbleUI",
  componentId: "l2urzn-5"
})(["background-color:", ";border-top-left-radius:", "px;border-top-right-radius:", "px;border-bottom-right-radius:", "px;border-bottom-left-radius:", "px;display:inline-block;padding:", ";position:relative;max-width:", "px;text-align:left;word-break:break-word;&.is-from{background-color:", ";border-top-left-radius:", "px;border-top-right-radius:", "px;border-bottom-right-radius:", "px;border-bottom-left-radius:", "px;&.is-md{padding:", ";}}&.is-rtl{direction:rtl;text-align:right;}&.is-md{padding:", ";}&.is-sm{padding:", ";&.withIcon{", "{margin-left:", "px;}}}&.is-note:not(.is-typing){background-color:", ";color:", ";*{color:currentColor;}}&.is-typing{background:none;border:0;padding-top:7px;}&.is-theme-embed{background-color:", ";border:1px solid ", ";border-radius:8px 8px 3px 8px;max-width:100%;padding:", ";&.is-from{background-color:white;border-color:", ";border-radius:3px 8px 8px 3px;}", "{margin-left:0;margin-right:0;}&.withIcon{", "{margin-left:", "px;padding-left:4px;}}&.is-note{border-color:", ";}}&.is-theme-notifications{padding:", ";}", ""], (0, _color.getColor)('lavender.200'), config.borderRadius.md, config.borderRadius.md, config.borderRadius.sm, config.borderRadius.md, config.padding.md, config.maxWidth, (0, _color.getColor)('lavender.100'), config.borderRadius.sm, config.borderRadius.md, config.borderRadius.md, config.borderRadius.sm, config.padding.fromMd, config.padding.md, config.padding.sm, bem.element('content'), config.icon.offset.sm, (0, _color.getColor)('yellow.200'), (0, _color.getColor)('yellow.900'), (0, _color.getColor)('grey.400'), (0, _color.getColor)('grey.400'), config.padding.embed, (0, _color.getColor)('grey.500'), bem.element('typing'), bem.element('content'), config.icon.offset.md, (0, _color.getColor)('yellow.400'), config.padding.notification, function (_ref4) {
  var showEmojiOnlyStyles = _ref4.showEmojiOnlyStyles;
  return showEmojiOnlyStyles && "\n      background: none !important;\n      border: none;\n      padding-left: 0;\n      padding-right:0;\n    ";
});
exports.MessageBubbleUI = MessageBubbleUI;