@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,9 +1,19 @@
1
- import React, { useContext, createContext } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { Link, ResponsiveImage, ResponsiveHeroImage } from '@quintype/components';
4
- import Timeago from 'react-timeago';
5
- import { utcToZonedTime, format } from 'date-fns-tz';
6
- import { connect, useSelector } from 'react-redux';
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var PropTypes = require('prop-types');
7
+ var components = require('@quintype/components');
8
+ var Timeago = require('react-timeago');
9
+ var dateFnsTz = require('date-fns-tz');
10
+ var reactRedux = require('react-redux');
11
+
12
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+
14
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
16
+ var Timeago__default = /*#__PURE__*/_interopDefaultLegacy(Timeago);
7
17
 
8
18
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
9
19
 
@@ -156,9 +166,9 @@ exports["default"] = _default;
156
166
 
157
167
  var _getClassName = /*@__PURE__*/getDefaultExportFromCjs(getClassName);
158
168
 
159
- var StateContext = /*#__PURE__*/createContext(); // eslint-disable-next-line react/display-name
169
+ var StateContext = /*#__PURE__*/React.createContext(); // eslint-disable-next-line react/display-name
160
170
  var useStateValue = function useStateValue() {
161
- return useContext(StateContext);
171
+ return React.useContext(StateContext);
162
172
  };
163
173
 
164
174
  /**
@@ -2635,15 +2645,15 @@ var isEmpty = function isEmpty(value) {
2635
2645
  return value == null || // From standard.js: Always use === - but value == null is allowed to check null || undefined
2636
2646
  _typeof(value) === "object" && Object.entries(value).length === 0 && value.constructor === Object || typeof value === "string" && value.trim().length === 0;
2637
2647
  };
2638
- PropTypes.shape({
2639
- "sketches-host": PropTypes.string,
2640
- "cdn-name": PropTypes.string,
2641
- "cdn-image": PropTypes.string
2648
+ PropTypes__default["default"].shape({
2649
+ "sketches-host": PropTypes__default["default"].string,
2650
+ "cdn-name": PropTypes__default["default"].string,
2651
+ "cdn-image": PropTypes__default["default"].string
2642
2652
  });
2643
- PropTypes.shape({
2644
- headline: PropTypes.string,
2645
- "last-published-at": PropTypes.number,
2646
- subheadline: PropTypes.string
2653
+ PropTypes__default["default"].shape({
2654
+ headline: PropTypes__default["default"].string,
2655
+ "last-published-at": PropTypes__default["default"].number,
2656
+ subheadline: PropTypes__default["default"].string
2647
2657
  });
2648
2658
  var getStoryUrl = function getStoryUrl(story) {
2649
2659
  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
@@ -2655,17 +2665,17 @@ var getTimeStamp = function getTimeStamp(date, _formatter) {
2655
2665
  var timezone = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
2656
2666
 
2657
2667
  if (timezone && template === "story") {
2658
- var zonedTime = timezone && utcToZonedTime(date, timezone);
2659
- var formatZonedTime = zonedTime && format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
2668
+ var zonedTime = timezone && dateFnsTz.utcToZonedTime(date, timezone);
2669
+ var formatZonedTime = zonedTime && dateFnsTz.format(zonedTime, "yyyy-MM-dd'T'HH:mm:ssXXX", {
2660
2670
  timeZone: timezone
2661
2671
  });
2662
2672
  var timeStamp = timestampToFormat("", "", "", date, config);
2663
- return /*#__PURE__*/React.createElement("time", {
2673
+ return /*#__PURE__*/React__default["default"].createElement("time", {
2664
2674
  dateTime: formatZonedTime
2665
2675
  }, timeStamp);
2666
2676
  }
2667
2677
 
2668
- return /*#__PURE__*/React.createElement(Timeago, {
2678
+ return /*#__PURE__*/React__default["default"].createElement(Timeago__default["default"], {
2669
2679
  date: date,
2670
2680
  formatter: function formatter(value, unit, suffix, date) {
2671
2681
  return _formatter(value, unit, suffix, date, config);
@@ -2679,7 +2689,7 @@ var CrownIcon = function CrownIcon(_ref) {
2679
2689
  _ref$color = _ref.color,
2680
2690
  color = _ref$color === void 0 ? "#D8D8D8" : _ref$color,
2681
2691
  positionTop = _ref.positionTop;
2682
- return /*#__PURE__*/React.createElement("svg", {
2692
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
2683
2693
  xmlns: "http://www.w3.org/2000/svg",
2684
2694
  width: width,
2685
2695
  height: height,
@@ -2688,28 +2698,28 @@ var CrownIcon = function CrownIcon(_ref) {
2688
2698
  position: "relative",
2689
2699
  top: positionTop
2690
2700
  }
2691
- }, /*#__PURE__*/React.createElement("g", {
2701
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
2692
2702
  fill: "none",
2693
2703
  fillRule: "evenodd",
2694
2704
  stroke: "none",
2695
2705
  strokeWidth: "1"
2696
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
2706
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
2697
2707
  transform: "translate(8 8)"
2698
- }, /*#__PURE__*/React.createElement("path", {
2708
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
2699
2709
  d: "M0 0H24V24H0z"
2700
- }), /*#__PURE__*/React.createElement("g", {
2710
+ }), /*#__PURE__*/React__default["default"].createElement("g", {
2701
2711
  fill: color,
2702
2712
  fillRule: "nonzero",
2703
2713
  transform: "translate(0 2)"
2704
- }, /*#__PURE__*/React.createElement("path", {
2714
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
2705
2715
  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"
2706
2716
  }))))));
2707
2717
  };
2708
2718
  CrownIcon.propTypes = {
2709
- height: PropTypes.string,
2710
- width: PropTypes.string,
2711
- color: PropTypes.string,
2712
- positionTop: PropTypes.string
2719
+ height: PropTypes__default["default"].string,
2720
+ width: PropTypes__default["default"].string,
2721
+ color: PropTypes__default["default"].string,
2722
+ positionTop: PropTypes__default["default"].string
2713
2723
  };
2714
2724
 
2715
2725
  var KeyIcon = function KeyIcon(_ref) {
@@ -2718,7 +2728,7 @@ var KeyIcon = function KeyIcon(_ref) {
2718
2728
  _ref$color = _ref.color,
2719
2729
  color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
2720
2730
  positionTop = _ref.positionTop;
2721
- return /*#__PURE__*/React.createElement("svg", {
2731
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
2722
2732
  xmlns: "http://www.w3.org/2000/svg",
2723
2733
  width: width,
2724
2734
  height: height,
@@ -2727,16 +2737,16 @@ var KeyIcon = function KeyIcon(_ref) {
2727
2737
  position: "relative",
2728
2738
  top: positionTop
2729
2739
  }
2730
- }, /*#__PURE__*/React.createElement("g", {
2740
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
2731
2741
  fill: "none",
2732
2742
  fillRule: "evenodd",
2733
2743
  stroke: "none",
2734
2744
  strokeWidth: "1"
2735
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
2745
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
2736
2746
  transform: "translate(8 8)"
2737
- }, /*#__PURE__*/React.createElement("path", {
2747
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
2738
2748
  d: "M0 0H24V24H0z"
2739
- }), /*#__PURE__*/React.createElement("path", {
2749
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
2740
2750
  fill: color,
2741
2751
  fillRule: "nonzero",
2742
2752
  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",
@@ -2744,10 +2754,10 @@ var KeyIcon = function KeyIcon(_ref) {
2744
2754
  })))));
2745
2755
  };
2746
2756
  KeyIcon.propTypes = {
2747
- height: PropTypes.string,
2748
- width: PropTypes.string,
2749
- color: PropTypes.string,
2750
- positionTop: PropTypes.string
2757
+ height: PropTypes__default["default"].string,
2758
+ width: PropTypes__default["default"].string,
2759
+ color: PropTypes__default["default"].string,
2760
+ positionTop: PropTypes__default["default"].string
2751
2761
  };
2752
2762
 
2753
2763
  var LockIcon = function LockIcon(_ref) {
@@ -2756,7 +2766,7 @@ var LockIcon = function LockIcon(_ref) {
2756
2766
  _ref$color = _ref.color,
2757
2767
  color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
2758
2768
  positionTop = _ref.positionTop;
2759
- return /*#__PURE__*/React.createElement("svg", {
2769
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
2760
2770
  xmlns: "http://www.w3.org/2000/svg",
2761
2771
  width: width,
2762
2772
  height: height,
@@ -2765,28 +2775,28 @@ var LockIcon = function LockIcon(_ref) {
2765
2775
  position: "relative",
2766
2776
  top: positionTop
2767
2777
  }
2768
- }, /*#__PURE__*/React.createElement("g", {
2778
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
2769
2779
  fill: "none",
2770
2780
  fillRule: "evenodd",
2771
2781
  stroke: "none",
2772
2782
  strokeWidth: "1"
2773
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
2783
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("g", {
2774
2784
  transform: "translate(8 8)"
2775
- }, /*#__PURE__*/React.createElement("path", {
2785
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
2776
2786
  d: "M0 0H24V24H0z"
2777
- }), /*#__PURE__*/React.createElement("g", {
2787
+ }), /*#__PURE__*/React__default["default"].createElement("g", {
2778
2788
  fill: color,
2779
2789
  fillRule: "nonzero",
2780
2790
  transform: "translate(3)"
2781
- }, /*#__PURE__*/React.createElement("path", {
2791
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
2782
2792
  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"
2783
2793
  }))))));
2784
2794
  };
2785
2795
  LockIcon.propTypes = {
2786
- height: PropTypes.string,
2787
- width: PropTypes.string,
2788
- color: PropTypes.string,
2789
- positionTop: PropTypes.string
2796
+ height: PropTypes__default["default"].string,
2797
+ width: PropTypes__default["default"].string,
2798
+ color: PropTypes__default["default"].string,
2799
+ positionTop: PropTypes__default["default"].string
2790
2800
  };
2791
2801
 
2792
2802
  var StarIcon = function StarIcon(_ref) {
@@ -2796,7 +2806,7 @@ var StarIcon = function StarIcon(_ref) {
2796
2806
  color = _ref$color === void 0 ? "#D5D5D5" : _ref$color,
2797
2807
  _ref$positionTop = _ref.positionTop,
2798
2808
  positionTop = _ref$positionTop === void 0 ? "" : _ref$positionTop;
2799
- return /*#__PURE__*/React.createElement("svg", {
2809
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
2800
2810
  xmlns: "http://www.w3.org/2000/svg",
2801
2811
  width: width,
2802
2812
  height: height,
@@ -2805,21 +2815,21 @@ var StarIcon = function StarIcon(_ref) {
2805
2815
  position: "relative",
2806
2816
  top: positionTop
2807
2817
  }
2808
- }, /*#__PURE__*/React.createElement("g", {
2818
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
2809
2819
  fill: "none",
2810
2820
  fillRule: "evenodd",
2811
2821
  stroke: "none",
2812
2822
  strokeWidth: "1"
2813
- }, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
2823
+ }, /*#__PURE__*/React__default["default"].createElement("g", null, /*#__PURE__*/React__default["default"].createElement("path", {
2814
2824
  fill: color,
2815
2825
  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"
2816
2826
  }))));
2817
2827
  };
2818
2828
  StarIcon.propTypes = {
2819
- height: PropTypes.string,
2820
- width: PropTypes.string,
2821
- color: PropTypes.string,
2822
- positionTop: PropTypes.string
2829
+ height: PropTypes__default["default"].string,
2830
+ width: PropTypes__default["default"].string,
2831
+ color: PropTypes__default["default"].string,
2832
+ positionTop: PropTypes__default["default"].string
2823
2833
  };
2824
2834
 
2825
2835
  var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
@@ -2831,7 +2841,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
2831
2841
 
2832
2842
  switch (iconType) {
2833
2843
  case "crown":
2834
- return /*#__PURE__*/React.createElement(CrownIcon, {
2844
+ return /*#__PURE__*/React__default["default"].createElement(CrownIcon, {
2835
2845
  width: width,
2836
2846
  height: height,
2837
2847
  color: color,
@@ -2839,7 +2849,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
2839
2849
  });
2840
2850
 
2841
2851
  case "lock":
2842
- return /*#__PURE__*/React.createElement(LockIcon, {
2852
+ return /*#__PURE__*/React__default["default"].createElement(LockIcon, {
2843
2853
  width: width,
2844
2854
  height: height,
2845
2855
  color: color,
@@ -2847,7 +2857,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
2847
2857
  });
2848
2858
 
2849
2859
  case "key":
2850
- return /*#__PURE__*/React.createElement(KeyIcon, {
2860
+ return /*#__PURE__*/React__default["default"].createElement(KeyIcon, {
2851
2861
  width: width,
2852
2862
  height: height,
2853
2863
  color: color,
@@ -2855,7 +2865,7 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
2855
2865
  });
2856
2866
 
2857
2867
  default:
2858
- return /*#__PURE__*/React.createElement(StarIcon, {
2868
+ return /*#__PURE__*/React__default["default"].createElement(StarIcon, {
2859
2869
  width: width,
2860
2870
  height: height,
2861
2871
  color: color,
@@ -2864,21 +2874,21 @@ var PremiumStoryIcon = function PremiumStoryIcon(_ref) {
2864
2874
  }
2865
2875
  };
2866
2876
  PremiumStoryIcon.propTypes = {
2867
- width: PropTypes.string,
2868
- height: PropTypes.string,
2869
- color: PropTypes.string,
2870
- iconType: PropTypes.string,
2871
- positionTop: PropTypes.string
2877
+ width: PropTypes__default["default"].string,
2878
+ height: PropTypes__default["default"].string,
2879
+ color: PropTypes__default["default"].string,
2880
+ iconType: PropTypes__default["default"].string,
2881
+ positionTop: PropTypes__default["default"].string
2872
2882
  };
2873
2883
 
2874
2884
  function LiveIcon() {
2875
- return /*#__PURE__*/React.createElement("svg", {
2885
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
2876
2886
  className: "live-icon",
2877
2887
  xmlns: "http://www.w3.org/2000/svg",
2878
2888
  width: "25",
2879
2889
  height: "24",
2880
2890
  viewBox: "0 0 25 24"
2881
- }, /*#__PURE__*/React.createElement("path", {
2891
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
2882
2892
  fill: "#ff5858",
2883
2893
  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"
2884
2894
  }));
@@ -2935,37 +2945,37 @@ var Headline = function Headline(_ref) {
2935
2945
  var wrapperClass = premiumStory ? "wrapper" : "";
2936
2946
  var iconSize = "24px";
2937
2947
  var enableLiveIcon = showLiveIcon && story["story-template"] === "live-blog" && !get_1(story, ["metadata", "is-closed"], false);
2938
- return /*#__PURE__*/React.createElement("div", {
2948
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2939
2949
  "data-test-id": "headline",
2940
2950
  className: "arrow-component arr--headline " + _getClassName(wrapperClass, _styleModuleImportMap$a)
2941
- }, premiumStory && /*#__PURE__*/React.createElement(PremiumStoryIcon, {
2951
+ }, premiumStory && /*#__PURE__*/React__default["default"].createElement(PremiumStoryIcon, {
2942
2952
  width: iconSize,
2943
2953
  height: iconSize,
2944
2954
  color: iconColor,
2945
2955
  iconType: iconStyle,
2946
2956
  positionTop: positionHeadline()
2947
- }), isLink ? /*#__PURE__*/React.createElement(Link, {
2957
+ }), isLink ? /*#__PURE__*/React__default["default"].createElement(components.Link, {
2948
2958
  href: getStoryUrl(story, "/".concat(story.slug)),
2949
2959
  externalLink: isExternalStory(story),
2950
2960
  "aria-label": "headline"
2951
- }, /*#__PURE__*/React.createElement(HeaderTag, {
2961
+ }, /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
2952
2962
  className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$a)
2953
- }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline)) : /*#__PURE__*/React.createElement(HeaderTag, {
2963
+ }, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline)) : /*#__PURE__*/React__default["default"].createElement(HeaderTag, {
2954
2964
  className: _getClassName("headline ".concat(textColor), _styleModuleImportMap$a)
2955
- }, enableLiveIcon && /*#__PURE__*/React.createElement(LiveIcon, null), headline));
2965
+ }, enableLiveIcon && /*#__PURE__*/React__default["default"].createElement(LiveIcon, null), headline));
2956
2966
  };
2957
2967
  Headline.propTypes = {
2958
2968
  /** The Story Object from the API response */
2959
- story: PropTypes.object.isRequired,
2969
+ story: PropTypes__default["default"].object.isRequired,
2960
2970
 
2961
2971
  /** Header tags ranging h1-h6, where h[headerLevel] */
2962
- headerLevel: PropTypes.string,
2963
- premiumStoryIconConfig: PropTypes.shape({
2964
- iconColor: PropTypes.string,
2965
- iconType: PropTypes.string,
2966
- enablePremiumStoryIcon: PropTypes.bool
2972
+ headerLevel: PropTypes__default["default"].string,
2973
+ premiumStoryIconConfig: PropTypes__default["default"].shape({
2974
+ iconColor: PropTypes__default["default"].string,
2975
+ iconType: PropTypes__default["default"].string,
2976
+ enablePremiumStoryIcon: PropTypes__default["default"].bool
2967
2977
  }),
2968
- isLink: PropTypes.bool
2978
+ isLink: PropTypes__default["default"].bool
2969
2979
  };
2970
2980
  Headline.defaultProps = {
2971
2981
  headerLevel: "6",
@@ -2992,7 +3002,7 @@ var Subheadline = function Subheadline(_ref) {
2992
3002
  var subheadline = forceShowAtom || get_1(config, ["showSubheadline"], true);
2993
3003
  if (!subheadline) return null;
2994
3004
  var textColor = getTextColor(config.theme);
2995
- return /*#__PURE__*/React.createElement("div", {
3005
+ return /*#__PURE__*/React__default["default"].createElement("div", {
2996
3006
  style: {
2997
3007
  WebkitLineClamp: lineClamp
2998
3008
  },
@@ -3002,15 +3012,15 @@ var Subheadline = function Subheadline(_ref) {
3002
3012
  };
3003
3013
  Subheadline.propTypes = {
3004
3014
  /** The Story Object from the API response */
3005
- story: PropTypes.object.isRequired,
3015
+ story: PropTypes__default["default"].object.isRequired,
3006
3016
  // Restricts the number of lines for subheadline.
3007
- lineClamp: PropTypes.number,
3017
+ lineClamp: PropTypes__default["default"].number,
3008
3018
 
3009
3019
  /** Number of characters to truncate the subheadline */
3010
- truncateChars: PropTypes.number,
3011
- clazzName: PropTypes.string,
3012
- forceShowAtom: PropTypes.bool,
3013
- showFullContent: PropTypes.bool
3020
+ truncateChars: PropTypes__default["default"].number,
3021
+ clazzName: PropTypes__default["default"].string,
3022
+ forceShowAtom: PropTypes__default["default"].bool,
3023
+ showFullContent: PropTypes__default["default"].bool
3014
3024
  };
3015
3025
  Subheadline.defaultProps = {
3016
3026
  forceShowAtom: false,
@@ -3036,18 +3046,18 @@ var TimeStamp = function TimeStamp(_ref) {
3036
3046
  var time = story["last-published-at"] || story["first-published-at"];
3037
3047
  var isBottomClasses = isBottom ? "bottom-fix" : "";
3038
3048
  var textColor = getTextColor(configState.theme);
3039
- return /*#__PURE__*/React.createElement(React.Fragment, null, isTime && /*#__PURE__*/React.createElement("div", {
3049
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isTime && /*#__PURE__*/React__default["default"].createElement("div", {
3040
3050
  "data-test-id": "publish-time",
3041
3051
  className: "time arr--publish-time " + _getClassName("time ".concat(textColor, " ").concat(isBottomClasses), _styleModuleImportMap$8)
3042
- }, /*#__PURE__*/React.createElement("div", {
3052
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3043
3053
  className: "timestamp-m_time-wrapper__3O2lM"
3044
3054
  }, getTimeStamp(time, formatter, config))));
3045
3055
  };
3046
3056
  TimeStamp.propTypes = {
3047
3057
  /** The Story Object from the API response */
3048
- story: PropTypes.object,
3049
- isBottom: PropTypes.bool,
3050
- config: PropTypes.object
3058
+ story: PropTypes__default["default"].object,
3059
+ isBottom: PropTypes__default["default"].bool,
3060
+ config: PropTypes__default["default"].object
3051
3061
  };
3052
3062
 
3053
3063
  var _styleModuleImportMap$7 = {
@@ -3090,10 +3100,10 @@ var AuthorBase = function AuthorBase(_ref) {
3090
3100
  return null;
3091
3101
  }
3092
3102
 
3093
- return /*#__PURE__*/React.createElement("div", {
3103
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3094
3104
  "data-test-id": "author-image",
3095
3105
  className: _getClassName("author-image ".concat(dir, "-image"), _styleModuleImportMap$7)
3096
- }, /*#__PURE__*/React.createElement("figure", null, avatarS3Key ? /*#__PURE__*/React.createElement(ResponsiveImage, {
3106
+ }, /*#__PURE__*/React__default["default"].createElement("figure", null, avatarS3Key ? /*#__PURE__*/React__default["default"].createElement(components.ResponsiveImage, {
3097
3107
  slug: avatarS3Key,
3098
3108
  "aspect-ratio": [1, 1],
3099
3109
  defaultWidth: 400,
@@ -3101,14 +3111,14 @@ var AuthorBase = function AuthorBase(_ref) {
3101
3111
  auto: ["format", "compress"]
3102
3112
  },
3103
3113
  alt: authorName
3104
- }) : /*#__PURE__*/React.createElement("img", {
3114
+ }) : /*#__PURE__*/React__default["default"].createElement("img", {
3105
3115
  src: avatarUrl
3106
3116
  })));
3107
3117
  };
3108
3118
 
3109
3119
  var isPrefix = function isPrefix(dir) {
3110
3120
  if (prefix) {
3111
- return /*#__PURE__*/React.createElement("div", {
3121
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3112
3122
  className: "arr-author-prefix " + _getClassName("prefix ".concat(textColor), _styleModuleImportMap$7)
3113
3123
  }, prefix);
3114
3124
  }
@@ -3116,11 +3126,11 @@ var AuthorBase = function AuthorBase(_ref) {
3116
3126
  return !hideAuthorImage && authorImage(dir);
3117
3127
  };
3118
3128
 
3119
- return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement(Link, {
3129
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement(components.Link, {
3120
3130
  href: "".concat(mountAt, "/author/") + slug,
3121
3131
  "aria-label": "author-name",
3122
3132
  className: "author-name arr-author-name arrow-component " + _getClassName("author ".concat(isBottomClasses), _styleModuleImportMap$7)
3123
- }, isPrefix("ltr"), /*#__PURE__*/React.createElement("div", {
3133
+ }, isPrefix("ltr"), /*#__PURE__*/React__default["default"].createElement("div", {
3124
3134
  "data-test-id": "author-name",
3125
3135
  className: "author-name " + _getClassName("author-name ".concat(textColor), _styleModuleImportMap$7)
3126
3136
  }, authorName || story["author-name"]), !prefix && isPrefix("rtl")));
@@ -3132,18 +3142,18 @@ function mapStateToProps(state) {
3132
3142
  };
3133
3143
  }
3134
3144
 
3135
- var Author = connect(mapStateToProps)(AuthorBase);
3145
+ var Author = reactRedux.connect(mapStateToProps)(AuthorBase);
3136
3146
  AuthorBase.propTypes = {
3137
3147
  /** The Story Object from the API response */
3138
- story: PropTypes.object.isRequired,
3148
+ story: PropTypes__default["default"].object.isRequired,
3139
3149
 
3140
3150
  /** Hide Author Avatar Image */
3141
- hideAuthorImage: PropTypes.bool,
3151
+ hideAuthorImage: PropTypes__default["default"].bool,
3142
3152
  // fix Author bottom of the storyCard
3143
- isBottom: PropTypes.bool,
3153
+ isBottom: PropTypes__default["default"].bool,
3144
3154
  // fix prefix before the author name
3145
- prefix: PropTypes.string,
3146
- config: PropTypes.object
3155
+ prefix: PropTypes__default["default"].string,
3156
+ config: PropTypes__default["default"].object
3147
3157
  };
3148
3158
  AuthorBase.defaultProps = {
3149
3159
  hideAuthorImage: false,
@@ -3164,14 +3174,14 @@ var Dot = function Dot(_ref) {
3164
3174
  height = _ref$height === void 0 ? "3px" : _ref$height,
3165
3175
  _ref$color = _ref.color,
3166
3176
  color = _ref$color === void 0 ? "light" : _ref$color;
3167
- return /*#__PURE__*/React.createElement("div", {
3177
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3168
3178
  className: _getClassName(color, _styleModuleImportMap$6)
3169
- }, /*#__PURE__*/React.createElement("svg", {
3179
+ }, /*#__PURE__*/React__default["default"].createElement("svg", {
3170
3180
  xmlns: "http://www.w3.org/2000/svg",
3171
3181
  width: width,
3172
3182
  height: height,
3173
3183
  viewBox: "0 0 3 3"
3174
- }, /*#__PURE__*/React.createElement("circle", {
3184
+ }, /*#__PURE__*/React__default["default"].createElement("circle", {
3175
3185
  cx: "87",
3176
3186
  cy: "9",
3177
3187
  r: "1",
@@ -3182,9 +3192,9 @@ var Dot = function Dot(_ref) {
3182
3192
  };
3183
3193
  Dot.propTypes = {
3184
3194
  /** height , width and color of the dot icon */
3185
- color: PropTypes.string,
3186
- width: PropTypes.string,
3187
- height: PropTypes.string
3195
+ color: PropTypes__default["default"].string,
3196
+ width: PropTypes__default["default"].string,
3197
+ height: PropTypes__default["default"].string
3188
3198
  };
3189
3199
 
3190
3200
  var _styleModuleImportMap$5 = {
@@ -3200,22 +3210,22 @@ var Divider = function Divider(_ref) {
3200
3210
  height = _ref$height === void 0 ? "10" : _ref$height,
3201
3211
  _ref$color = _ref.color,
3202
3212
  color = _ref$color === void 0 ? "light" : _ref$color;
3203
- return /*#__PURE__*/React.createElement("div", {
3213
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3204
3214
  className: _getClassName(color, _styleModuleImportMap$5)
3205
- }, /*#__PURE__*/React.createElement("svg", {
3215
+ }, /*#__PURE__*/React__default["default"].createElement("svg", {
3206
3216
  xmlns: "http://www.w3.org/2000/svg",
3207
3217
  width: width,
3208
3218
  height: height
3209
- }, /*#__PURE__*/React.createElement("path", {
3219
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3210
3220
  fill: "inherit",
3211
3221
  d: "M0 0h1v10H0z"
3212
3222
  })));
3213
3223
  };
3214
3224
  Divider.propTypes = {
3215
3225
  /** height , width and color of the dot icon */
3216
- color: PropTypes.string,
3217
- width: PropTypes.string,
3218
- height: PropTypes.string
3226
+ color: PropTypes__default["default"].string,
3227
+ width: PropTypes__default["default"].string,
3228
+ height: PropTypes__default["default"].string
3219
3229
  };
3220
3230
 
3221
3231
  var _styleModuleImportMap$4 = {
@@ -3238,23 +3248,23 @@ var ReadTime = function ReadTime(_ref) {
3238
3248
  var textColor = isLightTheme ? "light" : getTextColor(config.theme);
3239
3249
  if (!showReadTime || !readTime) return null;
3240
3250
  var timeToRead = get_1(opts, ["localizedTimeToRead"]) || "min read";
3241
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
3251
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
3242
3252
  "data-test-id": "read-time",
3243
3253
  className: "arrow-component arr--read-time " + _getClassName("read-time-wrapper ".concat(textColor), _styleModuleImportMap$4)
3244
- }, /*#__PURE__*/React.createElement("span", {
3254
+ }, /*#__PURE__*/React__default["default"].createElement("span", {
3245
3255
  className: "read-time-indicator read-time-m_dot-indicator__3Sqh2"
3246
- }, /*#__PURE__*/React.createElement(Dot, {
3256
+ }, /*#__PURE__*/React__default["default"].createElement(Dot, {
3247
3257
  color: textColor
3248
- })), /*#__PURE__*/React.createElement("span", null, readTime, " ", timeToRead)));
3258
+ })), /*#__PURE__*/React__default["default"].createElement("span", null, readTime, " ", timeToRead)));
3249
3259
  };
3250
3260
  ReadTime.propTypes = {
3251
- story: PropTypes.shape({
3252
- "read-time": PropTypes.number
3261
+ story: PropTypes__default["default"].shape({
3262
+ "read-time": PropTypes__default["default"].number
3253
3263
  }),
3254
- opts: PropTypes.shape({
3255
- showReadTime: PropTypes.bool
3264
+ opts: PropTypes__default["default"].shape({
3265
+ showReadTime: PropTypes__default["default"].bool
3256
3266
  }),
3257
- isLightTheme: PropTypes.bool
3267
+ isLightTheme: PropTypes__default["default"].bool
3258
3268
  };
3259
3269
 
3260
3270
  var _styleModuleImportMap$3 = {
@@ -3285,33 +3295,33 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
3285
3295
 
3286
3296
  var getSeparator = function getSeparator() {
3287
3297
  if (separator === "divider") {
3288
- return /*#__PURE__*/React.createElement(Divider, {
3298
+ return /*#__PURE__*/React__default["default"].createElement(Divider, {
3289
3299
  color: textColor
3290
3300
  });
3291
3301
  }
3292
3302
 
3293
- return /*#__PURE__*/React.createElement(Dot, {
3303
+ return /*#__PURE__*/React__default["default"].createElement(Dot, {
3294
3304
  color: textColor
3295
3305
  });
3296
3306
  };
3297
3307
 
3298
3308
  var getTimeStamp = function getTimeStamp() {
3299
3309
  if (!isTime) return null;
3300
- return /*#__PURE__*/React.createElement(React.Fragment, null, isAuthor && /*#__PURE__*/React.createElement("span", {
3310
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isAuthor && /*#__PURE__*/React__default["default"].createElement("span", {
3301
3311
  className: "arr-separator " + _getClassName("".concat(seperatorStyle), _styleModuleImportMap$3)
3302
- }, getSeparator()), /*#__PURE__*/React.createElement(TimeStamp, {
3312
+ }, getSeparator()), /*#__PURE__*/React__default["default"].createElement(TimeStamp, {
3303
3313
  story: story,
3304
3314
  config: config
3305
- }), isReadTime && /*#__PURE__*/React.createElement(ReadTime, {
3315
+ }), isReadTime && /*#__PURE__*/React__default["default"].createElement(ReadTime, {
3306
3316
  story: story,
3307
3317
  opts: config,
3308
3318
  isLightTheme: isLightTheme
3309
3319
  }));
3310
3320
  };
3311
3321
 
3312
- return /*#__PURE__*/React.createElement("div", {
3322
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3313
3323
  className: "arr--author-time " + _getClassName("author-time-wrapper ".concat(isBottomClasses), _styleModuleImportMap$3)
3314
- }, isAuthor ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Author, {
3324
+ }, isAuthor ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Author, {
3315
3325
  story: story,
3316
3326
  isBottom: true,
3317
3327
  hideAuthorImage: hideAuthorImage,
@@ -3319,19 +3329,19 @@ var AuthorWithTime = function AuthorWithTime(_ref) {
3319
3329
  }), getTimeStamp()) : getTimeStamp());
3320
3330
  };
3321
3331
  AuthorWithTime.propTypes = {
3322
- story: PropTypes.object,
3332
+ story: PropTypes__default["default"].object,
3323
3333
 
3324
3334
  /** Style of separator between the Author & Timestamp */
3325
- separator: PropTypes.oneOf(["dot", "divider"]),
3335
+ separator: PropTypes__default["default"].oneOf(["dot", "divider"]),
3326
3336
 
3327
3337
  /** hide the author image */
3328
- hideAuthorImage: PropTypes.bool,
3338
+ hideAuthorImage: PropTypes__default["default"].bool,
3329
3339
  // fix author and time at the end
3330
- isBottom: PropTypes.bool,
3340
+ isBottom: PropTypes__default["default"].bool,
3331
3341
  // fix prefix before the author name
3332
- prefix: PropTypes.string,
3333
- config: PropTypes.object,
3334
- isLightTheme: PropTypes.bool
3342
+ prefix: PropTypes__default["default"].string,
3343
+ config: PropTypes__default["default"].object,
3344
+ isLightTheme: PropTypes__default["default"].bool
3335
3345
  };
3336
3346
  AuthorWithTime.defaultProps = {
3337
3347
  separator: "dot",
@@ -3409,27 +3419,27 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
3409
3419
  height = _ref$height === void 0 ? 30 : _ref$height,
3410
3420
  _ref$iconColor = _ref.iconColor,
3411
3421
  iconColor = _ref$iconColor === void 0 ? "#99B0CB" : _ref$iconColor;
3412
- return /*#__PURE__*/React.createElement("svg", {
3422
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3413
3423
  width: width,
3414
3424
  height: height,
3415
3425
  viewBox: "0 0 102 76",
3416
3426
  version: "1.1"
3417
- }, /*#__PURE__*/React.createElement("g", {
3427
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3418
3428
  id: "demo-home-copy",
3419
3429
  stroke: "none",
3420
3430
  strokeWidth: "1",
3421
3431
  fill: "none",
3422
3432
  fillRule: "evenodd",
3423
3433
  transform: "translate(-377.000000, -314.000000)"
3424
- }, /*#__PURE__*/React.createElement("g", {
3434
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3425
3435
  id: "Group-13",
3426
3436
  transform: "translate(377.000000, 314.000000)"
3427
- }, /*#__PURE__*/React.createElement("path", {
3437
+ }, /*#__PURE__*/React__default["default"].createElement("path", {
3428
3438
  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",
3429
3439
  id: "Combined-Shape",
3430
3440
  fill: iconColor,
3431
3441
  fillRule: "nonzero"
3432
- }), /*#__PURE__*/React.createElement("rect", {
3442
+ }), /*#__PURE__*/React__default["default"].createElement("rect", {
3433
3443
  id: "Rectangle-19",
3434
3444
  stroke: iconColor,
3435
3445
  strokeWidth: "3",
@@ -3441,24 +3451,24 @@ var ImageFallbackIcon = function ImageFallbackIcon(_ref) {
3441
3451
  }))));
3442
3452
  };
3443
3453
  ImageFallbackIcon.propTypes = {
3444
- width: PropTypes.object,
3445
- height: PropTypes.object,
3446
- iconColor: PropTypes.object
3454
+ width: PropTypes__default["default"].object,
3455
+ height: PropTypes__default["default"].object,
3456
+ iconColor: PropTypes__default["default"].object
3447
3457
  };
3448
3458
 
3449
3459
  var imageFallback = function imageFallback() {
3450
- return /*#__PURE__*/React.createElement("div", {
3460
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3451
3461
  className: "arr--fallback-image fallback-m_image__1GYCJ fallback-m_image-position__3KddP"
3452
- }, /*#__PURE__*/React.createElement("figure", {
3462
+ }, /*#__PURE__*/React__default["default"].createElement("figure", {
3453
3463
  className: "arr--fallback-svg fallback-m_fallback-svg__tK9fL"
3454
- }, /*#__PURE__*/React.createElement(ImageFallbackIcon, null)));
3464
+ }, /*#__PURE__*/React__default["default"].createElement(ImageFallbackIcon, null)));
3455
3465
  };
3456
3466
 
3457
3467
  var FallbackImage = function FallbackImage(_ref) {
3458
3468
  var slug = _ref.slug;
3459
3469
 
3460
3470
  if (slug) {
3461
- return /*#__PURE__*/React.createElement(Link, {
3471
+ return /*#__PURE__*/React__default["default"].createElement(components.Link, {
3462
3472
  href: slug,
3463
3473
  "aria-label": "image-fallback"
3464
3474
  }, imageFallback());
@@ -3467,23 +3477,23 @@ var FallbackImage = function FallbackImage(_ref) {
3467
3477
  }
3468
3478
  };
3469
3479
  FallbackImage.propTypes = {
3470
- slug: PropTypes.string
3480
+ slug: PropTypes__default["default"].string
3471
3481
  };
3472
3482
 
3473
3483
  var HyperLinkIcon = function HyperLinkIcon() {
3474
- return /*#__PURE__*/React.createElement("svg", {
3484
+ return /*#__PURE__*/React__default["default"].createElement("svg", {
3475
3485
  xmlns: "http://www.w3.org/2000/svg",
3476
3486
  width: "36",
3477
3487
  height: "28"
3478
- }, /*#__PURE__*/React.createElement("g", {
3488
+ }, /*#__PURE__*/React__default["default"].createElement("g", {
3479
3489
  fill: "none",
3480
3490
  fillRule: "evenodd"
3481
- }, /*#__PURE__*/React.createElement("rect", {
3491
+ }, /*#__PURE__*/React__default["default"].createElement("rect", {
3482
3492
  width: "36",
3483
3493
  height: "28",
3484
3494
  fill: "#3D6FCF",
3485
3495
  rx: "4"
3486
- }), /*#__PURE__*/React.createElement("path", {
3496
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
3487
3497
  stroke: "#FFF",
3488
3498
  strokeLinecap: "round",
3489
3499
  strokeLinejoin: "round",
@@ -3496,16 +3506,16 @@ var HyperLink = function HyperLink(_ref) {
3496
3506
  var _ref$hyperLink = _ref.hyperLink,
3497
3507
  hyperLink = _ref$hyperLink === void 0 ? "" : _ref$hyperLink;
3498
3508
  if (!hyperLink) return null;
3499
- return /*#__PURE__*/React.createElement(Link, {
3509
+ return /*#__PURE__*/React__default["default"].createElement(components.Link, {
3500
3510
  href: hyperLink,
3501
3511
  "aria-label": "hyperlink-button",
3502
3512
  className: "arr--hyperlink-button hyperlink-m_hyperlink-button__1CqWx",
3503
3513
  target: "_blank",
3504
3514
  rel: "noopener noreferrer"
3505
- }, /*#__PURE__*/React.createElement(HyperLinkIcon, null));
3515
+ }, /*#__PURE__*/React__default["default"].createElement(HyperLinkIcon, null));
3506
3516
  };
3507
3517
  HyperLink.propTypes = {
3508
- hyperLink: PropTypes.string
3518
+ hyperLink: PropTypes__default["default"].string
3509
3519
  };
3510
3520
 
3511
3521
  var _styleModuleImportMap$2 = {
@@ -3541,7 +3551,7 @@ var HeroImage = function HeroImage(_ref) {
3541
3551
  StoryTemplateIcon = _config$StoryTemplate === void 0 ? function () {
3542
3552
  return null;
3543
3553
  } : _config$StoryTemplate;
3544
- var showImagePlaceholder = useSelector(function (state) {
3554
+ var showImagePlaceholder = reactRedux.useSelector(function (state) {
3545
3555
  return get_1(state, ["qt", "config", "showPlaceholder"]);
3546
3556
  });
3547
3557
  var getPlaceholderStyleName = showImagePlaceholder ? "placeholder" : "";
@@ -3577,37 +3587,37 @@ var HeroImage = function HeroImage(_ref) {
3577
3587
  var fallbackImage = function fallbackImage() {
3578
3588
  if (!slug) {
3579
3589
  if (fallbackImageUrl && !isStoryPageImage) {
3580
- return /*#__PURE__*/React.createElement("figure", {
3590
+ return /*#__PURE__*/React__default["default"].createElement("figure", {
3581
3591
  style: {
3582
3592
  paddingTop: imagePadding + "%"
3583
3593
  },
3584
3594
  className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$2)
3585
- }, /*#__PURE__*/React.createElement("img", {
3595
+ }, /*#__PURE__*/React__default["default"].createElement("img", {
3586
3596
  className: "qt-image",
3587
3597
  "data-src": "".concat(fallbackImageUrl),
3588
3598
  alt: "image-fallback"
3589
3599
  }));
3590
3600
  }
3591
3601
 
3592
- return /*#__PURE__*/React.createElement(React.Fragment, null, defaultFallback ? /*#__PURE__*/React.createElement("div", {
3602
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, defaultFallback ? /*#__PURE__*/React__default["default"].createElement("div", {
3593
3603
  "data-test-id": "arr--fallback-hero-image",
3594
3604
  style: {
3595
3605
  paddingTop: imagePadding + "%"
3596
3606
  },
3597
3607
  className: "arr--fallback-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$2)
3598
- }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
3608
+ }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
3599
3609
  storyTemplate: story["story-template"]
3600
- }), /*#__PURE__*/React.createElement(FallbackImage, null)) : null);
3610
+ }), /*#__PURE__*/React__default["default"].createElement(FallbackImage, null)) : null);
3601
3611
  }
3602
3612
 
3603
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("figure", {
3613
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("figure", {
3604
3614
  style: {
3605
3615
  paddingTop: imagePadding + "%"
3606
3616
  },
3607
3617
  className: "arr--responsive-hero-image " + _getClassName("image ".concat(getPlaceholderStyleName), _styleModuleImportMap$2)
3608
- }, /*#__PURE__*/React.createElement(StoryTemplateIcon, {
3618
+ }, /*#__PURE__*/React__default["default"].createElement(StoryTemplateIcon, {
3609
3619
  storyTemplate: story["story-template"]
3610
- }), /*#__PURE__*/React.createElement(ResponsiveHeroImage, {
3620
+ }), /*#__PURE__*/React__default["default"].createElement(components.ResponsiveHeroImage, {
3611
3621
  story: story,
3612
3622
  aspectRatio: imageAspectRatio,
3613
3623
  defaultWidth: defaultWidth,
@@ -3616,15 +3626,15 @@ var HeroImage = function HeroImage(_ref) {
3616
3626
  auto: ["format", "compress"],
3617
3627
  fit: "max"
3618
3628
  }
3619
- })), isStoryPageImage && hyperLink && /*#__PURE__*/React.createElement(HyperLink, {
3629
+ })), isStoryPageImage && hyperLink && /*#__PURE__*/React__default["default"].createElement(HyperLink, {
3620
3630
  hyperLink: hyperLink
3621
3631
  }));
3622
3632
  };
3623
3633
 
3624
- return story && (isStoryPageImage ? /*#__PURE__*/React.createElement("div", {
3634
+ return story && (isStoryPageImage ? /*#__PURE__*/React__default["default"].createElement("div", {
3625
3635
  "data-test-id": "arr--hero-image",
3626
3636
  className: "arr--hero-image " + _getClassName("".concat(heroImageClass, " ").concat(fullBleed, " ").concat(heroImageMobClasses), _styleModuleImportMap$2)
3627
- }, fallbackImage()) : /*#__PURE__*/React.createElement(Link, {
3637
+ }, fallbackImage()) : /*#__PURE__*/React__default["default"].createElement(components.Link, {
3628
3638
  "data-test-id": "arr--hero-image",
3629
3639
  href: getStoryUrl(story, "/".concat(story.slug)),
3630
3640
  externalLink: isExternalStory(story),
@@ -3634,30 +3644,30 @@ var HeroImage = function HeroImage(_ref) {
3634
3644
  };
3635
3645
  HeroImage.propTypes = {
3636
3646
  /** The Story Object from the API response */
3637
- story: PropTypes.object.isRequired,
3647
+ story: PropTypes__default["default"].object.isRequired,
3638
3648
 
3639
3649
  /** Removes the Hero Image padding for the image to bleed over the margin */
3640
- FullBleed: PropTypes.bool,
3650
+ FullBleed: PropTypes__default["default"].bool,
3641
3651
 
3642
3652
  /** The default width for the image, in case the browser does not support srcset */
3643
- defaultWidth: PropTypes.number,
3653
+ defaultWidth: PropTypes__default["default"].number,
3644
3654
 
3645
3655
  /** The list of available widths */
3646
- widths: PropTypes.array,
3656
+ widths: PropTypes__default["default"].array,
3647
3657
  // fatch the correct hero image
3648
- aspectRatio: PropTypes.array,
3658
+ aspectRatio: PropTypes__default["default"].array,
3649
3659
  // Hints for the browser to choose the best size
3650
3660
 
3651
3661
  /** This prop is responsible for adding padding-right of the image and remove padding bottom of the image */
3652
- isHorizontal: PropTypes.bool,
3662
+ isHorizontal: PropTypes__default["default"].bool,
3653
3663
 
3654
3664
  /** This prop is responsible for adding padding-bottom in desktop and padding-right in mobile */
3655
- isHorizontalMobile: PropTypes.bool,
3665
+ isHorizontalMobile: PropTypes__default["default"].bool,
3656
3666
  // this prop is responsive for rendering fallback image on story page
3657
- defaultFallback: PropTypes.bool,
3658
- isHorizontalWithImageLast: PropTypes.bool,
3659
- isStoryPageImage: PropTypes.bool,
3660
- config: PropTypes.object
3667
+ defaultFallback: PropTypes__default["default"].bool,
3668
+ isHorizontalWithImageLast: PropTypes__default["default"].bool,
3669
+ isStoryPageImage: PropTypes__default["default"].bool,
3670
+ config: PropTypes__default["default"].object
3661
3671
  };
3662
3672
  HeroImage.defaultProps = {
3663
3673
  FullBleed: true,
@@ -3707,22 +3717,22 @@ var SectionTag = function SectionTag(_ref) {
3707
3717
  }
3708
3718
 
3709
3719
  if (!isSection) return null;
3710
- return /*#__PURE__*/React.createElement(Link, {
3720
+ return /*#__PURE__*/React__default["default"].createElement(components.Link, {
3711
3721
  href: getUrl,
3712
3722
  className: "arrow-component arr--section-name",
3713
3723
  "aria-label": "section-name"
3714
- }, /*#__PURE__*/React.createElement("div", {
3724
+ }, /*#__PURE__*/React__default["default"].createElement("div", {
3715
3725
  "data-test-id": "sectionTag",
3716
3726
  style: {
3717
3727
  backgroundColor: templateStyle.includes("section-solid") ? sectionTagBorderColor : ""
3718
3728
  },
3719
3729
  className: "section-tag arrow-component " + _getClassName("".concat(textColor, " ").concat(templateStyle), _styleModuleImportMap$1)
3720
- }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React.createElement("span", {
3730
+ }, templateStyle.includes("section-borderLeft") && /*#__PURE__*/React__default["default"].createElement("span", {
3721
3731
  className: "section-m_border-left__2oUyp",
3722
3732
  style: {
3723
3733
  color: sectionTagBorderColor
3724
3734
  }
3725
- }), section["display-name"] || section["name"], /*#__PURE__*/React.createElement("div", {
3735
+ }), section["display-name"] || section["name"], /*#__PURE__*/React__default["default"].createElement("div", {
3726
3736
  className: "section-m_border-bottom__3cRoD",
3727
3737
  style: {
3728
3738
  backgroundColor: "".concat(template === "solid" ? "" : sectionTagBorderColor)
@@ -3731,13 +3741,13 @@ var SectionTag = function SectionTag(_ref) {
3731
3741
  };
3732
3742
  SectionTag.propTypes = {
3733
3743
  /** The Story Object from the API response */
3734
- story: PropTypes.object.isRequired,
3744
+ story: PropTypes__default["default"].object.isRequired,
3735
3745
 
3736
3746
  /** The style template for section tag */
3737
- template: PropTypes.oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
3738
- borderColor: PropTypes.string,
3739
- solidBorderColor: PropTypes.string,
3740
- isLightTheme: PropTypes.bool
3747
+ template: PropTypes__default["default"].oneOf(["", "borderBottomSml", "borderLeft", "solid"]),
3748
+ borderColor: PropTypes__default["default"].string,
3749
+ solidBorderColor: PropTypes__default["default"].string,
3750
+ isLightTheme: PropTypes__default["default"].bool
3741
3751
  };
3742
3752
  SectionTag.defaultProps = {
3743
3753
  template: "",
@@ -3786,7 +3796,7 @@ var StoryCard = function StoryCard(_ref) {
3786
3796
  prefix = _ref.prefix,
3787
3797
  config = _ref.config,
3788
3798
  isHorizontalWithImageLast = _ref.isHorizontalWithImageLast;
3789
- if (!story || isEmpty(story)) return /*#__PURE__*/React.createElement("div", null);
3799
+ if (!story || isEmpty(story)) return /*#__PURE__*/React__default["default"].createElement("div", null);
3790
3800
  var borderOptions = ["default", "full", "bottom", "boxShadow"];
3791
3801
  var borderTemplate = borderOptions.includes(border) ? "border-".concat(border) : ""; // TODO optimize conditions
3792
3802
 
@@ -3796,7 +3806,7 @@ var StoryCard = function StoryCard(_ref) {
3796
3806
  var bgImgContentOverlapClass = bgImgContentOverlap ? "content-overlap" : "";
3797
3807
  var textColor = getTextColor(theme);
3798
3808
  var horizontalMobileClasses = isHorizontalMobile ? "horizontal-mob" : "";
3799
- var defaultStorycard = /*#__PURE__*/React.createElement(DefaultStoryCard, {
3809
+ var defaultStorycard = /*#__PURE__*/React__default["default"].createElement(DefaultStoryCard, {
3800
3810
  story: story,
3801
3811
  aspectRatio: aspectRatio,
3802
3812
  border: border,
@@ -3810,7 +3820,7 @@ var StoryCard = function StoryCard(_ref) {
3810
3820
  config: config,
3811
3821
  isHorizontalWithImageLast: isHorizontalWithImageLast
3812
3822
  });
3813
- return /*#__PURE__*/React.createElement("div", {
3823
+ return /*#__PURE__*/React__default["default"].createElement("div", {
3814
3824
  "data-test-id": "story-card",
3815
3825
  style: {
3816
3826
  backgroundColor: theme,
@@ -3839,91 +3849,91 @@ var DefaultStoryCard = function DefaultStoryCard(_ref2) {
3839
3849
  var SectionTagborderColor = rgbToHex(borderColor);
3840
3850
  var _config$localizationC = config.localizationConfig,
3841
3851
  localizationConfig = _config$localizationC === void 0 ? {} : _config$localizationC;
3842
- return /*#__PURE__*/React.createElement(React.Fragment, null, isHorizontal ? /*#__PURE__*/React.createElement(HeroImage, {
3852
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isHorizontal ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
3843
3853
  config: config,
3844
3854
  story: story,
3845
3855
  isHorizontal: true,
3846
3856
  isHorizontalMobile: isHorizontalMobile,
3847
3857
  aspectRatio: aspectRatio
3848
- }) : isHorizontalWithImageLast ? /*#__PURE__*/React.createElement(HeroImage, {
3858
+ }) : isHorizontalWithImageLast ? /*#__PURE__*/React__default["default"].createElement(HeroImage, {
3849
3859
  config: config,
3850
3860
  story: story,
3851
3861
  isHorizontalWithImageLast: true,
3852
3862
  isHorizontalMobile: isHorizontalMobile,
3853
3863
  aspectRatio: aspectRatio
3854
- }) : /*#__PURE__*/React.createElement(HeroImage, {
3864
+ }) : /*#__PURE__*/React__default["default"].createElement(HeroImage, {
3855
3865
  story: story,
3856
3866
  config: config,
3857
3867
  isHorizontalMobile: isHorizontalMobile,
3858
3868
  aspectRatio: aspectRatio
3859
- }), /*#__PURE__*/React.createElement("div", {
3869
+ }), /*#__PURE__*/React__default["default"].createElement("div", {
3860
3870
  className: "arr--story-content " + _getClassName("content ".concat(alignment), _styleModuleImportMap)
3861
- }, /*#__PURE__*/React.createElement(SectionTag, {
3871
+ }, /*#__PURE__*/React__default["default"].createElement(SectionTag, {
3862
3872
  story: story,
3863
3873
  borderColor: SectionTagborderColor
3864
- }), /*#__PURE__*/React.createElement(Headline, {
3874
+ }), /*#__PURE__*/React__default["default"].createElement(Headline, {
3865
3875
  story: story,
3866
3876
  headerLevel: headerLevel,
3867
3877
  premiumStoryIconConfig: config
3868
- }), /*#__PURE__*/React.createElement(AuthorWithTime, {
3878
+ }), /*#__PURE__*/React__default["default"].createElement(AuthorWithTime, {
3869
3879
  config: localizationConfig,
3870
3880
  story: story,
3871
3881
  isBottom: true,
3872
3882
  prefix: prefix,
3873
3883
  hideAuthorImage: hideAuthorImage
3874
- }), /*#__PURE__*/React.createElement(Subheadline, {
3884
+ }), /*#__PURE__*/React__default["default"].createElement(Subheadline, {
3875
3885
  story: story
3876
3886
  })));
3877
3887
  };
3878
3888
 
3879
3889
  DefaultStoryCard.propTypes = {
3880
- story: PropTypes.object.isRequired,
3881
- border: PropTypes.oneOfType([PropTypes.string]),
3882
- isBottom: PropTypes.bool,
3883
- isHorizontal: PropTypes.bool,
3884
- aspectRatio: PropTypes.oneOfType([PropTypes.array]),
3885
- isHorizontalMobile: PropTypes.bool,
3886
- centerAlign: PropTypes.bool,
3887
- headerLevel: PropTypes.string,
3888
- borderColor: PropTypes.string,
3889
- hideAuthorImage: PropTypes.bool,
3890
- prefix: PropTypes.string,
3891
- config: PropTypes.object,
3892
- isHorizontalWithImageLast: PropTypes.bool
3890
+ story: PropTypes__default["default"].object.isRequired,
3891
+ border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
3892
+ isBottom: PropTypes__default["default"].bool,
3893
+ isHorizontal: PropTypes__default["default"].bool,
3894
+ aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
3895
+ isHorizontalMobile: PropTypes__default["default"].bool,
3896
+ centerAlign: PropTypes__default["default"].bool,
3897
+ headerLevel: PropTypes__default["default"].string,
3898
+ borderColor: PropTypes__default["default"].string,
3899
+ hideAuthorImage: PropTypes__default["default"].bool,
3900
+ prefix: PropTypes__default["default"].string,
3901
+ config: PropTypes__default["default"].object,
3902
+ isHorizontalWithImageLast: PropTypes__default["default"].bool
3893
3903
  };
3894
3904
  StoryCard.propTypes = {
3895
3905
  /** The Story Object from the API response */
3896
- story: PropTypes.object.isRequired,
3897
- children: PropTypes.node,
3906
+ story: PropTypes__default["default"].object.isRequired,
3907
+ children: PropTypes__default["default"].node,
3898
3908
 
3899
3909
  /** Flip the Story Card to Horizonal mode */
3900
- isHorizontal: PropTypes.bool,
3910
+ isHorizontal: PropTypes__default["default"].bool,
3901
3911
 
3902
3912
  /** Add border to the Story Card */
3903
- border: PropTypes.oneOfType([PropTypes.string]),
3913
+ border: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string]),
3904
3914
  // story card with background image
3905
- useImageAsBackground: PropTypes.bool,
3915
+ useImageAsBackground: PropTypes__default["default"].bool,
3906
3916
  // story card content overlap with image
3907
- bgImgContentOverlap: PropTypes.bool,
3917
+ bgImgContentOverlap: PropTypes__default["default"].bool,
3908
3918
 
3909
3919
  /** add aspect ratio for hero image */
3910
- aspectRatio: PropTypes.oneOfType([PropTypes.array]),
3920
+ aspectRatio: PropTypes__default["default"].oneOfType([PropTypes__default["default"].array]),
3911
3921
 
3912
3922
  /** add theme(dark /light/custom color) for storycard */
3913
- theme: PropTypes.string,
3923
+ theme: PropTypes__default["default"].string,
3914
3924
 
3915
3925
  /** flip the story card mobile design horizontal */
3916
- isHorizontalMobile: PropTypes.bool,
3926
+ isHorizontalMobile: PropTypes__default["default"].bool,
3917
3927
  // make content center align in desktop and left align in mobile
3918
- centerAlign: PropTypes.bool,
3919
- headerLevel: PropTypes.string,
3920
- borderColor: PropTypes.string,
3928
+ centerAlign: PropTypes__default["default"].bool,
3929
+ headerLevel: PropTypes__default["default"].string,
3930
+ borderColor: PropTypes__default["default"].string,
3921
3931
  // handle author image through storycard
3922
- hideAuthorImage: PropTypes.bool,
3932
+ hideAuthorImage: PropTypes__default["default"].bool,
3923
3933
  // handle author prefix through storycard
3924
- prefix: PropTypes.string,
3925
- config: PropTypes.object,
3926
- isHorizontalWithImageLast: PropTypes.bool
3934
+ prefix: PropTypes__default["default"].string,
3935
+ config: PropTypes__default["default"].object,
3936
+ isHorizontalWithImageLast: PropTypes__default["default"].bool
3927
3937
  };
3928
3938
  StoryCard.defaultProps = {
3929
3939
  isHorizontal: false,
@@ -3935,4 +3945,4 @@ StoryCard.defaultProps = {
3935
3945
  isHorizontalWithImageLast: false
3936
3946
  };
3937
3947
 
3938
- export { StoryCard };
3948
+ exports.StoryCard = StoryCard;