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

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

@@ -1,476 +0,0 @@
-'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-37a9ccff.js

@@ -1,182 +0,0 @@
-'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,
-      storyItems = _ref.storyItems,
-      getMoreStories = _ref.getMoreStories,
-      _ref$subsequentLoadCo = _ref.subsequentLoadCount,
-      subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 4 : _ref$subsequentLoadCo;
-  if (isLoading) return; // prevent multiple clicks/calls
-
-  var limit = subsequentLoadCount;
-  var offset = storyItems.length;
-  getMoreStories(offset, limit);
-};
-
-var FourColGridBase = function FourColGridBase(_ref2) {
-  var collection = _ref2.collection,
-      _ref2$config = _ref2.config,
-      config = _ref2$config === void 0 ? {} : _ref2$config,
-      getMoreStories = _ref2.getMoreStories,
-      isLoadMoreVisible = _ref2.isLoadMoreVisible,
-      isLoading = _ref2.isLoading,
-      isolatedLoadMore = _ref2.isolatedLoadMore;
-  var _config$collectionNam = config.collectionNameBorderColor,
-      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
-      _config$borderColor = config.borderColor,
-      borderColor = _config$borderColor === void 0 ? "" : _config$borderColor,
-      _config$theme = config.theme,
-      theme = _config$theme === void 0 ? "" : _config$theme,
-      _config$border = config.border,
-      border = _config$border === void 0 ? "" : _config$border,
-      _config$collectionNam2 = config.collectionNameTemplate,
-      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
-      _config$footerSlotCon = config.footerSlotConfig,
-      footerSlotConfig = _config$footerSlotCon === void 0 ? {} : _config$footerSlotCon,
-      _config$footerButton = config.footerButton,
-      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
-      customCollectionName = config.customCollectionName,
-      _config$navigate = config.navigate,
-      navigate = _config$navigate === void 0 ? true : _config$navigate,
-      _config$subsequentLoa = config.subsequentLoadCount,
-      subsequentLoadCount = _config$subsequentLoa === void 0 ? 4 : _config$subsequentLoa;
-  var storyItems = components.collectionToStories(collection);
-  if (!storyItems.length) return null;
-  var footerSlot = footerSlotConfig.footerSlot;
-  var footerSlotComp = footerSlot ? footerSlot() : null;
-  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__default["default"].createElement(index$1.LoadMoreTarget, {
-        collection: collection,
-        componentName: "FourColGrid",
-        offset: storyItems.length,
-        limit: subsequentLoadCount
-      });
-    }
-
-    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,
-      onClick: function onClick() {
-        return loadMore(opts);
-      },
-      navigate: function navigate() {
-        return index.navigateTo(dispatch, url);
-      },
-      qtConfig: qtConfig
-    }));
-  };
-
-  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__default["default"].createElement("div", {
-    className: "four-col-m_four-col-grid__1EiO7"
-  }, /*#__PURE__*/React__default["default"].createElement(index$1.CollectionName, {
-    collection: collection,
-    collectionNameTemplate: collectionNameTemplate,
-    collectionNameBorderColor: collectionNameBorderColor,
-    customCollectionName: customCollectionName,
-    navigate: navigate
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "four-col-m_wrapper__1vOV7"
-  }, storyItems.map(function (story, index) {
-    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__default["default"].createElement(index$2.StoryCard, {
-      story: story,
-      border: border,
-      theme: theme,
-      isHorizontalMobile: true,
-      config: config
-    }, /*#__PURE__*/React__default["default"].createElement(index$3.HeroImage, {
-      aspectRatio: [[16, 9]],
-      story: story,
-      isHorizontalMobile: true
-    }), /*#__PURE__*/React__default["default"].createElement(index$4.StorycardContent, {
-      theme: theme,
-      border: border,
-      borderColor: borderColor,
-      story: story,
-      isHorizontalMobile: true,
-      config: config
-    }))));
-  })), getLoadMore({
-    isLoading: isLoading,
-    storyItems: storyItems,
-    getMoreStories: getMoreStories,
-    subsequentLoadCount: subsequentLoadCount
-  }), footerSlotComp));
-};
-FourColGridBase.propTypes = {
-  /**  collection is the array of objects which is returning by API  */
-  collection: PropTypes__default["default"].object.isRequired,
-
-  /** The config for the Row */
-  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__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 = index$1.StateProvider(FourColGridBase);
-
-exports.FourColGrid = FourColGrid;
-exports.FourColGridBase = FourColGridBase;