@quintype/arrow 3.15.1-perf.2 → 3.15.1-perf.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/atoms/Author/index.js +38 -29
  2. package/atoms/AuthorWithTime/index.js +83 -73
  3. package/atoms/CollectionName/index.js +40 -30
  4. package/atoms/ExtendedLoadMore/{index-d0f6c865.js → index-3976fac4.js} +59 -51
  5. package/atoms/ExtendedLoadMore/{index-1e444d20.js → index-3c4ac692.js} +243 -208
  6. package/atoms/ExtendedLoadMore/index-4ddfe28d.js +93 -0
  7. package/atoms/ExtendedLoadMore/{index-c61a16dc.js → index-5c8eda4a.js} +88 -80
  8. package/atoms/ExtendedLoadMore/{index-1256e453.js → index-6e083738.js} +60 -52
  9. package/atoms/ExtendedLoadMore/{index-fd651f70.js → index-6ecceae4.js} +58 -50
  10. package/atoms/ExtendedLoadMore/{index-4356ce04.js → index-9e0d32b7.js} +76 -68
  11. package/atoms/ExtendedLoadMore/{index-beed3a68.js → index-a5c95f84.js} +70 -62
  12. package/atoms/ExtendedLoadMore/{index-0519e570.js → index-b22f1843.js} +70 -62
  13. package/atoms/ExtendedLoadMore/{index-e4cf9cb7.js → index-b5936059.js} +72 -64
  14. package/atoms/ExtendedLoadMore/{index-aba6b278.js → index-bc129cb8.js} +57 -49
  15. package/atoms/ExtendedLoadMore/{index-ad3c83c3.js → index-e7cde739.js} +74 -46
  16. package/atoms/ExtendedLoadMore/{index-c2f73d18.js → index-fee73a14.js} +62 -54
  17. package/atoms/ExtendedLoadMore/index.js +13 -5
  18. package/atoms/ExtendedLoadMore/styles.arrow.css +1 -1
  19. package/atoms/Headline/index.js +85 -76
  20. package/atoms/HeroImage/index.js +69 -60
  21. package/atoms/LoadmoreButton/index.js +32 -23
  22. package/atoms/ScrollSnap/index.js +72 -63
  23. package/atoms/SectionTag/index.js +34 -25
  24. package/atoms/Subheadline/index.js +31 -22
  25. package/atoms/TimeStamp/index.js +34 -24
  26. package/molecules/KeyEvents/index.js +72 -61
  27. package/molecules/PageIntroductionCard/index.js +43 -34
  28. package/molecules/SocialShareTemplate/index.js +97 -88
  29. package/molecules/StoryCard/index.js +242 -232
  30. package/molecules/StoryElementCard/index.js +512 -483
  31. package/molecules/StorycardContent/index.js +172 -162
  32. package/package.json +1 -1
  33. package/rows/AlternateCollectionFilter/index.js +345 -333
  34. package/rows/AsideCollection/index.js +340 -328
  35. package/rows/AstrologyCollection/index.js +321 -309
  36. package/rows/AuthorIntroductionCard/index.js +157 -148
  37. package/rows/AuthorsList/index.js +184 -174
  38. package/rows/CollectionFilter/index.js +361 -349
  39. package/rows/ElevenStories/index.js +357 -346
  40. package/rows/FourColFiveStories/index.js +304 -274
  41. package/rows/FourColGrid/index.js +351 -321
  42. package/rows/FourColPortraitStories/index.js +357 -327
  43. package/rows/FourColSixteenStories/index.js +288 -277
  44. package/rows/FourColTwelveStories/index.js +315 -304
  45. package/rows/FourStorySlider/index.js +358 -347
  46. package/rows/FourStorySliderPortrait/index.js +359 -348
  47. package/rows/FourTabbedBigStorySlider/index.js +322 -311
  48. package/rows/FullScreenSlider/index.js +336 -325
  49. package/rows/HalfScreenSlider/index.js +308 -297
  50. package/rows/ListComponent/index.js +322 -311
  51. package/rows/Listicles/index.js +150 -139
  52. package/rows/MagazineEditions/index.js +104 -93
  53. package/rows/MagazineHeaderCard/index.js +104 -93
  54. package/rows/MagazineWidget/index.js +326 -315
  55. package/rows/OneColStoryList/index.js +365 -335
  56. package/rows/OpinionCollection/index.js +250 -220
  57. package/rows/SixColSixStories/index.js +333 -303
  58. package/rows/StoryCollection/index.js +340 -328
  59. package/rows/TagIntroductionCard/index.js +30 -21
  60. package/rows/ThreeColFlexStories/index.js +348 -318
  61. package/rows/ThreeColFourteenStories/index.js +285 -274
  62. package/rows/ThreeColGrid/index.js +352 -322
  63. package/rows/ThreeColSevenStory/index.js +322 -311
  64. package/rows/ThreeColSixStories/index.js +323 -312
  65. package/rows/ThreeColTwelveStories/index.js +302 -291
  66. package/rows/TwoColFourStories/index.js +316 -305
  67. package/rows/TwoColFourStoryHighlight/index.js +317 -306
  68. package/rows/TwoColSevenStories/index.js +322 -311
  69. package/rows/TwoColSixStories/index.js +316 -305
  70. package/rows/TwoColTenStoriesSidebar/index.js +338 -327
  71. package/rows/TwoColThreeStories/index.js +316 -305
  72. package/story-elements/AlsoRead/index.js +70 -61
  73. package/story-elements/Attachment/index.js +40 -31
  74. package/story-elements/BigFact/index.js +35 -26
  75. package/story-elements/BlockQuote/index.js +61 -51
  76. package/story-elements/Blurb/index.js +36 -27
  77. package/story-elements/Image/index.js +113 -86
  78. package/story-elements/ImageGallery/index.js +98 -71
  79. package/story-elements/ImageSlideshow/index.js +147 -120
  80. package/story-elements/QuestionAnswer/index.js +55 -46
  81. package/story-elements/Quote/index.js +37 -28
  82. package/story-elements/Reference/index.js +40 -31
  83. package/story-elements/StoryElement/index.js +28 -19
  84. package/story-elements/Summary/index.js +40 -31
  85. package/story-elements/Text/index.js +34 -25
  86. package/story-elements/Video/index.js +29 -20
  87. package/story-templates/ListicleStoryTemplate/index.js +937 -908
  88. package/story-templates/LiveBlogStoryTemplate/index.js +942 -913
  89. package/story-templates/PhotoStoryTemplate/index.js +912 -883
  90. package/story-templates/TextStoryTemplate/index.js +931 -902
  91. package/story-templates/VideoStoryTemplate/index.js +897 -868
  92. package/atoms/ExtendedLoadMore/index-81eb3978.js +0 -86
@@ -1,10 +1,21 @@
1
- import React, { useContext, createContext, useState, useEffect } from 'react';
2
- import axios from 'axios';
3
- import PropTypes, { PropTypes as PropTypes$1 } from 'prop-types';
4
- import { connect, useSelector, useDispatch } from 'react-redux';
5
- import { Link, LinkBase, ResponsiveImage, ResponsiveHeroImage, collectionToStories } from '@quintype/components';
6
- import Timeago from 'react-timeago';
7
- import { utcToZonedTime, format } from 'date-fns-tz';
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var axios = require('axios');
7
+ var PropTypes = require('prop-types');
8
+ var reactRedux = require('react-redux');
9
+ var components = require('@quintype/components');
10
+ var Timeago = require('react-timeago');
11
+ var dateFnsTz = require('date-fns-tz');
12
+
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
+ var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
17
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
18
+ var Timeago__default = /*#__PURE__*/_interopDefaultLegacy(Timeago);
8
19
 
9
20
  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
10
21
  try {
@@ -2215,21 +2226,21 @@ function get(object, path, defaultValue) {
2215
2226
 
2216
2227
  var get_1 = get;
2217
2228
 
2218
- var StateContext = /*#__PURE__*/createContext(); // eslint-disable-next-line react/display-name
2229
+ var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
2219
2230
 
2220
2231
  var StateProvider = function StateProvider(RowComponent) {
2221
2232
  return function (props) {
2222
2233
  return (
2223
2234
  /*#__PURE__*/
2224
2235
  // eslint-disable-next-line react/prop-types
2225
- React.createElement(StateContext.Provider, {
2236
+ React__default["default"].createElement(StateContext.Provider, {
2226
2237
  value: props.config
2227
- }, /*#__PURE__*/React.createElement(RowComponent, props))
2238
+ }, /*#__PURE__*/React__default["default"].createElement(RowComponent, props))
2228
2239
  );
2229
2240
  };
2230
2241
  };
2231
2242
  var useStateValue = function useStateValue() {
2232
- return useContext(StateContext);
2243
+ return React.useContext(StateContext);
2233
2244
  };
2234
2245
 
2235
2246
  function _typeof(obj) {
@@ -2802,15 +2813,15 @@ var isEmpty = function isEmpty(value) {
2802
2813
  return value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
2803
2814
  _typeof(value) === "object" && Object.entries(value).length === 0 && value.constructor === Object || typeof value === "string" && value.trim().length === 0;
2804
2815
  };
2805
- PropTypes.shape({
2806
- "sketches-host": PropTypes.string,
2807
- "cdn-name": PropTypes.string,
2808
- "cdn-image": PropTypes.string
2816
+ PropTypes__default["default"].shape({
2817
+ "sketches-host": PropTypes__default["default"].string,
2818
+ "cdn-name": PropTypes__default["default"].string,
2819
+ "cdn-image": PropTypes__default["default"].string
2809
2820
  });
2810
- PropTypes.shape({
2811
- headline: PropTypes.string,
2812
- "last-published-at": PropTypes.number,
2813
- subheadline: PropTypes.string
2821
+ PropTypes__default["default"].shape({
2822
+ headline: PropTypes__default["default"].string,
2823
+ "last-published-at": PropTypes__default["default"].number,
2824
+ subheadline: PropTypes__default["default"].string
2814
2825
  });
2815
2826
  var getStoryUrl = function getStoryUrl(story) {
2816
2827
  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
@@ -2854,17 +2865,17 @@ var getTimeStamp = function getTimeStamp(date, _formatter) {
2854
2865
  var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
2855
2866
 
2856
2867
  if (timezone && template === "story") {
2857
- var zonedTime = timezone && utcToZonedTime(date, timezone);
2858
- var formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
2868
+ var zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
2869
+ var formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
2859
2870
  timeZone: timezone
2860
2871
  });
2861
2872
  var timeStamp = timestampToFormat("", "", "", date, config);
2862
- return /*#__PURE__*/React.createElement("time", {
2873
+ return /*#__PURE__*/React__default["default"].createElement("time", {
2863
2874
  dateTime: formatZonedTime
2864
2875
  }, timeStamp);
2865
2876
  }
2866
2877
 
2867
- return /*#__PURE__*/React.createElement(Timeago, {
2878
+ return /*#__PURE__*/React__default["default"].createElement(Timeago__default["default"], {
2868
2879
  date: date,
2869
2880
  formatter: function formatter(value, unit, suffix, date) {
2870
2881
  return _formatter(value, unit, suffix, date, config);
@@ -2908,7 +2919,7 @@ var CollectionNameBase = function CollectionNameBase(_ref) {
2908
2919
  var borderBottomFullStyle = templateStyle.includes("collection-borderBottomFull") ? "4px solid ".concat(CollectionNameBorderColor) : "";
2909
2920
 
2910
2921
  var borderBottomStyle = function borderBottomStyle() {
2911
- return templateStyle.includes("collection-borderBottom") && !templateStyle.includes("collection-borderBottomFull") ? /*#__PURE__*/React.createElement("div", {
2922
+ return templateStyle.includes("collection-borderBottom") && !templateStyle.includes("collection-borderBottomFull") ? /*#__PURE__*/React__default["default"].createElement("div", {
2912
2923
  className: "collection-name-m_border-bottom__1MnlV",
2913
2924
  style: {
2914
2925
  borderBottom: "4px solid ".concat(CollectionNameBorderColor)
@@ -2968,40 +2979,40 @@ var CollectionNameBase = function CollectionNameBase(_ref) {
2968
2979
  }
2969
2980
  };
2970
2981
 
2971
- return /*#__PURE__*/React.createElement(React.Fragment, null, showRowTitle && collectionName && /*#__PURE__*/React.createElement("div", {
2982
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showRowTitle && collectionName && /*#__PURE__*/React__default["default"].createElement("div", {
2972
2983
  style: {
2973
2984
  borderBottom: borderBottomFullStyle
2974
2985
  },
2975
2986
  "data-test-id": "collection-name",
2976
2987
  className: ("arr--collection-name arrow-component ".concat(templateStyle) ? "arr--collection-name arrow-component ".concat(templateStyle) + " " : "") + _getClassName("collection ".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$d)
2977
- }, templateStyle.includes("collection-borderLeft") && /*#__PURE__*/React.createElement("span", {
2988
+ }, templateStyle.includes("collection-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
2978
2989
  className: "arr-collection-name-border-left collection-name-m_border-left__3_pYw",
2979
2990
  style: {
2980
2991
  color: CollectionNameBorderColor,
2981
2992
  fontSize: getBorderHeight()
2982
2993
  }
2983
- }), slug && !slug.includes(undefined) ? /*#__PURE__*/React.createElement(Link, {
2994
+ }), slug && !slug.includes(undefined) ? /*#__PURE__*/React__default["default"].createElement(components.Link, {
2984
2995
  href: slug,
2985
2996
  "aria-label": "collection-name"
2986
- }, /*#__PURE__*/React.createElement(HeaderTag, null, collectionName)) : /*#__PURE__*/React.createElement(HeaderTag, null, collectionName), borderBottomStyle()));
2997
+ }, /*#__PURE__*/React__default["default"].createElement(HeaderTag, null, collectionName)) : /*#__PURE__*/React__default["default"].createElement(HeaderTag, null, collectionName), borderBottomStyle()));
2987
2998
  };
2988
2999
  CollectionNameBase.propTypes = {
2989
3000
  /** Collection name border color */
2990
- collectionNameBorderColor: PropTypes$1.string,
3001
+ collectionNameBorderColor: PropTypes.PropTypes.string,
2991
3002
 
2992
3003
  /** The Collection Object from the API response */
2993
- collection: PropTypes$1.object,
3004
+ collection: PropTypes.PropTypes.object,
2994
3005
 
2995
3006
  /** The publisher config from the API response */
2996
- config: PropTypes$1.object,
3007
+ config: PropTypes.PropTypes.object,
2997
3008
 
2998
3009
  /** The style template for the component */
2999
- collectionNameTemplate: PropTypes$1.oneOf(["", "borderLeft", "borderBottom", "crossLine", "borderBottomFull"]),
3010
+ collectionNameTemplate: PropTypes.PropTypes.oneOf(["", "borderLeft", "borderBottom", "crossLine", "borderBottomFull"]),
3000
3011
 
3001
3012
  /** Header tags ranging h1-h6, where h[headerLevel] */
3002
- headerLevel: PropTypes$1.string,
3003
- customCollectionName: PropTypes$1.string,
3004
- navigate: PropTypes$1.bool
3013
+ headerLevel: PropTypes.PropTypes.string,
3014
+ customCollectionName: PropTypes.PropTypes.string,
3015
+ navigate: PropTypes.PropTypes.bool
3005
3016
  };
3006
3017
  CollectionNameBase.defaultProps = {
3007
3018
  collectionNameTemplate: "",
@@ -3014,7 +3025,7 @@ function mapStateToProps$1(state) {
3014
3025
  };
3015
3026
  }
3016
3027
 
3017
- var CollectionName = connect(mapStateToProps$1)(CollectionNameBase);
3028
+ var CollectionName = reactRedux.connect(mapStateToProps$1)(CollectionNameBase);
3018
3029
 
3019
3030
  var CrownIcon = function CrownIcon(_ref) {
3020
3031
  var height = _ref.height,
@@ -3022,7 +3033,7 @@ var CrownIcon = function CrownIcon(_ref) {
3022
3033
  _ref$color = _ref.color,
3023
3034
  color = _ref$color === void 0 ? "#D8D8D8" : _ref$color,
3024
3035
  positionTop = _ref.positionTop;
3025
- return /*#__PURE__*/React.createElement("svg", {
3036
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3026
3037
  xmlns: "http://www.w3.org/2000/svg",
3027
3038
  width: width,
3028
3039
  height: height,
@@ -3031,28 +3042,28 @@ var CrownIcon = function CrownIcon(_ref) {
3031
3042
  position: "relative",
3032
3043
  top: positionTop
3033
3044
  }
3034
- }, /*#__PURE__*/React.createElement("g", {
3045
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3035
3046
  fill: "none",
3036
3047
  fillRule: "evenodd",
3037
3048
  stroke: "none",
3038
3049
  strokeWidth: "1"
3039
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
3050
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
3040
3051
  transform: "translate(8 8)"
3041
- }, /*#__PURE__*/React.createElement("path", {
3052
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3042
3053
  d: "M0 0H24V24H0z"
3043
- }), /*#__PURE__*/React.createElement("g", {
3054
+ }), /*#__PURE__*/React__default["default"].createElement("g", {
3044
3055
  fill: color,
3045
3056
  fillRule: "nonzero",
3046
3057
  transform: "translate(0 2)"
3047
- }, /*#__PURE__*/React.createElement("path", {
3058
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3048
3059
  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"
3049
3060
  }))))));
3050
3061
  };
3051
3062
  CrownIcon.propTypes = {
3052
- height: PropTypes.string,
3053
- width: PropTypes.string,
3054
- color: PropTypes.string,
3055
- positionTop: PropTypes.string
3063
+ height: PropTypes__default["default"].string,
3064
+ width: PropTypes__default["default"].string,
3065
+ color: PropTypes__default["default"].string,
3066
+ positionTop: PropTypes__default["default"].string
3056
3067
  };
3057
3068
 
3058
3069
  var KeyIcon = function KeyIcon(_ref) {
@@ -3061,7 +3072,7 @@ var KeyIcon = function KeyIcon(_ref) {
3061
3072
  _ref$color = _ref.color,
3062
3073
  color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
3063
3074
  positionTop = _ref.positionTop;
3064
- return /*#__PURE__*/React.createElement("svg", {
3075
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3065
3076
  xmlns: "http://www.w3.org/2000/svg",
3066
3077
  width: width,
3067
3078
  height: height,
@@ -3070,16 +3081,16 @@ var KeyIcon = function KeyIcon(_ref) {
3070
3081
  position: "relative",
3071
3082
  top: positionTop
3072
3083
  }
3073
- }, /*#__PURE__*/React.createElement("g", {
3084
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3074
3085
  fill: "none",
3075
3086
  fillRule: "evenodd",
3076
3087
  stroke: "none",
3077
3088
  strokeWidth: "1"
3078
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
3089
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
3079
3090
  transform: "translate(8 8)"
3080
- }, /*#__PURE__*/React.createElement("path", {
3091
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3081
3092
  d: "M0 0H24V24H0z"
3082
- }), /*#__PURE__*/React.createElement("path", {
3093
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
3083
3094
  fill: color,
3084
3095
  fillRule: "nonzero",
3085
3096
  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",
@@ -3087,10 +3098,10 @@ var KeyIcon = function KeyIcon(_ref) {
3087
3098
  })))));
3088
3099
  };
3089
3100
  KeyIcon.propTypes = {
3090
- height: PropTypes.string,
3091
- width: PropTypes.string,
3092
- color: PropTypes.string,
3093
- positionTop: PropTypes.string
3101
+ height: PropTypes__default["default"].string,
3102
+ width: PropTypes__default["default"].string,
3103
+ color: PropTypes__default["default"].string,
3104
+ positionTop: PropTypes__default["default"].string
3094
3105
  };
3095
3106
 
3096
3107
  var LockIcon = function LockIcon(_ref) {
@@ -3099,7 +3110,7 @@ var LockIcon = function LockIcon(_ref) {
3099
3110
  _ref$color = _ref.color,
3100
3111
  color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
3101
3112
  positionTop = _ref.positionTop;
3102
- return /*#__PURE__*/React.createElement("svg", {
3113
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3103
3114
  xmlns: "http://www.w3.org/2000/svg",
3104
3115
  width: width,
3105
3116
  height: height,
@@ -3108,28 +3119,28 @@ var LockIcon = function LockIcon(_ref) {
3108
3119
  position: "relative",
3109
3120
  top: positionTop
3110
3121
  }
3111
- }, /*#__PURE__*/React.createElement("g", {
3122
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3112
3123
  fill: "none",
3113
3124
  fillRule: "evenodd",
3114
3125
  stroke: "none",
3115
3126
  strokeWidth: "1"
3116
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
3127
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
3117
3128
  transform: "translate(8 8)"
3118
- }, /*#__PURE__*/React.createElement("path", {
3129
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3119
3130
  d: "M0 0H24V24H0z"
3120
- }), /*#__PURE__*/React.createElement("g", {
3131
+ }), /*#__PURE__*/React__default["default"].createElement("g", {
3121
3132
  fill: color,
3122
3133
  fillRule: "nonzero",
3123
3134
  transform: "translate(3)"
3124
- }, /*#__PURE__*/React.createElement("path", {
3135
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3125
3136
  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"
3126
3137
  }))))));
3127
3138
  };
3128
3139
  LockIcon.propTypes = {
3129
- height: PropTypes.string,
3130
- width: PropTypes.string,
3131
- color: PropTypes.string,
3132
- positionTop: PropTypes.string
3140
+ height: PropTypes__default["default"].string,
3141
+ width: PropTypes__default["default"].string,
3142
+ color: PropTypes__default["default"].string,
3143
+ positionTop: PropTypes__default["default"].string
3133
3144
  };
3134
3145
 
3135
3146
  var StarIcon = function StarIcon(_ref) {
@@ -3139,7 +3150,7 @@ var StarIcon = function StarIcon(_ref) {
3139
3150
  color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
3140
3151
  _ref$positionTop = _ref.positionTop,
3141
3152
  positionTop = _ref$positionTop === void 0 ? "" : _ref$positionTop;
3142
- return /*#__PURE__*/React.createElement("svg", {
3153
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3143
3154
  xmlns: "http://www.w3.org/2000/svg",
3144
3155
  width: width,
3145
3156
  height: height,
@@ -3148,21 +3159,21 @@ var StarIcon = function StarIcon(_ref) {
3148
3159
  position: "relative",
3149
3160
  top: positionTop
3150
3161
  }
3151
- }, /*#__PURE__*/React.createElement("g", {
3162
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3152
3163
  fill: "none",
3153
3164
  fillRule: "evenodd",
3154
3165
  stroke: "none",
3155
3166
  strokeWidth: "1"
3156
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
3167
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("path", {
3157
3168
  fill: color,
3158
3169
  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"
3159
3170
  }))));
3160
3171
  };
3161
3172
  StarIcon.propTypes = {
3162
- height: PropTypes.string,
3163
- width: PropTypes.string,
3164
- color: PropTypes.string,
3165
- positionTop: PropTypes.string
3173
+ height: PropTypes__default["default"].string,
3174
+ width: PropTypes__default["default"].string,
3175
+ color: PropTypes__default["default"].string,
3176
+ positionTop: PropTypes__default["default"].string
3166
3177
  };
3167
3178
 
3168
3179
  var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
@@ -3174,7 +3185,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
3174
3185
 
3175
3186
  switch (iconType) {
3176
3187
  case "crown":
3177
- return /*#__PURE__*/React.createElement(CrownIcon, {
3188
+ return /*#__PURE__*/React__default["default"].createElement(CrownIcon, {
3178
3189
  width: width,
3179
3190
  height: height,
3180
3191
  color: color,
@@ -3182,7 +3193,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
3182
3193
  });
3183
3194
 
3184
3195
  case "lock":
3185
- return /*#__PURE__*/React.createElement(LockIcon, {
3196
+ return /*#__PURE__*/React__default["default"].createElement(LockIcon, {
3186
3197
  width: width,
3187
3198
  height: height,
3188
3199
  color: color,
@@ -3190,7 +3201,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
3190
3201
  });
3191
3202
 
3192
3203
  case "key":
3193
- return /*#__PURE__*/React.createElement(KeyIcon, {
3204
+ return /*#__PURE__*/React__default["default"].createElement(KeyIcon, {
3194
3205
  width: width,
3195
3206
  height: height,
3196
3207
  color: color,
@@ -3198,7 +3209,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
3198
3209
  });
3199
3210
 
3200
3211
  default:
3201
- return /*#__PURE__*/React.createElement(StarIcon, {
3212
+ return /*#__PURE__*/React__default["default"].createElement(StarIcon, {
3202
3213
  width: width,
3203
3214
  height: height,
3204
3215
  color: color,
@@ -3207,21 +3218,21 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
3207
3218
  }
3208
3219
  };
3209
3220
  PremiumStoryIcon.propTypes = {
3210
- width: PropTypes.string,
3211
- height: PropTypes.string,
3212
- color: PropTypes.string,
3213
- iconType: PropTypes.string,
3214
- positionTop: PropTypes.string
3221
+ width: PropTypes__default["default"].string,
3222
+ height: PropTypes__default["default"].string,
3223
+ color: PropTypes__default["default"].string,
3224
+ iconType: PropTypes__default["default"].string,
3225
+ positionTop: PropTypes__default["default"].string
3215
3226
  };
3216
3227
 
3217
3228
  function LiveIcon() {
3218
- return /*#__PURE__*/React.createElement("svg", {
3229
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3219
3230
  className: "live-icon",
3220
3231
  xmlns: "http://www.w3.org/2000/svg",
3221
3232
  width: "25",
3222
3233
  height: "24",
3223
3234
  viewBox: "0 0 25 24"
3224
- }, /*#__PURE__*/React.createElement("path", {
3235
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3225
3236
  fill: "#ff5858",
3226
3237
  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"
3227
3238
  }));
@@ -3278,37 +3289,37 @@ var Headline = function Headline(_ref) {
3278
3289
  var wrapperClass = premiumStory ? "wrapper" : "";
3279
3290
  var iconSize = "24px";
3280
3291
  var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get_1(story, ["metadata", "is-closed"], false);
3281
- return /*#__PURE__*/React.createElement("div", {
3292
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3282
3293
  "data-test-id": "headline",
3283
3294
  className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap$c)
3284
- }, premiumStory && /*#__PURE__*/React.createElement(PremiumStoryIcon, {
3295
+ }, premiumStory && /*#__PURE__*/React__default["default"].createElement(PremiumStoryIcon, {
3285
3296
  width: iconSize,
3286
3297
  height: iconSize,
3287
3298
  color: iconColor,
3288
3299
  iconType: iconStyle,
3289
3300
  positionTop: positionHeadline()
3290
- }), isLink ? /*#__PURE__*/React.createElement(Link, {
3301
+ }), isLink ? /*#__PURE__*/React__default["default"].createElement(components.Link, {
3291
3302
  href: getStoryUrl(story, "/".concat(story.slug)),
3292
3303
  externalLink: isExternalStory(story),
3293
3304
  "aria-label": "headline"
3294
- }, /*#__PURE__*/React.createElement(HeaderTag, {
3305
+ }, /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
3295
3306
  className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$c)
3296
- }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline)) : /*#__PURE__*/React.createElement(HeaderTag, {
3307
+ }, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline)) : /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
3297
3308
  className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$c)
3298
- }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline));
3309
+ }, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline));
3299
3310
  };
3300
3311
  Headline.propTypes = {
3301
3312
  /** The Story Object from the API response */
3302
- story: PropTypes.object.isRequired,
3313
+ story: PropTypes__default["default"].object.isRequired,
3303
3314
 
3304
3315
  /** Header tags ranging h1-h6, where h[headerLevel] */
3305
- headerLevel: PropTypes.string,
3306
- premiumStoryIconConfig: PropTypes.shape({
3307
- iconColor: PropTypes.string,
3308
- iconType: PropTypes.string,
3309
- enablePremiumStoryIcon: PropTypes.bool
3316
+ headerLevel: PropTypes__default["default"].string,
3317
+ premiumStoryIconConfig: PropTypes__default["default"].shape({
3318
+ iconColor: PropTypes__default["default"].string,
3319
+ iconType: PropTypes__default["default"].string,
3320
+ enablePremiumStoryIcon: PropTypes__default["default"].bool
3310
3321
  }),
3311
- isLink: PropTypes.bool
3322
+ isLink: PropTypes__default["default"].bool
3312
3323
  };
3313
3324
  Headline.defaultProps = {
3314
3325
  headerLevel: "6",
@@ -3347,26 +3358,26 @@ var LoadmoreButton = function LoadmoreButton(_ref) {
3347
3358
  if (!showButton) return null;
3348
3359
  var textColor = getTextColor(theme);
3349
3360
  var slug = customUrlPath ? "/".concat(customUrlPath) : generateNavigateSlug(collection, _objectSpread$1(_objectSpread$1({}, qtConfig), config));
3350
- return template === "SubsequentLoadCount" ? /*#__PURE__*/React.createElement("div", {
3361
+ return template === "SubsequentLoadCount" ? /*#__PURE__*/React__default["default"].createElement("div", {
3351
3362
  onClick: onClick,
3352
3363
  "data-test-id": "load-more",
3353
3364
  className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap$b)
3354
- }, buttonText) : /*#__PURE__*/React.createElement(LinkBase, {
3365
+ }, buttonText) : /*#__PURE__*/React__default["default"].createElement(components.LinkBase, {
3355
3366
  href: slug,
3356
3367
  navigateTo: navigate,
3357
3368
  "data-test-id": "load-more",
3358
3369
  "aria-label": "load-more"
3359
- }, /*#__PURE__*/React.createElement("div", {
3370
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3360
3371
  className: "arr--button " + _getClassName("button ".concat(textColor, " default"), _styleModuleImportMap$b)
3361
3372
  }, buttonText));
3362
3373
  };
3363
3374
  LoadmoreButton.propTypes = {
3364
- collection: PropTypes.object,
3365
- template: PropTypes.string,
3366
- config: PropTypes.object,
3367
- onClick: PropTypes.func,
3368
- navigate: PropTypes.func,
3369
- qtConfig: PropTypes.object
3375
+ collection: PropTypes__default["default"].object,
3376
+ template: PropTypes__default["default"].string,
3377
+ config: PropTypes__default["default"].object,
3378
+ onClick: PropTypes__default["default"].func,
3379
+ navigate: PropTypes__default["default"].func,
3380
+ qtConfig: PropTypes__default["default"].object
3370
3381
  };
3371
3382
 
3372
3383
  var _styleModuleImportMap$a = {
@@ -3389,7 +3400,7 @@ var Subheadline = function Subheadline(_ref) {
3389
3400
  var subheadline = forceShowAtom || get_1(config, ["showSubheadline"], true);
3390
3401
  if (!subheadline) return null;
3391
3402
  var textColor = getTextColor(config.theme);
3392
- return /*#__PURE__*/React.createElement("div", {
3403
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3393
3404
  style: {
3394
3405
  WebkitLineClamp: lineClamp
3395
3406
  },
@@ -3399,15 +3410,15 @@ var Subheadline = function Subheadline(_ref) {
3399
3410
  };
3400
3411
  Subheadline.propTypes = {
3401
3412
  /** The Story Object from the API response */
3402
- story: PropTypes.object.isRequired,
3413
+ story: PropTypes__default["default"].object.isRequired,
3403
3414
  // Restricts the number of lines for subheadline.
3404
- lineClamp: PropTypes.number,
3415
+ lineClamp: PropTypes__default["default"].number,
3405
3416
 
3406
3417
  /** Number of characters to truncate the subheadline */
3407
- truncateChars: PropTypes.number,
3408
- clazzName: PropTypes.string,
3409
- forceShowAtom: PropTypes.bool,
3410
- showFullContent: PropTypes.bool
3418
+ truncateChars: PropTypes__default["default"].number,
3419
+ clazzName: PropTypes__default["default"].string,
3420
+ forceShowAtom: PropTypes__default["default"].bool,
3421
+ showFullContent: PropTypes__default["default"].bool
3411
3422
  };
3412
3423
  Subheadline.defaultProps = {
3413
3424
  forceShowAtom: false,
@@ -3433,18 +3444,18 @@ var TimeStamp = function TimeStamp(_ref) {
3433
3444
  var time = story["last-published-at"] || story["first-published-at"];
3434
3445
  var isBottomClasses = isBottom ? "bottom-fix" : "";
3435
3446
  var textColor = getTextColor(configState.theme);
3436
- return /*#__PURE__*/React.createElement(React.Fragment, null, isTime && /*#__PURE__*/React.createElement("div", {
3447
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isTime && /*#__PURE__*/React__default["default"].createElement("div", {
3437
3448
  "data-test-id": "publish-time",
3438
3449
  className: "time arr--publish-time " + _getClassName("time ".concat(textColor, " ").concat(isBottomClasses), _styleModuleImportMap$9)
3439
- }, /*#__PURE__*/React.createElement("div", {
3450
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3440
3451
  className: "timestamp-m_time-wrapper__3O2lM"
3441
3452
  }, getTimeStamp(time, formatter, config))));
3442
3453
  };
3443
3454
  TimeStamp.propTypes = {
3444
3455
  /** The Story Object from the API response */
3445
- story: PropTypes.object,
3446
- isBottom: PropTypes.bool,
3447
- config: PropTypes.object
3456
+ story: PropTypes__default["default"].object,
3457
+ isBottom: PropTypes__default["default"].bool,
3458
+ config: PropTypes__default["default"].object
3448
3459
  };
3449
3460
 
3450
3461
  var _styleModuleImportMap$8 = {
@@ -3487,10 +3498,10 @@ var AuthorBase = function AuthorBase(_ref) {
3487
3498
  return null;
3488
3499
  }
3489
3500
 
3490
- return /*#__PURE__*/React.createElement("div", {
3501
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3491
3502
  "data-test-id": "author-image",
3492
3503
  className: _getClassName("author-image ".concat(dir, "-image"), _styleModuleImportMap$8)
3493
- }, /*#__PURE__*/React.createElement("figure", null, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
3504
+ }, /*#__PURE__*/React__default["default"].createElement("figure", null, avatarS3Key ? /*#__PURE__*/React__default["default"].createElement(components.ResponsiveImage, {
3494
3505
  slug: avatarS3Key,
3495
3506
  "aspect-ratio": [1, 1],
3496
3507
  defaultWidth: 400,
@@ -3498,14 +3509,14 @@ var AuthorBase = function AuthorBase(_ref) {
3498
3509
  auto: ["format", "compress"]
3499
3510
  },
3500
3511
  alt: authorName
3501
- }) : /*#__PURE__*/React.createElement("img", {
3512
+ }) : /*#__PURE__*/React__default["default"].createElement("img", {
3502
3513
  src: avatarUrl
3503
3514
  })));
3504
3515
  };
3505
3516
 
3506
3517
  var isPrefix = function isPrefix(dir) {
3507
3518
  if (prefix) {
3508
- return /*#__PURE__*/React.createElement("div", {
3519
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3509
3520
  className: "arr-author-prefix " + _getClassName("prefix ".concat(textColor), _styleModuleImportMap$8)
3510
3521
  }, prefix);
3511
3522
  }
@@ -3513,11 +3524,11 @@ var AuthorBase = function AuthorBase(_ref) {
3513
3524
  return !hideAuthorImage && authorImage(dir);
3514
3525
  };
3515
3526
 
3516
- return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement(Link, {
3527
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement(components.Link, {
3517
3528
  href: "".concat(mountAt, "/author/") + slug,
3518
3529
  "aria-label": "author-name",
3519
3530
  className: "author-name arr-author-name arrow-component " + _getClassName("author ".concat(isBottomClasses), _styleModuleImportMap$8)
3520
- }, isPrefix("ltr"), /*#__PURE__*/React.createElement("div", {
3531
+ }, isPrefix("ltr"), /*#__PURE__*/React__default["default"].createElement("div", {
3521
3532
  "data-test-id": "author-name",
3522
3533
  className: "author-name " + _getClassName("author-name ".concat(textColor), _styleModuleImportMap$8)
3523
3534
  }, authorName || story["author-name"]), !prefix && isPrefix("rtl")));
@@ -3529,18 +3540,18 @@ function mapStateToProps(state) {
3529
3540
  };
3530
3541
  }
3531
3542
 
3532
- var Author = connect(mapStateToProps)(AuthorBase);
3543
+ var Author = reactRedux.connect(mapStateToProps)(AuthorBase);
3533
3544
  AuthorBase.propTypes = {
3534
3545
  /** The Story Object from the API response */
3535
- story: PropTypes.object.isRequired,
3546
+ story: PropTypes__default["default"].object.isRequired,
3536
3547
 
3537
3548
  /** Hide Author Avatar Image */
3538
- hideAuthorImage: PropTypes.bool,
3549
+ hideAuthorImage: PropTypes__default["default"].bool,
3539
3550
  // fix Author bottom of the storyCard
3540
- isBottom: PropTypes.bool,
3551
+ isBottom: PropTypes__default["default"].bool,
3541
3552
  // fix prefix before the author name
3542
- prefix: PropTypes.string,
3543
- config: PropTypes.object
3553
+ prefix: PropTypes__default["default"].string,
3554
+ config: PropTypes__default["default"].object
3544
3555
  };
3545
3556
  AuthorBase.defaultProps = {
3546
3557
  hideAuthorImage: false,
@@ -3561,14 +3572,14 @@ var Dot = function Dot(_ref) {
3561
3572
  height = _ref$height === void 0 ? "3px" : _ref$height,
3562
3573
  _ref$color = _ref.color,
3563
3574
  color = _ref$color === void 0 ? "light" : _ref$color;
3564
- return /*#__PURE__*/React.createElement("div", {
3575
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3565
3576
  className: _getClassName(color, _styleModuleImportMap$7)
3566
- }, /*#__PURE__*/React.createElement("svg", {
3577
+ }, /*#__PURE__*/React__default["default"].createElement("svg", {
3567
3578
  xmlns: "http://www.w3.org/2000/svg",
3568
3579
  width: width,
3569
3580
  height: height,
3570
3581
  viewBox: "0 0 3 3"
3571
- }, /*#__PURE__*/React.createElement("circle", {
3582
+ }, /*#__PURE__*/React__default["default"].createElement("circle", {
3572
3583
  cx: "87",
3573
3584
  cy: "9",
3574
3585
  r: "1",
@@ -3579,9 +3590,9 @@ var Dot = function Dot(_ref) {
3579
3590
  };
3580
3591
  Dot.propTypes = {
3581
3592
  /** height , width and color of the dot icon */
3582
- color: PropTypes.string,
3583
- width: PropTypes.string,
3584
- height: PropTypes.string
3593
+ color: PropTypes__default["default"].string,
3594
+ width: PropTypes__default["default"].string,
3595
+ height: PropTypes__default["default"].string
3585
3596
  };
3586
3597
 
3587
3598
  var _styleModuleImportMap$6 = {
@@ -3597,22 +3608,22 @@ var Divider = function Divider(_ref) {
3597
3608
  height = _ref$height === void 0 ? "10" : _ref$height,
3598
3609
  _ref$color = _ref.color,
3599
3610
  color = _ref$color === void 0 ? "light" : _ref$color;
3600
- return /*#__PURE__*/React.createElement("div", {
3611
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3601
3612
  className: _getClassName(color, _styleModuleImportMap$6)
3602
- }, /*#__PURE__*/React.createElement("svg", {
3613
+ }, /*#__PURE__*/React__default["default"].createElement("svg", {
3603
3614
  xmlns: "http://www.w3.org/2000/svg",
3604
3615
  width: width,
3605
3616
  height: height
3606
- }, /*#__PURE__*/React.createElement("path", {
3617
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3607
3618
  fill: "inherit",
3608
3619
  d: "M0 0h1v10H0z"
3609
3620
  })));
3610
3621
  };
3611
3622
  Divider.propTypes = {
3612
3623
  /** height , width and color of the dot icon */
3613
- color: PropTypes.string,
3614
- width: PropTypes.string,
3615
- height: PropTypes.string
3624
+ color: PropTypes__default["default"].string,
3625
+ width: PropTypes__default["default"].string,
3626
+ height: PropTypes__default["default"].string
3616
3627
  };
3617
3628
 
3618
3629
  var _styleModuleImportMap$5 = {
@@ -3635,23 +3646,23 @@ var ReadTime = function ReadTime(_ref) {
3635
3646
  var textColor = isLightTheme ? "light" : getTextColor(config.theme);
3636
3647
  if (!showReadTime || !readTime) return null;
3637
3648
  var timeToRead = get_1(opts, ["localizedTimeToRead"]) || "min read";
3638
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
3649
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
3639
3650
  "data-test-id": "read-time",
3640
3651
  className: "arrow-component arr--read-time " + _getClassName("read-time-wrapper ".concat(textColor), _styleModuleImportMap$5)
3641
- }, /*#__PURE__*/React.createElement("span", {
3652
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
3642
3653
  className: "read-time-indicator read-time-m_dot-indicator__3Sqh2"
3643
- }, /*#__PURE__*/React.createElement(Dot, {
3654
+ }, /*#__PURE__*/React__default["default"].createElement(Dot, {
3644
3655
  color: textColor
3645
- })), /*#__PURE__*/React.createElement("span", null, readTime, " ", timeToRead)));
3656
+ })), /*#__PURE__*/React__default["default"].createElement("span", null, readTime, " ", timeToRead)));
3646
3657
  };
3647
3658
  ReadTime.propTypes = {
3648
- story: PropTypes.shape({
3649
- "read-time": PropTypes.number
3659
+ story: PropTypes__default["default"].shape({
3660
+ "read-time": PropTypes__default["default"].number
3650
3661
  }),
3651
- opts: PropTypes.shape({
3652
- showReadTime: PropTypes.bool
3662
+ opts: PropTypes__default["default"].shape({
3663
+ showReadTime: PropTypes__default["default"].bool
3653
3664
  }),
3654
- isLightTheme: PropTypes.bool
3665
+ isLightTheme: PropTypes__default["default"].bool
3655
3666
  };
3656
3667
 
3657
3668
  var _styleModuleImportMap$4 = {
@@ -3682,33 +3693,33 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
3682
3693
 
3683
3694
  var getSeparator = function getSeparator() {
3684
3695
  if (separator === "divider") {
3685
- return /*#__PURE__*/React.createElement(Divider, {
3696
+ return /*#__PURE__*/React__default["default"].createElement(Divider, {
3686
3697
  color: textColor
3687
3698
  });
3688
3699
  }
3689
3700
 
3690
- return /*#__PURE__*/React.createElement(Dot, {
3701
+ return /*#__PURE__*/React__default["default"].createElement(Dot, {
3691
3702
  color: textColor
3692
3703
  });
3693
3704
  };
3694
3705
 
3695
3706
  var getTimeStamp = function getTimeStamp() {
3696
3707
  if (!isTime) return null;
3697
- return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement("span", {
3708
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement("span", {
3698
3709
  className: "arr-separator " + _getClassName("".concat(seperatorStyle), _styleModuleImportMap$4)
3699
- }, getSeparator()), /*#__PURE__*/React.createElement(TimeStamp, {
3710
+ }, getSeparator()), /*#__PURE__*/React__default["default"].createElement(TimeStamp, {
3700
3711
  story: story,
3701
3712
  config: config
3702
- }), isReadTime && /*#__PURE__*/React.createElement(ReadTime, {
3713
+ }), isReadTime && /*#__PURE__*/React__default["default"].createElement(ReadTime, {
3703
3714
  story: story,
3704
3715
  opts: config,
3705
3716
  isLightTheme: isLightTheme
3706
3717
  }));
3707
3718
  };
3708
3719
 
3709
- return /*#__PURE__*/React.createElement("div", {
3720
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3710
3721
  className: "arr--author-time " + _getClassName("author-time-wrapper ".concat(isBottomClasses), _styleModuleImportMap$4)
3711
- }, isAuthor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Author, {
3722
+ }, isAuthor ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Author, {
3712
3723
  story: story,
3713
3724
  isBottom: true,
3714
3725
  hideAuthorImage: hideAuthorImage,
@@ -3716,19 +3727,19 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
3716
3727
  }), getTimeStamp()) : getTimeStamp());
3717
3728
  };
3718
3729
  AuthorWithTime.propTypes = {
3719
- story: PropTypes.object,
3730
+ story: PropTypes__default["default"].object,
3720
3731
 
3721
3732
  /** Style of separator between the Author & Timestamp */
3722
- separator: PropTypes.oneOf(["dot", "divider"]),
3733
+ separator: PropTypes__default["default"].oneOf(["dot", "divider"]),
3723
3734
 
3724
3735
  /** hide the author image */
3725
- hideAuthorImage: PropTypes.bool,
3736
+ hideAuthorImage: PropTypes__default["default"].bool,
3726
3737
  // fix author and time at the end
3727
- isBottom: PropTypes.bool,
3738
+ isBottom: PropTypes__default["default"].bool,
3728
3739
  // fix prefix before the author name
3729
- prefix: PropTypes.string,
3730
- config: PropTypes.object,
3731
- isLightTheme: PropTypes.bool
3740
+ prefix: PropTypes__default["default"].string,
3741
+ config: PropTypes__default["default"].object,
3742
+ isLightTheme: PropTypes__default["default"].bool
3732
3743
  };
3733
3744
  AuthorWithTime.defaultProps = {
3734
3745
  separator: "dot",
@@ -3745,27 +3756,27 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
3745
3756
  height = _ref$height === void 0 ? 30 : _ref$height,
3746
3757
  _ref$iconColor = _ref.iconColor,
3747
3758
  iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
3748
- return /*#__PURE__*/React.createElement("svg", {
3759
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3749
3760
  width: width,
3750
3761
  height: height,
3751
3762
  viewBox: "0 0 102 76",
3752
3763
  version: "1.1"
3753
- }, /*#__PURE__*/React.createElement("g", {
3764
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3754
3765
  id: "demo-home-copy",
3755
3766
  stroke: "none",
3756
3767
  strokeWidth: "1",
3757
3768
  fill: "none",
3758
3769
  fillRule: "evenodd",
3759
3770
  transform: "translate(-377.000000, -314.000000)"
3760
- }, /*#__PURE__*/React.createElement("g", {
3771
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3761
3772
  id: "Group-13",
3762
3773
  transform: "translate(377.000000, 314.000000)"
3763
- }, /*#__PURE__*/React.createElement("path", {
3774
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3764
3775
  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",
3765
3776
  id: "Combined-Shape",
3766
3777
  fill: iconColor,
3767
3778
  fillRule: "nonzero"
3768
- }), /*#__PURE__*/React.createElement("rect", {
3779
+ }), /*#__PURE__*/React__default["default"].createElement("rect", {
3769
3780
  id: "Rectangle-19",
3770
3781
  stroke: iconColor,
3771
3782
  strokeWidth: "3",
@@ -3777,24 +3788,24 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
3777
3788
  }))));
3778
3789
  };
3779
3790
  ImageFallbackIcon.propTypes = {
3780
- width: PropTypes.object,
3781
- height: PropTypes.object,
3782
- iconColor: PropTypes.object
3791
+ width: PropTypes__default["default"].object,
3792
+ height: PropTypes__default["default"].object,
3793
+ iconColor: PropTypes__default["default"].object
3783
3794
  };
3784
3795
 
3785
3796
  var imageFallback = function imageFallback() {
3786
- return /*#__PURE__*/React.createElement("div", {
3797
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3787
3798
  className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
3788
- }, /*#__PURE__*/React.createElement("figure", {
3799
+ }, /*#__PURE__*/React__default["default"].createElement("figure", {
3789
3800
  className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
3790
- }, /*#__PURE__*/React.createElement(ImageFallbackIcon, null)));
3801
+ }, /*#__PURE__*/React__default["default"].createElement(ImageFallbackIcon, null)));
3791
3802
  };
3792
3803
 
3793
3804
  var FallbackImage = function FallbackImage(_ref) {
3794
3805
  var slug = _ref.slug;
3795
3806
 
3796
3807
  if (slug) {
3797
- return /*#__PURE__*/React.createElement(Link, {
3808
+ return /*#__PURE__*/React__default["default"].createElement(components.Link, {
3798
3809
  href: slug,
3799
3810
  "aria-label": "image-fallback"
3800
3811
  }, imageFallback());
@@ -3803,23 +3814,23 @@ var FallbackImage = function FallbackImage(_ref) {
3803
3814
  }
3804
3815
  };
3805
3816
  FallbackImage.propTypes = {
3806
- slug: PropTypes.string
3817
+ slug: PropTypes__default["default"].string
3807
3818
  };
3808
3819
 
3809
3820
  var HyperLinkIcon = function HyperLinkIcon() {
3810
- return /*#__PURE__*/React.createElement("svg", {
3821
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3811
3822
  xmlns: "http://www.w3.org/2000/svg",
3812
3823
  width: "36",
3813
3824
  height: "28"
3814
- }, /*#__PURE__*/React.createElement("g", {
3825
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3815
3826
  fill: "none",
3816
3827
  fillRule: "evenodd"
3817
- }, /*#__PURE__*/React.createElement("rect", {
3828
+ }, /*#__PURE__*/React__default["default"].createElement("rect", {
3818
3829
  width: "36",
3819
3830
  height: "28",
3820
3831
  fill: "#3D6FCF",
3821
3832
  rx: "4"
3822
- }), /*#__PURE__*/React.createElement("path", {
3833
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
3823
3834
  stroke: "#FFF",
3824
3835
  strokeLinecap: "round",
3825
3836
  strokeLinejoin: "round",
@@ -3832,16 +3843,16 @@ var HyperLink = function HyperLink(_ref) {
3832
3843
  var _ref$hyperLink = _ref.hyperLink,
3833
3844
  hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
3834
3845
  if (!hyperLink) return null;
3835
- return /*#__PURE__*/React.createElement(Link, {
3846
+ return /*#__PURE__*/React__default["default"].createElement(components.Link, {
3836
3847
  href: hyperLink,
3837
3848
  "aria-label": "hyperlink-button",
3838
3849
  className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
3839
3850
  target: "_blank",
3840
3851
  rel: "noopener noreferrer"
3841
- }, /*#__PURE__*/React.createElement(HyperLinkIcon, null));
3852
+ }, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
3842
3853
  };
3843
3854
  HyperLink.propTypes = {
3844
- hyperLink: PropTypes.string
3855
+ hyperLink: PropTypes__default["default"].string
3845
3856
  };
3846
3857
 
3847
3858
  var _styleModuleImportMap$3 = {
@@ -3877,7 +3888,7 @@ var HeroImage = function HeroImage(_ref) {
3877
3888
  StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
3878
3889
  return null;
3879
3890
  } : _config$StoryTemplate;
3880
- var showImagePlaceholder = useSelector(function (state) {
3891
+ var showImagePlaceholder = reactRedux.useSelector(function (state) {
3881
3892
  return get_1(state, ["qt", "config", "showPlaceholder"]);
3882
3893
  });
3883
3894
  var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
@@ -3913,37 +3924,37 @@ var HeroImage = function HeroImage(_ref) {
3913
3924
  var fallbackImage = function fallbackImage() {
3914
3925
  if (!slug) {
3915
3926
  if (fallbackImageUrl && !isStoryPageImage) {
3916
- return /*#__PURE__*/React.createElement("figure", {
3927
+ return /*#__PURE__*/React__default["default"].createElement("figure", {
3917
3928
  style: {
3918
3929
  paddingTop: imagePadding + "%"
3919
3930
  },
3920
3931
  className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$3)
3921
- }, /*#__PURE__*/React.createElement("img", {
3932
+ }, /*#__PURE__*/React__default["default"].createElement("img", {
3922
3933
  className: "qt-image",
3923
3934
  "data-src": "".concat(fallbackImageUrl),
3924
3935
  alt: "image-fallback"
3925
3936
  }));
3926
3937
  }
3927
3938
 
3928
- return /*#__PURE__*/React.createElement(React.Fragment, null, defaultFallback ? /*#__PURE__*/React.createElement("div", {
3939
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, defaultFallback ? /*#__PURE__*/React__default["default"].createElement("div", {
3929
3940
  "data-test-id": "arr--fallback-hero-image",
3930
3941
  style: {
3931
3942
  paddingTop: imagePadding + "%"
3932
3943
  },
3933
3944
  className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$3)
3934
- }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
3945
+ }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
3935
3946
  storyTemplate: story["story-template"]
3936
- }), /*#__PURE__*/React.createElement(FallbackImage, null)) : null);
3947
+ }), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
3937
3948
  }
3938
3949
 
3939
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figure", {
3950
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("figure", {
3940
3951
  style: {
3941
3952
  paddingTop: imagePadding + "%"
3942
3953
  },
3943
3954
  className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$3)
3944
- }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
3955
+ }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
3945
3956
  storyTemplate: story["story-template"]
3946
- }), /*#__PURE__*/React.createElement(ResponsiveHeroImage, {
3957
+ }), /*#__PURE__*/React__default["default"].createElement(components.ResponsiveHeroImage, {
3947
3958
  story: story,
3948
3959
  aspectRatio: imageAspectRatio,
3949
3960
  defaultWidth: defaultWidth,
@@ -3952,15 +3963,15 @@ var HeroImage = function HeroImage(_ref) {
3952
3963
  auto: ["format", "compress"],
3953
3964
  fit: "max"
3954
3965
  }
3955
- })), isStoryPageImage && hyperLink && /*#__PURE__*/React.createElement(HyperLink, {
3966
+ })), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
3956
3967
  hyperLink: hyperLink
3957
3968
  }));
3958
3969
  };
3959
3970
 
3960
- return story && (isStoryPageImage ? /*#__PURE__*/React.createElement("div", {
3971
+ return story && (isStoryPageImage ? /*#__PURE__*/React__default["default"].createElement("div", {
3961
3972
  "data-test-id": "arr--hero-image",
3962
3973
  className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$3)
3963
- }, fallbackImage()) : /*#__PURE__*/React.createElement(Link, {
3974
+ }, fallbackImage()) : /*#__PURE__*/React__default["default"].createElement(components.Link, {
3964
3975
  "data-test-id": "arr--hero-image",
3965
3976
  href: getStoryUrl(story, "/".concat(story.slug)),
3966
3977
  externalLink: isExternalStory(story),
@@ -3970,30 +3981,30 @@ var HeroImage = function HeroImage(_ref) {
3970
3981
  };
3971
3982
  HeroImage.propTypes = {
3972
3983
  /** The Story Object from the API response */
3973
- story: PropTypes.object.isRequired,
3984
+ story: PropTypes__default["default"].object.isRequired,
3974
3985
 
3975
3986
  /** Removes the Hero Image padding for the image to bleed over the margin */
3976
- FullBleed: PropTypes.bool,
3987
+ FullBleed: PropTypes__default["default"].bool,
3977
3988
 
3978
3989
  /** The default width for the image, in case the browser does not support srcset */
3979
- defaultWidth: PropTypes.number,
3990
+ defaultWidth: PropTypes__default["default"].number,
3980
3991
 
3981
3992
  /** The list of available widths */
3982
- widths: PropTypes.array,
3993
+ widths: PropTypes__default["default"].array,
3983
3994
  // fatch the correct hero image
3984
- aspectRatio: PropTypes.array,
3995
+ aspectRatio: PropTypes__default["default"].array,
3985
3996
  // Hints for the browser to choose the best size
3986
3997
 
3987
3998
  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image */
3988
- isHorizontal: PropTypes.bool,
3999
+ isHorizontal: PropTypes__default["default"].bool,
3989
4000
 
3990
4001
  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
3991
- isHorizontalMobile: PropTypes.bool,
4002
+ isHorizontalMobile: PropTypes__default["default"].bool,
3992
4003
  // this prop is responsive for rendering fallback image on story page
3993
- defaultFallback: PropTypes.bool,
3994
- isHorizontalWithImageLast: PropTypes.bool,
3995
- isStoryPageImage: PropTypes.bool,
3996
- config: PropTypes.object
4004
+ defaultFallback: PropTypes__default["default"].bool,
4005
+ isHorizontalWithImageLast: PropTypes__default["default"].bool,
4006
+ isStoryPageImage: PropTypes__default["default"].bool,
4007
+ config: PropTypes__default["default"].object
3997
4008
  };
3998
4009
  HeroImage.defaultProps = {
3999
4010
  FullBleed: true,
@@ -4043,22 +4054,22 @@ var SectionTag = function SectionTag(_ref) {
4043
4054
  }
4044
4055
 
4045
4056
  if (!isSection) return null;
4046
- return /*#__PURE__*/React.createElement(Link, {
4057
+ return /*#__PURE__*/React__default["default"].createElement(components.Link, {
4047
4058
  href: getUrl,
4048
4059
  className: "arrow-component arr--section-name",
4049
4060
  "aria-label": "section-name"
4050
- }, /*#__PURE__*/React.createElement("div", {
4061
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
4051
4062
  "data-test-id": "sectionTag",
4052
4063
  style: {
4053
4064
  backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
4054
4065
  },
4055
4066
  className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$2)
4056
- }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React.createElement("span", {
4067
+ }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
4057
4068
  className: "section-m_border-left__2oUyp",
4058
4069
  style: {
4059
4070
  color: sectionTagBorderColor
4060
4071
  }
4061
- }), section["display-name"] || section["name"], /*#__PURE__*/React.createElement("div", {
4072
+ }), section["display-name"] || section["name"], /*#__PURE__*/React__default["default"].createElement("div", {
4062
4073
  className: "section-m_border-bottom__3cRoD",
4063
4074
  style: {
4064
4075
  backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
@@ -4067,13 +4078,13 @@ var SectionTag = function SectionTag(_ref) {
4067
4078
  };
4068
4079
  SectionTag.propTypes = {
4069
4080
  /** The Story Object from the API response */
4070
- story: PropTypes.object.isRequired,
4081
+ story: PropTypes__default["default"].object.isRequired,
4071
4082
 
4072
4083
  /** The style template for section tag */
4073
- template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
4074
- borderColor: PropTypes.string,
4075
- solidBorderColor: PropTypes.string,
4076
- isLightTheme: PropTypes.bool
4084
+ template: PropTypes__default["default"].oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
4085
+ borderColor: PropTypes__default["default"].string,
4086
+ solidBorderColor: PropTypes__default["default"].string,
4087
+ isLightTheme: PropTypes__default["default"].bool
4077
4088
  };
4078
4089
  SectionTag.defaultProps = {
4079
4090
  template: "",
@@ -4122,7 +4133,7 @@ var StoryCard = function StoryCard(_ref) {
4122
4133
  prefix = _ref.prefix,
4123
4134
  config = _ref.config,
4124
4135
  isHorizontalWithImageLast = _ref.isHorizontalWithImageLast;
4125
- if (!story || isEmpty(story)) return /*#__PURE__*/React.createElement("div", null);
4136
+ if (!story || isEmpty(story)) return /*#__PURE__*/React__default["default"].createElement("div", null);
4126
4137
  var borderOptions = ["default", "full", "bottom", "boxShadow"];
4127
4138
  var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : ""; // TODO optimize conditions
4128
4139
 
@@ -4132,7 +4143,7 @@ var StoryCard = function StoryCard(_ref) {
4132
4143
  var bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
4133
4144
  var textColor = getTextColor(theme);
4134
4145
  var horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
4135
- var defaultStorycard = /*#__PURE__*/React.createElement(DefaultStoryCard, {
4146
+ var defaultStorycard = /*#__PURE__*/React__default["default"].createElement(DefaultStoryCard, {
4136
4147
  story: story,
4137
4148
  aspectRatio: aspectRatio,
4138
4149
  border: border,
@@ -4146,7 +4157,7 @@ var StoryCard = function StoryCard(_ref) {
4146
4157
  config: config,
4147
4158
  isHorizontalWithImageLast: isHorizontalWithImageLast
4148
4159
  });
4149
- return /*#__PURE__*/React.createElement("div", {
4160
+ return /*#__PURE__*/React__default["default"].createElement("div", {
4150
4161
  "data-test-id": "story-card",
4151
4162
  style: {
4152
4163
  backgroundColor: theme,
@@ -4175,91 +4186,91 @@ var DefaultStoryCard = function DefaultStoryCard(_ref2) {
4175
4186
  var SectionTagborderColor = rgbToHex(borderColor);
4176
4187
  var _config$localizationC = config.localizationConfig,
4177
4188
  localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
4178
- return /*#__PURE__*/React.createElement(React.Fragment, null, isHorizontal ? /*#__PURE__*/React.createElement(HeroImage, {
4189
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isHorizontal ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
4179
4190
  config: config,
4180
4191
  story: story,
4181
4192
  isHorizontal: true,
4182
4193
  isHorizontalMobile: isHorizontalMobile,
4183
4194
  aspectRatio: aspectRatio
4184
- }) : isHorizontalWithImageLast ? /*#__PURE__*/React.createElement(HeroImage, {
4195
+ }) : isHorizontalWithImageLast ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
4185
4196
  config: config,
4186
4197
  story: story,
4187
4198
  isHorizontalWithImageLast: true,
4188
4199
  isHorizontalMobile: isHorizontalMobile,
4189
4200
  aspectRatio: aspectRatio
4190
- }) : /*#__PURE__*/React.createElement(HeroImage, {
4201
+ }) : /*#__PURE__*/React__default["default"].createElement(HeroImage, {
4191
4202
  story: story,
4192
4203
  config: config,
4193
4204
  isHorizontalMobile: isHorizontalMobile,
4194
4205
  aspectRatio: aspectRatio
4195
- }), /*#__PURE__*/React.createElement("div", {
4206
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
4196
4207
  className: "arr--story-content " + _getClassName("content ".concat(alignment), _styleModuleImportMap$1)
4197
- }, /*#__PURE__*/React.createElement(SectionTag, {
4208
+ }, /*#__PURE__*/React__default["default"].createElement(SectionTag, {
4198
4209
  story: story,
4199
4210
  borderColor: SectionTagborderColor
4200
- }), /*#__PURE__*/React.createElement(Headline, {
4211
+ }), /*#__PURE__*/React__default["default"].createElement(Headline, {
4201
4212
  story: story,
4202
4213
  headerLevel: headerLevel,
4203
4214
  premiumStoryIconConfig: config
4204
- }), /*#__PURE__*/React.createElement(AuthorWithTime, {
4215
+ }), /*#__PURE__*/React__default["default"].createElement(AuthorWithTime, {
4205
4216
  config: localizationConfig,
4206
4217
  story: story,
4207
4218
  isBottom: true,
4208
4219
  prefix: prefix,
4209
4220
  hideAuthorImage: hideAuthorImage
4210
- }), /*#__PURE__*/React.createElement(Subheadline, {
4221
+ }), /*#__PURE__*/React__default["default"].createElement(Subheadline, {
4211
4222
  story: story
4212
4223
  })));
4213
4224
  };
4214
4225
 
4215
4226
  DefaultStoryCard.propTypes = {
4216
- story: PropTypes.object.isRequired,
4217
- border: PropTypes.oneOfType([PropTypes.string]),
4218
- isBottom: PropTypes.bool,
4219
- isHorizontal: PropTypes.bool,
4220
- aspectRatio: PropTypes.oneOfType([PropTypes.array]),
4221
- isHorizontalMobile: PropTypes.bool,
4222
- centerAlign: PropTypes.bool,
4223
- headerLevel: PropTypes.string,
4224
- borderColor: PropTypes.string,
4225
- hideAuthorImage: PropTypes.bool,
4226
- prefix: PropTypes.string,
4227
- config: PropTypes.object,
4228
- isHorizontalWithImageLast: PropTypes.bool
4227
+ story: PropTypes__default["default"].object.isRequired,
4228
+ border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
4229
+ isBottom: PropTypes__default["default"].bool,
4230
+ isHorizontal: PropTypes__default["default"].bool,
4231
+ aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
4232
+ isHorizontalMobile: PropTypes__default["default"].bool,
4233
+ centerAlign: PropTypes__default["default"].bool,
4234
+ headerLevel: PropTypes__default["default"].string,
4235
+ borderColor: PropTypes__default["default"].string,
4236
+ hideAuthorImage: PropTypes__default["default"].bool,
4237
+ prefix: PropTypes__default["default"].string,
4238
+ config: PropTypes__default["default"].object,
4239
+ isHorizontalWithImageLast: PropTypes__default["default"].bool
4229
4240
  };
4230
4241
  StoryCard.propTypes = {
4231
4242
  /** The Story Object from the API response */
4232
- story: PropTypes.object.isRequired,
4233
- children: PropTypes.node,
4243
+ story: PropTypes__default["default"].object.isRequired,
4244
+ children: PropTypes__default["default"].node,
4234
4245
 
4235
4246
  /** Flip the Story Card to Horizonal mode */
4236
- isHorizontal: PropTypes.bool,
4247
+ isHorizontal: PropTypes__default["default"].bool,
4237
4248
 
4238
4249
  /** Add border to the Story Card */
4239
- border: PropTypes.oneOfType([PropTypes.string]),
4250
+ border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
4240
4251
  // story card with background image
4241
- useImageAsBackground: PropTypes.bool,
4252
+ useImageAsBackground: PropTypes__default["default"].bool,
4242
4253
  // story card content overlap with image
4243
- bgImgContentOverlap: PropTypes.bool,
4254
+ bgImgContentOverlap: PropTypes__default["default"].bool,
4244
4255
 
4245
4256
  /** add aspect ratio for hero image */
4246
- aspectRatio: PropTypes.oneOfType([PropTypes.array]),
4257
+ aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
4247
4258
 
4248
4259
  /** add theme(dark /light/custom color) for storycard */
4249
- theme: PropTypes.string,
4260
+ theme: PropTypes__default["default"].string,
4250
4261
 
4251
4262
  /** flip the story card mobile design horizontal */
4252
- isHorizontalMobile: PropTypes.bool,
4263
+ isHorizontalMobile: PropTypes__default["default"].bool,
4253
4264
  // make content center align in desktop and left align in mobile
4254
- centerAlign: PropTypes.bool,
4255
- headerLevel: PropTypes.string,
4256
- borderColor: PropTypes.string,
4265
+ centerAlign: PropTypes__default["default"].bool,
4266
+ headerLevel: PropTypes__default["default"].string,
4267
+ borderColor: PropTypes__default["default"].string,
4257
4268
  // handle author image through storycard
4258
- hideAuthorImage: PropTypes.bool,
4269
+ hideAuthorImage: PropTypes__default["default"].bool,
4259
4270
  // handle author prefix through storycard
4260
- prefix: PropTypes.string,
4261
- config: PropTypes.object,
4262
- isHorizontalWithImageLast: PropTypes.bool
4271
+ prefix: PropTypes__default["default"].string,
4272
+ config: PropTypes__default["default"].object,
4273
+ isHorizontalWithImageLast: PropTypes__default["default"].bool
4263
4274
  };
4264
4275
  StoryCard.defaultProps = {
4265
4276
  isHorizontal: false,
@@ -4275,20 +4286,20 @@ var Loading = function Loading(_ref) {
4275
4286
  _ref.width;
4276
4287
  _ref.height;
4277
4288
  _ref.iconColor;
4278
- return /*#__PURE__*/React.createElement("div", {
4289
+ return /*#__PURE__*/React__default["default"].createElement("div", {
4279
4290
  className: "loading-m_loading-indicator__2Dlst"
4280
- }, /*#__PURE__*/React.createElement("svg", {
4291
+ }, /*#__PURE__*/React__default["default"].createElement("svg", {
4281
4292
  width: "40",
4282
4293
  height: "40",
4283
4294
  xmlns: "http://www.w3.org/2000/svg",
4284
4295
  viewBox: "0 0 100 100",
4285
4296
  preserveAspectRatio: "xMidYMid"
4286
- }, /*#__PURE__*/React.createElement("circle", {
4297
+ }, /*#__PURE__*/React__default["default"].createElement("circle", {
4287
4298
  cx: "84",
4288
4299
  cy: "50",
4289
4300
  r: "0",
4290
4301
  fill: "currentColor"
4291
- }, /*#__PURE__*/React.createElement("animate", {
4302
+ }, /*#__PURE__*/React__default["default"].createElement("animate", {
4292
4303
  attributeName: "r",
4293
4304
  values: "10;0;0;0;0",
4294
4305
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4297,7 +4308,7 @@ var Loading = function Loading(_ref) {
4297
4308
  dur: "2s",
4298
4309
  repeatCount: "indefinite",
4299
4310
  begin: "0s"
4300
- }), /*#__PURE__*/React.createElement("animate", {
4311
+ }), /*#__PURE__*/React__default["default"].createElement("animate", {
4301
4312
  attributeName: "cx",
4302
4313
  values: "84;84;84;84;84",
4303
4314
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4306,12 +4317,12 @@ var Loading = function Loading(_ref) {
4306
4317
  dur: "2s",
4307
4318
  repeatCount: "indefinite",
4308
4319
  begin: "0s"
4309
- })), /*#__PURE__*/React.createElement("circle", {
4320
+ })), /*#__PURE__*/React__default["default"].createElement("circle", {
4310
4321
  cx: "84",
4311
4322
  cy: "50",
4312
4323
  r: ".709",
4313
4324
  fill: "currentColor"
4314
- }, /*#__PURE__*/React.createElement("animate", {
4325
+ }, /*#__PURE__*/React__default["default"].createElement("animate", {
4315
4326
  attributeName: "r",
4316
4327
  values: "0;10;10;10;0",
4317
4328
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4320,7 +4331,7 @@ var Loading = function Loading(_ref) {
4320
4331
  dur: "2s",
4321
4332
  repeatCount: "indefinite",
4322
4333
  begin: "-1s"
4323
- }), /*#__PURE__*/React.createElement("animate", {
4334
+ }), /*#__PURE__*/React__default["default"].createElement("animate", {
4324
4335
  attributeName: "cx",
4325
4336
  values: "16;16;50;84;84",
4326
4337
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4329,12 +4340,12 @@ var Loading = function Loading(_ref) {
4329
4340
  dur: "2s",
4330
4341
  repeatCount: "indefinite",
4331
4342
  begin: "-1s"
4332
- })), /*#__PURE__*/React.createElement("circle", {
4343
+ })), /*#__PURE__*/React__default["default"].createElement("circle", {
4333
4344
  cx: "81.59",
4334
4345
  cy: "50",
4335
4346
  r: "10",
4336
4347
  fill: "currentColor"
4337
- }, /*#__PURE__*/React.createElement("animate", {
4348
+ }, /*#__PURE__*/React__default["default"].createElement("animate", {
4338
4349
  attributeName: "r",
4339
4350
  values: "0;10;10;10;0",
4340
4351
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4343,7 +4354,7 @@ var Loading = function Loading(_ref) {
4343
4354
  dur: "2s",
4344
4355
  repeatCount: "indefinite",
4345
4356
  begin: "-0.5s"
4346
- }), /*#__PURE__*/React.createElement("animate", {
4357
+ }), /*#__PURE__*/React__default["default"].createElement("animate", {
4347
4358
  attributeName: "cx",
4348
4359
  values: "16;16;50;84;84",
4349
4360
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4352,12 +4363,12 @@ var Loading = function Loading(_ref) {
4352
4363
  dur: "2s",
4353
4364
  repeatCount: "indefinite",
4354
4365
  begin: "-0.5s"
4355
- })), /*#__PURE__*/React.createElement("circle", {
4366
+ })), /*#__PURE__*/React__default["default"].createElement("circle", {
4356
4367
  cx: "47.59",
4357
4368
  cy: "50",
4358
4369
  r: "10",
4359
4370
  fill: "currentColor"
4360
- }, /*#__PURE__*/React.createElement("animate", {
4371
+ }, /*#__PURE__*/React__default["default"].createElement("animate", {
4361
4372
  attributeName: "r",
4362
4373
  values: "0;10;10;10;0",
4363
4374
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4366,7 +4377,7 @@ var Loading = function Loading(_ref) {
4366
4377
  dur: "2s",
4367
4378
  repeatCount: "indefinite",
4368
4379
  begin: "0s"
4369
- }), /*#__PURE__*/React.createElement("animate", {
4380
+ }), /*#__PURE__*/React__default["default"].createElement("animate", {
4370
4381
  attributeName: "cx",
4371
4382
  values: "16;16;50;84;84",
4372
4383
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4375,12 +4386,12 @@ var Loading = function Loading(_ref) {
4375
4386
  dur: "2s",
4376
4387
  repeatCount: "indefinite",
4377
4388
  begin: "0s"
4378
- })), /*#__PURE__*/React.createElement("circle", {
4389
+ })), /*#__PURE__*/React__default["default"].createElement("circle", {
4379
4390
  cx: "16",
4380
4391
  cy: "50",
4381
4392
  r: "9.291",
4382
4393
  fill: "currentColor"
4383
- }, /*#__PURE__*/React.createElement("animate", {
4394
+ }, /*#__PURE__*/React__default["default"].createElement("animate", {
4384
4395
  attributeName: "r",
4385
4396
  values: "0;0;10;10;10",
4386
4397
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4389,7 +4400,7 @@ var Loading = function Loading(_ref) {
4389
4400
  dur: "2s",
4390
4401
  repeatCount: "indefinite",
4391
4402
  begin: "0s"
4392
- }), /*#__PURE__*/React.createElement("animate", {
4403
+ }), /*#__PURE__*/React__default["default"].createElement("animate", {
4393
4404
  attributeName: "cx",
4394
4405
  values: "16;16;16;50;84",
4395
4406
  keyTimes: "0;0.25;0.5;0.75;1",
@@ -4401,9 +4412,9 @@ var Loading = function Loading(_ref) {
4401
4412
  }))));
4402
4413
  };
4403
4414
  Loading.propTypes = {
4404
- width: PropTypes.object,
4405
- height: PropTypes.object,
4406
- iconColor: PropTypes.object
4415
+ width: PropTypes__default["default"].object,
4416
+ height: PropTypes__default["default"].object,
4417
+ iconColor: PropTypes__default["default"].object
4407
4418
  };
4408
4419
 
4409
4420
  var _styleModuleImportMap = {
@@ -4448,22 +4459,22 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
4448
4459
  _config$slotConfig = config.slotConfig,
4449
4460
  slotConfig = _config$slotConfig === void 0 ? [] : _config$slotConfig;
4450
4461
 
4451
- var _useState = useState([]),
4462
+ var _useState = React.useState([]),
4452
4463
  _useState2 = _slicedToArray(_useState, 2),
4453
4464
  subCollectionStories = _useState2[0],
4454
4465
  handleApiData = _useState2[1];
4455
4466
 
4456
- var _useState3 = useState({}),
4467
+ var _useState3 = React.useState({}),
4457
4468
  _useState4 = _slicedToArray(_useState3, 2),
4458
4469
  cachedStories = _useState4[0],
4459
4470
  updateCachedStories = _useState4[1];
4460
4471
 
4461
- var _useState5 = useState(0),
4472
+ var _useState5 = React.useState(0),
4462
4473
  _useState6 = _slicedToArray(_useState5, 2),
4463
4474
  active = _useState6[0],
4464
4475
  handleActive = _useState6[1];
4465
4476
 
4466
- var _useState7 = useState(true),
4477
+ var _useState7 = React.useState(true),
4467
4478
  _useState8 = _slicedToArray(_useState7, 2),
4468
4479
  loading = _useState8[0],
4469
4480
  handleLoading = _useState8[1];
@@ -4519,7 +4530,7 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
4519
4530
  }
4520
4531
 
4521
4532
  _context.next = 7;
4522
- return axios.get("/api/v1/collections/".concat(id, "?limit=7"));
4533
+ return axios__default["default"].get("/api/v1/collections/".concat(id, "?limit=7"));
4523
4534
 
4524
4535
  case 7:
4525
4536
  res = _context.sent;
@@ -4532,7 +4543,7 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
4532
4543
 
4533
4544
  case 12:
4534
4545
  memoizeStories(id, data);
4535
- childCollectionItems = collectionToStories(data);
4546
+ childCollectionItems = components.collectionToStories(data);
4536
4547
  handleLoading(false);
4537
4548
  handleApiData(childCollectionItems);
4538
4549
  _context.next = 21;
@@ -4554,11 +4565,11 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
4554
4565
  return _fetchSubCollectionData.apply(this, arguments);
4555
4566
  }
4556
4567
 
4557
- useEffect(function (id) {
4568
+ React.useEffect(function (id) {
4558
4569
  fetchSubCollectionData(id);
4559
4570
  }, []);
4560
- var dispatch = useDispatch();
4561
- var qtConfig = useSelector(function (state) {
4571
+ var dispatch = reactRedux.useDispatch();
4572
+ var qtConfig = reactRedux.useSelector(function (state) {
4562
4573
  return get_1(state, ["qt", "config"], {});
4563
4574
  });
4564
4575
  var url = generateNavigateSlug(getFilteredCollection[active], qtConfig);
@@ -4572,29 +4583,29 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
4572
4583
  handleActive(activeIndex);
4573
4584
  };
4574
4585
 
4575
- return /*#__PURE__*/React.createElement("div", {
4586
+ return /*#__PURE__*/React__default["default"].createElement("div", {
4576
4587
  className: "full-width-with-padding arrow-component",
4577
4588
  "data-test-id": "astrology-collection",
4578
4589
  style: {
4579
4590
  backgroundColor: theme,
4580
4591
  color: textColor
4581
4592
  }
4582
- }, /*#__PURE__*/React.createElement("div", {
4593
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
4583
4594
  className: "astrology-collection-m_wrapper__ywsE4"
4584
- }, /*#__PURE__*/React.createElement(CollectionName, {
4595
+ }, /*#__PURE__*/React__default["default"].createElement(CollectionName, {
4585
4596
  collection: collection,
4586
4597
  collectionNameTemplate: collectionNameTemplate,
4587
4598
  collectionNameBorderColor: collectionNameBorderColor
4588
- }), collection.summary && /*#__PURE__*/React.createElement("div", {
4599
+ }), collection.summary && /*#__PURE__*/React__default["default"].createElement("div", {
4589
4600
  "data-test-id": "astrology-collection-summary",
4590
4601
  className: _getClassName("collection-summary ".concat(textColor), _styleModuleImportMap)
4591
- }, collection.summary), /*#__PURE__*/React.createElement("div", {
4602
+ }, collection.summary), /*#__PURE__*/React__default["default"].createElement("div", {
4592
4603
  className: "astrology-collection-m_tab__23HlB",
4593
4604
  "data-test-id": "collection-tab"
4594
- }, /*#__PURE__*/React.createElement("ul", {
4605
+ }, /*#__PURE__*/React__default["default"].createElement("ul", {
4595
4606
  className: "astrology-collection-m_child-collections__2RMob"
4596
4607
  }, getFilteredCollection.map(function (subCollections, index) {
4597
- return /*#__PURE__*/React.createElement("li", {
4608
+ return /*#__PURE__*/React__default["default"].createElement("li", {
4598
4609
  key: "tab-".concat(index),
4599
4610
  onClick: function onClick(event) {
4600
4611
  return openChildCollectionItems(event, index, subCollections.id);
@@ -4602,32 +4613,32 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
4602
4613
  "data-test-id": subCollections.name,
4603
4614
  className: _getClassName("child-collection ".concat(textColor, " ").concat(index === active ? "open-subchild" : ""), _styleModuleImportMap)
4604
4615
  }, subCollections.name);
4605
- }))), /*#__PURE__*/React.createElement("div", {
4616
+ }))), /*#__PURE__*/React__default["default"].createElement("div", {
4606
4617
  className: _getClassName(isAdWidgetEnabled ? "main-wrapper" : "main-wrapper-container", _styleModuleImportMap)
4607
- }, /*#__PURE__*/React.createElement("div", null, loading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement("div", {
4618
+ }, /*#__PURE__*/React__default["default"].createElement("div", null, loading ? /*#__PURE__*/React__default["default"].createElement(Loading, null) : /*#__PURE__*/React__default["default"].createElement("div", {
4608
4619
  className: "astrology-collection-m_subCollection-stories__2CcHk"
4609
- }, items.length === 0 && /*#__PURE__*/React.createElement("p", {
4620
+ }, items.length === 0 && /*#__PURE__*/React__default["default"].createElement("p", {
4610
4621
  className: "astrology-collection-m_nomore-stories__1Rxb8"
4611
4622
  }, "No more stories to load."), items.map(function (story, index) {
4612
- return /*#__PURE__*/React.createElement("div", {
4623
+ return /*#__PURE__*/React__default["default"].createElement("div", {
4613
4624
  className: "astrology-collection-m_card__20FnI",
4614
4625
  key: "card-".concat(index)
4615
- }, /*#__PURE__*/React.createElement(StoryCard, {
4626
+ }, /*#__PURE__*/React__default["default"].createElement(StoryCard, {
4616
4627
  story: story,
4617
4628
  border: border,
4618
4629
  theme: theme,
4619
4630
  config: config
4620
- }, /*#__PURE__*/React.createElement(HeroImage, {
4631
+ }, /*#__PURE__*/React__default["default"].createElement(HeroImage, {
4621
4632
  story: story,
4622
4633
  aspectRatio: [[1, 1]]
4623
- }), /*#__PURE__*/React.createElement(Headline, {
4634
+ }), /*#__PURE__*/React__default["default"].createElement(Headline, {
4624
4635
  story: story,
4625
4636
  headerLevel: 6,
4626
4637
  premiumStoryIconConfig: config
4627
4638
  })));
4628
- }))), isAdWidgetEnabled && /*#__PURE__*/React.createElement("div", {
4639
+ }))), isAdWidgetEnabled && /*#__PURE__*/React__default["default"].createElement("div", {
4629
4640
  className: "astrology-collection-m_ads__2XMEk"
4630
- }, " ", adWidgetSlot)), items.length >= 12 && /*#__PURE__*/React.createElement(LoadmoreButton, {
4641
+ }, " ", adWidgetSlot)), items.length >= 12 && /*#__PURE__*/React__default["default"].createElement(LoadmoreButton, {
4631
4642
  collection: getFilteredCollection[active],
4632
4643
  template: footerButton,
4633
4644
  config: config,
@@ -4639,16 +4650,16 @@ var AstrologyCollectionBase = function AstrologyCollectionBase(_ref) {
4639
4650
  };
4640
4651
  AstrologyCollectionBase.propTypes = {
4641
4652
  /** collection is the array of objects which is returning by API */
4642
- collection: PropTypes.object.isRequired,
4653
+ collection: PropTypes__default["default"].object.isRequired,
4643
4654
 
4644
4655
  /** The config for the Row */
4645
- config: PropTypes.shape({
4656
+ config: PropTypes__default["default"].shape({
4646
4657
  // background color of the row
4647
- theme: PropTypes.string,
4648
- border: PropTypes.string,
4649
- collectionNameTemplate: PropTypes.string,
4650
- footerButton: PropTypes.string,
4651
- collectionNameBorderColor: PropTypes.string
4658
+ theme: PropTypes__default["default"].string,
4659
+ border: PropTypes__default["default"].string,
4660
+ collectionNameTemplate: PropTypes__default["default"].string,
4661
+ footerButton: PropTypes__default["default"].string,
4662
+ collectionNameBorderColor: PropTypes__default["default"].string
4652
4663
  })
4653
4664
  };
4654
4665
  AstrologyCollectionBase.defaultProps = {
@@ -4658,4 +4669,5 @@ AstrologyCollectionBase.defaultProps = {
4658
4669
  };
4659
4670
  var AstrologyCollection = StateProvider(AstrologyCollectionBase);
4660
4671
 
4661
- export { AstrologyCollection, AstrologyCollectionBase };
4672
+ exports.AstrologyCollection = AstrologyCollection;
4673
+ exports.AstrologyCollectionBase = AstrologyCollectionBase;