@botonic/react 0.22.0-alpha.0 → 0.22.0-alpha.1

package/lib/webchat/devices/scrollbar-controller.js

@@ -1,152 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ScrollbarController = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _dom = require("../../util/dom");
-
-var _ = require(".");
-
-var debounced = function debounced(delay, fn) {
-  var timerId;
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    if (timerId) {
-      clearTimeout(timerId);
-    }
-
-    timerId = setTimeout(function () {
-      fn.apply(void 0, args);
-      timerId = null;
-    }, delay);
-  };
-};
-
-var stopAtScrollLimit = function stopAtScrollLimit(element) {
-  if (element.scrollTop === 0) element.scrollTop = 1;
-  if (element.scrollHeight - element.scrollTop === element.clientHeight) element.scrollTop -= 1;
-};
-
-var ScrollbarController = /*#__PURE__*/function () {
-  function ScrollbarController(currentDevice, host) {
-    (0, _classCallCheck2["default"])(this, ScrollbarController);
-    this.currentDevice = currentDevice;
-    this.webchat = (0, _dom.getWebchatElement)(host);
-  }
-
-  (0, _createClass2["default"])(ScrollbarController, [{
-    key: "handleScrollEvents",
-    value: function handleScrollEvents() {
-      var _this = this;
-
-      /*
-        It handles scroll events for Mobile/Desktop.
-        "ontouchmove" is the phone equivalent for "onmouseover"
-      */
-      if ((0, _.isMobileDevice)()) {
-        if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
-        this.limitScrollBoundaries();
-
-        this.webchat.ontouchstart = function (e) {
-          _this.handleOnTouchMoveEvents(e);
-        };
-
-        this.webchat.ontouchmove = function (e) {
-          _this.handleOnTouchMoveEvents(e);
-        };
-      } else {
-        this.webchat.onmouseover = function (e) {
-          return _this.handleOnMouseOverEvents(e);
-        };
-      }
-    }
-  }, {
-    key: "hasScrollbar",
-    value: function hasScrollbar() {
-      var scrollableArea = (0, _dom.getScrollableArea)(this.webchat);
-      var isScrollable = scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0;
-      return isScrollable;
-    }
-  }, {
-    key: "handleOnMouseOverEvents",
-    value: function handleOnMouseOverEvents(e) {
-      var target = e.currentTarget;
-
-      while (target) {
-        this.toggleOnMouseWheelEvents();
-        target = target.parentNode;
-      }
-    }
-  }, {
-    key: "toggleOnMouseWheelEvents",
-    value: function toggleOnMouseWheelEvents() {
-      var scrollableContent = (0, _dom.getScrollableContent)(this.webchat);
-
-      if (this.hasScrollbar()) {
-        scrollableContent.onmousewheel = {};
-        return;
-      }
-
-      scrollableContent.onmousewheel = function (e) {
-        return e.preventDefault();
-      };
-    }
-  }, {
-    key: "handleOnTouchMoveEvents",
-    value: function handleOnTouchMoveEvents(e) {
-      this.toggleOnTouchMoveEvents();
-    }
-  }, {
-    key: "toggleOnTouchMoveEvents",
-    value: function toggleOnTouchMoveEvents() {
-      if (this.hasScrollbar()) {
-        this.webchat.ontouchmove = {};
-        this.webchat.ontouchstart = {};
-        return;
-      }
-
-      this.webchat.ontouchmove = function (e) {
-        if (e.target === e.currentTarget) e.preventDefault();
-      };
-    }
-  }, {
-    key: "limitScrollBoundaries",
-    value: function limitScrollBoundaries() {
-      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
-      /*
-        It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,
-        as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
-      */
-
-      var frame = (0, _dom.getScrollableArea)(this.webchat).visible;
-      var dStopAtScrollLimit = debounced(100, stopAtScrollLimit);
-
-      if (frame) {
-        if (window.addEventListener) {
-          frame.addEventListener('scroll', function () {
-            return dStopAtScrollLimit(frame);
-          }, true);
-        } else if (window.attachEvent) {
-          frame.attachEvent('scroll', function () {
-            return dStopAtScrollLimit(frame);
-          });
-        }
-      }
-    }
-  }]);
-  return ScrollbarController;
-}();
-
-exports.ScrollbarController = ScrollbarController;
-//# sourceMappingURL=scrollbar-controller.js.map

package/lib/webchat/devices/scrollbar-controller.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/webchat/devices/scrollbar-controller.js"],"names":["debounced","delay","fn","timerId","args","clearTimeout","setTimeout","stopAtScrollLimit","element","scrollTop","scrollHeight","clientHeight","ScrollbarController","currentDevice","host","webchat","DEVICES","MOBILE","IPHONE","limitScrollBoundaries","ontouchstart","e","handleOnTouchMoveEvents","ontouchmove","onmouseover","handleOnMouseOverEvents","scrollableArea","isScrollable","visible","full","target","currentTarget","toggleOnMouseWheelEvents","parentNode","scrollableContent","hasScrollbar","onmousewheel","preventDefault","toggleOnTouchMoveEvents","frame","dStopAtScrollLimit","window","addEventListener","attachEvent"],"mappings":"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","sourcesContent":["import {\n  getScrollableArea,\n  getScrollableContent,\n  getWebchatElement,\n} from '../../util/dom'\nimport { DEVICES, isMobileDevice } from '.'\n\nconst debounced = (delay, fn) => {\n  let timerId\n  return function (...args) {\n    if (timerId) {\n      clearTimeout(timerId)\n    }\n    timerId = setTimeout(() => {\n      fn(...args)\n      timerId = null\n    }, delay)\n  }\n}\n\nconst stopAtScrollLimit = element => {\n  if (element.scrollTop === 0) element.scrollTop = 1\n  if (element.scrollHeight - element.scrollTop === element.clientHeight)\n    element.scrollTop -= 1\n}\n\nexport class ScrollbarController {\n  constructor(currentDevice, host) {\n    this.currentDevice = currentDevice\n    this.webchat = getWebchatElement(host)\n  }\n\n  handleScrollEvents() {\n    /*\n      It handles scroll events for Mobile/Desktop.\n      \"ontouchmove\" is the phone equivalent for \"onmouseover\"\n    */\n    if (isMobileDevice()) {\n      if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n      this.limitScrollBoundaries()\n      this.webchat.ontouchstart = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n      this.webchat.ontouchmove = e => {\n        this.handleOnTouchMoveEvents(e)\n      }\n    } else {\n      this.webchat.onmouseover = e => this.handleOnMouseOverEvents(e)\n    }\n  }\n\n  hasScrollbar() {\n    const scrollableArea = getScrollableArea(this.webchat)\n    const isScrollable =\n      scrollableArea.visible.clientHeight - scrollableArea.full.clientHeight < 0\n    return isScrollable\n  }\n\n  handleOnMouseOverEvents(e) {\n    let target = e.currentTarget\n    while (target) {\n      this.toggleOnMouseWheelEvents()\n      target = target.parentNode\n    }\n  }\n\n  toggleOnMouseWheelEvents() {\n    const scrollableContent = getScrollableContent(this.webchat)\n    if (this.hasScrollbar()) {\n      scrollableContent.onmousewheel = {}\n      return\n    }\n    scrollableContent.onmousewheel = e => e.preventDefault()\n  }\n\n  handleOnTouchMoveEvents(e) {\n    this.toggleOnTouchMoveEvents()\n  }\n\n  toggleOnTouchMoveEvents() {\n    if (this.hasScrollbar()) {\n      this.webchat.ontouchmove = {}\n      this.webchat.ontouchstart = {}\n      return\n    }\n    this.webchat.ontouchmove = e => {\n      if (e.target === e.currentTarget) e.preventDefault()\n    }\n  }\n\n  limitScrollBoundaries() {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    /*\n      It adds a bounce effect when top or bottom limits of the scrollbar are reached for iOS,\n      as an alternative of overscroll-behavior (https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)\n    */\n    const frame = getScrollableArea(this.webchat).visible\n    const dStopAtScrollLimit = debounced(100, stopAtScrollLimit)\n    if (frame) {\n      if (window.addEventListener) {\n        frame.addEventListener('scroll', () => dStopAtScrollLimit(frame), true)\n      } else if (window.attachEvent) {\n        frame.attachEvent('scroll', () => dStopAtScrollLimit(frame))\n      }\n    }\n  }\n}\n"],"file":"scrollbar-controller.js"}

package/lib/webchat/devices/webchat-resizer.js

@@ -1,76 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WebchatResizer = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _dom = require("../../util/dom");
-
-var _ = require(".");
-
-var WebchatResizer = /*#__PURE__*/function () {
-  function WebchatResizer(currentDevice, host) {
-    (0, _classCallCheck2["default"])(this, WebchatResizer);
-    this.currentDevice = currentDevice;
-    this.host = host;
-    this.webchat = (0, _dom.getWebchatElement)(host);
-  }
-
-  (0, _createClass2["default"])(WebchatResizer, [{
-    key: "onFocus",
-    value: function onFocus(onKeyboardShownFn) {
-      var _this = this;
-
-      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
-      /*
-        Based on Tip #4 from https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d,
-        taking window.innerHeight as the amount of pixels the virtual keyboard adds
-      */
-
-      var waitUntilKeyboardIsShown = 400;
-
-      var calculateNewWebchatElementHeight = function calculateNewWebchatElementHeight() {
-        var webchatHeight = _this.webchat.clientHeight; // Some iOS versions keep track of this height with VisualViewport API: https://stackoverflow.com/a/59056851
-
-        var keyboardOffset = window.visualViewport && window.visualViewport.height || window.innerHeight;
-        var newWebchatPercentualHeight = keyboardOffset / webchatHeight;
-
-        var toTwoDecimal = function toTwoDecimal(toRound) {
-          return Math.round(toRound * 100) / 100;
-        };
-
-        newWebchatPercentualHeight = toTwoDecimal(newWebchatPercentualHeight) * 100;
-        return newWebchatPercentualHeight;
-      };
-
-      setTimeout(function () {
-        _this.setWebchatElementHeight("".concat(calculateNewWebchatElementHeight(), "%"));
-
-        (0, _dom.scrollToBottom)(_this.host);
-        onKeyboardShownFn();
-      }, waitUntilKeyboardIsShown);
-    }
-  }, {
-    key: "onBlur",
-    value: function onBlur() {
-      if (this.currentDevice !== _.DEVICES.MOBILE.IPHONE) return;
-      this.setWebchatElementHeight('100%');
-    }
-  }, {
-    key: "setWebchatElementHeight",
-    value: function setWebchatElementHeight(newHeight) {
-      this.webchat.style.height = newHeight;
-    }
-  }]);
-  return WebchatResizer;
-}();
-
-exports.WebchatResizer = WebchatResizer;
-//# sourceMappingURL=webchat-resizer.js.map

package/lib/webchat/devices/webchat-resizer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/webchat/devices/webchat-resizer.js"],"names":["WebchatResizer","currentDevice","host","webchat","onKeyboardShownFn","DEVICES","MOBILE","IPHONE","waitUntilKeyboardIsShown","calculateNewWebchatElementHeight","webchatHeight","clientHeight","keyboardOffset","window","visualViewport","height","innerHeight","newWebchatPercentualHeight","toTwoDecimal","toRound","Math","round","setTimeout","setWebchatElementHeight","newHeight","style"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;IAEaA,c;AACX,0BAAYC,aAAZ,EAA2BC,IAA3B,EAAiC;AAAA;AAC/B,SAAKD,aAAL,GAAqBA,aAArB;AACA,SAAKC,IAAL,GAAYA,IAAZ;AACA,SAAKC,OAAL,GAAe,4BAAkBD,IAAlB,CAAf;AACD;;;;WAED,iBAAQE,iBAAR,EAA2B;AAAA;;AACzB,UAAI,KAAKH,aAAL,KAAuBI,UAAQC,MAAR,CAAeC,MAA1C,EAAkD;AAClD;AACJ;AACA;AACA;;AACI,UAAMC,wBAAwB,GAAG,GAAjC;;AACA,UAAMC,gCAAgC,GAAG,SAAnCA,gCAAmC,GAAM;AAC7C,YAAMC,aAAa,GAAG,KAAI,CAACP,OAAL,CAAaQ,YAAnC,CAD6C,CAE7C;;AACA,YAAMC,cAAc,GACjBC,MAAM,CAACC,cAAP,IAAyBD,MAAM,CAACC,cAAP,CAAsBC,MAAhD,IACAF,MAAM,CAACG,WAFT;AAGA,YAAIC,0BAA0B,GAAGL,cAAc,GAAGF,aAAlD;;AACA,YAAMQ,YAAY,GAAG,SAAfA,YAAe,CAAAC,OAAO;AAAA,iBAAIC,IAAI,CAACC,KAAL,CAAWF,OAAO,GAAG,GAArB,IAA4B,GAAhC;AAAA,SAA5B;;AACAF,QAAAA,0BAA0B,GACxBC,YAAY,CAACD,0BAAD,CAAZ,GAA2C,GAD7C;AAEA,eAAOA,0BAAP;AACD,OAXD;;AAYAK,MAAAA,UAAU,CAAC,YAAM;AACf,QAAA,KAAI,CAACC,uBAAL,WAAgCd,gCAAgC,EAAhE;;AACA,iCAAe,KAAI,CAACP,IAApB;AACAE,QAAAA,iBAAiB;AAClB,OAJS,EAIPI,wBAJO,CAAV;AAKD;;;WAED,kBAAS;AACP,UAAI,KAAKP,aAAL,KAAuBI,UAAQC,MAAR,CAAeC,MAA1C,EAAkD;AAClD,WAAKgB,uBAAL,CAA6B,MAA7B;AACD;;;WAED,iCAAwBC,SAAxB,EAAmC;AACjC,WAAKrB,OAAL,CAAasB,KAAb,CAAmBV,MAAnB,GAA4BS,SAA5B;AACD","sourcesContent":["import { getWebchatElement, scrollToBottom } from '../../util/dom'\nimport { DEVICES } from '.'\n\nexport class WebchatResizer {\n  constructor(currentDevice, host) {\n    this.currentDevice = currentDevice\n    this.host = host\n    this.webchat = getWebchatElement(host)\n  }\n\n  onFocus(onKeyboardShownFn) {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    /*\n      Based on Tip #4 from https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d,\n      taking window.innerHeight as the amount of pixels the virtual keyboard adds\n    */\n    const waitUntilKeyboardIsShown = 400\n    const calculateNewWebchatElementHeight = () => {\n      const webchatHeight = this.webchat.clientHeight\n      // Some iOS versions keep track of this height with VisualViewport API: https://stackoverflow.com/a/59056851\n      const keyboardOffset =\n        (window.visualViewport && window.visualViewport.height) ||\n        window.innerHeight\n      let newWebchatPercentualHeight = keyboardOffset / webchatHeight\n      const toTwoDecimal = toRound => Math.round(toRound * 100) / 100\n      newWebchatPercentualHeight =\n        toTwoDecimal(newWebchatPercentualHeight) * 100\n      return newWebchatPercentualHeight\n    }\n    setTimeout(() => {\n      this.setWebchatElementHeight(`${calculateNewWebchatElementHeight()}%`)\n      scrollToBottom(this.host)\n      onKeyboardShownFn()\n    }, waitUntilKeyboardIsShown)\n  }\n\n  onBlur() {\n    if (this.currentDevice !== DEVICES.MOBILE.IPHONE) return\n    this.setWebchatElementHeight('100%')\n  }\n\n  setWebchatElementHeight(newHeight) {\n    this.webchat.style.height = newHeight\n  }\n}\n"],"file":"webchat-resizer.js"}

package/lib/webchat/header.js

@@ -1,116 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WebchatHeader = exports.StyledWebchatHeader = exports.DefaultHeader = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _framerMotion = require("framer-motion");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("../constants");
-
-var _contexts = require("../contexts");
-
-var _environment = require("../util/environment");
-
-var _react2 = require("../util/react");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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) { (0, _defineProperty2["default"])(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; }
-
-var Header = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  height: 55px;\n  border-radius: ", ";\n  z-index: 2;\n"])), _constants.COLORS.BLEACHED_CEDAR_PURPLE, function (props) {
-  return props.color;
-}, _constants.WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS);
-
-var ImageContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 10px;\n  align-items: center;\n"])));
-
-var Image = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 32px;\n  border-radius: 50%;\n"])));
-
-var TextContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1 1 auto;\n"])));
-
-var Title = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: bold;\n  color: ", ";\n"])), _constants.COLORS.SOLID_WHITE);
-
-var Subtitle = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-family: inherit;\n  font-size: 11px;\n  color: ", ";\n"])), _constants.COLORS.SOLID_WHITE);
-
-var CloseHeader = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0px 16px;\n  cursor: pointer;\n  color: ", ";\n  font-family: inherit;\n  font-size: 36px;\n"])), _constants.COLORS.SOLID_WHITE);
-
-var DefaultHeader = function DefaultHeader(props) {
-  var getThemeProperty = props.getThemeProperty;
-  var animationsEnabled = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.enableAnimations, true);
-  var headerImage = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerImage, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.brandImage, _constants.WEBCHAT.DEFAULTS.LOGO));
-  var headerTitle = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerTitle, _constants.WEBCHAT.DEFAULTS.TITLE);
-  var headerSubtitle = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle, '');
-  return /*#__PURE__*/_react["default"].createElement(Header, {
-    role: _constants.ROLES.HEADER,
-    color: props.color,
-    style: _objectSpread({}, getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.headerStyle))
-  }, headerImage && /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(Image, {
-    src: (0, _environment.resolveImage)(headerImage)
-  })), /*#__PURE__*/_react["default"].createElement(TextContainer, {
-    ml: headerImage ? '0px' : '16px'
-  }, /*#__PURE__*/_react["default"].createElement(Title, {
-    mb: headerSubtitle ? '6px' : '0px'
-  }, headerTitle), /*#__PURE__*/_react["default"].createElement(Subtitle, null, headerSubtitle)), /*#__PURE__*/_react["default"].createElement(_react2.ConditionalWrapper, {
-    condition: animationsEnabled,
-    wrapper: function wrapper(children) {
-      return /*#__PURE__*/_react["default"].createElement(_framerMotion.motion.div, {
-        whileHover: {
-          scale: 1.2
-        }
-      }, children);
-    }
-  }, /*#__PURE__*/_react["default"].createElement(CloseHeader, {
-    onClick: props.onCloseClick
-  }, "\u2A2F")));
-};
-
-exports.DefaultHeader = DefaultHeader;
-
-var WebchatHeader = function WebchatHeader(props) {
-  var _useContext = (0, _react.useContext)(_contexts.WebchatContext),
-      webchatState = _useContext.webchatState,
-      getThemeProperty = _useContext.getThemeProperty;
-
-  var handleCloseWebchat = function handleCloseWebchat(event) {
-    props.onCloseClick(event.target.value);
-  };
-
-  var CustomHeader = getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.customHeader);
-
-  if (CustomHeader) {
-    return /*#__PURE__*/_react["default"].createElement(CustomHeader, {
-      onCloseClick: handleCloseWebchat
-    });
-  }
-
-  return /*#__PURE__*/_react["default"].createElement(DefaultHeader, {
-    webchatState: webchatState,
-    getThemeProperty: getThemeProperty,
-    color: getThemeProperty(_constants.WEBCHAT.CUSTOM_PROPERTIES.brandColor, _constants.COLORS.BOTONIC_BLUE),
-    onCloseClick: handleCloseWebchat
-  });
-};
-
-exports.WebchatHeader = WebchatHeader;
-var StyledWebchatHeader = (0, _styledComponents["default"])(WebchatHeader)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 8px 8px 0px 0px;\n  box-shadow: ", " 0px 2px 5px;\n  height: 36px;\n  flex: none;\n"])), _constants.COLORS.PIGEON_POST_BLUE_ALPHA_0_5);
-exports.StyledWebchatHeader = StyledWebchatHeader;
-//# sourceMappingURL=header.js.map

package/lib/webchat/header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/webchat/header.jsx"],"names":["Header","styled","div","COLORS","BLEACHED_CEDAR_PURPLE","props","color","WEBCHAT","DEFAULTS","BORDER_RADIUS_TOP_CORNERS","ImageContainer","Image","img","TextContainer","Title","SOLID_WHITE","Subtitle","CloseHeader","DefaultHeader","getThemeProperty","animationsEnabled","CUSTOM_PROPERTIES","enableAnimations","headerImage","brandImage","LOGO","headerTitle","TITLE","headerSubtitle","ROLES","HEADER","headerStyle","children","scale","onCloseClick","WebchatHeader","WebchatContext","webchatState","handleCloseWebchat","event","target","value","CustomHeader","customHeader","brandColor","BOTONIC_BLUE","StyledWebchatHeader","PIGEON_POST_BLUE_ALPHA_0_5"],"mappings":"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","sourcesContent":["import { motion } from 'framer-motion'\nimport React, { useContext } from 'react'\nimport styled from 'styled-components'\n\nimport { COLORS, ROLES, WEBCHAT } from '../constants'\nimport { WebchatContext } from '../contexts'\nimport { resolveImage } from '../util/environment'\nimport { ConditionalWrapper } from '../util/react'\n\nconst Header = styled.div`\n  display: flex;\n  background: linear-gradient(\n    90deg,\n    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,\n    ${props => props.color} 100%\n  );\n  height: 55px;\n  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};\n  z-index: 2;\n`\n\nconst ImageContainer = styled.div`\n  padding: 10px;\n  align-items: center;\n`\n\nconst Image = styled.img`\n  width: 32px;\n  border-radius: 50%;\n`\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1 1 auto;\n`\n\nconst Title = styled.div`\n  display: flex;\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: bold;\n  color: ${COLORS.SOLID_WHITE};\n`\n\nconst Subtitle = styled.div`\n  display: flex;\n  font-family: inherit;\n  font-size: 11px;\n  color: ${COLORS.SOLID_WHITE};\n`\n\nconst CloseHeader = styled.div`\n  padding: 0px 16px;\n  cursor: pointer;\n  color: ${COLORS.SOLID_WHITE};\n  font-family: inherit;\n  font-size: 36px;\n`\n\nexport const DefaultHeader = props => {\n  const { getThemeProperty } = props\n  const animationsEnabled = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,\n    true\n  )\n  const headerImage = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.headerImage,\n    getThemeProperty(\n      WEBCHAT.CUSTOM_PROPERTIES.brandImage,\n      WEBCHAT.DEFAULTS.LOGO\n    )\n  )\n\n  const headerTitle = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,\n    WEBCHAT.DEFAULTS.TITLE\n  )\n  const headerSubtitle = getThemeProperty(\n    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,\n    ''\n  )\n\n  return (\n    <Header\n      role={ROLES.HEADER}\n      color={props.color}\n      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}\n    >\n      {headerImage && (\n        <ImageContainer>\n          <Image src={resolveImage(headerImage)} />\n        </ImageContainer>\n      )}\n      <TextContainer ml={headerImage ? '0px' : '16px'}>\n        <Title mb={headerSubtitle ? '6px' : '0px'}>{headerTitle}</Title>\n        <Subtitle>{headerSubtitle}</Subtitle>\n      </TextContainer>\n      <ConditionalWrapper\n        condition={animationsEnabled}\n        wrapper={children => (\n          <motion.div whileHover={{ scale: 1.2 }}>{children}</motion.div>\n        )}\n      >\n        <CloseHeader onClick={props.onCloseClick}>⨯</CloseHeader>\n      </ConditionalWrapper>\n    </Header>\n  )\n}\n\nexport const WebchatHeader = props => {\n  const { webchatState, getThemeProperty } = useContext(WebchatContext)\n\n  const handleCloseWebchat = event => {\n    props.onCloseClick(event.target.value)\n  }\n  const CustomHeader = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customHeader)\n  if (CustomHeader) {\n    return <CustomHeader onCloseClick={handleCloseWebchat} />\n  }\n  return (\n    <DefaultHeader\n      webchatState={webchatState}\n      getThemeProperty={getThemeProperty}\n      color={getThemeProperty(\n        WEBCHAT.CUSTOM_PROPERTIES.brandColor,\n        COLORS.BOTONIC_BLUE\n      )}\n      onCloseClick={handleCloseWebchat}\n    />\n  )\n}\n\nexport const StyledWebchatHeader = styled(WebchatHeader)`\n  border-radius: 8px 8px 0px 0px;\n  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;\n  height: 36px;\n  flex: none;\n`\n"],"file":"header.js"}