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

package/atoms/ExtendedLoadMore/index-6cb56d1a.js

@@ -0,0 +1,350 @@
+import { a as get_1, c as _slicedToArray, d as clientWidth, _ as _getClassName, e as getStoryUrl, f as isExternalStory, g as getTextColor, r as rgbToHex } from './index-e39b3ca8.js';
+import { Link, ResponsiveHeroImage } from '@quintype/components';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { u as useStateValue } from './index-aa8b8ab8.js';
+
+var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 40 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 30 : _ref$height,
+      _ref$iconColor = _ref.iconColor,
+      iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 102 76",
+    version: "1.1"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "demo-home-copy",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    transform: "translate(-377.000000, -314.000000)"
+  }, /*#__PURE__*/React.createElement("g", {
+    id: "Group-13",
+    transform: "translate(377.000000, 314.000000)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M43.2,49.7 L62.2,19.2 L87.2,59.4 L17,59.4 L32.8,39.4 L43.2,49.7 Z M29.9,28.6 C25.8683213,28.6 22.6,25.3316787 22.6,21.3 C22.6,17.2683213 25.8683213,14 29.9,14 C33.9316787,14 37.2,17.2683213 37.2,21.3 C37.2,25.3316787 33.9316787,28.6 29.9,28.6 Z",
+    id: "Combined-Shape",
+    fill: iconColor,
+    fillRule: "nonzero"
+  }), /*#__PURE__*/React.createElement("rect", {
+    id: "Rectangle-19",
+    stroke: iconColor,
+    strokeWidth: "3",
+    x: "1.5",
+    y: "1.5",
+    width: "99",
+    height: "73",
+    rx: "3"
+  }))));
+};
+ImageFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object,
+  iconColor: PropTypes.object
+};
+
+var imageFallback = function imageFallback() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
+  }, /*#__PURE__*/React.createElement("figure", {
+    className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
+  }, /*#__PURE__*/React.createElement(ImageFallbackIcon, null)));
+};
+
+var FallbackImage = function FallbackImage(_ref) {
+  var slug = _ref.slug;
+
+  if (slug) {
+    return /*#__PURE__*/React.createElement(Link, {
+      href: slug,
+      "aria-label": "image-fallback"
+    }, imageFallback());
+  } else {
+    return imageFallback();
+  }
+};
+FallbackImage.propTypes = {
+  slug: PropTypes.string
+};
+
+var HyperLinkIcon = function HyperLinkIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "36",
+    height: "28"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "36",
+    height: "28",
+    fill: "#3D6FCF",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    stroke: "#FFF",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2",
+    d: "M22 14.667v4c0 .736-.597 1.333-1.333 1.333h-7.334A1.333 1.333 0 0112 18.667v-7.334c0-.736.597-1.333 1.333-1.333h4M20 8h4v4m-7.333 3.333L24 8"
+  })));
+};
+
+var HyperLink = function HyperLink(_ref) {
+  var _ref$hyperLink = _ref.hyperLink,
+      hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
+  if (!hyperLink) return null;
+  return /*#__PURE__*/React.createElement(Link, {
+    href: hyperLink,
+    "aria-label": "hyperlink-button",
+    className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(HyperLinkIcon, null));
+};
+HyperLink.propTypes = {
+  hyperLink: PropTypes.string
+};
+
+var _styleModuleImportMap$1 = {
+  "./hero-image.m.css": {
+    "hero-image": "hero-image-m_hero-image__3lraV",
+    "right-padding": "hero-image-m_right-padding__1LkCe",
+    "left-padding": "hero-image-m_left-padding__pYRAj",
+    "right-padding-mob": "hero-image-m_right-padding-mob__3-uOU",
+    "placeholder": "hero-image-m_placeholder__1omCm",
+    "hero-image-mob": "hero-image-m_hero-image-mob__13JJp",
+    "with-padding": "hero-image-m_with-padding__324G_",
+    "image": "hero-image-m_image__1mz0U"
+  }
+};
+var HeroImage = function HeroImage(_ref) {
+  var story = _ref.story,
+      FullBleed = _ref.FullBleed,
+      aspectRatio = _ref.aspectRatio,
+      defaultWidth = _ref.defaultWidth,
+      widths = _ref.widths,
+      isHorizontal = _ref.isHorizontal,
+      isHorizontalMobile = _ref.isHorizontalMobile,
+      isHorizontalWithImageLast = _ref.isHorizontalWithImageLast,
+      defaultFallback = _ref.defaultFallback,
+      isStoryPageImage = _ref.isStoryPageImage,
+      config = _ref.config;
+
+  var _ref2 = useStateValue() || {},
+      _ref2$fallbackImageUr = _ref2.fallbackImageUrl,
+      fallbackImageUrl = _ref2$fallbackImageUr === void 0 ? "" : _ref2$fallbackImageUr;
+
+  var _config$StoryTemplate = config.StoryTemplateIcon,
+      StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
+    return null;
+  } : _config$StoryTemplate;
+  var showImagePlaceholder = useSelector(function (state) {
+    return get_1(state, ["qt", "config", "showPlaceholder"]);
+  });
+  var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
+  var fullBleed = FullBleed ? "" : "with-padding";
+  var heroImageClass = "hero-image";
+  if (isHorizontal) heroImageClass = "right-padding";else if (isHorizontalWithImageLast) heroImageClass = "left-padding";
+  var heroImageMobClasses = isHorizontalMobile ? "right-padding-mob" : "";
+
+  var getPadding = function getPadding(aspectRatio) {
+    var _aspectRatio = _slicedToArray(aspectRatio, 2),
+        height = _aspectRatio[0],
+        width = _aspectRatio[1];
+
+    if (height > 0 && width > 0) {
+      var padding = width / height * 100;
+      return padding;
+    }
+
+    return 0;
+  };
+
+  var _aspectRatio2 = _slicedToArray(aspectRatio, 2),
+      mobileAspectRatio = _aspectRatio2[0],
+      _aspectRatio2$ = _aspectRatio2[1],
+      desktopAspectRatio = _aspectRatio2$ === void 0 ? mobileAspectRatio : _aspectRatio2$;
+
+  var isMobile = clientWidth("mobile");
+  var imageAspectRatio = isMobile ? mobileAspectRatio : desktopAspectRatio;
+  var imagePadding = isMobile ? getPadding(mobileAspectRatio) : getPadding(desktopAspectRatio);
+  var slug = get_1(story, ["hero-image-s3-key"]) || get_1(story, ["alternative", "home", "default", "hero-image", "hero-image-s3-key"]);
+  var hyperLink = get_1(story, ["hero-image-hyperlink"], "");
+
+  var fallbackImage = function fallbackImage() {
+    if (!slug) {
+      if (fallbackImageUrl && !isStoryPageImage) {
+        return /*#__PURE__*/React.createElement("figure", {
+          style: {
+            paddingTop: imagePadding + "%"
+          },
+          className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
+        }, /*#__PURE__*/React.createElement("img", {
+          className: "qt-image",
+          "data-src": "".concat(fallbackImageUrl),
+          alt: "image-fallback"
+        }));
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, defaultFallback ? /*#__PURE__*/React.createElement("div", {
+        "data-test-id": "arr--fallback-hero-image",
+        style: {
+          paddingTop: imagePadding + "%"
+        },
+        className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
+      }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+        storyTemplate: story["story-template"]
+      }), /*#__PURE__*/React.createElement(FallbackImage, null)) : null);
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figure", {
+      style: {
+        paddingTop: imagePadding + "%"
+      },
+      className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$1)
+    }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
+      storyTemplate: story["story-template"]
+    }), /*#__PURE__*/React.createElement(ResponsiveHeroImage, {
+      story: story,
+      aspectRatio: imageAspectRatio,
+      defaultWidth: defaultWidth,
+      widths: widths,
+      imgParams: {
+        auto: ["format", "compress"],
+        fit: "max"
+      }
+    })), isStoryPageImage && hyperLink && /*#__PURE__*/React.createElement(HyperLink, {
+      hyperLink: hyperLink
+    }));
+  };
+
+  return story && (isStoryPageImage ? /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "arr--hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
+  }, fallbackImage()) : /*#__PURE__*/React.createElement(Link, {
+    "data-test-id": "arr--hero-image",
+    href: getStoryUrl(story, "/".concat(story.slug)),
+    externalLink: isExternalStory(story),
+    "aria-label": "fallback-hero-image",
+    className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$1)
+  }, fallbackImage()));
+};
+HeroImage.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** Removes the Hero Image padding for the image to bleed over the margin */
+  FullBleed: PropTypes.bool,
+
+  /** The default width for the image, in case the browser does not support srcset */
+  defaultWidth: PropTypes.number,
+
+  /** The list of available widths */
+  widths: PropTypes.array,
+  // fatch the correct hero image
+  aspectRatio: PropTypes.array,
+  //  Hints for the browser to choose the best size
+
+  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image  */
+  isHorizontal: PropTypes.bool,
+
+  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
+  isHorizontalMobile: PropTypes.bool,
+  // this prop is responsive for rendering fallback image on story page
+  defaultFallback: PropTypes.bool,
+  isHorizontalWithImageLast: PropTypes.bool,
+  isStoryPageImage: PropTypes.bool,
+  config: PropTypes.object
+};
+HeroImage.defaultProps = {
+  FullBleed: true,
+  aspectRatio: [[1, 1], [16, 9]],
+  defaultWidth: 480,
+  widths: [250, 480, 640],
+  isHorizontal: false,
+  isHorizontalMobile: false,
+  defaultFallback: true,
+  isStoryPageImage: false,
+  isHorizontalWithImageLast: false,
+  config: {}
+};
+
+var _styleModuleImportMap = {
+  "./section.m.css": {
+    "section": "section-m_section__2N4S3",
+    "section-borderBottomSml": "section-m_section-borderBottomSml__2GNbo",
+    "border-bottom": "section-m_border-bottom__3cRoD",
+    "section-borderLeft": "section-m_section-borderLeft__3hKVj",
+    "border-left": "section-m_border-left__2oUyp",
+    "section-solid": "section-m_section-solid__1vB1Q",
+    "dark": "section-m_dark__1r3C4",
+    "light": "section-m_light__306hW"
+  }
+};
+var SectionTag = function SectionTag(_ref) {
+  var story = _ref.story,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? "" : _ref$borderColor,
+      isLightTheme = _ref.isLightTheme;
+  var config = useStateValue() || {};
+  var isSection = get_1(config, ["showSection"], true);
+  var templateFromRowContext = get_1(config, ["sectionTagTemplate"]);
+  var section = get_1(story, ["sections", 0], "");
+  var supportedTemplates = ["borderBottomSml", "borderLeft", "solid"];
+  var getUrl = section ? section["section-url"] : "/";
+  var colorToApplyContrast = template === "solid" || templateFromRowContext === "solid" ? borderColor : config.theme;
+  var textColor = isLightTheme ? "light" : getTextColor(colorToApplyContrast);
+  var sectionTagBorderColor = rgbToHex(borderColor);
+  var templateStyle = supportedTemplates.includes(template) ? "section section-".concat(template) : "section";
+
+  if (templateFromRowContext) {
+    templateStyle = supportedTemplates.includes(templateFromRowContext) ? "section section-".concat(templateFromRowContext) : "section";
+  }
+
+  if (!isSection) return null;
+  return /*#__PURE__*/React.createElement(Link, {
+    href: getUrl,
+    className: "arrow-component arr--section-name",
+    "aria-label": "section-name"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "sectionTag",
+    style: {
+      backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
+    },
+    className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap)
+  }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React.createElement("span", {
+    className: "section-m_border-left__2oUyp",
+    style: {
+      color: sectionTagBorderColor
+    }
+  }), section["display-name"] || section["name"], /*#__PURE__*/React.createElement("div", {
+    className: "section-m_border-bottom__3cRoD",
+    style: {
+      backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
+    }
+  })));
+};
+SectionTag.propTypes = {
+  /** The Story Object from the API response */
+  story: PropTypes.object.isRequired,
+
+  /** The style template for section tag */
+  template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
+  borderColor: PropTypes.string,
+  solidBorderColor: PropTypes.string,
+  isLightTheme: PropTypes.bool
+};
+SectionTag.defaultProps = {
+  template: "",
+  isLightTheme: false
+};
+
+export { HeroImage as H, SectionTag as S };

package/atoms/ExtendedLoadMore/index-6daa674c.js

@@ -0,0 +1,282 @@
+import { C as CollectionName, b as Author, H as Headline, A as AuthorWithTime, S as StateProvider, _ as _defineProperty, L as LoadMoreTarget, P as ProgressiveHydration, a as LoadmoreButton } from './index-aa8b8ab8.js';
+import { _ as _getClassName, a as get_1, g as getTextColor, l as getSlot, b as generateNavigateSlug, n as navigateTo } from './index-e39b3ca8.js';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Link, ResponsiveImage, collectionToStories } from '@quintype/components';
+import 'react-dom';
+import 'react-timeago';
+import 'date-fns-tz';
+
+var UserFallbackIcon = function UserFallbackIcon(_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 120 : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 120 : _ref$height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 120 120",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M93.28 108.98c-1.055-17.675-15.47-31.678-33.098-31.678-17.708 0-32.173 14.129-33.11 31.916 9.415 6.311 20.741 9.993 32.927 9.993 12.338 0 23.795-3.774 33.28-10.23l.001-.001zM58.584 73.283c9.928 0 17.977-8.275 17.977-18.483 0-10.209-8.049-18.484-17.977-18.484-9.929 0-17.977 8.275-17.977 18.484 0 10.208 8.048 18.483 17.977 18.483zM60 120C26.863 120 0 93.137 0 60S26.863 0 60 0s60 26.863 60 60-26.863 60-60 60z",
+    fill: "#DADADA",
+    fillRule: "nonzero"
+  }));
+};
+UserFallbackIcon.propTypes = {
+  width: PropTypes.object,
+  height: PropTypes.object
+};
+
+var _styleModuleImportMap$1 = {
+  "./author-image.m.css": {
+    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "tablet": "992px",
+    "image-container": "author-image-m_image-container__19WNd",
+    "author-image": "author-image-m_author-image__D8GMB",
+    "square": "author-image-m_square__bjK7M",
+    "small-circle": "author-image-m_small-circle__DbQMN",
+    "smaller-circle": "author-image-m_smaller-circle__2yMOZ"
+  }
+};
+
+var authorWithImage = function authorWithImage(author, templateStyle) {
+  var avatarUrl = author["avatar-url"],
+      avatarS3Key = author["avatar-s3-key"],
+      name = author.name;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test-id": "author-image",
+    className: "arr--author-image " + _getClassName("author-image ".concat(templateStyle), _styleModuleImportMap$1)
+  }, /*#__PURE__*/React.createElement("figure", {
+    className: "author-image-m_image-container__19WNd"
+  }, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
+    slug: avatarS3Key,
+    alt: name,
+    defaultWidth: 250,
+    widths: [250, 480],
+    aspectRatio: [[1, 1], [1, 1]],
+    sizes: "98vw",
+    imgParams: {
+      auto: ["format", "compress"]
+    }
+  }) : avatarUrl ? /*#__PURE__*/React.createElement("img", {
+    src: avatarUrl
+  }) : /*#__PURE__*/React.createElement(UserFallbackIcon, null)));
+};
+
+var AuthorImage = function AuthorImage(_ref) {
+  var _ref$author = _ref.author,
+      author = _ref$author === void 0 ? {} : _ref$author,
+      _ref$template = _ref.template,
+      template = _ref$template === void 0 ? "" : _ref$template,
+      _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config;
+  var slug = author.slug;
+  var mountAt = config.mountAt || "";
+  var templateStyle = "";
+  if (template === "smallerCircle") templateStyle = "smaller-circle";else if (template === "smallCircle") templateStyle = "small-circle";else if (template === "square") templateStyle = "square";
+  if (slug) return /*#__PURE__*/React.createElement(Link, {
+    href: "".concat(mountAt, "/author/") + slug
+  }, authorWithImage(author, templateStyle));else return authorWithImage(author, templateStyle);
+};
+
+AuthorImage.propTypes = {
+  author: PropTypes.shape({
+    "avatar-url": PropTypes.string,
+    "avatar-s3-key": PropTypes.string,
+    name: PropTypes.string,
+    slug: PropTypes.string
+  }),
+  template: PropTypes.string
+};
+
+var _styleModuleImportMap = {
+  "./opinion-collection.m.css": {
+    "viewports": "\"../../../../assets/stylesheets/viewports.m.css\"",
+    "mobile": "768px",
+    "desktop": "1025px",
+    "opinion-collection": "opinion-collection-m_opinion-collection__1Bc7h",
+    "content-wrapper": "opinion-collection-m_content-wrapper__y32PE",
+    "custom-grid": "opinion-collection-m_custom-grid__33uRh",
+    "wrapper-with-ads": "opinion-collection-m_wrapper-with-ads__2daVe",
+    "ad-slot": "opinion-collection-m_ad-slot__2ZpaC",
+    "headline-author": "opinion-collection-m_headline-author__2H6Tv",
+    "border": "opinion-collection-m_border__38tun",
+    "light": "opinion-collection-m_light__2Hent",
+    "dark": "opinion-collection-m_dark__WMRNF",
+    "count-3": "opinion-collection-m_count-3__3cQUB",
+    "count-2": "opinion-collection-m_count-2__2e7g_"
+  }
+};
+
+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 loadMore = function loadMore(_ref) {
+  var isLoading = _ref.isLoading,
+      renderStories = _ref.renderStories,
+      getMoreStories = _ref.getMoreStories,
+      _ref$subsequentLoadCo = _ref.subsequentLoadCount,
+      subsequentLoadCount = _ref$subsequentLoadCo === void 0 ? 3 : _ref$subsequentLoadCo;
+  if (isLoading) return;
+  var limit = subsequentLoadCount;
+  var offset = renderStories.length;
+  getMoreStories(offset, limit);
+};
+
+var OpinionCollectionBase = function OpinionCollectionBase(_ref2) {
+  var collection = _ref2.collection,
+      config = _ref2.config,
+      getMoreStories = _ref2.getMoreStories,
+      isLoadMoreVisible = _ref2.isLoadMoreVisible,
+      isLoading = _ref2.isLoading,
+      isolatedLoadMore = _ref2.isolatedLoadMore;
+  var stories = collectionToStories(collection);
+  var _config$theme = config.theme,
+      theme = _config$theme === void 0 ? "" : _config$theme,
+      _config$footerButton = config.footerButton,
+      footerButton = _config$footerButton === void 0 ? "" : _config$footerButton,
+      _config$border = config.border,
+      border = _config$border === void 0 ? "fullBorder" : _config$border,
+      _config$collectionNam = config.collectionNameBorderColor,
+      collectionNameBorderColor = _config$collectionNam === void 0 ? "" : _config$collectionNam,
+      _config$collectionNam2 = config.collectionNameTemplate,
+      collectionNameTemplate = _config$collectionNam2 === void 0 ? "" : _config$collectionNam2,
+      _config$slotConfig = config.slotConfig,
+      slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig,
+      _config$subsequentLoa = config.subsequentLoadCount,
+      subsequentLoadCount = _config$subsequentLoa === void 0 ? 3 : _config$subsequentLoa;
+
+  var _get = get_1(slotConfig, [0], {}),
+      _get$type = _get.type,
+      type = _get$type === void 0 ? "story" : _get$type,
+      _get$component = _get.component,
+      component = _get$component === void 0 ? null : _get$component;
+
+  var dispatch = useDispatch();
+  var qtConfig = useSelector(function (state) {
+    return get_1(state, ["qt", "config"], {});
+  });
+  if (!stories.length) return null;
+  var textColor = getTextColor(theme);
+  var borderStyle = border === "fullBorder" ? "border" : "";
+  var slot = type === "ad" ? getSlot(type, component) : null;
+  var adStyle = slot ? "custom-grid" : "";
+
+  var getLoadMore = function getLoadMore(opts) {
+    if (!isLoadMoreVisible) return null;
+
+    if (isolatedLoadMore) {
+      return /*#__PURE__*/React.createElement(LoadMoreTarget, {
+        collection: collection,
+        componentName: "OpinionCollection",
+        offset: stories.length,
+        limit: subsequentLoadCount
+      });
+    }
+
+    var url = generateNavigateSlug(collection, qtConfig);
+    return /*#__PURE__*/React.createElement(ProgressiveHydration, null, /*#__PURE__*/React.createElement(LoadmoreButton, {
+      config: config,
+      collection: collection,
+      template: footerButton,
+      onClick: function onClick() {
+        return loadMore(opts);
+      },
+      navigate: function navigate() {
+        return navigateTo(dispatch, url);
+      },
+      qtConfig: qtConfig
+    }));
+  };
+
+  var getAuthorCard = function getAuthorCard(story) {
+    var authorData = get_1(story, ["authors", "0"]);
+    return /*#__PURE__*/React.createElement("div", {
+      "data-test-id": "story-card"
+    }, /*#__PURE__*/React.createElement(Author, {
+      story: story,
+      hideAuthorImage: true
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "opinion-collection-m_headline-author__2H6Tv"
+    }, /*#__PURE__*/React.createElement(Headline, {
+      story: story
+    }), /*#__PURE__*/React.createElement(AuthorImage, {
+      author: authorData,
+      template: "smallerCircle",
+      config: config
+    })), /*#__PURE__*/React.createElement(AuthorWithTime, {
+      story: story,
+      config: _objectSpread(_objectSpread({}, config), {}, {
+        disableMeridiem: true,
+        showAuthor: false
+      })
+    }));
+  };
+
+  var countStyleName = stories.length === 2 || stories.length === 3 ? "count-".concat(stories.length) : "";
+  return /*#__PURE__*/React.createElement("div", {
+    className: "full-width-with-padding arrow-component",
+    "data-test-id": "opinion-collection",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "opinion-collection-m_opinion-collection__1Bc7h",
+    style: {
+      backgroundColor: theme,
+      color: textColor
+    }
+  }, /*#__PURE__*/React.createElement(CollectionName, {
+    collection: collection,
+    collectionNameTemplate: collectionNameTemplate,
+    collectionNameBorderColor: collectionNameBorderColor,
+    headerLevel: 2
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ("content-wrapper ".concat(borderStyle, " ").concat(textColor) ? "content-wrapper ".concat(borderStyle, " ").concat(textColor) + " " : "") + _getClassName("content-wrapper ".concat(borderStyle, " ").concat(textColor, " ").concat(adStyle), _styleModuleImportMap)
+  }, slot ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "wrapper-with-ads " + _getClassName("wrapper-with-ads ".concat(countStyleName), _styleModuleImportMap)
+  }, stories.slice(0, 4).map(function (story) {
+    return getAuthorCard(story);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "opinion-collection-m_ad-slot__2ZpaC"
+  }, slot)) : stories.map(function (story) {
+    return getAuthorCard(story);
+  })), getLoadMore({
+    isLoading: isLoading,
+    stories: stories,
+    getMoreStories: getMoreStories,
+    subsequentLoadCount: subsequentLoadCount
+  })));
+};
+OpinionCollectionBase.propTypes = {
+  collection: PropTypes.object,
+  config: PropTypes.shape({
+    collectionNameBorderColor: PropTypes.string,
+    theme: PropTypes.string,
+    collectionNameTemplate: PropTypes.string,
+    footerButton: PropTypes.string,
+    border: PropTypes.string,
+    slotConfig: PropTypes.array,
+    subsequentLoadCount: PropTypes.number
+  }),
+  getMoreStories: PropTypes.func,
+  isLoading: PropTypes.bool,
+  isLoadMoreVisible: PropTypes.bool,
+  isolatedLoadMore: PropTypes.bool
+};
+OpinionCollectionBase.defaultProps = {
+  getMoreStories: function getMoreStories() {},
+  isLoadMoreVisible: true,
+  isLoading: false,
+  collection: {},
+  config: {},
+  hideFirstCard: false
+};
+var OpinionCollection = StateProvider(OpinionCollectionBase);
+
+export { OpinionCollection, OpinionCollectionBase };