@mjhls/mjh-framework 1.0.884 → 1.0.885-beta.0

package/dist/esm/ImageSlider-a3154b97.js

@@ -0,0 +1,3980 @@
+import { c as createCommonjsModule, u as unwrapExports, a as commonjsGlobal } from './_commonjsHelpers-0c4b6f40.js';
+import React__default, { Component, createContext, forwardRef, PureComponent, useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { _ as _slicedToArray } from './slicedToArray-67a08c9c.js';
+import urlFor from './urlFor.js';
+import { s as smoothscroll } from './smoothscroll-0cd4c7a6.js';
+import { _ as _defineProperty$1, b as _inherits, c as _classCallCheck, d as _possibleConstructorReturn, e as _getPrototypeOf, g as _createClass } from './inherits-77d5e4fc.js';
+
+var isRequiredIf_1 = createCommonjsModule(function (module, exports) {
+Object.defineProperty(exports,'__esModule',{value:!0});var VALIDATOR_ARG_ERROR_MESSAGE='The typeValidator argument must be a function with the signature function(props, propName, componentName).',MESSAGE_ARG_ERROR_MESSAGE='The error message is optional, but must be a string if provided.',propIsRequired=function propIsRequired(a,b,c,d){if('boolean'==typeof a)return a;return 'function'==typeof a?a(b,c,d):!(!0!==!!a)&&!!a},propExists=function propExists(a,b){return Object.hasOwnProperty.call(a,b)},missingPropError=function missingPropError(a,b,c,d){return d?new Error(d):new Error('Required '+a[b]+' `'+b+'`'+(' was not specified in `'+c+'`.'))},guardAgainstInvalidArgTypes=function guardAgainstInvalidArgTypes(a,b){if('function'!=typeof a)throw new TypeError(VALIDATOR_ARG_ERROR_MESSAGE);if(!!b&&'string'!=typeof b)throw new TypeError(MESSAGE_ARG_ERROR_MESSAGE)},isRequiredIf=function isRequiredIf(a,b,c){return guardAgainstInvalidArgTypes(a,c),function(d,e,f){for(var _len=arguments.length,g=Array(3<_len?_len-3:0),_key=3;_key<_len;_key++)g[_key-3]=arguments[_key];return propIsRequired(b,d,e,f)?propExists(d,e)?a.apply(void 0,[d,e,f].concat(g)):missingPropError(d,e,f,c):a.apply(void 0,[d,e,f].concat(g));// Is not required, so just run typeValidator.
+}};exports.default=isRequiredIf;
+
+
+});
+
+var isRequiredIf = unwrapExports(isRequiredIf_1);
+
+var exenv = createCommonjsModule(function (module) {
+/*!
+  Copyright (c) 2015 Jed Watson.
+  Based on code that is Copyright 2013-2015, Facebook, Inc.
+  All rights reserved.
+*/
+/* global define */
+
+(function () {
+
+	var canUseDOM = !!(
+		typeof window !== 'undefined' &&
+		window.document &&
+		window.document.createElement
+	);
+
+	var ExecutionEnvironment = {
+
+		canUseDOM: canUseDOM,
+
+		canUseWorkers: typeof Worker !== 'undefined',
+
+		canUseEventListeners:
+			canUseDOM && !!(window.addEventListener || window.attachEvent),
+
+		canUseViewport: canUseDOM && !!window.screen
+
+	};
+
+	if ( module.exports) {
+		module.exports = ExecutionEnvironment;
+	} else {
+		window.ExecutionEnvironment = ExecutionEnvironment;
+	}
+
+}());
+});
+
+var twitterWidgetJs = 'https://platform.twitter.com/widgets.js';
+
+var TwitterTimelineEmbed =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterTimelineEmbed, _Component);
+
+  function TwitterTimelineEmbed(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterTimelineEmbed);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterTimelineEmbed).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterTimelineEmbed, [{
+    key: "buildChromeOptions",
+    value: function buildChromeOptions(options) {
+      options.chrome = '';
+
+      if (this.props.noHeader) {
+        options.chrome = options.chrome + ' noheader';
+      }
+
+      if (this.props.noFooter) {
+        options.chrome = options.chrome + ' nofooter';
+      }
+
+      if (this.props.noBorders) {
+        options.chrome = options.chrome + ' noborders';
+      }
+
+      if (this.props.noScrollbar) {
+        options.chrome = options.chrome + ' noscrollbar';
+      }
+
+      if (this.props.transparent) {
+        options.chrome = options.chrome + ' transparent';
+      }
+
+      return options;
+    }
+  }, {
+    key: "buildOptions",
+    value: function buildOptions() {
+      var options = Object.assign({}, this.props.options);
+
+      if (this.props.autoHeight) {
+        options.height = this.refs.embedContainer.parentNode.offsetHeight;
+      }
+
+      options = Object.assign({}, options, {
+        theme: this.props.theme,
+        linkColor: this.props.linkColor,
+        borderColor: this.props.borderColor,
+        lang: this.props.lang
+      });
+      return options;
+    }
+  }, {
+    key: "renderWidget",
+    value: function renderWidget(options) {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createTimeline({
+          sourceType: this.props.sourceType,
+          screenName: this.props.screenName,
+          userId: this.props.userId,
+          ownerScreenName: this.props.ownerScreenName,
+          slug: this.props.slug,
+          id: this.props.id || this.props.widgetId,
+          url: this.props.url
+        }, this.refs.embedContainer, options).then(function (element) {
+          _this2.setState({
+            isLoading: false
+          });
+
+          if (onLoad) {
+            onLoad(element);
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this3 = this;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterTimelineEmbed, aborting load.');
+            return;
+          }
+
+          var options = _this3.buildOptions();
+          /** Append chrome options */
+
+
+          options = _this3.buildChromeOptions(options);
+
+          _this3.renderWidget(options);
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterTimelineEmbed;
+}(Component);
+
+_defineProperty$1(TwitterTimelineEmbed, "propTypes", {
+  /**
+       * This can be either of profile, likes, list, collection, URL, widget
+       */
+  sourceType: PropTypes.oneOf(['profile', 'likes', 'list', 'collection', 'url', 'widget']).isRequired,
+
+  /**
+       * username of twitter handle as String
+       */
+  screenName: isRequiredIf(PropTypes.string, function (props) {
+    return !props.hasOwnProperty('userId') && (props.sourceType === 'profile' || props.sourceType === 'likes');
+  }),
+
+  /**
+       * UserId of twitter handle as number
+       */
+  userId: isRequiredIf(PropTypes.number, function (props) {
+    return !props.hasOwnProperty('screenName') && (props.sourceType === 'profile' || props.sourceType === 'likes');
+  }),
+
+  /**
+       * To show list, used along with slug
+       */
+  ownerScreenName: isRequiredIf(PropTypes.string, function (props) {
+    return props.sourceType === 'list' && !props.hasOwnProperty('id');
+  }),
+
+  /**
+       * To show list, used along with ownerScreenName
+       */
+  slug: isRequiredIf(PropTypes.string, function (props) {
+    return props.sourceType === 'list' && !props.hasOwnProperty('id');
+  }),
+
+  /**
+       * To show list, unique list id
+       * Also used with collections, in that case its valid collection id
+       */
+  id: isRequiredIf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]), function (props) {
+    return props.sourceType === 'list' && !props.hasOwnProperty('ownerScreenName') && !props.hasOwnProperty('slug') || props.sourceType === 'collection';
+  }),
+
+  /**
+       * To show twitter content with url.
+       * Supported content includes profiles, likes, lists, and collections.
+       */
+  url: isRequiredIf(PropTypes.string, function (props) {
+    return props.sourceType === 'url';
+  }),
+
+  /**
+       * To show custom widget
+       */
+  widgetId: isRequiredIf(PropTypes.string, function (props) {
+    return props.sourceType === 'widget';
+  }),
+
+  /**
+       * Additional options to pass to twitter widget plugin
+       */
+  options: PropTypes.object,
+
+  /**
+       * Automatically fit into parent container height
+       */
+  autoHeight: PropTypes.bool,
+
+  /**
+       * With dark or light theme
+       */
+  theme: PropTypes.oneOf(['dark', 'light']),
+
+  /**
+       * With custom link colors. Note: Only Hex colors are supported.
+       */
+  linkColor: PropTypes.string,
+
+  /**
+       * With custom border colors. Note: Only Hex colors are supported.
+       */
+  borderColor: PropTypes.string,
+
+  /**
+       * Hide the header from timeline
+       */
+  noHeader: PropTypes.bool,
+
+  /**
+       * Hide the footer from timeline
+       */
+  noFooter: PropTypes.bool,
+
+  /**
+       * Hide the border from timeline
+       */
+  noBorders: PropTypes.bool,
+
+  /**
+       * Hide the scrollbars
+       */
+  noScrollbar: PropTypes.bool,
+
+  /**
+       * Enable Transparancy
+       */
+  transparent: PropTypes.bool,
+
+  /**
+       * Custom language code. Supported codes here: https://developer.twitter.com/en/docs/twitter-for-websites/twitter-for-websites-supported-languages/overview.html
+       */
+  lang: PropTypes.string,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterShareButton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterShareButton, _Component);
+
+  function TwitterShareButton(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterShareButton);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterShareButton).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterShareButton, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterShareButton, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createShareButton(_this2.props.url, _this2.refs.embedContainer, _this2.props.options).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterShareButton;
+}(Component);
+
+_defineProperty$1(TwitterShareButton, "propTypes", {
+  /**
+  * Url for sharing
+  */
+  url: PropTypes.string.isRequired,
+
+  /**
+  * Additional options for overriding config. Details at : https://dev.twitter.com/web/tweet-button/parameters
+  */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterFollowButton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterFollowButton, _Component);
+
+  function TwitterFollowButton(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterFollowButton);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterFollowButton).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterFollowButton, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterFollowButton, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createFollowButton(_this2.props.screenName, _this2.refs.embedContainer, _this2.props.options).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterFollowButton;
+}(Component);
+
+_defineProperty$1(TwitterFollowButton, "propTypes", {
+  /**
+       * Username of twitter user which will be followed on click
+       */
+  screenName: PropTypes.string.isRequired,
+
+  /**
+       * Additional options to be added to the button
+       */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterHashtagButton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterHashtagButton, _Component);
+
+  function TwitterHashtagButton(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterHashtagButton);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterHashtagButton).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterHashtagButton, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterHashtagButton, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createHashtagButton(_this2.props.tag, _this2.refs.embedContainer, _this2.props.options).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterHashtagButton;
+}(Component);
+
+_defineProperty$1(TwitterHashtagButton, "propTypes", {
+  /**
+       * Tag name for hashtag button
+       */
+  tag: PropTypes.string.isRequired,
+
+  /**
+       * Additional options to be added to the button
+       */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterMentionButton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterMentionButton, _Component);
+
+  function TwitterMentionButton(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterMentionButton);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterMentionButton).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterMentionButton, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterMentionButton, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createMentionButton(_this2.props.screenName, _this2.refs.embedContainer, _this2.props.options).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterMentionButton;
+}(Component);
+
+_defineProperty$1(TwitterMentionButton, "propTypes", {
+  /**
+   * Username to which you will need to tweet
+   */
+  screenName: PropTypes.string.isRequired,
+
+  /**
+   * Additional options for overriding config.
+   */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterTweetEmbed =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterTweetEmbed, _Component);
+
+  function TwitterTweetEmbed(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterTweetEmbed);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterTweetEmbed).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterTweetEmbed, [{
+    key: "renderWidget",
+    value: function renderWidget() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (!window.twttr) {
+        console.error('Failure to load window.twttr in TwitterTweetEmbed, aborting load.');
+        return;
+      }
+
+      if (!this.isMountCanceled) {
+        window.twttr.widgets.createTweet(this.props.tweetId, this.refs.embedContainer, this.props.options).then(function (element) {
+          _this2.setState({
+            isLoading: false
+          });
+
+          if (onLoad) {
+            onLoad(element);
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this3 = this;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          _this3.renderWidget();
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterTweetEmbed;
+}(Component);
+
+_defineProperty$1(TwitterTweetEmbed, "propTypes", {
+  /**
+       * Tweet id that needs to be shown
+       */
+  tweetId: PropTypes.string.isRequired,
+
+  /**
+       * Additional options to pass to twitter widget plugin
+       */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterMomentShare =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterMomentShare, _Component);
+
+  function TwitterMomentShare(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterMomentShare);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterMomentShare).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterMomentShare, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterMomentShare, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createMoment(_this2.props.momentId, _this2.refs.shareMoment, _this2.props.options).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "shareMoment"
+      }));
+    }
+  }]);
+
+  return TwitterMomentShare;
+}(Component);
+
+_defineProperty$1(TwitterMomentShare, "propTypes", {
+  /**
+   * id of Twitter moment to show
+   */
+  momentId: PropTypes.string.isRequired,
+
+  /**
+   * Additional options for overriding config.
+   */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterDMButton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterDMButton, _Component);
+
+  function TwitterDMButton(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterDMButton);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterDMButton).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterDMButton, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterDMButton, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createDMButton(_this2.props.id, _this2.refs.embedContainer, _this2.props.options).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterDMButton;
+}(Component);
+
+_defineProperty$1(TwitterDMButton, "propTypes", {
+  /**
+  * Twitter user id for DM button
+  */
+  id: PropTypes.number.isRequired,
+
+  /**
+  * Additional options to be added to the button
+  */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterVideoEmbed =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterVideoEmbed, _Component);
+
+  function TwitterVideoEmbed(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterVideoEmbed);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterVideoEmbed).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterVideoEmbed, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterVideoEmbed, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createVideo(_this2.props.id, _this2.refs.embedContainer).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterVideoEmbed;
+}(Component);
+
+_defineProperty$1(TwitterVideoEmbed, "propTypes", {
+  /**
+       * Id of video tweet.
+       */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+var TwitterOnAirButton =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(TwitterOnAirButton, _Component);
+
+  function TwitterOnAirButton(props) {
+    var _this;
+
+    _classCallCheck(this, TwitterOnAirButton);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TwitterOnAirButton).call(this, props));
+    _this.state = {
+      isLoading: true
+    };
+    return _this;
+  }
+
+  _createClass(TwitterOnAirButton, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      var onLoad = this.props.onLoad;
+
+      if (exenv.canUseDOM) {
+        var script = require('scriptjs');
+
+        script(twitterWidgetJs, 'twitter-embed', function () {
+          if (!window.twttr) {
+            console.error('Failure to load window.twttr in TwitterOnAirButton, aborting load.');
+            return;
+          }
+
+          if (!_this2.isMountCanceled) {
+            window.twttr.widgets.createPeriscopeOnAirButton(_this2.props.username, _this2.refs.embedContainer, _this2.props.options).then(function (element) {
+              _this2.setState({
+                isLoading: false
+              });
+
+              if (onLoad) {
+                onLoad(element);
+              }
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMountCanceled = true;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var isLoading = this.state.isLoading;
+      var placeholder = this.props.placeholder;
+      return React__default.createElement(React__default.Fragment, null, isLoading && placeholder, React__default.createElement("div", {
+        ref: "embedContainer"
+      }));
+    }
+  }]);
+
+  return TwitterOnAirButton;
+}(Component);
+
+_defineProperty$1(TwitterOnAirButton, "propTypes", {
+  /**
+   * Username for which you require periscope on air button
+   */
+  username: PropTypes.string.isRequired,
+
+  /**
+   * Additional options for overriding config.
+   */
+  options: PropTypes.object,
+
+  /**
+   * Placeholder while tweet is loading
+   */
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * Function to execute after load, return html element
+   */
+  onLoad: PropTypes.func
+});
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
+
+var asyncToGenerator = _asyncToGenerator;
+
+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 defineProperty = _defineProperty;
+
+var canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+var canUseDom = canUseDOM;
+
+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;
+}
+
+var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
+
+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;
+}
+
+var objectWithoutProperties = _objectWithoutProperties;
+
+var LoginStatus = {
+  CONNECTED: 'connected',
+  AUTHORIZATION_EXPIRED: 'authorization_expired',
+  NOT_AUTHORIZED: 'not_authorized',
+  UNKNOWN: 'unknown'
+};
+
+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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const Method = {
+  GET: 'get',
+  POST: 'post',
+  DELETE: 'delete'
+};
+class Facebook {
+  constructor(options = {}) {
+    this.options = _objectSpread({
+      domain: 'connect.facebook.net',
+      version: 'v3.2',
+      cookie: false,
+      status: false,
+      xfbml: false,
+      language: 'en_US',
+      frictionlessRequests: false,
+      debug: false,
+      chatSupport: false
+    }, options);
+
+    if (!this.options.appId) {
+      throw new Error('You need to set appId');
+    }
+
+    if (!this.options.wait) {
+      this.init();
+    }
+  }
+
+  getAppId() {
+    return this.options.appId;
+  }
+
+  init() {
+    var _this = this;
+
+    return asyncToGenerator(function* () {
+      if (_this.loadingPromise) {
+        return _this.loadingPromise;
+      }
+
+      _this.loadingPromise = new Promise(resolve => {
+        const _this$options = _this.options,
+              {
+          domain,
+          language,
+          debug,
+          chatSupport
+        } = _this$options,
+              restOptions = objectWithoutProperties(_this$options, ["domain", "language", "debug", "chatSupport"]);
+
+        window.fbAsyncInit = () => {
+          window.FB.init({
+            appId: restOptions.appId,
+            version: restOptions.version,
+            cookie: restOptions.cookie,
+            status: restOptions.status,
+            xfbml: restOptions.xfbml,
+            frictionlessRequests: _this.frictionlessRequests
+          });
+          resolve(window.FB);
+        };
+
+        if (window.document.getElementById('facebook-jssdk')) {
+          return resolve(window.FB);
+        }
+
+        const js = window.document.createElement('script');
+        js.id = 'facebook-jssdk';
+        js.async = true;
+        js.defer = true;
+        js.src = `https://${domain}/${language}/sdk${chatSupport ? '/xfbml.customerchat' : ''}${debug ? '/debug' : ''}.js`;
+        window.document.body.appendChild(js);
+      });
+      return _this.loadingPromise;
+    })();
+  }
+
+  process(method, before = [], after = []) {
+    var _this2 = this;
+
+    return asyncToGenerator(function* () {
+      const fb = yield _this2.init();
+      return new Promise((resolve, reject) => {
+        fb[method](...before, response => {
+          if (!response) {
+            if (method === 'ui') return;
+            reject(new Error('Response is undefined'));
+          } else if (response.error) {
+            const {
+              code,
+              type,
+              message
+            } = response.error;
+            const error = new Error(message);
+            error.code = code;
+            error.type = type;
+            reject(error);
+          } else {
+            resolve(response);
+          }
+        }, ...after);
+      });
+    })();
+  }
+
+  ui(options) {
+    var _this3 = this;
+
+    return asyncToGenerator(function* () {
+      return _this3.process('ui', [options]);
+    })();
+  }
+
+  api(path, method = Method.GET, params = {}) {
+    var _this4 = this;
+
+    return asyncToGenerator(function* () {
+      return _this4.process('api', [path, method, params]);
+    })();
+  }
+
+  login(opts = null) {
+    var _this5 = this;
+
+    return asyncToGenerator(function* () {
+      return _this5.process('login', [], [opts]);
+    })();
+  }
+
+  logout() {
+    var _this6 = this;
+
+    return asyncToGenerator(function* () {
+      return _this6.process('logout');
+    })();
+  }
+
+  getLoginStatus() {
+    var _this7 = this;
+
+    return asyncToGenerator(function* () {
+      return _this7.process('getLoginStatus');
+    })();
+  }
+
+  getAuthResponse() {
+    var _this8 = this;
+
+    return asyncToGenerator(function* () {
+      return _this8.process('getAuthResponse');
+    })();
+  }
+
+  getTokenDetail(loginResponse) {
+    var _this9 = this;
+
+    return asyncToGenerator(function* () {
+      if (loginResponse.status === LoginStatus.CONNECTED && loginResponse.authResponse) {
+        return loginResponse.authResponse;
+      }
+
+      const response = yield _this9.getLoginStatus();
+
+      if (response.status === LoginStatus.CONNECTED && response.authResponse) {
+        return response.authResponse;
+      }
+
+      throw new Error('Token is undefined');
+    })();
+  }
+
+  getProfile(params) {
+    var _this10 = this;
+
+    return asyncToGenerator(function* () {
+      return _this10.api('/me', Method.GET, params);
+    })();
+  }
+
+  getTokenDetailWithProfile(params, response) {
+    var _this11 = this;
+
+    return asyncToGenerator(function* () {
+      const tokenDetail = yield _this11.getTokenDetail(response);
+      const profile = yield _this11.getProfile(params);
+      return {
+        profile,
+        tokenDetail
+      };
+    })();
+  }
+
+  getToken() {
+    var _this12 = this;
+
+    return asyncToGenerator(function* () {
+      const authResponse = yield _this12.getTokenDetail();
+      return authResponse.accessToken;
+    })();
+  }
+
+  getUserId() {
+    var _this13 = this;
+
+    return asyncToGenerator(function* () {
+      const authResponse = yield _this13.getTokenDetail();
+      return authResponse.userID;
+    })();
+  }
+
+  sendInvite(to, options) {
+    var _this14 = this;
+
+    return asyncToGenerator(function* () {
+      return _this14.ui(_objectSpread({
+        to,
+        method: 'apprequests'
+      }, options));
+    })();
+  }
+
+  postAction(ogNamespace, ogAction, ogObject, ogObjectUrl, noFeedStory) {
+    var _this15 = this;
+
+    return asyncToGenerator(function* () {
+      let url = `/me/${ogNamespace}:${ogAction}?${ogObject}=${encodeURIComponent(ogObjectUrl)}`;
+
+      if (noFeedStory === true) {
+        url += '&no_feed_story=true';
+      }
+
+      return _this15.api(url, Method.POST);
+    })();
+  }
+
+  getPermissions() {
+    var _this16 = this;
+
+    return asyncToGenerator(function* () {
+      const response = yield _this16.api('/me/permissions');
+      return response.data;
+    })();
+  }
+
+  hasPermissions(permissions) {
+    var _this17 = this;
+
+    return asyncToGenerator(function* () {
+      const usersPermissions = yield _this17.getPermissions();
+      const findedPermissions = permissions.filter(p => {
+        const currentPermission = usersPermissions.find(row => {
+          const {
+            permission,
+            status
+          } = row;
+          return status === 'granted' && permission === p;
+        });
+        return !!currentPermission;
+      });
+      return findedPermissions.length === permissions.length;
+    })();
+  }
+
+  subscribe(eventName, callback) {
+    var _this18 = this;
+
+    return asyncToGenerator(function* () {
+      const fb = yield _this18.init();
+      fb.Event.subscribe(eventName, callback);
+    })();
+  }
+
+  unsubscribe(eventName, callback) {
+    var _this19 = this;
+
+    return asyncToGenerator(function* () {
+      const fb = yield _this19.init();
+      fb.Event.unsubscribe(eventName, callback);
+    })();
+  }
+
+  parse(parentNode) {
+    var _this20 = this;
+
+    return asyncToGenerator(function* () {
+      const fb = yield _this20.init();
+
+      if (typeof parentNode === 'undefined') {
+        fb.XFBML.parse();
+      } else {
+        fb.XFBML.parse(parentNode);
+      }
+    })();
+  }
+
+  getRequests() {
+    var _this21 = this;
+
+    return asyncToGenerator(function* () {
+      return _this21.api('/me/apprequests');
+    })();
+  }
+
+  removeRequest(requestID) {
+    var _this22 = this;
+
+    return asyncToGenerator(function* () {
+      return _this22.api(requestID, Method.DELETE);
+    })();
+  }
+
+  setAutoGrow() {
+    var _this23 = this;
+
+    return asyncToGenerator(function* () {
+      const fb = yield _this23.init();
+      fb.Canvas.setAutoGrow();
+    })();
+  }
+
+  paySimple(product, quantity = 1) {
+    var _this24 = this;
+
+    return asyncToGenerator(function* () {
+      return _this24.ui({
+        method: 'pay',
+        action: 'purchaseitem',
+        product,
+        quantity
+      });
+    })();
+  }
+
+  pay(product, options) {
+    var _this25 = this;
+
+    return asyncToGenerator(function* () {
+      return _this25.ui(_objectSpread({
+        method: 'pay',
+        action: 'purchaseitem',
+        product
+      }, options));
+    })();
+  }
+
+}
+/*
+  sendToFriends: function(options, callback) {
+    if(!options) {
+      options = {};
+    }
+
+    options.method = 'send';
+
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.ui(options, function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  sendMessage: function(message, name, caption, description, url, imgUrl, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.ui({
+        method: 'stream.publish',
+        message: message,
+        attachment: {
+          name: name,
+          caption: caption,
+          description: description,
+          href: url,
+          media:[{
+            type: 'image',
+            src:  imgUrl,
+            href: url
+          }]
+        },
+        action_links: [{
+          text: 'Code',
+          href: url
+        }],
+        user_prompt_message: message
+      },
+      function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  sendInviteForm: function(options, callback) {
+    if(typeof options === 'function') {
+      callback = options;
+      options = {};
+    }
+
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      options.method = options.method || 'apprequests';
+
+
+      FB.ui(options, function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  checkPageLike: function(pageID, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      fbApi.getUserID(function(err, userID) {
+        if(err) {
+          return callback(err);
+        }
+
+        var fqlQuery = `SELECT uid FROM page_fan WHERE page_id = ${pageID} and uid = ${userID}`;
+        var query = FB.Data.query(fqlQuery);
+
+        query.wait(function(rows) {
+          if (rows.length === 1 && rows[0].uid === userID) {
+            callback(null, true, query);
+          }
+          else {
+            callback(null, false, query);
+          }
+        });
+      });
+    });
+  },
+
+  sendMessageToFriend: function (friendID, link, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.ui({
+        to: friendID,
+        method: 'send',
+        link: link
+      }, function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  _prepareUsers: function(data) {
+    var users=[];
+
+    for(var index in data) {
+      var userData=data[index];
+
+      var user = {
+        provider_uid: 'facebook'+'_'+userData.uid,
+        provider: 'facebook',
+        id: userData.uid,
+        name: userData.name,
+        first_name: userData.first_name,
+        last_name: userData.last_name,
+        status: (userData.status!==null) ? userData.status : null,
+        image: '//graph.facebook.com/'+userData.uid+'/picture?'
+      };
+
+      users.push(user);
+    }
+
+    return users;
+  },
+
+  getUserList: function(callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.api('fql', {
+        q: `
+          SELECT uid, name, first_name, last_name, online_presence, status
+          FROM user
+          WHERE uid IN
+            ( SELECT uid2 FROM friend WHERE uid1 = me()) ORDER BY name
+        `,
+      }, function (response)
+      {
+        var users = fbApi._prepareUsers(response.data);
+        callback(null, users, response);
+      });
+    });
+  },
+
+  postFeed: function(options, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      options.method='feed';
+
+      FB.ui(options, function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  //need publish_stream
+  createAlbum: function(name, description, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.api('/me/albums', 'post', {
+        name: name,
+        description: description
+      },function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  //need publish_stream
+  addImageToAlbum: function(albumID, imageURL, message, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.api('/'+albumID+'/photos', 'post', {
+        message: message,
+        url: imageURL
+      }, function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  //'user_photos'
+  getAlbums: function(callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.api('/me/albums', function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  //'user_photos'
+  getAlbumPhotos: function(albumID, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.api('/'+albumID+'/photos', function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  //'user_photos'
+  getAlbumCoverPicture: function(albumID, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.api('/'+albumID+'/picture', function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  //'publish_stream'
+  postPhoto: function(photoUrl, message, callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.api('/me/photos', 'post', {
+        message: message,
+        url: photoUrl
+      },function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  },
+
+  getPageInfo: function(callback) {
+    this.afterLoad(function(err, fbApi) {
+      if(err) {
+        return callback(err);
+      }
+
+      FB.Canvas.getPageInfo(function(response) {
+        fbApi._callCallbackByResponse(callback, response);
+      });
+    });
+  }
+*/
+
+var FacebookContext = createContext();
+
+let api = null;
+class Facebook$1 extends Component {
+  constructor(...args) {
+    var _this;
+
+    super(...args);
+    _this = this;
+
+    defineProperty(this, "state", {
+      isReady: false
+    });
+
+    defineProperty(this, "handleInit",
+    /*#__PURE__*/
+    asyncToGenerator(function* () {
+      // do not run if SSR
+      if (!canUseDom) {
+        throw new Error('You can not use Facebook without DOM');
+      }
+
+      const {
+        isReady
+      } = _this.state;
+
+      if (isReady) {
+        return api;
+      }
+
+      if (!api) {
+        const {
+          domain,
+          version,
+          appId,
+          cookie,
+          status,
+          xfbml,
+          language,
+          frictionlessRequests,
+          wait,
+          debug,
+          chatSupport
+        } = _this.props;
+        api = new Facebook({
+          domain,
+          appId,
+          version,
+          cookie,
+          status,
+          xfbml,
+          language,
+          frictionlessRequests,
+          wait,
+          debug,
+          chatSupport
+        });
+      }
+
+      yield api.init();
+
+      if (!_this.state.isReady) {
+        _this.setState({
+          isReady: true
+        });
+      }
+
+      return api;
+    }));
+  }
+
+  componentDidMount() {
+    const {
+      wait
+    } = this.props;
+
+    if (!wait) {
+      this.handleInit();
+    }
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    const {
+      isReady,
+      error
+    } = this.state;
+    const {
+      handleInit
+    } = this;
+    const value = {
+      isReady,
+      error,
+      handleInit,
+      api
+    };
+    return React__default.createElement(FacebookContext.Provider, {
+      value: value
+    }, children);
+  }
+
+}
+
+defineProperty(Facebook$1, "defaultProps", {
+  version: 'v3.1',
+  cookie: false,
+  status: false,
+  xfbml: false,
+  language: 'en_US',
+  frictionlessRequests: false,
+  domain: 'connect.facebook.net',
+  children: undefined,
+  wait: false,
+  debug: false,
+  chatSupport: false
+});
+
+var _extends_1 = createCommonjsModule(function (module) {
+function _extends() {
+  module.exports = _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);
+}
+
+module.exports = _extends;
+});
+
+class Initialize extends Component {
+  componentDidMount() {
+    this.$isMounted = true;
+    this.prepare();
+  }
+
+  componentWillUnmount() {
+    this.$isMounted = false;
+  }
+
+  prepare() {
+    var _this = this;
+
+    return asyncToGenerator(function* () {
+      const {
+        onReady,
+        handleInit
+      } = _this.props;
+      const api = yield handleInit();
+
+      if (onReady && _this.$isMounted) {
+        onReady(api);
+      }
+    })();
+  }
+
+  render() {
+    const {
+      children,
+      isReady,
+      api
+    } = this.props;
+    const childrenProps = {
+      isReady,
+      api
+    };
+
+    if (typeof children === 'function') {
+      return children(childrenProps);
+    }
+
+    return children;
+  }
+
+}
+
+defineProperty(Initialize, "defaultProps", {
+  onReady: undefined,
+  api: undefined
+});
+
+var Initialize$1 = forwardRef((props, ref) => React__default.createElement(FacebookContext.Consumer, null, ({
+  handleInit,
+  isReady,
+  api
+}) => React__default.createElement(Initialize, _extends_1({}, props, {
+  handleInit: handleInit,
+  isReady: isReady,
+  api: api,
+  ref: ref
+}))));
+
+class Parser extends Component {
+  constructor(...args) {
+    super(...args);
+
+    defineProperty(this, "state", {});
+
+    defineProperty(this, "handleReady", api => {
+      this.setState({
+        api
+      }, this.handleParse);
+    });
+
+    defineProperty(this, "handleContainer", container => {
+      this.setState({
+        container
+      }, this.handleParse);
+    });
+
+    defineProperty(this, "handleParse", () => {
+      const {
+        api,
+        container
+      } = this.state;
+
+      if (!api || !container) {
+        return;
+      }
+
+      api.parse(container);
+    });
+  }
+
+  render() {
+    const {
+      className,
+      children
+    } = this.props;
+    return React__default.createElement("div", {
+      className: className,
+      ref: this.handleContainer
+    }, React__default.createElement(Initialize$1, {
+      onReady: this.handleReady
+    }, children({
+      handleParse: this.handleParse
+    })));
+  }
+
+}
+
+defineProperty(Parser, "defaultProps", {
+  className: undefined
+});
+
+function getCurrentHref() {
+  if (!canUseDom) {
+    return 'https://www.facebook.com';
+  }
+
+  return window.location.href;
+}
+
+class Like extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      href = getCurrentHref(),
+      layout,
+      colorScheme,
+      action,
+      showFaces,
+      share,
+      children,
+      width,
+      size,
+      kidDirectedSite,
+      referral
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-like",
+      "data-ref": referral,
+      "data-href": href,
+      "data-layout": layout,
+      "data-colorscheme": colorScheme,
+      "data-action": action,
+      "data-show-faces": showFaces,
+      "data-share": share,
+      "data-width": width,
+      "data-size": size,
+      "data-kid-directed-site": kidDirectedSite
+    }, children);
+  }
+
+}
+
+defineProperty(Like, "defaultProps", {
+  layout: undefined,
+  showFaces: undefined,
+  colorScheme: undefined,
+  action: undefined,
+  share: undefined,
+  size: undefined,
+  kidDirectedSite: undefined,
+  children: undefined,
+  href: undefined,
+  referral: undefined,
+  width: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(Like, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+function clearUndefinedProperties(obj) {
+  if (!obj) {
+    return obj;
+  }
+
+  const newObj = {};
+  Object.keys(obj).forEach(propertyName => {
+    const value = obj[propertyName];
+
+    if (value !== undefined) {
+      newObj[propertyName] = value;
+    }
+  });
+  return newObj;
+}
+
+class Process extends Component {
+  constructor(...args) {
+    var _this;
+
+    super(...args);
+    _this = this;
+
+    defineProperty(this, "state", {
+      api: undefined
+    });
+
+    defineProperty(this, "handleProcess",
+    /*#__PURE__*/
+    function () {
+      var _ref = asyncToGenerator(function* (fn, handleSuccess = () => {}) {
+        _this.setState({
+          data: undefined,
+          error: undefined,
+          loading: true
+        });
+
+        try {
+          const {
+            api
+          } = _this.state;
+
+          if (!api) {
+            throw new Error('Facebook is not initialized. Wait for isReady');
+          }
+
+          const data = yield fn(api);
+
+          _this.setState({
+            data,
+            loading: false
+          }, handleSuccess);
+
+          return data;
+        } catch (error) {
+          _this.setState({
+            error,
+            loading: false
+          });
+
+          throw error;
+        }
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    defineProperty(this, "handleReady", api => {
+      this.setState({
+        api
+      });
+    });
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    const {
+      api,
+      loading,
+      data,
+      error
+    } = this.state;
+    return React__default.createElement(Initialize$1, {
+      onReady: this.handleReady
+    }, children({
+      loading: !api || loading,
+      handleProcess: this.handleProcess,
+      data,
+      error
+    }));
+  }
+
+}
+
+class Send extends Component {
+  constructor(...args) {
+    var _this;
+
+    super(...args);
+    _this = this;
+
+    defineProperty(this, "handleClick",
+    /*#__PURE__*/
+    function () {
+      var _ref = asyncToGenerator(function* (evn) {
+        evn.preventDefault();
+        const {
+          handleProcess
+        } = _this.props;
+        return handleProcess(
+        /*#__PURE__*/
+        function () {
+          var _ref2 = asyncToGenerator(function* (api) {
+            const {
+              link = getCurrentHref(),
+              display,
+              appId = api.getAppId(),
+              to,
+              redirectURI
+            } = _this.props;
+            return api.ui(clearUndefinedProperties({
+              method: 'send',
+              link,
+              display,
+              app_id: appId,
+              to,
+              redirect_uri: redirectURI
+            }));
+          });
+
+          return function (_x2) {
+            return _ref2.apply(this, arguments);
+          };
+        }());
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  }
+
+  render() {
+    const {
+      children,
+      loading
+    } = this.props;
+    return children({
+      loading,
+      handleClick: this.handleClick
+    });
+  }
+
+}
+
+defineProperty(Send, "defaultProps", {
+  to: undefined,
+  display: undefined,
+  appId: undefined,
+  redirectURI: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Process, null, ({
+  loading,
+  handleProcess
+}) => React__default.createElement(Send, _extends_1({}, props, {
+  loading: loading,
+  handleProcess: handleProcess,
+  ref: ref
+}))));
+
+class Share extends Component {
+  constructor(...args) {
+    var _this;
+
+    super(...args);
+    _this = this;
+
+    defineProperty(this, "handleClick",
+    /*#__PURE__*/
+    function () {
+      var _ref = asyncToGenerator(function* (evn) {
+        evn.preventDefault();
+        const {
+          handleProcess
+        } = _this.props;
+        return handleProcess(
+        /*#__PURE__*/
+        function () {
+          var _ref2 = asyncToGenerator(function* (api) {
+            const {
+              href = getCurrentHref(),
+              display,
+              appId = api.getAppId(),
+              hashtag,
+              redirectURI,
+              quote,
+              mobileIframe
+            } = _this.props;
+            return api.ui(clearUndefinedProperties({
+              method: 'share',
+              href,
+              display,
+              app_id: appId,
+              hashtag,
+              redirect_uri: redirectURI,
+              quote,
+              mobile_iframe: mobileIframe
+            }));
+          });
+
+          return function (_x2) {
+            return _ref2.apply(this, arguments);
+          };
+        }());
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  }
+
+  render() {
+    const {
+      children,
+      loading,
+      error,
+      data
+    } = this.props;
+    return children({
+      loading,
+      handleClick: this.handleClick,
+      error,
+      data
+    });
+  }
+
+}
+
+defineProperty(Share, "defaultProps", {
+  href: undefined,
+  hashtag: undefined,
+  quote: undefined,
+  mobileIframe: undefined,
+  display: undefined,
+  appId: undefined,
+  redirectURI: undefined
+});
+
+var Share$1 = forwardRef((props, ref) => React__default.createElement(Process, null, ({
+  loading,
+  handleProcess,
+  data,
+  error
+}) => React__default.createElement(Share, _extends_1({}, props, {
+  loading: loading,
+  handleProcess: handleProcess,
+  data: data,
+  error: error,
+  ref: ref
+}))));
+
+function ownKeys$1(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 _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(source, true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ShareButton(props) {
+  const {
+    className,
+    children
+  } = props,
+        rest = objectWithoutProperties(props, ["className", "children"]);
+
+  return React__default.createElement(Share$1, rest, ({
+    loading,
+    handleClick
+  }) => React__default.createElement("button", {
+    type: "button",
+    disabled: loading,
+    className: className,
+    onClick: handleClick
+  }, children));
+}
+ShareButton.defaultProps = _objectSpread$1({}, Share$1.defaultProps, {
+  className: undefined
+});
+
+class Page extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      style,
+      href = getCurrentHref(),
+      tabs,
+      hideCover,
+      width,
+      height,
+      showFacepile,
+      hideCTA,
+      smallHeader,
+      adaptContainerWidth,
+      children
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-page",
+      style: style,
+      "data-tabs": tabs,
+      "data-hide-cover": hideCover,
+      "data-show-facepile": showFacepile,
+      "data-hide-cta": hideCTA,
+      "data-href": href,
+      "data-small-header": smallHeader,
+      "data-adapt-container-width": adaptContainerWidth,
+      "data-height": height,
+      "data-width": width
+    }, children);
+  }
+
+}
+
+defineProperty(Page, "defaultProps", {
+  width: undefined,
+  height: undefined,
+  tabs: undefined,
+  hideCover: undefined,
+  showFacepile: undefined,
+  hideCTA: undefined,
+  smallHeader: undefined,
+  adaptContainerWidth: undefined,
+  children: undefined,
+  style: undefined,
+  href: undefined
+});
+
+var Page$1 = forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(Page, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+// 3.0 fields without app review https://developers.facebook.com/docs/facebook-login/permissions/?locale=en_US#reference-default
+var Fields = ['id', 'first_name', 'last_name', 'middle_name', 'name', 'name_format', 'picture', 'short_name', 'email'];
+
+function ownKeys$2(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 _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(source, true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+class Login extends Component {
+  constructor(...args) {
+    var _this;
+
+    super(...args);
+    _this = this;
+
+    defineProperty(this, "handleClick",
+    /*#__PURE__*/
+    function () {
+      var _ref = asyncToGenerator(function* (evn) {
+        evn.preventDefault();
+        const {
+          handleProcess,
+          onCompleted,
+          onError,
+          onSuccess
+        } = _this.props;
+
+        try {
+          yield handleProcess(
+          /*#__PURE__*/
+          function () {
+            var _ref2 = asyncToGenerator(function* (api) {
+              const {
+                scope,
+                fields,
+                returnScopes,
+                rerequest,
+                reauthorize,
+                eventKey
+              } = _this.props;
+              const loginQpts = {
+                scope
+              };
+              const authType = [];
+
+              if (returnScopes) {
+                loginQpts.return_scopes = true;
+              }
+
+              if (rerequest) {
+                authType.push('rerequest');
+              }
+
+              if (reauthorize) {
+                authType.push('reauthenticate');
+              }
+
+              if (authType.length) {
+                loginQpts.auth_type = authType.join(',');
+              }
+
+              const loginResponse = yield api.login(loginQpts);
+
+              if (loginResponse.status !== 'connected') {
+                throw new Error('Unauthorized user');
+              }
+
+              const data = yield api.getTokenDetailWithProfile({
+                fields
+              }, loginResponse);
+
+              if (onCompleted) {
+                yield onCompleted(_objectSpread$2({}, data, {
+                  eventKey
+                }));
+              }
+
+              return data;
+            });
+
+            return function (_x2) {
+              return _ref2.apply(this, arguments);
+            };
+          }(), onSuccess);
+        } catch (error) {
+          if (onError) {
+            onError(error);
+          }
+        }
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  }
+
+  render() {
+    const {
+      children,
+      loading,
+      error,
+      data
+    } = this.props;
+    return children({
+      loading,
+      handleClick: this.handleClick,
+      error,
+      data
+    });
+  }
+
+}
+
+defineProperty(Login, "defaultProps", {
+  scope: '',
+  fields: Fields,
+  returnScopes: false,
+  rerequest: false,
+  reauthorize: false,
+  onCompleted: undefined,
+  onError: undefined,
+  eventKey: undefined
+});
+
+var Login$1 = forwardRef((props, ref) => React__default.createElement(Process, null, ({
+  loading,
+  handleProcess,
+  data,
+  error
+}) => React__default.createElement(Login, _extends_1({}, props, {
+  loading: loading,
+  handleProcess: handleProcess,
+  data: data,
+  error: error,
+  ref: ref
+}))));
+
+var spin = createCommonjsModule(function (module) {
+(function (root, factory) {
+
+  /* CommonJS */
+  if ( module.exports) module.exports = factory();
+
+  /* AMD module */
+  else root.Spinner = factory();
+}(commonjsGlobal, function () {
+
+  var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
+    , animations = {} /* Animation rules keyed by their name */
+    , useCssAnimations /* Whether to use CSS animations or setTimeout */
+    , sheet; /* A stylesheet to hold the @keyframe or VML rules. */
+
+  /**
+   * Utility function to create elements. If no tag name is given,
+   * a DIV is created. Optionally properties can be passed.
+   */
+  function createEl (tag, prop) {
+    var el = document.createElement(tag || 'div')
+      , n;
+
+    for (n in prop) el[n] = prop[n];
+    return el
+  }
+
+  /**
+   * Appends children and returns the parent.
+   */
+  function ins (parent /* child1, child2, ...*/) {
+    for (var i = 1, n = arguments.length; i < n; i++) {
+      parent.appendChild(arguments[i]);
+    }
+
+    return parent
+  }
+
+  /**
+   * Creates an opacity keyframe animation rule and returns its name.
+   * Since most mobile Webkits have timing issues with animation-delay,
+   * we create separate rules for each line/segment.
+   */
+  function addAnimation (alpha, trail, i, lines) {
+    var name = ['opacity', trail, ~~(alpha * 100), i, lines].join('-')
+      , start = 0.01 + i/lines * 100
+      , z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
+      , prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
+      , pre = prefix && '-' + prefix + '-' || '';
+
+    if (!animations[name]) {
+      sheet.insertRule(
+        '@' + pre + 'keyframes ' + name + '{' +
+        '0%{opacity:' + z + '}' +
+        start + '%{opacity:' + alpha + '}' +
+        (start+0.01) + '%{opacity:1}' +
+        (start+trail) % 100 + '%{opacity:' + alpha + '}' +
+        '100%{opacity:' + z + '}' +
+        '}', sheet.cssRules.length);
+
+      animations[name] = 1;
+    }
+
+    return name
+  }
+
+  /**
+   * Tries various vendor prefixes and returns the first supported property.
+   */
+  function vendor (el, prop) {
+    var s = el.style
+      , pp
+      , i;
+
+    prop = prop.charAt(0).toUpperCase() + prop.slice(1);
+    if (s[prop] !== undefined) return prop
+    for (i = 0; i < prefixes.length; i++) {
+      pp = prefixes[i]+prop;
+      if (s[pp] !== undefined) return pp
+    }
+  }
+
+  /**
+   * Sets multiple style properties at once.
+   */
+  function css (el, prop) {
+    for (var n in prop) {
+      el.style[vendor(el, n) || n] = prop[n];
+    }
+
+    return el
+  }
+
+  /**
+   * Fills in default values.
+   */
+  function merge (obj) {
+    for (var i = 1; i < arguments.length; i++) {
+      var def = arguments[i];
+      for (var n in def) {
+        if (obj[n] === undefined) obj[n] = def[n];
+      }
+    }
+    return obj
+  }
+
+  /**
+   * Returns the line color from the given string or array.
+   */
+  function getColor (color, idx) {
+    return typeof color == 'string' ? color : color[idx % color.length]
+  }
+
+  // Built-in defaults
+
+  var defaults = {
+    lines: 12             // The number of lines to draw
+  , length: 7             // The length of each line
+  , width: 5              // The line thickness
+  , radius: 10            // The radius of the inner circle
+  , scale: 1.0            // Scales overall size of the spinner
+  , corners: 1            // Roundness (0..1)
+  , color: '#000'         // #rgb or #rrggbb
+  , opacity: 1/4          // Opacity of the lines
+  , rotate: 0             // Rotation offset
+  , direction: 1          // 1: clockwise, -1: counterclockwise
+  , speed: 1              // Rounds per second
+  , trail: 100            // Afterglow percentage
+  , fps: 20               // Frames per second when using setTimeout()
+  , zIndex: 2e9           // Use a high z-index by default
+  , className: 'spinner'  // CSS class to assign to the element
+  , top: '50%'            // center vertically
+  , left: '50%'           // center horizontally
+  , shadow: false         // Whether to render a shadow
+  , hwaccel: false        // Whether to use hardware acceleration (might be buggy)
+  , position: 'absolute'  // Element positioning
+  };
+
+  /** The constructor */
+  function Spinner (o) {
+    this.opts = merge(o || {}, Spinner.defaults, defaults);
+  }
+
+  // Global defaults that override the built-ins:
+  Spinner.defaults = {};
+
+  merge(Spinner.prototype, {
+    /**
+     * Adds the spinner to the given target element. If this instance is already
+     * spinning, it is automatically removed from its previous target b calling
+     * stop() internally.
+     */
+    spin: function (target) {
+      this.stop();
+
+      var self = this
+        , o = self.opts
+        , el = self.el = createEl(null, {className: o.className});
+
+      css(el, {
+        position: o.position
+      , width: 0
+      , zIndex: o.zIndex
+      , left: o.left
+      , top: o.top
+      });
+
+      if (target) {
+        target.insertBefore(el, target.firstChild || null);
+      }
+
+      el.setAttribute('role', 'progressbar');
+      self.lines(el, self.opts);
+
+      if (!useCssAnimations) {
+        // No CSS animation support, use setTimeout() instead
+        var i = 0
+          , start = (o.lines - 1) * (1 - o.direction) / 2
+          , alpha
+          , fps = o.fps
+          , f = fps / o.speed
+          , ostep = (1 - o.opacity) / (f * o.trail / 100)
+          , astep = f / o.lines
+
+        ;(function anim () {
+          i++;
+          for (var j = 0; j < o.lines; j++) {
+            alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity);
+
+            self.opacity(el, j * o.direction + start, alpha, o);
+          }
+          self.timeout = self.el && setTimeout(anim, ~~(1000 / fps));
+        })();
+      }
+      return self
+    }
+
+    /**
+     * Stops and removes the Spinner.
+     */
+  , stop: function () {
+      var el = this.el;
+      if (el) {
+        clearTimeout(this.timeout);
+        if (el.parentNode) el.parentNode.removeChild(el);
+        this.el = undefined;
+      }
+      return this
+    }
+
+    /**
+     * Internal method that draws the individual lines. Will be overwritten
+     * in VML fallback mode below.
+     */
+  , lines: function (el, o) {
+      var i = 0
+        , start = (o.lines - 1) * (1 - o.direction) / 2
+        , seg;
+
+      function fill (color, shadow) {
+        return css(createEl(), {
+          position: 'absolute'
+        , width: o.scale * (o.length + o.width) + 'px'
+        , height: o.scale * o.width + 'px'
+        , background: color
+        , boxShadow: shadow
+        , transformOrigin: 'left'
+        , transform: 'rotate(' + ~~(360/o.lines*i + o.rotate) + 'deg) translate(' + o.scale*o.radius + 'px' + ',0)'
+        , borderRadius: (o.corners * o.scale * o.width >> 1) + 'px'
+        })
+      }
+
+      for (; i < o.lines; i++) {
+        seg = css(createEl(), {
+          position: 'absolute'
+        , top: 1 + ~(o.scale * o.width / 2) + 'px'
+        , transform: o.hwaccel ? 'translate3d(0,0,0)' : ''
+        , opacity: o.opacity
+        , animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1 / o.speed + 's linear infinite'
+        });
+
+        if (o.shadow) ins(seg, css(fill('#000', '0 0 4px #000'), {top: '2px'}));
+        ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)')));
+      }
+      return el
+    }
+
+    /**
+     * Internal method that adjusts the opacity of a single line.
+     * Will be overwritten in VML fallback mode below.
+     */
+  , opacity: function (el, i, val) {
+      if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
+    }
+
+  });
+
+
+  function initVML () {
+
+    /* Utility function to create a VML tag */
+    function vml (tag, attr) {
+      return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
+    }
+
+    // No CSS transforms but VML support, add a CSS rule for VML elements:
+    sheet.addRule('.spin-vml', 'behavior:url(#default#VML)');
+
+    Spinner.prototype.lines = function (el, o) {
+      var r = o.scale * (o.length + o.width)
+        , s = o.scale * 2 * r;
+
+      function grp () {
+        return css(
+          vml('group', {
+            coordsize: s + ' ' + s
+          , coordorigin: -r + ' ' + -r
+          })
+        , { width: s, height: s }
+        )
+      }
+
+      var margin = -(o.width + o.length) * o.scale * 2 + 'px'
+        , g = css(grp(), {position: 'absolute', top: margin, left: margin})
+        , i;
+
+      function seg (i, dx, filter) {
+        ins(
+          g
+        , ins(
+            css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx})
+          , ins(
+              css(
+                vml('roundrect', {arcsize: o.corners})
+              , { width: r
+                , height: o.scale * o.width
+                , left: o.scale * o.radius
+                , top: -o.scale * o.width >> 1
+                , filter: filter
+                }
+              )
+            , vml('fill', {color: getColor(o.color, i), opacity: o.opacity})
+            , vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
+            )
+          )
+        );
+      }
+
+      if (o.shadow)
+        for (i = 1; i <= o.lines; i++) {
+          seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');
+        }
+
+      for (i = 1; i <= o.lines; i++) seg(i);
+      return ins(el, g)
+    };
+
+    Spinner.prototype.opacity = function (el, i, val, o) {
+      var c = el.firstChild;
+      o = o.shadow && o.lines || 0;
+      if (c && i + o < c.childNodes.length) {
+        c = c.childNodes[i + o]; c = c && c.firstChild; c = c && c.firstChild;
+        if (c) c.opacity = val;
+      }
+    };
+  }
+
+  if (typeof document !== 'undefined') {
+    sheet = (function () {
+      var el = createEl('style', {type : 'text/css'});
+      ins(document.getElementsByTagName('head')[0], el);
+      return el.sheet || el.styleSheet
+    }());
+
+    var probe = css(createEl('group'), {behavior: 'url(#default#VML)'});
+
+    if (!vendor(probe, 'transform') && probe.adj) initVML();
+    else useCssAnimations = vendor(probe, 'animation');
+  }
+
+  return Spinner
+
+}));
+});
+
+var dist = createCommonjsModule(function (module, exports) {
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+
+
+var _react2 = _interopRequireDefault(React__default);
+
+
+
+var _propTypes2 = _interopRequireDefault(PropTypes);
+
+
+
+var _spin2 = _interopRequireDefault(spin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Spinner = function (_Component) {
+  _inherits(Spinner, _Component);
+
+  function Spinner() {
+    _classCallCheck(this, Spinner);
+
+    return _possibleConstructorReturn(this, (Spinner.__proto__ || Object.getPrototypeOf(Spinner)).apply(this, arguments));
+  }
+
+  _createClass(Spinner, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.updateSpinner();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.updateSpinner();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.spinner) {
+        this.spinner.stop();
+        this.spinner = null;
+      }
+    }
+  }, {
+    key: 'updateSpinner',
+    value: function updateSpinner() {
+      var loaded = this.props.loaded;
+
+      if (!loaded && !this.spinner) {
+        this.spinner = new _spin2.default(this.props.config);
+        this.spinner.spin(this.refs.loader);
+      } else if (loaded && this.spinner) {
+        this.spinner.stop();
+        this.spinner = null;
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          loaded = _props.loaded,
+          className = _props.className;
+
+
+      if (loaded) {
+        return this.props.children ? React__default.Children.only(this.props.children) : null;
+      }
+
+      return _react2.default.createElement('div', { className: className, ref: 'loader' });
+    }
+  }]);
+
+  return Spinner;
+}(React__default.Component);
+
+Spinner.propTypes = {
+  className: _propTypes2.default.string,
+  config: _propTypes2.default.object.isRequired,
+  loaded: _propTypes2.default.bool.isRequired,
+  children: _propTypes2.default.node
+};
+Spinner.defaultProps = {
+  config: {},
+  loaded: false,
+  className: 'loader'
+};
+exports.default = Spinner;
+});
+
+var Spinner = unwrapExports(dist);
+
+function ownKeys$3(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 _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(source, true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function LoginButton(props) {
+  const {
+    children,
+    className,
+    spinner,
+    spinnerConfig
+  } = props,
+        rest = objectWithoutProperties(props, ["children", "className", "spinner", "spinnerConfig"]);
+
+  return React__default.createElement(Login$1, rest, ({
+    loading,
+    handleClick
+  }) => React__default.createElement("button", {
+    type: "button",
+    className: className,
+    onClick: handleClick,
+    disabled: loading
+  }, children, spinner && loading && React__default.createElement(Spinner, {
+    config: spinnerConfig
+  })));
+}
+LoginButton.defaultProps = _objectSpread$3({}, Login$1.defaultProps, {
+  className: undefined,
+  spinnerConfig: {},
+  spinner: true
+});
+
+class EmbeddedPost extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      href,
+      width,
+      showText,
+      children
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-post",
+      "data-href": href,
+      "data-width": width,
+      "data-show-text": showText
+    }, children);
+  }
+
+}
+
+defineProperty(EmbeddedPost, "defaultProps", {
+  width: undefined,
+  showText: undefined,
+  children: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(EmbeddedPost, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+class EmbeddedVideo extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      href,
+      width,
+      showText,
+      allowFullScreen,
+      autoPlay,
+      showCaptions,
+      children
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-video",
+      "data-href": href,
+      "data-width": width,
+      "data-show-text": showText,
+      "data-show-captions": showCaptions,
+      "data-autoplay": autoPlay,
+      "data-allowfullscreen": allowFullScreen
+    }, children);
+  }
+
+}
+
+defineProperty(EmbeddedVideo, "defaultProps", {
+  width: undefined,
+  showText: undefined,
+  allowFullScreen: undefined,
+  autoPlay: undefined,
+  showCaptions: undefined,
+  children: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(EmbeddedVideo, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+class Comments extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      colorScheme,
+      href = getCurrentHref(),
+      numPosts,
+      orderBy,
+      width,
+      children,
+      mobile
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-comments",
+      "data-colorscheme": colorScheme,
+      "data-numposts": numPosts,
+      "data-href": href,
+      "data-order-by": orderBy,
+      "data-width": width,
+      "data-skin": colorScheme,
+      "data-mobile": mobile
+    }, children);
+  }
+
+}
+
+defineProperty(Comments, "defaultProps", {
+  href: undefined,
+  numPosts: undefined,
+  orderBy: undefined,
+  width: undefined,
+  colorScheme: undefined,
+  children: undefined,
+  mobile: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(Comments, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+class CommentsCount extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      href = getCurrentHref(),
+      children
+    } = this.props;
+    return React__default.createElement("span", {
+      className: "fb-comments-count",
+      "data-href": href
+    }, children);
+  }
+
+}
+
+defineProperty(CommentsCount, "defaultProps", {
+  href: undefined,
+  children: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(CommentsCount, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+class Feed extends Component {
+  constructor(...args) {
+    var _this;
+
+    super(...args);
+    _this = this;
+
+    defineProperty(this, "handleClick",
+    /*#__PURE__*/
+    function () {
+      var _ref = asyncToGenerator(function* (evn) {
+        evn.preventDefault();
+        const {
+          handleProcess
+        } = _this.props;
+        return handleProcess(
+        /*#__PURE__*/
+        function () {
+          var _ref2 = asyncToGenerator(function* (api) {
+            const {
+              link = getCurrentHref(),
+              display,
+              appId = api.getAppId(),
+              redirectURI,
+              from,
+              to,
+              picture,
+              source,
+              name,
+              caption,
+              description,
+              dataRef
+            } = _this.props;
+            return api.ui(clearUndefinedProperties({
+              method: 'feed',
+              link,
+              display,
+              app_id: appId,
+              redirect_uri: redirectURI,
+              from,
+              to,
+              picture,
+              source,
+              name,
+              caption,
+              description,
+              ref: dataRef
+            }));
+          });
+
+          return function (_x2) {
+            return _ref2.apply(this, arguments);
+          };
+        }());
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+  }
+
+  render() {
+    const {
+      children,
+      loading,
+      error,
+      data
+    } = this.props;
+    return children({
+      loading,
+      handleClick: this.handleClick,
+      error,
+      data
+    });
+  }
+
+}
+
+defineProperty(Feed, "defaultProps", {
+  link: undefined,
+  display: undefined,
+  appId: undefined,
+  redirectURI: undefined,
+  from: undefined,
+  to: undefined,
+  source: undefined,
+  picture: undefined,
+  name: undefined,
+  caption: undefined,
+  description: undefined,
+  dataRef: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Process, null, ({
+  loading,
+  handleProcess,
+  error,
+  data
+}) => React__default.createElement(Feed, _extends_1({}, props, {
+  loading: loading,
+  handleProcess: handleProcess,
+  data: data,
+  error: error,
+  ref: ref
+}))));
+
+class Group extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      style,
+      href = getCurrentHref(),
+      width,
+      showSocialContext,
+      showMetaData,
+      children,
+      skin
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-group",
+      style: style,
+      "data-href": href,
+      "data-width": width,
+      "data-show-social-context": showSocialContext,
+      "data-show-metadata": showMetaData,
+      "data-skin": skin
+    }, children);
+  }
+
+}
+
+defineProperty(Group, "defaultProps", {
+  showSocialContext: undefined,
+  showMetaData: undefined,
+  width: undefined,
+  children: undefined,
+  style: undefined,
+  href: undefined,
+  skin: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(Group, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+class LoginStatus$1 extends Component {
+  constructor(..._args) {
+    var _this;
+
+    super(..._args);
+    _this = this;
+
+    defineProperty(this, "state", {});
+
+    defineProperty(this, "handleReady",
+    /*#__PURE__*/
+    function () {
+      var _ref = asyncToGenerator(function* (api) {
+        const {
+          event
+        } = _this.props;
+
+        _this.setState({
+          api
+        });
+
+        yield api.subscribe(event, _this.handleChange);
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    defineProperty(this, "handleChange", (...args) => {
+      const {
+        onChange
+      } = this.props;
+
+      if (onChange) {
+        onChange(...args);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    const {
+      state: {
+        api
+      },
+      props: {
+        event
+      }
+    } = this;
+
+    if (api) {
+      api.unsubscribe(event, this.handleChange);
+    }
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    return React__default.createElement(Initialize$1, {
+      onReady: this.handleReady
+    }, children);
+  }
+
+}
+
+defineProperty(LoginStatus$1, "defaultProps", {
+  onChange: undefined
+});
+
+class Profile extends Component {
+  constructor(...args) {
+    var _this;
+
+    super(...args);
+    _this = this;
+
+    defineProperty(this, "state", {
+      loading: true
+    });
+
+    defineProperty(this, "handleReady",
+    /*#__PURE__*/
+    function () {
+      var _ref = asyncToGenerator(function* (api) {
+        _this.api = api;
+
+        _this.updateProfile();
+      });
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }());
+
+    defineProperty(this, "handleStatusChange", () => {
+      this.updateProfile();
+    });
+  }
+
+  updateProfile() {
+    var _this2 = this;
+
+    return asyncToGenerator(function* () {
+      const {
+        api,
+        props: {
+          fields
+        }
+      } = _this2;
+
+      if (!api) {
+        return;
+      }
+
+      try {
+        const response = yield api.getLoginStatus();
+
+        if (response.status !== LoginStatus.CONNECTED) {
+          _this2.setState({
+            profile: undefined,
+            loading: false,
+            error: undefined
+          });
+
+          return;
+        }
+
+        const profile = yield api.getProfile({
+          fields
+        });
+
+        _this2.setState({
+          profile,
+          loading: false,
+          error: undefined
+        });
+      } catch (error) {
+        _this2.setState({
+          profile: undefined,
+          loading: false,
+          error
+        });
+      }
+    })();
+  }
+
+  render() {
+    const {
+      children
+    } = this.props;
+    const {
+      profile,
+      loading,
+      error
+    } = this.state;
+    return React__default.createElement(Initialize$1, {
+      onReady: this.handleReady
+    }, React__default.createElement(LoginStatus$1, {
+      event: "auth.statusChange",
+      onChange: this.handleStatusChange
+    }, children({
+      profile,
+      loading,
+      error
+    })));
+  }
+
+}
+
+defineProperty(Profile, "defaultProps", {
+  fields: Fields
+});
+
+class CustomChat extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      children,
+      pageId,
+      themeColor,
+      loggedInGreeting,
+      loggedOutGreeting,
+      dataRef,
+      greetingDialogDisplay,
+      greetingDialogDelay
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-customerchat",
+      page_id: pageId,
+      theme_color: themeColor,
+      logged_in_greeting: loggedInGreeting,
+      logged_out_greeting: loggedOutGreeting,
+      greeting_dialog_display: greetingDialogDisplay,
+      greeting_dialog_delay: greetingDialogDelay,
+      "data-ref": dataRef
+    }, children);
+  }
+
+}
+
+defineProperty(CustomChat, "defaultProps", {
+  children: undefined,
+  themeColor: undefined,
+  loggedInGreeting: undefined,
+  loggedOutGreeting: undefined,
+  dataRef: undefined,
+  greetingDialogDisplay: undefined,
+  greetingDialogDelay: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(CustomChat, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+class MessageUs extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      color,
+      messengerAppId,
+      pageId,
+      children,
+      size
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-messengermessageus",
+      messenger_app_id: messengerAppId,
+      page_id: pageId,
+      "data-color": color,
+      "data-size": size
+    }, children);
+  }
+
+}
+
+defineProperty(MessageUs, "defaultProps", {
+  color: undefined,
+  size: undefined,
+  children: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(MessageUs, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+class MessengerCheckbox extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      origin,
+      prechecked,
+      allowLogin,
+      userRef,
+      messengerAppId,
+      pageId,
+      children,
+      size,
+      centerAlign,
+      skin
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-messenger-checkbox",
+      messenger_app_id: messengerAppId,
+      page_id: pageId,
+      size: size,
+      origin: origin,
+      user_ref: userRef,
+      prechecked: prechecked,
+      allow_login: allowLogin,
+      skin: skin,
+      center_align: centerAlign
+    }, children);
+  }
+
+}
+
+defineProperty(MessengerCheckbox, "defaultProps", {
+  size: undefined,
+  allowLogin: undefined,
+  prechecked: undefined,
+  userRef: undefined,
+  children: undefined,
+  origin: undefined,
+  skin: undefined,
+  centerAlign: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(MessengerCheckbox, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+// import MessengerColor from './constants/MessengerColor';
+
+class SendToMessenger extends PureComponent {
+  componentDidUpdate() {
+    const {
+      handleParse
+    } = this.props;
+    handleParse();
+  }
+
+  render() {
+    const {
+      color,
+      messengerAppId,
+      pageId,
+      children,
+      dataRef,
+      size
+    } = this.props;
+    return React__default.createElement("div", {
+      className: "fb-send-to-messenger",
+      messenger_app_id: messengerAppId,
+      page_id: pageId,
+      "data-color": color,
+      "data-size": size,
+      "data-ref": dataRef
+    }, children);
+  }
+
+}
+
+defineProperty(SendToMessenger, "defaultProps", {
+  color: undefined,
+  size: undefined,
+  dataRef: undefined,
+  children: undefined
+});
+
+forwardRef((props, ref) => React__default.createElement(Parser, null, ({
+  handleParse
+}) => React__default.createElement(SendToMessenger, _extends_1({}, props, {
+  handleParse: handleParse,
+  ref: ref
+}))));
+
+var ImageSlider = function ImageSlider(props) {
+  var innerSlider = useRef(null);
+  var tile = useRef(null);
+  var viewableWindow = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      tileSize = _useState2[0],
+      setTileSize = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showScroller = _useState4[0],
+      setShowScroller = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      scrollPosition = _useState6[0],
+      setScrollPosition = _useState6[1];
+
+  var client = props.client;
+
+
+  function scrollSlider(e, direction) {
+    var slide = e.target.parentElement;
+    var scrollOffset = scrollPosition;
+    var viewableWidth = slide.clientWidth;
+    //calculate viewable size / slide
+    var numberOfSlidesToScroll = Math.floor(tile.current.clientWidth + 25); //width of the tile plus margin
+    var scrollDirection = void 0;
+    if (direction === 'next') {
+      scrollDirection = scrollOffset + numberOfSlidesToScroll;
+      if (scrollOffset + viewableWidth + 25 >= innerSlider.current.offsetWidth) {
+        scrollDirection = 0;
+      }
+    }
+    if (direction === 'prev') {
+      scrollDirection = scrollOffset - numberOfSlidesToScroll;
+      if (scrollOffset === 0) {
+        if (window.innerWidth > 1399) {
+          scrollDirection = innerSlider.current.offsetWidth - tileSize * 3 - 70;
+        }
+        if (window.innerWidth < 1399 && window.innerWidth > 592) {
+          scrollDirection = innerSlider.current.offsetWidth - tileSize * 2 - 40;
+        }
+        if (window.innerWidth < 592) {
+          scrollDirection = innerSlider.current.offsetWidth - tileSize * 1 - 24;
+        }
+      }
+    }
+    slide.scrollTo({
+      left: scrollDirection,
+      behavior: 'smooth'
+    });
+    setScrollPosition(scrollDirection);
+  }
+  var setThumbSize = function setThumbSize() {
+    var thumbSize = void 0;
+    var scrollerVisible = false;
+    if (window.innerWidth > 1399) {
+      if (props.data.slides && props.data.slides.length < 3) {
+        thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 40);
+      } else {
+        thumbSize = Math.floor(viewableWindow.current.clientWidth / 3 - 40);
+      }
+      if (props.data.slides.length > 3) {
+        scrollerVisible = true;
+      }
+    }
+    if (window.innerWidth < 1399 && window.innerWidth > 592) {
+      thumbSize = Math.floor(viewableWindow.current.clientWidth / 2 - 48);
+      if (props.data.slides.length > 2) {
+        scrollerVisible = true;
+      }
+    }
+    if (window.innerWidth < 592) {
+      thumbSize = Math.floor(viewableWindow.current.clientWidth / 1 - 64);
+      if (props.data.slides.length > 1) {
+        scrollerVisible = true;
+      }
+    }
+    if (thumbSize !== tileSize) {
+      setTileSize(thumbSize);
+      setScrollPosition(0);
+      setShowScroller(scrollerVisible);
+      var videoRows = document.querySelectorAll('#vid-slider .row');
+      for (var i = 0; i < videoRows.length; i++) {
+        videoRows[i].scrollTo({
+          left: 0,
+          behavior: 'smooth'
+        });
+      }
+    }
+  };
+  useEffect(function () {
+    //IE11 Polyfill
+    smoothscroll.polyfill();
+    setThumbSize();
+
+    window.addEventListener('resize', setThumbSize);
+
+    return function () {
+      return window.removeEventListener('resize', setThumbSize);
+    };
+  }, []);
+
+  var variant = 'black';
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    React__default.createElement(
+      'div',
+      { ref: viewableWindow, id: 'vid-slider', className: 'col' },
+      React__default.createElement(
+        'div',
+        { className: 'row' },
+        showScroller && React__default.createElement(
+          'div',
+          { onClick: function onClick(e) {
+              return scrollSlider(e, 'prev');
+            }, className: 'tile__slider-prev', style: { color: variant } },
+          React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
+        ),
+        showScroller && React__default.createElement(
+          'div',
+          { onClick: function onClick(e) {
+              return scrollSlider(e, 'next');
+            }, className: 'tile__slider-next', style: { color: variant } },
+          React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
+        ),
+        React__default.createElement(
+          'div',
+          { ref: innerSlider, className: 'row__inner' },
+          props.data.slides.map(function (img, index) {
+            var thumbnail = urlFor({ client: client, source: img.slideshowImage, imageWidth: 250 });
+            if (!img.slideshowImage.link) {
+              return React__default.createElement(
+                'div',
+                { ref: tile, key: index, className: 'tile', style: { width: tileSize + 'px' } },
+                React__default.createElement(
+                  'div',
+                  { className: 'tile__media' },
+                  React__default.createElement('img', { className: 'tile__img', src: thumbnail, alt: img.slideshowImage.alt ? img.slideshowImage.alt : '', style: { width: tileSize + 'px' } })
+                ),
+                React__default.createElement('div', { style: { color: variant }, className: 'tile__info' })
+              );
+            } else {
+              return React__default.createElement(
+                'a',
+                { ref: tile, key: index, href: img.slideshowImage.link, target: img.slideshowImage.blank ? '_target' : '_self', className: 'tile', style: { width: tileSize + 'px' } },
+                React__default.createElement(
+                  'div',
+                  { className: 'tile__media' },
+                  React__default.createElement('img', { className: 'tile__img', src: thumbnail, alt: img.slideshowImage.alt ? img.slideshowImage.alt : '', style: { width: tileSize + 'px' } })
+                ),
+                React__default.createElement('div', { style: { color: variant }, className: 'tile__info' })
+              );
+            }
+          })
+        )
+      ),
+      React__default.createElement(
+        'style',
+        { jsx: 'true' },
+        '\n          #vid-slider * {\n            box-sizing: border-box;\n            -ms-overflow-style: none;\n          }\n          #vid-slider::-webkit-scrollbar-thumb {\n            display: none;\n          }\n          #vid-slider::-webkit-scrollbar {\n            display: none;\n          }\n          #vid-slider .row::-webkit-scrollbar {\n            display: none;\n          }\n          #vid-slider .row::-webkit-scrollbar-thumb {\n            display: none;\n          }\n          #vid-slider {\n            position: relative;\n            -ms-overflow-style: none;\n            padding: 0 1.5rem;\n            margin-bottom: 0 !important;\n          }\n          #vid-slider .now-playing {\n            position: absolute;\n            top: 0.5rem;\n            left: 1rem;\n            color: white;\n            background: rgba(0, 0, 0, 0.75);\n          }\n          #vid-slider h1,\n          #vid-slider p {\n            text-align: center;\n            width: 100%;\n            max-width: 500px;\n            margin: auto;\n          }\n          #vid-slider,\n          #vidHolder {\n            max-width: 805px;\n          }\n          #vid-slider a:link,\n          #vid-slider a:hover,\n          #vid-slider a:active,\n          #vid-slider a:visited {\n            transition: color 150ms;\n            color: #95a5a6;\n            text-decoration: none;\n          }\n          #vid-slider a:hover {\n            color: #7f8c8d;\n            text-decoration: underline;\n          }\n          #vid-slider .contain {\n            width: 100%;\n          }\n          #vid-slider .row {\n            overflow-x: scroll;\n            width: 100%;\n            -ms-overflow-style: none;\n            overflow-y: hidden !important;\n          }\n          #vid-slider .tile__info {\n            white-space: normal !important;\n            position: absolute;\n            text-align: center;\n            color: ' + (props.dark ? 'white' : '#383838') + ';\n            opacity: 1;\n            font-size: 0.9rem;\n            font-weight: bold;\n            transition: opacity 0.25s;\n          }\n          #vid-slider .row__inner {\n            transition: 450ms -webkit-transform;\n            transition: 450ms transform;\n            transition: 450ms transform, 450ms -webkit-transform;\n            font-size: 0;\n            white-space: nowrap;\n            margin: 25px 0 70px !important;\n            padding-bottom: 10px;\n            padding-left: 0;\n          }\n          #vid-slider .tile {\n            position: relative;\n            display: inline-block;\n            margin: 0 12px;\n            font-size: 20px;\n            transition: 450ms all;\n            -webkit-transform-origin: center left;\n            transform-origin: center left;\n          }\n  \n          #vid-slider .tile:first-child {\n            margin-left: 15px;\n          }\n          #vid-slider .tile__img {\n            height: auto;\n            -o-object-fit: contain;\n            object-fit: contain;\n            object-position: center;\n          }\n          #vid-slider .tile__details {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            right: 0;\n            top: 0;\n            font-size: 10px;\n            opacity: 0;\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n            transition: 450ms opacity;\n          }\n          #vid-slider .tile__details:after,\n          #vid-slider .tile__details:before {\n            content: \'\';\n  \n            position: absolute;\n            top: 50%;\n            left: 50%;\n            display: #000;\n          }\n          #vid-slider .tile__details:after {\n            margin-top: -25px;\n            margin-left: -25px;\n            width: 50px;\n            height: 50px;\n            border: 3px solid #ecf0f1;\n            line-height: 50px;\n            text-align: center;\n            border-radius: 100%;\n            background: rgba(0, 0, 0, 0.5);\n            z-index: 1;\n          }\n          #vid-slider .tile__details:before {\n            content: \'\';\n            background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n              no-repeat center center;\n            left: 0;\n            width: 100%;\n            height: 3rem;\n            font-size: 30px;\n            margin-right: 12px;\n            margin-top: -24px;\n            text-align: center;\n            z-index: 2;\n            color: white;\n          }\n  \n          #vid-slider .tile__title {\n            position: absolute;\n            bottom: 0;\n            padding: 10px;\n            max-width: 250px;\n          }\n          #vid-slider .tile__title_text {\n            position: relative;\n            left: 0;\n            white-space: normal;\n          }\n  \n          #vid-slider .tile__slider-prev,\n          #vid-slider .tile__slider-next {\n            width: 30px;\n            background: transparent;\n            border: none;\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            z-index: 99;\n            cursor: pointer;\n            color: ' + (props.dark ? 'white' : 'black') + ';\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-size: 2rem;\n          }\n          #vid-slider .tile__slider-prev {\n            left: -0.5rem;\n            padding: 1rem;\n          }\n          #vid-slider .tile__slider-next {\n            right: -0.5rem;\n            padding: 1rem;\n          }\n          #vid-slider,\n          #vid-slider .row {\n            margin: 0;\n          }\n  \n          #vid-slider .row::-webkit-scrollbar-thumb {\n            background-color: transparent !important;\n          }\n          #vid-slider i {\n            border: solid ' + (props.dark ? 'white' : 'black') + ';\n            border-width: 0 4px 4px 0;\n            display: inline-block;\n            padding: 4px;\n            pointer-events: none;\n          }\n          #vid-slider .right {\n            transform: rotate(-45deg);\n            -webkit-transform: rotate(-45deg);\n          }\n          #vid-slider .left {\n            transform: rotate(135deg);\n            -webkit-transform: rotate(135deg);\n          }\n          @media screen and (min-width: 1399px) {\n            .block-content #vid-slider .tile__img {\n              height: auto;\n            }\n            .block-content #vid-slider .tile {\n              height: auto;\n            }\n          }\n  \n          @media screen and (max-width: 1399px) {\n            #vid-slider,\n            #vidHolder {\n              max-width: 620px;\n            }\n          }\n          @media screen and (max-width: 1200px) {\n            #vid-slider,\n            #vidHolder {\n              max-width: 580px;\n            }\n          }\n          @media screen and (max-width: 967px) {\n            #vid-slider {\n              max-width: 100%;\n            }\n  \n            #vid-slider .row__inner {\n              margin: 60px 0 50px !important;\n            }\n          }\n  \n          @media screen and (max-width: 768px) {\n            #vidHolder {\n              position: unset;\n              width: 100%;\n            }\n          }\n          @media screen and (max-width: 568px) {\n            #vidHolder {\n              position: unset;\n              width: 100%;\n            }\n  \n            #vid-slider .row__inner {\n              margin: 30px 0 70px;\n            }\n          }\n        '
+      )
+    )
+  );
+};
+
+export { Facebook$1 as F, ImageSlider as I, Page$1 as P, TwitterTimelineEmbed as T };