@quintype/arrow 3.15.1-perf.1 → 3.15.1-perf.4

package/atoms/ExtendedLoadMore/index-142f015c.js

@@ -0,0 +1,476 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _getClassName = require('babel-plugin-react-css-modules/dist/browser/getClassName');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var lodash = require('lodash');
+var PropTypes = require('prop-types');
+var React = require('react');
+var _typeof = require('@babel/runtime/helpers/typeof');
+var Timeago = require('react-timeago');
+var dateFnsTz = require('date-fns-tz');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _getClassName__default = /*#__PURE__*/_interopDefaultLegacy(_getClassName);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
+var Timeago__default = /*#__PURE__*/_interopDefaultLegacy(Timeago);
+
+function truncate() {
+  var string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 60;
+  var ellipsis = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var putEllipsis = ellipsis ? " ..." : "";
+  return typeof string === "string" && string.length > limit ? string.substring(0, limit) + putEllipsis : string;
+}
+var timestampToFormat = function timestampToFormat(value, unit, suffix, timestamp) {
+  var config = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var _config$showTime = config.showTime,
+      showTime = _config$showTime === void 0 ? false : _config$showTime,
+      _config$isTimeFirst = config.isTimeFirst,
+      isTimeFirst = _config$isTimeFirst === void 0 ? false : _config$isTimeFirst,
+      _config$isUpperCase = config.isUpperCase,
+      isUpperCase = _config$isUpperCase === void 0 ? false : _config$isUpperCase,
+      _config$disableMeridi = config.disableMeridiem,
+      disableMeridiem = _config$disableMeridi === void 0 ? false : _config$disableMeridi,
+      _config$timeFormat = config.timeFormat,
+      timeFormat = _config$timeFormat === void 0 ? "12hours" : _config$timeFormat;
+  var monthList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  var dateTime = new Date(timestamp);
+  var date = dateTime.getDate().toString().padStart(2, 0);
+  var month = monthList[dateTime.getMonth()];
+  var localizedMonth = month;
+
+  if (isUpperCase) {
+    localizedMonth = lodash.upperCase(month);
+  }
+
+  var year = dateTime.getFullYear();
+  var localizedMeridiem = config.localizedMeridiem,
+      localizedMonths = config.localizedMonths,
+      _config$direction = config.direction,
+      direction = _config$direction === void 0 ? "ltr" : _config$direction;
+  var time = formatAMPM(timestamp, timeFormat);
+  var timeWithLocalizedMeridiem = time;
+  var timetoShow;
+
+  if (localizedMonths) {
+    localizedMonth = lodash.get(localizedMonths, [lodash.lowerCase(month)]) || month;
+  }
+
+  if (localizedMeridiem) {
+    var isAm = time.includes("am");
+    var _localizedMeridiem$am = localizedMeridiem.am,
+        am = _localizedMeridiem$am === void 0 ? "am" : _localizedMeridiem$am,
+        _localizedMeridiem$pm = localizedMeridiem.pm,
+        pm = _localizedMeridiem$pm === void 0 ? "pm" : _localizedMeridiem$pm;
+    timeWithLocalizedMeridiem = (isAm ? time.replace("am", am) : time.replace("pm", pm)) || time;
+  }
+
+  if (direction === "rtl") {
+    timetoShow = showTime ? "".concat(timeWithLocalizedMeridiem) : "";
+    return "".concat(date, " ").concat(localizedMonth, ", ").concat(year, " ").concat(timetoShow, " ");
+  } else {
+    if (disableMeridiem) {
+      return "".concat(localizedMonth, " ").concat(date, ", ").concat(year);
+    } else if (isTimeFirst) {
+      return "".concat(timeWithLocalizedMeridiem, ", ").concat(date, " ").concat(localizedMonth, " ").concat(year);
+    } else {
+      timetoShow = showTime ? ", ".concat(timeWithLocalizedMeridiem) : "";
+      return "".concat(date, " ").concat(localizedMonth, ", ").concat(year).concat(timetoShow);
+    }
+  }
+};
+function formatter(value, unit, suffix, date, config) {
+  var showDateForUnits = ["day", "week", "month", "year"]; // suffix here refers to ago
+  // unit here refers to seconds, minute, minutes,...
+
+  var localizedSuffix = lodash.get(config, ["localizedPublishTime", suffix]) || suffix;
+  var localizedUnitOfTime;
+
+  if (unit === "hour" && value > 23 || showDateForUnits.indexOf(unit) !== -1) {
+    return timestampToFormat(value, unit, suffix, date, config);
+  } else if (value > 1) {
+    localizedUnitOfTime = lodash.get(config, ["localizedPublishTime", "".concat(unit, "s")]) || "".concat(unit, "s");
+    return "".concat(value, " ").concat(localizedUnitOfTime, " ").concat(localizedSuffix);
+  }
+
+  localizedUnitOfTime = lodash.get(config, ["localizedPublishTime", unit]) || unit;
+  return "".concat(value, " ").concat(localizedUnitOfTime, " ").concat(localizedSuffix, " ");
+}
+
+function formatAMPM(timestamp) {
+  var timeFormat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "12hours";
+  var dateTime = new Date(timestamp);
+  var hours = dateTime.getHours();
+  var minutes = dateTime.getMinutes();
+  var ampm = hours >= 12 ? "pm" : "am";
+  hours = hours % 12;
+  hours = hours || 12;
+  minutes = minutes < 10 ? "0" + minutes : minutes;
+  var strTime = hours + ":" + minutes + " " + ampm;
+
+  if (timeFormat === "24hours") {
+    return dateTime.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  }
+
+  return strTime;
+}
+
+var hexToRGB = function hexToRGB(hex) {
+  var r = parseInt(hex.slice(1, 3), 16);
+  var g = parseInt(hex.slice(3, 5), 16);
+  var b = parseInt(hex.slice(5, 7), 16);
+  return {
+    r: r,
+    g: g,
+    b: b
+  };
+};
+var getLuminanceOfColor = function getLuminanceOfColor(hex) {
+  var _hexToRGB = hexToRGB(hex),
+      r = _hexToRGB.r,
+      g = _hexToRGB.g,
+      b = _hexToRGB.b;
+
+  return r * 0.299 + g * 0.587 + b * 0.114;
+};
+var rgbToHex = function rgbToHex() {
+  var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgba(255, 255, 255, 0)";
+  var rgba = color.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+  return rgba && rgba.length === 4 ? "#" + ("0" + parseInt(rgba[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgba[3], 10).toString(16)).slice(-2) : color;
+};
+var clientWidths = {
+  mobile: 767,
+  tablet: 1024
+};
+var clientWidth = function clientWidth(device) {
+  var foundDeviceWidth = lodash.get(clientWidths, device);
+
+  if (foundDeviceWidth) {
+    return lodash.get(global, "document.documentElement.clientWidth") <= foundDeviceWidth;
+  }
+
+  return false;
+};
+var getTextColor = function getTextColor() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(255,255,255)";
+  var isRegexCheck = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(theme);
+  var getHexValue = !isRegexCheck ? rgbToHex(theme) : theme;
+  var textColor = getLuminanceOfColor(getHexValue) < 155 ? "light" : "dark";
+  return textColor;
+};
+var getSlot = function getSlot(type, component, storyCallback, collectionCallback) {
+  switch (type) {
+    case "story":
+      return storyCallback();
+
+    case "collection":
+      return collectionCallback();
+
+    default:
+      return component ? component() : null;
+  }
+};
+var getSlug = function getSlug(collection) {
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _config$magazineSlug = config.magazineSlug,
+      magazineSlug = _config$magazineSlug === void 0 ? "" : _config$magazineSlug,
+      _config$isArchivePage = config.isArchivePage,
+      isArchivePage = _config$isArchivePage === void 0 ? false : _config$isArchivePage;
+
+  if (isArchivePage) {
+    return "/magazine/archive/".concat(magazineSlug);
+  }
+
+  if (magazineSlug) {
+    return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
+  }
+
+  var isSection = collection.template === "section";
+
+  if (isSection) {
+    var sectionId = lodash.get(collection, ["metadata", "section", "0", "id"], "");
+    var sections = config.sections;
+    var section = sections && sections.find(function (section) {
+      return section.id === sectionId;
+    });
+    return section ? section["section-url"] : "/";
+  }
+
+  return "/collection/".concat(collection.slug);
+};
+function isExternalStory() {
+  var story = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _story$storyTemplate = story["story-template"],
+      storyTemplate = _story$storyTemplate === void 0 ? "" : _story$storyTemplate,
+      _story$metadata = story.metadata,
+      metadata = _story$metadata === void 0 ? {} : _story$metadata;
+  return storyTemplate === "news-elsewhere" ? lodash.get(metadata, ["reference-url"], "") : "";
+} // Adds target='_blank' attribute to anchor tags if not present
+var isEmpty = function isEmpty(value) {
+  return value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
+  _typeof__default["default"](value) === "object" && Object.entries(value).length === 0 && value.constructor === Object || typeof value === "string" && value.trim().length === 0;
+};
+PropTypes__default["default"].shape({
+  "sketches-host": PropTypes__default["default"].string,
+  "cdn-name": PropTypes__default["default"].string,
+  "cdn-image": PropTypes__default["default"].string
+});
+PropTypes__default["default"].shape({
+  headline: PropTypes__default["default"].string,
+  "last-published-at": PropTypes__default["default"].number,
+  subheadline: PropTypes__default["default"].string
+});
+var getStoryUrl = function getStoryUrl(story) {
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  return lodash.get(story, ["story-template"]) === "news-elsewhere" ? lodash.get(story, ["metadata", "reference-url"], "") : story.url || defaultValue;
+};
+var navigateTo = function navigateTo(dispatch) {
+  var url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  global.app.navigateToPage(dispatch, url);
+};
+var generateNavigateSlug = function generateNavigateSlug() {
+  var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var customUrlPath = arguments.length > 2 ? arguments[2] : undefined;
+
+  if (customUrlPath) {
+    return customUrlPath;
+  }
+
+  var _config$magazineSlug2 = config.magazineSlug,
+      magazineSlug = _config$magazineSlug2 === void 0 ? "" : _config$magazineSlug2,
+      _config$isArchivePage2 = config.isArchivePage,
+      isArchivePage = _config$isArchivePage2 === void 0 ? false : _config$isArchivePage2;
+
+  if (isArchivePage) {
+    return "/magazine/archive/".concat(magazineSlug);
+  }
+
+  if (magazineSlug) {
+    return "/magazine/".concat(magazineSlug, "/").concat(collection.slug);
+  }
+
+  if (collection) {
+    return getSlug(collection, config);
+  }
+
+  return "/";
+};
+var getTimeStamp = function getTimeStamp(date, _formatter) {
+  var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var template = arguments.length > 3 ? arguments[3] : undefined;
+  var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
+
+  if (timezone && template === "story") {
+    var zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
+    var formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
+      timeZone: timezone
+    });
+    var timeStamp = timestampToFormat("", "", "", date, config);
+    return /*#__PURE__*/React__default["default"].createElement("time", {
+      dateTime: formatZonedTime
+    }, timeStamp);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(Timeago__default["default"], {
+    date: date,
+    formatter: function formatter(value, unit, suffix, date) {
+      return _formatter(value, unit, suffix, date, config);
+    }
+  });
+};
+
+var _styleModuleImportMap = {
+  "./../Loadmore/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"
+  }
+};
+
+var getTemplate = function getTemplate(templateName) {
+  switch (templateName) {
+    case "ArrowFourColGrid":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-37a9ccff.js'); });
+      });
+
+    case "ArrowThreeColGrid":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-446679c8.js'); });
+      });
+
+    case "ArrowOneColStoryList":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-bbaf526e.js'); });
+      });
+
+    case "ArrowFourColFiveStories":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-b5754c5d.js'); });
+      });
+
+    case "ArrowOpinionCollection":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-44f97338.js'); });
+      });
+
+    case "ArrowSixColSixStories":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-cfb262ef.js'); });
+      });
+
+    case "ArrowThreeColFlexStories":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-57dd4870.js'); });
+      });
+
+    case "ArrowFourColPortraitStories":
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-66dd4dbd.js'); });
+      });
+
+    default:
+      return /*#__PURE__*/React.lazy(function () {
+        return Promise.resolve().then(function () { return require('./index-446679c8.js'); });
+      });
+  }
+};
+
+var ExtendedLoadMore = function ExtendedLoadMore(_ref) {
+  var config = _ref.config,
+      componentName = _ref.componentName,
+      WithArrowConfig = _ref.WithArrowConfig,
+      withSubsequentLoad = _ref.withSubsequentLoad;
+  var showButton = lodash.get(config, ["showButton"], true);
+  var btnText = lodash.get(config, ["buttonText"], "Read More");
+  var theme = lodash.get(config, ["theme"], "");
+  var textColor = getTextColor(theme);
+  /* Open an array to maintain load-more initiated components to re-render */
+
+  var _useState = React.useState([]),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      components = _useState2[0],
+      setComponents = _useState2[1];
+
+  var addComponent = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(event) {
+      var collectionSlug, offset, limit, Component, _yield$yield$fetch$js, items, updatedOffset, updatedCompList;
+
+      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              event.persist();
+              collectionSlug = event.target.parentElement.getAttribute("data-collection-slug");
+              offset = event.target.parentElement.getAttribute("data-collection-offset");
+              limit = event.target.parentElement.getAttribute("data-collection-limit");
+              Component = getTemplate(componentName);
+              _context.next = 7;
+              return fetch("/api/v1/collections/".concat(collectionSlug, "?item-type=story&offset=").concat(offset, "&limit=").concat(limit));
+
+            case 7:
+              _context.next = 9;
+              return _context.sent.json();
+
+            case 9:
+              _yield$yield$fetch$js = _context.sent;
+              items = _yield$yield$fetch$js.items;
+
+              if (items.length) {
+                updatedOffset = parseInt(offset) + parseInt(limit);
+                event.target.parentElement.setAttribute("data-collection-offset", updatedOffset);
+              }
+
+              updatedCompList = [].concat(_toConsumableArray__default["default"](components), [{
+                // Passing a number below the initial collection length (which we will not know here)
+                // as the second parameter causes the Load More button to be rendered regardless of
+                // the value given to `isLoadMoreVisible`. Since this paramter will be ignored anyway,
+                // we pass in a number that is sufficiently always larger.
+                Component: WithArrowConfig(withSubsequentLoad(Component, limit || 10, true)),
+                props: {
+                  collection: {
+                    items: items
+                  },
+                  isLoadMoreVisible: false,
+                  config: config
+                },
+                componentName: componentName
+              }]);
+              setComponents(updatedCompList);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function addComponent(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (!showButton) return null;
+  /* TODO: !HACK! Remove this line post deployment */
+
+  var componentStyles = function componentStyles(componentName) {
+    return componentName === "ArrowOneColStoryList" ? {
+      marginLeft: 0
+    } : {};
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, components.map(function (_ref3, index) {
+    var Component = _ref3.Component,
+        props = _ref3.props;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        maxWidth: 1172,
+        margin: "auto"
+      },
+      key: "extendedLoadMoreBase-key-".concat(index)
+    }, /*#__PURE__*/React__default["default"].createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React__default["default"].createElement("div", null, "Loading...")
+    }, /*#__PURE__*/React__default["default"].createElement(Component, props)));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: componentStyles(componentName),
+    onClick: addComponent,
+    className: "arr--button " + _getClassName__default["default"]("button ".concat(textColor, " default"), _styleModuleImportMap)
+  }, btnText));
+};
+ExtendedLoadMore.propTypes = {
+  componentName: PropTypes__default["default"].string,
+  config: PropTypes__default["default"].object,
+  WithArrowConfig: PropTypes__default["default"].func,
+  withSubsequentLoad: PropTypes__default["default"].func
+};
+
+exports.ExtendedLoadMore = ExtendedLoadMore;
+exports.clientWidth = clientWidth;
+exports.formatter = formatter;
+exports.generateNavigateSlug = generateNavigateSlug;
+exports.getSlot = getSlot;
+exports.getSlug = getSlug;
+exports.getStoryUrl = getStoryUrl;
+exports.getTextColor = getTextColor;
+exports.getTimeStamp = getTimeStamp;
+exports.isEmpty = isEmpty;
+exports.isExternalStory = isExternalStory;
+exports.navigateTo = navigateTo;
+exports.rgbToHex = rgbToHex;
+exports.truncate = truncate;

package/atoms/ExtendedLoadMore/{index-2d713010.js → index-37a9ccff.js}

@@ -1,15 +1,30 @@
-import React, { Fragment } from 'react';
-import { S as StoryCard } from './index-6f8c780e.js';
-import { S as StorycardContent } from './index-f6e578e3.js';
-import { H as HeroImage } from './index-6cb56d1a.js';
-import { g as getTextColor, a as get_1, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
-import { C as CollectionName, S as StateProvider, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
-import { collectionToStories } from '@quintype/components';
-import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
-import 'react-timeago';
-import 'date-fns-tz';
-import 'react-dom';
+'use strict';
+
+var React = require('react');
+var index$2 = require('./index-0f809dd9.js');
+var index$4 = require('./index-afd44863.js');
+var index$3 = require('./index-8462c597.js');
+var lodash = require('lodash');
+var index$1 = require('./index-93cb06d1.js');
+var index = require('./index-142f015c.js');
+var components = require('@quintype/components');
+var PropTypes = require('prop-types');
+var reactRedux = require('react-redux');
+require('babel-plugin-react-css-modules/dist/browser/getClassName');
+require('@babel/runtime/helpers/slicedToArray');
+require('@babel/runtime/helpers/defineProperty');
+require('react-dom');
+require('@babel/runtime/helpers/toConsumableArray');
+require('@babel/runtime/helpers/asyncToGenerator');
+require('@babel/runtime/regenerator');
+require('@babel/runtime/helpers/typeof');
+require('react-timeago');
+require('date-fns-tz');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 var loadMore = function loadMore(_ref) {
   var isLoading = _ref.isLoading,
@@ -51,21 +66,21 @@ var FourColGridBase = function FourColGridBase(_ref2) {
       navigate = _config$navigate === void 0 ? true : _config$navigate,
       _config$subsequentLoa = config.subsequentLoadCount,
       subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _config$subsequentLoa;
-  var storyItems = collectionToStories(collection);
+  var storyItems = components.collectionToStories(collection);
   if (!storyItems.length) return null;
   var footerSlot = footerSlotConfig.footerSlot;
   var footerSlotComp = footerSlot ? footerSlot() : null;
-  var textColor = getTextColor(theme);
-  var dispatch = useDispatch();
-  var qtConfig = useSelector(function (state) {
-    return get_1(state, ["qt", "config"], {});
+  var textColor = index.getTextColor(theme);
+  var dispatch = reactRedux.useDispatch();
+  var qtConfig = reactRedux.useSelector(function (state) {
+    return lodash.get(state, ["qt", "config"], {});
   });
 
   var getLoadMore = function getLoadMore(opts) {
     if (!isLoadMoreVisible) return null;
 
     if (isolatedLoadMore) {
-      return /*#__PURE__*/React.createElement(LoadMoreTarget, {
+      return /*#__PURE__*/React__default["default"].createElement(index$1.LoadMoreTarget, {
         collection: collection,
         componentName: "FourColGrid",
         offset: storyItems.length,
@@ -73,8 +88,8 @@ var FourColGridBase = function FourColGridBase(_ref2) {
       });
     }
 
-    var url = generateNavigateSlug(collection, qtConfig);
-    return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
+    var url = index.generateNavigateSlug(collection, qtConfig);
+    return /*#__PURE__*/React__default["default"].createElement(index$1.ProgressiveHydration, null, /*#__PURE__*/React__default["default"].createElement(index$1.LoadmoreButton, {
       config: config,
       collection: collection,
       template: footerButton,
@@ -82,46 +97,46 @@ var FourColGridBase = function FourColGridBase(_ref2) {
         return loadMore(opts);
       },
       navigate: function navigate() {
-        return navigateTo(dispatch, url);
+        return index.navigateTo(dispatch, url);
       },
       qtConfig: qtConfig
     }));
   };
 
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "full-width-with-padding arrow-component",
     "data-test-id": "four-col-grid",
     style: {
       backgroundColor: theme,
       color: textColor
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "four-col-m_four-col-grid__1EiO7"
-  }, /*#__PURE__*/React.createElement(CollectionName, {
+  }, /*#__PURE__*/React__default["default"].createElement(index$1.CollectionName, {
     collection: collection,
     collectionNameTemplate: collectionNameTemplate,
     collectionNameBorderColor: collectionNameBorderColor,
     customCollectionName: customCollectionName,
     navigate: navigate
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "four-col-m_wrapper__1vOV7"
   }, storyItems.map(function (story, index) {
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: "story-4col-".concat(index, "-").concat(get_1(story, ["id"], "0"))
-    }, /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default["default"].createElement(React.Fragment, {
+      key: "story-4col-".concat(index, "-").concat(lodash.get(story, ["id"], "0"))
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "four-col-m_story-card-wrapper__1e8p0",
       key: "default-".concat(index)
-    }, /*#__PURE__*/React.createElement(StoryCard, {
+    }, /*#__PURE__*/React__default["default"].createElement(index$2.StoryCard, {
       story: story,
       border: border,
       theme: theme,
       isHorizontalMobile: true,
       config: config
-    }, /*#__PURE__*/React.createElement(HeroImage, {
+    }, /*#__PURE__*/React__default["default"].createElement(index$3.HeroImage, {
       aspectRatio: [[16, 9]],
       story: story,
       isHorizontalMobile: true
-    }), /*#__PURE__*/React.createElement(StorycardContent, {
+    }), /*#__PURE__*/React__default["default"].createElement(index$4.StorycardContent, {
       theme: theme,
       border: border,
       borderColor: borderColor,
@@ -138,29 +153,30 @@ var FourColGridBase = function FourColGridBase(_ref2) {
 };
 FourColGridBase.propTypes = {
   /**  collection is the array of objects which is returning by API  */
-  collection: PropTypes.object.isRequired,
+  collection: PropTypes__default["default"].object.isRequired,
 
   /** The config for the Row */
-  config: PropTypes.shape({
-    borderColor: PropTypes.string,
-    theme: PropTypes.string,
-    border: PropTypes.bool,
-    slotConfig: PropTypes.array,
-    collectionNameTemplate: PropTypes.string,
-    footerButton: PropTypes.string,
-    collectionNameBorderColor: PropTypes.string,
-    subsequentLoadCount: PropTypes.number
+  config: PropTypes__default["default"].shape({
+    borderColor: PropTypes__default["default"].string,
+    theme: PropTypes__default["default"].string,
+    border: PropTypes__default["default"].bool,
+    slotConfig: PropTypes__default["default"].array,
+    collectionNameTemplate: PropTypes__default["default"].string,
+    footerButton: PropTypes__default["default"].string,
+    collectionNameBorderColor: PropTypes__default["default"].string,
+    subsequentLoadCount: PropTypes__default["default"].number
   }),
-  getMoreStories: PropTypes.func,
-  isLoadMoreVisible: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isolatedLoadMore: PropTypes.bool
+  getMoreStories: PropTypes__default["default"].func,
+  isLoadMoreVisible: PropTypes__default["default"].bool,
+  isLoading: PropTypes__default["default"].bool,
+  isolatedLoadMore: PropTypes__default["default"].bool
 };
 FourColGridBase.defaultProps = {
   getMoreStories: function getMoreStories() {},
   isLoadMoreVisible: true,
   isLoading: false
 };
-var FourColGrid = StateProvider(FourColGridBase);
+var FourColGrid = index$1.StateProvider(FourColGridBase);
 
-export { FourColGrid, FourColGridBase };
+exports.FourColGrid = FourColGrid;
+exports.FourColGridBase = FourColGridBase;