@quintype/arrow 3.15.1-fallback-support.1 → 3.15.1-perf.1

package/atoms/ExtendedLoadMore/index-aa8b8ab8.js

@@ -0,0 +1,990 @@
+import { a as get_1, g as getTextColor, _ as _getClassName, e as getStoryUrl, f as isExternalStory, h as getTimeStamp, j as formatter, k as getSlug, r as rgbToHex, d as clientWidth, b as generateNavigateSlug, c as _slicedToArray } from './index-e39b3ca8.js';
+import React, { useContext, createContext, useState, useEffect, useRef } from 'react';
+import PropTypes, { PropTypes as PropTypes$1 } from 'prop-types';
+import { Link, ResponsiveImage, LinkBase } from '@quintype/components';
+import { connect } from 'react-redux';
+import ReactDOM from 'react-dom';
+
+var StateContext = /*#__PURE__*/createContext(); // eslint-disable-next-line react/display-name
+
+var StateProvider = function StateProvider(RowComponent) {
+  return function (props) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/prop-types
+      React.createElement(StateContext.Provider, {
+        value: props.config
+      }, /*#__PURE__*/React.createElement(RowComponent, props))
+    );
+  };
+};
+var useStateValue = function useStateValue() {
+  return useContext(StateContext);
+};
+
+var CrownIcon = function CrownIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D8D8D8" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    fillRule: "nonzero",
+    transform: "translate(0 2)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M21.043 19.553c0-.743-.601-1.344-1.344-1.344h-15.4a1.343 1.343 0 100 2.688h15.4c.743 0 1.344-.603 1.344-1.344zM1.598 8.673c.022 0 .042 0 .064-.003l2.131 7.713h16.411l2.132-7.713c.022 0 .041.003.063.003a1.599 1.599 0 10-1.52-1.108L17.025 9.82 12.882 2.95a1.599 1.599 0 10-1.765 0L6.976 9.82 3.121 7.565a1.599 1.599 0 10-1.523 1.107z"
+  }))))));
+};
+CrownIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var KeyIcon = function KeyIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    fillRule: "nonzero",
+    d: "M12.71 4.364A6.54 6.54 0 000 6.545a6.54 6.54 0 0012.71 2.182h4.745v4.364h4.363V8.727H24V4.364H12.71zM6.544 8.727a2.181 2.181 0 110-4.362 2.181 2.181 0 010 4.362z",
+    transform: "translate(0 5)"
+  })))));
+};
+KeyIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var LockIcon = function LockIcon(_ref) {
+  var height = _ref.height,
+      width = _ref.width,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      positionTop = _ref.positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(8 8)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }), /*#__PURE__*/React.createElement("g", {
+    fill: color,
+    fillRule: "nonzero",
+    transform: "translate(3)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M15.692 9h-.747V6c0-3.31-2.681-6-5.978-6C5.67 0 2.989 2.69 2.989 6v3h-.747A2.249 2.249 0 000 11.25v10.5A2.249 2.249 0 002.242 24h13.45a2.249 2.249 0 002.242-2.25v-10.5A2.249 2.249 0 0015.692 9zM4.982 6c0-2.206 1.787-4 3.985-4s3.985 1.794 3.985 4v3h-7.97V6z"
+  }))))));
+};
+LockIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var StarIcon = function StarIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
+      _ref$positionTop = _ref.positionTop,
+      positionTop = _ref$positionTop === void 0 ? "" : _ref$positionTop;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 40 40",
+    style: {
+      position: "relative",
+      top: positionTop
+    }
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "M20 26L12.946577 29.7082039 14.2936609 21.854102 8.5873218 16.2917961 16.4732885 15.145898 20 8 23.5267115 15.145898 31.4126782 16.2917961 25.7063391 21.854102 27.053423 29.7082039z"
+  }))));
+};
+StarIcon.propTypes = {
+  height: PropTypes.string,
+  width: PropTypes.string,
+  color: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      color = _ref.color,
+      iconType = _ref.iconType,
+      positionTop = _ref.positionTop;
+
+  switch (iconType) {
+    case "crown":
+      return /*#__PURE__*/React.createElement(CrownIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+
+    case "lock":
+      return /*#__PURE__*/React.createElement(LockIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+
+    case "key":
+      return /*#__PURE__*/React.createElement(KeyIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+
+    default:
+      return /*#__PURE__*/React.createElement(StarIcon, {
+        width: width,
+        height: height,
+        color: color,
+        positionTop: positionTop
+      });
+  }
+};
+PremiumStoryIcon.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  color: PropTypes.string,
+  iconType: PropTypes.string,
+  positionTop: PropTypes.string
+};
+
+function LiveIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "live-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "25",
+    height: "24",
+    viewBox: "0 0 25 24"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#ff5858",
+    d: "M12 18a6 6 0 110-12 6 6 0 010 12zm0 2.5a8.5 8.5 0 110-17 8.5 8.5 0 010 17zm0-1a7.5 7.5 0 100-15 7.5 7.5 0 000 15z"
+  }));
+}
+
+var _styleModuleImportMap$8 = {
+  "./headline.m.css": {
+    "wrapper": "headline-m_wrapper__3nUmh",
+    "headline": "headline-m_headline__3_NhV",
+    "dark": "headline-m_dark__en3hW",
+    "light": "headline-m_light__3lKJB"
+  }
+};
+var Headline = function Headline(_ref) {
+  var story = _ref.story,
+      headerLevel = _ref.headerLevel,
+      _ref$premiumStoryIcon = _ref.premiumStoryIconConfig,
+      premiumStoryIconConfig = _ref$premiumStoryIcon === void 0 ? {} : _ref$premiumStoryIcon,
+      isLink = _ref.isLink;
+  var configData = useStateValue() || {};
+  var _premiumStoryIconConf = premiumStoryIconConfig.iconColor,
+      iconColor = _premiumStoryIconConf === void 0 ? "#F7B500" : _premiumStoryIconConf,
+      _premiumStoryIconConf2 = premiumStoryIconConfig.iconStyle,
+      iconStyle = _premiumStoryIconConf2 === void 0 ? "star" : _premiumStoryIconConf2,
+      _premiumStoryIconConf3 = premiumStoryIconConfig.enablePremiumStoryIcon,
+      enablePremiumStoryIcon = _premiumStoryIconConf3 === void 0 ? false : _premiumStoryIconConf3,
+      _premiumStoryIconConf4 = premiumStoryIconConfig.showLiveIcon,
+      showLiveIcon = _premiumStoryIconConf4 === void 0 ? false : _premiumStoryIconConf4;
+  var alternateHeadline = get_1(story, ["alternative", "home", "default", "headline"]);
+  var premiumStory = enablePremiumStoryIcon && get_1(story, ["access"]) === "subscription";
+  var headline = alternateHeadline || story.headline;
+  var HeaderTag = "h" + headerLevel;
+
+  var positionHeadline = function positionHeadline() {
+    switch (parseInt(headerLevel)) {
+      case 1:
+        return "-2px";
+
+      case 2:
+        return "2px";
+
+      case 3:
+        return "4px";
+
+      case 4:
+        return "5px";
+
+      default:
+        return "6px";
+    }
+  };
+
+  var textColor = getTextColor(configData.theme);
+  var wrapperClass = premiumStory ? "wrapper" : "";
+  var iconSize = "24px";
+  var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get_1(story, ["metadata", "is-closed"], false);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "headline",
+    className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap$8)
+  }, premiumStory && /*#__PURE__*/React.createElement(PremiumStoryIcon, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor,
+    iconType: iconStyle,
+    positionTop: positionHeadline()
+  }), isLink ? /*#__PURE__*/React.createElement(Link, {
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "headline"
+  }, /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$8)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline)) : /*#__PURE__*/React.createElement(HeaderTag, {
+    className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$8)
+  }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline));
+};
+Headline.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes.string,
+  premiumStoryIconConfig: PropTypes.shape({
+    iconColor: PropTypes.string,
+    iconType: PropTypes.string,
+    enablePremiumStoryIcon: PropTypes.bool
+  }),
+  isLink: PropTypes.bool
+};
+Headline.defaultProps = {
+  headerLevel: "6",
+  isLink: true
+};
+
+var _styleModuleImportMap$7 = {
+  "./timestamp.m.css": {
+    "time": "timestamp-m_time__2v46i",
+    "time-wrapper": "timestamp-m_time-wrapper__3O2lM",
+    "bottom-fix": "timestamp-m_bottom-fix__1Zh8r",
+    "dark": "timestamp-m_dark__2lk9E",
+    "light": "timestamp-m_light__2QlrI"
+  }
+};
+var TimeStamp = function TimeStamp(_ref) {
+  var story = _ref.story,
+      isBottom = _ref.isBottom,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var configState = useStateValue() || {};
+  var isTime = get_1(config, ["showTime"], get_1(configState, ["showTime"], true));
+  var time = story["last-published-at"] || story["first-published-at"];
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var textColor = getTextColor(configState.theme);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isTime && /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "publish-time",
+    className: "time arr--publish-time " + _getClassName("time  ".concat(textColor, " ").concat(isBottomClasses), _styleModuleImportMap$7)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "timestamp-m_time-wrapper__3O2lM"
+  }, getTimeStamp(time, formatter, config))));
+};
+TimeStamp.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object,
+  isBottom: PropTypes.bool,
+  config: PropTypes.object
+};
+
+var _styleModuleImportMap$6 = {
+  "./author.m.css": {
+    "author": "author-m_author__WRuLm",
+    "author-image": "author-m_author-image__3q2oc",
+    "author-name": "author-m_author-name__3WP-O",
+    "bottom-fix": "author-m_bottom-fix__223TT",
+    "prefix": "author-m_prefix__YSInK",
+    "rtl-image": "author-m_rtl-image__2nglD",
+    "ltr-image": "author-m_ltr-image__3bc0L",
+    "dark": "author-m_dark__2TTlp",
+    "light": "author-m_light__3y8_x"
+  }
+};
+
+var AuthorBase = function AuthorBase(_ref) {
+  var story = _ref.story,
+      hideAuthorImage = _ref.hideAuthorImage,
+      isBottom = _ref.isBottom,
+      _ref$prefix = _ref.prefix,
+      prefix = _ref$prefix === void 0 ? "" : _ref$prefix,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var configData = useStateValue() || {};
+  var isAuthor = get_1(configData, ["showAuthor"], true);
+
+  var _get = get_1(story, ["authors", "0"], ""),
+      avatarUrl = _get["avatar-url"],
+      avatarS3Key = _get["avatar-s3-key"],
+      authorName = _get.name,
+      slug = _get.slug;
+
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var textColor = getTextColor(configData.theme);
+  var mountAt = get_1(config, ["mountAt"], "");
+
+  var authorImage = function authorImage(dir) {
+    if (!avatarUrl && !avatarS3Key) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "author-image",
+      className: _getClassName("author-image ".concat(dir, "-image"), _styleModuleImportMap$6)
+    }, /*#__PURE__*/React.createElement("figure", null, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
+      slug: avatarS3Key,
+      "aspect-ratio": [1, 1],
+      defaultWidth: 400,
+      imgParams: {
+        auto: ["format", "compress"]
+      },
+      alt: authorName
+    }) : /*#__PURE__*/React.createElement("img", {
+      src: avatarUrl
+    })));
+  };
+
+  var isPrefix = function isPrefix(dir) {
+    if (prefix) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "arr-author-prefix " + _getClassName("prefix ".concat(textColor), _styleModuleImportMap$6)
+      }, prefix);
+    }
+
+    return !hideAuthorImage && authorImage(dir);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement(Link, {
+    href: "".concat(mountAt, "/author/") + slug,
+    "aria-label": "author-name",
+    className: "author-name arr-author-name arrow-component " + _getClassName("author ".concat(isBottomClasses), _styleModuleImportMap$6)
+  }, isPrefix("ltr"), /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-name",
+    className: "author-name " + _getClassName("author-name ".concat(textColor), _styleModuleImportMap$6)
+  }, authorName || story["author-name"]), !prefix && isPrefix("rtl")));
+};
+
+function mapStateToProps$1(state) {
+  return {
+    config: get_1(state, ["qt", "config"], {})
+  };
+}
+
+var Author = connect(mapStateToProps$1)(AuthorBase);
+AuthorBase.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Hide Author Avatar Image */
+  hideAuthorImage: PropTypes.bool,
+  // fix Author bottom of the storyCard
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object
+};
+AuthorBase.defaultProps = {
+  hideAuthorImage: false,
+  isBottom: false,
+  prefix: ""
+};
+
+var _styleModuleImportMap$5 = {
+  "./dot.m.css": {
+    "dark": "dot-m_dark__1Njxl",
+    "light": "dot-m_light__27IA3"
+  }
+};
+var Dot = function Dot(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "3px" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "3px" : _ref$height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "light" : _ref$color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _getClassName(color, _styleModuleImportMap$5)
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    viewBox: "0 0 3 3"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "87",
+    cy: "9",
+    r: "1",
+    fill: "inherit",
+    fillRule: "nonzero",
+    transform: "translate(-86 -8)"
+  })));
+};
+Dot.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};
+
+var _styleModuleImportMap$4 = {
+  "./divider.m.css": {
+    "dark": "divider-m_dark__26FRi",
+    "light": "divider-m_light__w-7sy"
+  }
+};
+var Divider = function Divider(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "1" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "10" : _ref$height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? "light" : _ref$color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _getClassName(color, _styleModuleImportMap$4)
+  }, /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "inherit",
+    d: "M0 0h1v10H0z"
+  })));
+};
+Divider.propTypes = {
+  /** height , width and color of the dot icon */
+  color: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string
+};
+
+var _styleModuleImportMap$3 = {
+  "./read-time.m.css": {
+    "read-time-wrapper": "read-time-m_read-time-wrapper__3GyC_",
+    "dot-indicator": "read-time-m_dot-indicator__3Sqh2",
+    "dark": "read-time-m_dark__3yRaK",
+    "light": "read-time-m_light__1GAZu"
+  }
+};
+var ReadTime = function ReadTime(_ref) {
+  var story = _ref.story,
+      _ref$opts = _ref.opts,
+      opts = _ref$opts === void 0 ? {} : _ref$opts,
+      _ref$isLightTheme = _ref.isLightTheme,
+      isLightTheme = _ref$isLightTheme === void 0 ? false : _ref$isLightTheme;
+  var config = useStateValue() || {};
+  var showReadTime = get_1(config, ["showReadTime"]) || get_1(opts, ["showReadTime"], true);
+  var readTime = get_1(story, ["read-time"], 0);
+  var textColor = isLightTheme ? "light" : getTextColor(config.theme);
+  if (!showReadTime || !readTime) return null;
+  var timeToRead = get_1(opts, ["localizedTimeToRead"]) || "min read";
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "read-time",
+    className: "arrow-component arr--read-time " + _getClassName("read-time-wrapper ".concat(textColor), _styleModuleImportMap$3)
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "read-time-indicator read-time-m_dot-indicator__3Sqh2"
+  }, /*#__PURE__*/React.createElement(Dot, {
+    color: textColor
+  })), /*#__PURE__*/React.createElement("span", null, readTime, " ", timeToRead)));
+};
+ReadTime.propTypes = {
+  story: PropTypes.shape({
+    "read-time": PropTypes.number
+  }),
+  opts: PropTypes.shape({
+    showReadTime: PropTypes.bool
+  }),
+  isLightTheme: PropTypes.bool
+};
+
+var _styleModuleImportMap$2 = {
+  "./author-with-timestamp.m.css": {
+    "author-time-wrapper": "author-with-timestamp-m_author-time-wrapper__G7_eI",
+    "author-image": "author-with-timestamp-m_author-image__24xrD",
+    "dot": "author-with-timestamp-m_dot__1LHXD",
+    "bottom-fix": "author-with-timestamp-m_bottom-fix__1rWGv",
+    "dash": "author-with-timestamp-m_dash__2L5XC"
+  }
+};
+var AuthorWithTime = function AuthorWithTime(_ref) {
+  var story = _ref.story,
+      separator = _ref.separator,
+      isBottom = _ref.isBottom,
+      hideAuthorImage = _ref.hideAuthorImage,
+      prefix = _ref.prefix,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      isLightTheme = _ref.isLightTheme;
+  var configState = useStateValue() || {};
+  var isAuthor = get_1(config, ["showAuthor"], get_1(configState, ["showAuthor"], true));
+  var isTime = get_1(config, ["showTime"], get_1(configState, ["showTime"], true));
+  var isReadTime = get_1(configState, ["showReadTime"], true);
+  var isBottomClasses = isBottom ? "bottom-fix" : "";
+  var seperatorStyle = separator === "dot" ? "dot" : "dash";
+  var textColor = isLightTheme ? "light" : getTextColor(configState.theme);
+
+  var getSeparator = function getSeparator() {
+    if (separator === "divider") {
+      return /*#__PURE__*/React.createElement(Divider, {
+        color: textColor
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(Dot, {
+      color: textColor
+    });
+  };
+
+  var getTimeStamp = function getTimeStamp() {
+    if (!isTime) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement("span", {
+      className: "arr-separator " + _getClassName("".concat(seperatorStyle), _styleModuleImportMap$2)
+    }, getSeparator()), /*#__PURE__*/React.createElement(TimeStamp, {
+      story: story,
+      config: config
+    }), isReadTime && /*#__PURE__*/React.createElement(ReadTime, {
+      story: story,
+      opts: config,
+      isLightTheme: isLightTheme
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--author-time " + _getClassName("author-time-wrapper ".concat(isBottomClasses), _styleModuleImportMap$2)
+  }, isAuthor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Author, {
+    story: story,
+    isBottom: true,
+    hideAuthorImage: hideAuthorImage,
+    prefix: prefix
+  }), getTimeStamp()) : getTimeStamp());
+};
+AuthorWithTime.propTypes = {
+  story: PropTypes.object,
+
+  /** Style of separator between the Author & Timestamp */
+  separator: PropTypes.oneOf(["dot", "divider"]),
+
+  /** hide the author image */
+  hideAuthorImage: PropTypes.bool,
+  // fix author and time at the end
+  isBottom: PropTypes.bool,
+  // fix prefix before the author name
+  prefix: PropTypes.string,
+  config: PropTypes.object,
+  isLightTheme: PropTypes.bool
+};
+AuthorWithTime.defaultProps = {
+  separator: "dot",
+  isBottom: false,
+  hideAuthorImage: true,
+  prefix: "",
+  isLightTheme: false
+};
+
+var _styleModuleImportMap$1 = {
+  "./collection-name.m.css": {
+    "collection": "collection-name-m_collection__JD6sx",
+    "collection-borderLeft": "collection-name-m_collection-borderLeft__3Dznk",
+    "border-left": "collection-name-m_border-left__3_pYw",
+    "collection-borderBottomFull": "collection-name-m_collection-borderBottomFull__Dkq3K",
+    "collection-borderBottom": "collection-name-m_collection-borderBottom__2rdQM",
+    "collection-crossLine": "collection-name-m_collection-crossLine__1sIpN",
+    "border-bottom": "collection-name-m_border-bottom__1MnlV",
+    "dark": "collection-name-m_dark__nMe5H",
+    "light": "collection-name-m_light__1vFDN"
+  }
+};
+var CollectionNameBase = function CollectionNameBase(_ref) {
+  var _ref$collectionNameBo = _ref.collectionNameBorderColor,
+      collectionNameBorderColor = _ref$collectionNameBo === void 0 ? "" : _ref$collectionNameBo,
+      collection = _ref.collection,
+      config = _ref.config,
+      collectionNameTemplate = _ref.collectionNameTemplate,
+      headerLevel = _ref.headerLevel,
+      _ref$customCollection = _ref.customCollectionName,
+      customCollectionName = _ref$customCollection === void 0 ? "" : _ref$customCollection,
+      _ref$navigate = _ref.navigate,
+      navigate = _ref$navigate === void 0 ? true : _ref$navigate;
+  var collectionTitle = useStateValue() || {};
+  var showRowTitle = get_1(collectionTitle, ["showRowTitle"], true);
+  var supportedTemplates = ["borderLeft", "borderBottom", "crossLine", "borderBottomFull"];
+  var templateStyle = supportedTemplates.includes(collectionNameTemplate) ? " collection-".concat(collectionNameTemplate) : "";
+  var slug = navigate && collection && getSlug(collection, config) || "";
+  var collectionName = customCollectionName || collection.name || "";
+  var textColor = getTextColor(collectionTitle.theme);
+  var HeaderTag = "h" + headerLevel;
+  var CollectionNameBorderColor = rgbToHex(collectionNameBorderColor);
+  var borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull") ? "4px solid ".concat(CollectionNameBorderColor) : "";
+
+  var borderBottomStyle = function borderBottomStyle() {
+    return templateStyle.includes("collection-borderBottom") && !templateStyle.includes("collection-borderBottomFull") ? /*#__PURE__*/React.createElement("div", {
+      className: "collection-name-m_border-bottom__1MnlV",
+      style: {
+        borderBottom: "4px solid ".concat(CollectionNameBorderColor)
+      }
+    }) : "";
+  };
+
+  var isMobile = clientWidth("mobile");
+
+  var getBorderHeight = function getBorderHeight() {
+    if (isMobile) {
+      switch (headerLevel) {
+        case "1":
+          return "32px";
+
+        case "2":
+          return "24px";
+
+        case "3":
+          return "20px";
+
+        case "4":
+          return "18px";
+
+        case "5":
+          return "16px";
+
+        case "6":
+          return "16px";
+
+        default:
+          return "20px";
+      }
+    }
+
+    switch (headerLevel) {
+      case "1":
+        return "40px";
+
+      case "2":
+        return "32px";
+
+      case "3":
+        return "24px";
+
+      case "4":
+        return "20px";
+
+      case "5":
+        return "18px";
+
+      case "6":
+        return "16px";
+
+      default:
+        return "24px";
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, showRowTitle && collectionName && /*#__PURE__*/React.createElement("div", {
+    style: {
+      borderBottom: borderBottomFullStyle
+    },
+    "data-test-id": "collection-name",
+    className: ("arr--collection-name arrow-component ".concat(templateStyle) ? "arr--collection-name arrow-component ".concat(templateStyle) + " " : "") + _getClassName("collection ".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$1)
+  }, templateStyle.includes("collection-borderLeft") && /*#__PURE__*/React.createElement("span", {
+    className: "arr-collection-name-border-left collection-name-m_border-left__3_pYw",
+    style: {
+      color: CollectionNameBorderColor,
+      fontSize: getBorderHeight()
+    }
+  }), slug && !slug.includes(undefined) ? /*#__PURE__*/React.createElement(Link, {
+    href: slug,
+    "aria-label": "collection-name"
+  }, /*#__PURE__*/React.createElement(HeaderTag, null, collectionName)) : /*#__PURE__*/React.createElement(HeaderTag, null, collectionName), borderBottomStyle()));
+};
+CollectionNameBase.propTypes = {
+  /** Collection name border color */
+  collectionNameBorderColor: PropTypes$1.string,
+
+  /** The Collection Object from the API response */
+  collection: PropTypes$1.object,
+
+  /** The publisher config from the API response */
+  config: PropTypes$1.object,
+
+  /** The style template for the component  */
+  collectionNameTemplate: PropTypes$1.oneOf(["", "borderLeft", "borderBottom", "crossLine", "borderBottomFull"]),
+
+  /** Header tags ranging h1-h6, where h[headerLevel] */
+  headerLevel: PropTypes$1.string,
+  customCollectionName: PropTypes$1.string,
+  navigate: PropTypes$1.bool
+};
+CollectionNameBase.defaultProps = {
+  collectionNameTemplate: "",
+  headerLevel: "3"
+};
+
+function mapStateToProps(state) {
+  return {
+    config: get_1(state, ["qt", "config"], {})
+  };
+}
+
+var CollectionName = connect(mapStateToProps)(CollectionNameBase);
+
+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 _styleModuleImportMap = {
+  "./load-more.m.css": {
+    "button": "load-more-m_button__1mmf1",
+    "default": "load-more-m_default__2_k4V",
+    "dark": "load-more-m_dark__3dfzb",
+    "light": "load-more-m_light__ePZQI"
+  }
+};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var LoadmoreButton = function LoadmoreButton(_ref) {
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      collection = _ref.collection,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "SubsequentLoadCount" : _ref$template,
+      onClick = _ref.onClick,
+      navigate = _ref.navigate,
+      qtConfig = _ref.qtConfig;
+  var _config$showButton = config.showButton,
+      showButton = _config$showButton === void 0 ? true : _config$showButton,
+      _config$buttonText = config.buttonText,
+      buttonText = _config$buttonText === void 0 ? "Read More" : _config$buttonText,
+      _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$customUrlPath = config.customUrlPath,
+      customUrlPath = _config$customUrlPath === void 0 ? "" : _config$customUrlPath;
+  if (!showButton) return null;
+  var textColor = getTextColor(theme);
+  var slug = customUrlPath ? "/".concat(customUrlPath) : generateNavigateSlug(collection, _objectSpread(_objectSpread({}, qtConfig), config));
+  return template === "SubsequentLoadCount" ? /*#__PURE__*/React.createElement("div", {
+    onClick: onClick,
+    "data-test-id": "load-more",
+    className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap)
+  }, buttonText) : /*#__PURE__*/React.createElement(LinkBase, {
+    href: slug,
+    navigateTo: navigate,
+    "data-test-id": "load-more",
+    "aria-label": "load-more"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap)
+  }, buttonText));
+};
+LoadmoreButton.propTypes = {
+  collection: PropTypes.object,
+  template: PropTypes.string,
+  config: PropTypes.object,
+  onClick: PropTypes.func,
+  navigate: PropTypes.func,
+  qtConfig: PropTypes.object
+};
+
+var isClient = typeof window !== "undefined";
+
+var hasIntersectionObserverSupport = function hasIntersectionObserverSupport() {
+  return typeof window.IntersectionObserver !== "undefined";
+}; // import intersection observer polyfill only if on client
+// and if not supported by browser
+
+
+var getIntersectionObserver = function getIntersectionObserver() {
+  return Promise.resolve(isClient && !hasIntersectionObserverSupport() && import('intersection-observer'));
+}; // options for intersection observer in order to improve the effect
+
+
+var intersectionObserverOptions = {
+  root: null,
+  // windows viewport will be used
+  rootMargin: "200px 0px 0px 0px"
+};
+
+var handleIntersect = function handleIntersect(entries, observer) {
+  entries.filter(function (entry) {
+    return entry.isIntersecting;
+  }).forEach(function (entry) {
+    var target = entry.target;
+
+    target._onIntersect(observer);
+  });
+}; // get observer from the cache or create a new one
+
+
+var getObserver = function getObserver() {
+  return getIntersectionObserver().then(function (_) {
+
+    if (isClient) {
+      return new window.IntersectionObserver(handleIntersect, intersectionObserverOptions);
+    }
+  });
+};
+
+var useNearScreen = (function (_ref) {
+  var ref = _ref.ref;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  useEffect(function () {
+    var current = ref.current;
+    if (!current) return; // get observer async and only when needed
+
+    getObserver().then(function (observer) {
+      return observer.observe(current);
+    }); // mutate the current target to add a method to be executed when intersecting
+
+    current._onIntersect = function (observer) {
+      setShow(true);
+      observer.unobserve(current);
+    }; // clean observed element when unmounted
+
+
+    return function () {
+      return current._isSubscribed = false;
+    };
+  }, [ref]);
+  return show;
+});
+
+var EMPTY_HTML = {
+  __html: ""
+};
+var isServer = typeof window === "undefined";
+var ProgressiveHydration = function ProgressiveHydration(props) {
+  var children = props.children;
+  var ref = useRef(null);
+  var isNearScreen = useNearScreen({
+    ref: ref
+  });
+  useEffect(function () {
+    var el = ref.current; // CLIENT:
+    // If we want to force the hydration OR the element is near screen
+    // then we hydrate the content to get the functionality ready
+
+    if (isNearScreen) {
+      var action = el.hasChildNodes() ? "hydrate" : "render";
+      ReactDOM[action](children, el);
+    }
+  }, [children, isNearScreen]); // SERVER: Just render the content as usual
+
+  if (isServer) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, children);
+  } // CLIENT: Avoid hydration until we say so
+
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    suppressHydrationWarning: true,
+    dangerouslySetInnerHTML: EMPTY_HTML
+  });
+};
+ProgressiveHydration.propTypes = {
+  children: PropTypes.element
+};
+
+var LoadMoreTarget = function LoadMoreTarget(_ref) {
+  var collection = _ref.collection,
+      componentName = _ref.componentName,
+      offset = _ref.offset,
+      limit = _ref.limit;
+  return /*#__PURE__*/React.createElement("div", {
+    id: "ELM-".concat(collection.id),
+    "data-collection-slug": collection["slug"],
+    "data-component-name": componentName,
+    "data-collection-offset": offset,
+    "data-collection-limit": limit
+  });
+};
+LoadMoreTarget.propTypes = {
+  collection: PropTypes.shape({
+    id: PropTypes.string,
+    slug: PropTypes.string
+  }),
+  componentName: PropTypes.string,
+  offset: PropTypes.number,
+  limit: PropTypes.number
+};
+
+export { AuthorWithTime as A, CollectionName as C, Headline as H, LoadMoreTarget as L, ProgressiveHydration as P, StateProvider as S, _defineProperty as _, LoadmoreButton as a, Author as b, useStateValue as u };