@mjhls/mjh-framework 1.0.411 → 1.0.414

package/README.md

@@ -1,6 +1,5 @@
 
-# mjh-framework v. 1.0.411
-
+# mjh-framework v. 1.0.414
 
 > Foundation Framework
 

package/dist/cjs/GroupDeck.js

@@ -257,7 +257,7 @@ var GroupDeck = function GroupDeck(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n\n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        \n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (min-width: 1399px){\n          .block-content #vid-slider .tile__img{\n            height: 155px;\n          }\n          .block-content #vid-slider .tile{\n            height: 195px;\n          }\n        }\n\n        \n\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 60px 0 50px!important;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 110px;\n            object-fit: cover;\n          }\n      \n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 180px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n      '
+      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n\n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (min-width: 1399px) {\n          .block-content #vid-slider .tile__img {\n            height: 195px;\n          }\n          .block-content #vid-slider .tile {\n            height: 195px;\n          }\n        }\n\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 60px 0 50px !important;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 130px;\n          }\n\n          #vid-slider .tile__img {\n            height: 130px;\n            object-fit: cover;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 140px;\n          }\n\n          #vid-slider .tile__img {\n            height: 160px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n        @media screen and (max-width: 468px) {\n          #vid-slider .tile {\n            height: 130px;\n          }\n          #vid-slider .tile__img {\n            height: 130px;\n          }\n        }\n        @media screen and (max-width: 386px) {\n          #vid-slider .tile {\n            height: 100px;\n          }\n          #vid-slider .tile__img {\n            height: 100px;\n          }\n        }\n      '
     )
   );
 };

package/dist/cjs/IssueDeck.js

@@ -64,8 +64,6 @@ var IssueDeck = function IssueDeck(props) {
       values = _useState8[0],
       setValues = _useState8[1];
 
-  var deckRef = React.useRef(null);
-
   var prevValues = usePrevious(values);
 
   var urlFor = function urlFor(source) {
@@ -130,9 +128,17 @@ var IssueDeck = function IssueDeck(props) {
     }
   }, [values, prevValues, query, client, params, setIssuesData, setScrolling]);
 
+  React.useEffect(function () {
+    if (issuesData.length < count) {
+      var parentScroll = document.getElementsByClassName('infinite-scroll-component')[0];
+      parentScroll.style.overflow = 'hidden';
+      setScrolling(false);
+    }
+  }, [issuesData, setScrolling, count]);
+
   return React__default.createElement(
     index_es.InfiniteScroll,
-    { ref: deckRef, dataLength: issuesData && issuesData.length, next: function next() {
+    { dataLength: issuesData && issuesData.length, next: function next() {
         return loadMore();
       }, hasMore: scrolling, scrollThreshold: 0.9 },
     React__default.createElement(

package/dist/cjs/index.js

@@ -5609,7 +5609,7 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
   };
 
   var handleOnPlay = function handleOnPlay(event) {
-    // report play 
+    // report play
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -5651,7 +5651,16 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     AdSlot.Beam.report_beam_video('Pause', main.main_16, duration, current, segment);
   };
 
-  return React__default.createElement(YouTube, { videoId: id, opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd });
+  return React__default.createElement(
+    'div',
+    { id: 'fluid-video-container' },
+    React__default.createElement(YouTube, { className: 'fluid-iframe', videoId: id, opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd }),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        #fluid-video-container {\n          margin-bottom: 2rem;\n        }\n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n      '
+    )
+  );
 };
 
 var Sidebar = function Sidebar(_ref) {
@@ -12976,7 +12985,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (series.classList.contains('active')) {
       series.style.bottom = '-100%';
     } else {
-      series.style.bottom = '6px';
+      series.style.bottom = '2px';
     }
     series.classList.toggle('active');
   }
@@ -13090,10 +13099,18 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     { className: 'video-container', style: { marginBottom: '2rem' } },
     React__default.createElement(
       'div',
-      { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && vidType == 'youtube' && React__default.createElement(YouTube, { videoId: smoothscroll.getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
+      { id: 'fluid-video-container', className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
+      vidUrl && vidType == 'youtube' && React__default.createElement(YouTube, {
+        className: 'fluid-iframe',
+        videoId: smoothscroll.getYoutubeId(vidUrl),
+        opts: opts,
+        onReady: handleOnReady,
+        onPlay: handleOnPlay,
+        onPause: handleOnPause,
+        onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }),
+        }
+      }),
       vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
       vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs }),
       React__default.createElement(
@@ -13103,7 +13120,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
           style: {
             position: 'absolute',
             width: '100%',
-            height: '250px',
+            height: '270px',
+            maxHeight: '100%',
             background: 'linear-gradient(to bottom, transparent,black)',
             bottom: '-100%',
             transition: 'all .5s ease',
@@ -13146,7 +13164,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .vid-series .video-detail iframe {\n          height: 415px !important;\n        }\n        span.btn {\n          margin: 0 1rem;\n        }\n        .brightcove .video-js {\n          float: none;\n          width: 100%;\n          height: 385px;\n        }\n        @media screen and (max-width: 1399px) {\n          .brightcove .video-js {\n            height: 360px;\n          }\n        }\n        @media screen and (max-width: 495px) {\n          .brightcove .video-js {\n            height: 255px;\n          }\n        }\n      '
+      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n        .brightcove .video-js {\n          float: none;\n          width: 100%;\n          height: 385px;\n        }\n        @media screen and (max-width: 1399px) {\n          .brightcove .video-js {\n            height: 360px;\n          }\n        }\n        @media screen and (max-width: 495px) {\n          .brightcove .video-js {\n            height: 255px;\n          }\n        }\n      '
     )
   );
 };
@@ -13596,6 +13614,25 @@ var MultiFigure = function MultiFigure(props) {
   return null;
 };
 
+var AnchorLinkElement = function AnchorLinkElement(props) {
+  var articleId = props.articleId,
+      _props$node = props.node,
+      _props$node$id = _props$node.id,
+      id = _props$node$id === undefined ? '' : _props$node$id,
+      _props$node$content = _props$node.content,
+      content = _props$node$content === undefined ? [] : _props$node$content,
+      getSerializers = props.getSerializers;
+
+
+  var elementId = articleId ? id + '-' + articleId : id;
+
+  return React__default.createElement(
+    'div',
+    { id: elementId },
+    React__default.createElement(TaxonomyCard.BlockContent, { blocks: content, serializers: getSerializers })
+  );
+};
+
 var Figure = dynamic(function () {
   return Promise.resolve().then(function () { return require('./Figure-9e886c5b.js'); });
 }, { ssr: false });
@@ -13638,7 +13675,8 @@ var getSerializers = function getSerializers() {
       _props$ = props[7],
       autoplay = _props$ === undefined ? false : _props$,
       _props$2 = props[8],
-      contextualADFlag = _props$2 === undefined ? false : _props$2;
+      contextualADFlag = _props$2 === undefined ? false : _props$2,
+      articleId = props[9];
 
   return {
     types: {
@@ -13738,6 +13776,11 @@ var getSerializers = function getSerializers() {
         var node = _ref16.node;
 
         return React__default.createElement(NativeAd, { node: node });
+      },
+      html_anchor_links: function html_anchor_links(_ref17) {
+        var node = _ref17.node;
+
+        return React__default.createElement(AnchorLinkElement, { node: node, getSerializers: getSerializers.apply(undefined, props), articleId: articleId });
       }
     },
     marks: {
@@ -13761,6 +13804,17 @@ var getSerializers = function getSerializers() {
             href = _props$mark.href,
             blank = _props$mark.blank;
 
+
+        if (href.charAt(0) === '#') {
+          var elementId = href.slice(1);
+          var scrollId = articleId ? '#' + elementId + '-' + articleId : '#' + elementId;
+          return React__default.createElement(
+            'a',
+            { href: scrollId },
+            children
+          );
+        }
+
         var isExernalUrl = checkUrlIsExternal(href);
         return React__default.createElement(
           'a',
@@ -13768,32 +13822,32 @@ var getSerializers = function getSerializers() {
           children
         );
       },
-      alignleft: function alignleft(_ref17) {
-        var children = _ref17.children;
+      alignleft: function alignleft(_ref18) {
+        var children = _ref18.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'left' } },
           children
         );
       },
-      alignright: function alignright(_ref18) {
-        var children = _ref18.children;
+      alignright: function alignright(_ref19) {
+        var children = _ref19.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'right' } },
           children
         );
       },
-      aligncenter: function aligncenter(_ref19) {
-        var children = _ref19.children;
+      aligncenter: function aligncenter(_ref20) {
+        var children = _ref20.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'center' } },
           children
         );
       },
-      alignjustify: function alignjustify(_ref20) {
-        var children = _ref20.children;
+      alignjustify: function alignjustify(_ref21) {
+        var children = _ref21.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'justify' } },
@@ -13879,11 +13933,6 @@ var Feature = function Feature(props) {
   return React__default.createElement(
     'div',
     null,
-    React__default.createElement(
-      'style',
-      { jsx: true },
-      '\n        .carousel-indicators {\n          visibility: hidden;\n        }\n\n        .carousel-control-prev-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z\'/%3E%3C/svg%3E") !important;\n        }\n        .carousel-control-next-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.218 19l-1.782-1.75 5.25-5.25-5.25-5.25 1.782-1.75 6.968 7-6.968 7z\'/%3E%3C/svg%3E") !important;\n        }\n        .carousel-item img {\n          padding-left: 0 !important;\n          max-height: 500px !important;\n          min-height: 500px !important;\n        }\n        .carousel-item::after {\n          content: \'\';\n          position: absolute;\n          width: 100%;\n          height: 10px;\n          bottom: 0;\n          left: 0;\n          z-index: 999;\n          background: rgba(255, 255, 255, 0.6);\n        }\n        .carousel-caption {\n          padding-right: 0 !important;\n          justify-content: left !important;\n          display: flex;\n          flex-direction: row-reverse;\n          justify-content: center !important;\n          align-items: center;\n          bottom: 5px;\n          width: 100%;\n          padding-top: 0px;\n          left: 0 !important;\n          padding-bottom: 0px;\n        }\n        .carousel-caption a {\n          width: 100%;\n          margin-top: auto;\n          padding: 8%;\n          margin-bottom: 0px;\n          background: rgba(255, 255, 255, 0.6);\n        }\n        .carousel-caption a p,\n        .carousel-caption a h3 {\n          color: #3e3f3a !important;\n          text-align: left;\n          word-break: break-word;\n        }\n\n        .carousel-control-prev,\n        .carousel-control-next {\n          z-index: 999;\n        }\n        .carousel-caption h3,\n        .carousel-caption p {\n          font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n        }\n        .carousel-caption p {\n          font-size: 1.2em;\n        }\n        .carousel-caption h3 {\n          font-size: 1.6em;\n          font-weight: 400;\n        }\n        .carousel-item {\n          background: #eee !important;\n        }\n\n        .carousel-control-prev-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z\'/%3E%3C/svg%3E") !important;\n        }\n        .carousel-control-next-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.218 19l-1.782-1.75 5.25-5.25-5.25-5.25 1.782-1.75 6.968 7-6.968 7z\'/%3E%3C/svg%3E") !important;\n        }\n      '
-    ),
     React__default.createElement(
       Carousel,
       { touch: true, controls: controls },
@@ -14806,7 +14855,8 @@ export default Publication
 var PublicationLanding = function PublicationLanding(props) {
   var publication = props.publication,
       year = props.year,
-      href = props.href;
+      href = props.href,
+      pdf = props.pdf;
 
 
   var router = Router.useRouter();
@@ -14868,44 +14918,45 @@ var PublicationLanding = function PublicationLanding(props) {
     ),
     issueData && issueData.length > 0 ? issueData.map(function (issue, key) {
       return React__default.createElement(
-        'a',
-        { key: key, href: publication.identifier.current + '/' + issue.identifier.current },
+        Card,
+        { key: key, className: 'issueCard' },
         React__default.createElement(
-          Card,
-          { className: 'issueCard' },
+          Row,
+          null,
           React__default.createElement(
-            Row,
-            null,
-            React__default.createElement(
-              Col,
-              { md: 3, id: 'issueThumbnail' },
-              React__default.createElement(Card.Img, { src: issue.thumbnail })
-            ),
+            Col,
+            { md: 3, id: 'issueThumbnail' },
+            React__default.createElement(Card.Img, { src: issue.thumbnail })
+          ),
+          React__default.createElement(
+            Col,
+            { md: 9, id: 'issueDetail' },
             React__default.createElement(
-              Col,
-              { md: 9, id: 'issueDetail' },
+              Card.Body,
+              null,
               React__default.createElement(
-                Card.Body,
+                Card.Title,
                 null,
-                React__default.createElement(
-                  Card.Title,
-                  null,
-                  issue.name
-                ),
-                React__default.createElement(
-                  'p',
-                  null,
-                  'Volume: ',
-                  issue.volume,
-                  React__default.createElement('br', null),
-                  'Issue: ',
-                  issue.number
-                ),
-                React__default.createElement(
-                  Button,
-                  null,
-                  'View Issue'
-                )
+                issue.name
+              ),
+              React__default.createElement(
+                'p',
+                null,
+                'Volume: ',
+                issue.volume,
+                React__default.createElement('br', null),
+                'Issue: ',
+                issue.number
+              ),
+              React__default.createElement(
+                'a',
+                { href: publication.identifier.current + '/' + issue.identifier.current, className: 'btn btn-primary', style: { marginTop: '20px', marginLeft: '1rem' } },
+                'View Issue'
+              ),
+              issue.pdf && issue.pdf.asset && issue.pdf.asset.url && React__default.createElement(
+                'a',
+                { href: issue.pdf.asset.url, target: '_blank', className: 'btn btn-primary', style: { marginTop: '20px', marginLeft: '1rem' } },
+                'Download Issue'
               )
             )
           )
@@ -16858,6 +16909,7 @@ var Article = function Article(props) {
       drupalLeadSettings = props.drupalLeadSettings,
       currentPage = props.currentPage,
       _props$article = props.article,
+      articleId = _props$article._id,
       title = _props$article.title,
       passwordLock = _props$article.passwordLock,
       authorDetails = _props$article.authorDetails,
@@ -17018,7 +17070,7 @@ var Article = function Article(props) {
         React__default.Fragment,
         null,
         React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
           blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(0, selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
@@ -17035,7 +17087,7 @@ var Article = function Article(props) {
           React__default.createElement(AdSlot.DFPAdSlot, _extends$2._extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: checkIsVideoAdFound }))
         ),
         React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
@@ -17043,12 +17095,14 @@ var Article = function Article(props) {
     } else if (indexes.length >= 2 && body.length > 3 && payload.contextualAD && !payload.contextualVideoAD) {
       payload = _extends$2._extends({}, payload, {
         contextualAD: _extends$2._extends({}, payload.contextualAD, {
-          slotId: (payload.contextualAD.slotId || 'contextual_ad') + '-' + payload._id
+          slotId: (payload.contextualAD.slotId || 'contextual_ad') + '-' + payload._id,
+          className: 'ADFluid',
+          sizes: ['fluid']
         })
       });
       var _selectedIndex = indexes[1] + 1;
 
-      var _checkIsAdFound = function _checkIsAdFound(isFound) {
+      var _checkIsAdFound = function _checkIsAdFound(isFound, adData) {
         if (!isFound) {
           var parent = document.getElementById('contextual-native-ad-' + payload._id);
           parent.style.height = '0%';
@@ -17056,6 +17110,12 @@ var Article = function Article(props) {
           parent.style.display = 'none';
           setContextualADFlag(false);
         } else {
+          var _parent = document.getElementById('contextual-native-ad-' + payload._id);
+          if (adData && adData.event && adData.event.size && _parent) {
+            _parent.style.width = adData.event.size[0] + 'px';
+            _parent.style.height = adData.event.size[1] + 'px';
+            _parent.style.margin = 'auto';
+          }
           if (body[0]._type === 'figure' || body[1]._type === 'figure' || body[2]._type === 'figure' || body[3]._type === 'figure') {
             setContextualADFlag(true);
           }
@@ -17066,7 +17126,7 @@ var Article = function Article(props) {
         React__default.Fragment,
         null,
         React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(0, _selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
@@ -17078,7 +17138,7 @@ var Article = function Article(props) {
         ),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
         React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(_selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
@@ -17109,7 +17169,7 @@ var Article = function Article(props) {
         React__default.Fragment,
         null,
         React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
           blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(0, _selectedIndex2))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
@@ -17120,14 +17180,14 @@ var Article = function Article(props) {
           React__default.createElement(AdSlot.DFPAdSlot, _extends$2._extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound2 }))
         ),
         React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(toConsumableArray._toConsumableArray(body.slice(_selectedIndex2))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
       );
     } else {
       return React__default.createElement(TaxonomyCard.BlockContent, _extends$2._extends({
-        serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+        serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
         blocks: articleBody,
         imageOptions: { w: 320, h: 240, fit: 'max' }
       }, client.config()));

package/dist/esm/GroupDeck.js

@@ -252,7 +252,7 @@ var GroupDeck = function GroupDeck(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n\n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n        \n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (min-width: 1399px){\n          .block-content #vid-slider .tile__img{\n            height: 155px;\n          }\n          .block-content #vid-slider .tile{\n            height: 195px;\n          }\n        }\n\n        \n\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 60px 0 50px!important;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 110px;\n            object-fit: cover;\n          }\n      \n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 180px;\n          }\n\n          #vid-slider .tile__img {\n            height: 180px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n      '
+      '\n        #vid-slider * {\n          box-sizing: border-box;\n          -ms-overflow-style: none;\n        }\n        #vid-slider::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar {\n          display: none;\n        }\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          display: none;\n        }\n        #vid-slider {\n          position: relative;\n          -ms-overflow-style: none;\n          padding: 0 1.5rem;\n          margin-bottom: 2rem;\n        }\n        #vid-slider .now-playing {\n          position: absolute;\n          top: 0.5rem;\n          left: 1rem;\n          color: white;\n          background: rgba(0, 0, 0, 0.75);\n        }\n        #vid-slider h1,\n        #vid-slider p {\n          text-align: center;\n          width: 100%;\n          max-width: 500px;\n          margin: auto;\n        }\n        #vid-slider,\n        #vidHolder {\n          max-width: 805px;\n        }\n        #vid-slider a:link,\n        #vid-slider a:hover,\n        #vid-slider a:active,\n        #vid-slider a:visited {\n          transition: color 150ms;\n          color: #95a5a6;\n          text-decoration: none;\n        }\n        #vid-slider a:hover {\n          color: #7f8c8d;\n          text-decoration: underline;\n        }\n        #vid-slider .contain {\n          width: 100%;\n        }\n        #vid-slider .row {\n          overflow-x: scroll;\n          width: 100%;\n          -ms-overflow-style: none;\n          overflow-y: hidden !important;\n        }\n        #vid-slider .tile__info {\n          white-space: normal !important;\n          position: absolute;\n          text-align: center;\n          color: ' + (props.dark ? 'white' : '#383838') + ';\n          opacity: 1;\n          font-size: 0.9rem;\n          font-weight: bold;\n          transition: opacity 0.25s;\n        }\n        #vid-slider .row__inner {\n          transition: 450ms -webkit-transform;\n          transition: 450ms transform;\n          transition: 450ms transform, 450ms -webkit-transform;\n          font-size: 0;\n          white-space: nowrap;\n          margin: 25px 0 55px !important;\n          padding-bottom: 10px;\n          padding-left: 0;\n        }\n        #vid-slider .tile {\n          position: relative;\n          display: inline-block;\n          height: 135px;\n\n          margin: 0 12px;\n          font-size: 20px;\n          cursor: pointer;\n          transition: 450ms all;\n          -webkit-transform-origin: center left;\n          transform-origin: center left;\n        }\n\n        #vid-slider .tile:first-child {\n          margin-left: 15px;\n        }\n        #vid-slider .tile__img {\n          height: 135px;\n          -o-object-fit: cover;\n          object-fit: cover;\n          object-position: center;\n        }\n        #vid-slider .tile__details {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          right: 0;\n          top: 0;\n          font-size: 10px;\n          opacity: 0;\n          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n          transition: 450ms opacity;\n        }\n        #vid-slider .tile__details:after,\n        #vid-slider .tile__details:before {\n          content: \'\';\n\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          display: #000;\n        }\n        #vid-slider .tile__details:after {\n          margin-top: -25px;\n          margin-left: -25px;\n          width: 50px;\n          height: 50px;\n          border: 3px solid #ecf0f1;\n          line-height: 50px;\n          text-align: center;\n          border-radius: 100%;\n          background: rgba(0, 0, 0, 0.5);\n          z-index: 1;\n        }\n        #vid-slider .tile__details:before {\n          content: \'\';\n          background: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 64 64\' width=\'64\' height=\'64\' fill=\'white\'><path d=\'M26 46 L46 32 L26 18 Z\'/></svg>")\n            no-repeat center center;\n          left: 0;\n          width: 100%;\n          height: 3rem;\n          font-size: 30px;\n          margin-right: 12px;\n          margin-top: -24px;\n          text-align: center;\n          z-index: 2;\n          color: white;\n        }\n\n        #vid-slider .tile__title {\n          position: absolute;\n          bottom: 0;\n          padding: 10px;\n          max-width: 250px;\n        }\n        #vid-slider .tile__title_text {\n          position: relative;\n          left: 0;\n          white-space: normal;\n        }\n\n        #vid-slider .tile__slider-prev,\n        #vid-slider .tile__slider-next {\n          width: 30px;\n          background: transparent;\n          border: none;\n          position: absolute;\n          top: 50%;\n          transform: translateY(-50%);\n          z-index: 99;\n          cursor: pointer;\n          color: ' + (props.dark ? 'white' : 'black') + ';\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-size: 2rem;\n        }\n        #vid-slider .tile__slider-prev {\n          left: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider .tile__slider-next {\n          right: -0.5rem;\n          padding: 1rem;\n        }\n        #vid-slider,\n        #vid-slider .row {\n          margin: 0;\n          padding-right: 0 1.2rem;\n        }\n\n        #vid-slider .row::-webkit-scrollbar-thumb {\n          background-color: transparent !important;\n        }\n        #vid-slider i {\n          border: solid ' + (props.dark ? 'white' : 'black') + ';\n          border-width: 0 4px 4px 0;\n          display: inline-block;\n          padding: 4px;\n          pointer-events: none;\n        }\n        #vid-slider .right {\n          transform: rotate(-45deg);\n          -webkit-transform: rotate(-45deg);\n        }\n        #vid-slider .left {\n          transform: rotate(135deg);\n          -webkit-transform: rotate(135deg);\n        }\n        @media screen and (min-width: 1399px) {\n          .block-content #vid-slider .tile__img {\n            height: 195px;\n          }\n          .block-content #vid-slider .tile {\n            height: 195px;\n          }\n        }\n\n        @media screen and (max-width: 1399px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 620px;\n          }\n        }\n        @media screen and (max-width: 1200px) {\n          #vid-slider,\n          #vidHolder {\n            max-width: 580px;\n          }\n        }\n        @media screen and (max-width: 967px) {\n          #vid-slider {\n            max-width: 100%;\n          }\n\n          #vid-slider .tile__img {\n            height: 85px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 60px 0 50px !important;\n          }\n        }\n\n        @media screen and (max-width: 768px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 130px;\n          }\n\n          #vid-slider .tile__img {\n            height: 130px;\n            object-fit: cover;\n          }\n        }\n        @media screen and (max-width: 568px) {\n          #vidHolder {\n            position: unset;\n            width: 100%;\n          }\n          #vid-slider .tile {\n            height: 140px;\n          }\n\n          #vid-slider .tile__img {\n            height: 160px;\n            object-fit: cover;\n          }\n          #vid-slider .row__inner {\n            margin: 30px 0 60px;\n          }\n        }\n        @media screen and (max-width: 468px) {\n          #vid-slider .tile {\n            height: 130px;\n          }\n          #vid-slider .tile__img {\n            height: 130px;\n          }\n        }\n        @media screen and (max-width: 386px) {\n          #vid-slider .tile {\n            height: 100px;\n          }\n          #vid-slider .tile__img {\n            height: 100px;\n          }\n        }\n      '
     )
   );
 };

package/dist/esm/IssueDeck.js

@@ -5,7 +5,7 @@ import './_iter-detect-7c281f0a.js';
 import { _ as _toConsumableArray } from './toConsumableArray-c5e2fde8.js';
 import './_object-pie-33c40e79.js';
 import { _ as _extends } from './extends-92072fff.js';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useEffect, useRef } from 'react';
 import 'prop-types';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
@@ -59,8 +59,6 @@ var IssueDeck = function IssueDeck(props) {
       values = _useState8[0],
       setValues = _useState8[1];
 
-  var deckRef = useRef(null);
-
   var prevValues = usePrevious(values);
 
   var urlFor = function urlFor(source) {
@@ -125,9 +123,17 @@ var IssueDeck = function IssueDeck(props) {
     }
   }, [values, prevValues, query, client, params, setIssuesData, setScrolling]);
 
+  useEffect(function () {
+    if (issuesData.length < count) {
+      var parentScroll = document.getElementsByClassName('infinite-scroll-component')[0];
+      parentScroll.style.overflow = 'hidden';
+      setScrolling(false);
+    }
+  }, [issuesData, setScrolling, count]);
+
   return React__default.createElement(
     InfiniteScroll,
-    { ref: deckRef, dataLength: issuesData && issuesData.length, next: function next() {
+    { dataLength: issuesData && issuesData.length, next: function next() {
         return loadMore();
       }, hasMore: scrolling, scrollThreshold: 0.9 },
     React__default.createElement(

package/dist/esm/index.js

@@ -5606,7 +5606,7 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
   };
 
   var handleOnPlay = function handleOnPlay(event) {
-    // report play 
+    // report play
     var player = event.target;
     var current = player.getCurrentTime();
     var duration = player.getDuration();
@@ -5648,7 +5648,16 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
     Beam.report_beam_video('Pause', main_16, duration, current, segment);
   };
 
-  return React__default.createElement(YouTube, { videoId: id, opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd });
+  return React__default.createElement(
+    'div',
+    { id: 'fluid-video-container' },
+    React__default.createElement(YouTube, { className: 'fluid-iframe', videoId: id, opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: handleOnEnd }),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        #fluid-video-container {\n          margin-bottom: 2rem;\n        }\n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n      '
+    )
+  );
 };
 
 var Sidebar = function Sidebar(_ref) {
@@ -12973,7 +12982,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (series.classList.contains('active')) {
       series.style.bottom = '-100%';
     } else {
-      series.style.bottom = '6px';
+      series.style.bottom = '2px';
     }
     series.classList.toggle('active');
   }
@@ -13087,10 +13096,18 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     { className: 'video-container', style: { marginBottom: '2rem' } },
     React__default.createElement(
       'div',
-      { className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
-      vidUrl && vidType == 'youtube' && React__default.createElement(YouTube, { videoId: getYoutubeId(vidUrl), opts: opts, onReady: handleOnReady, onPlay: handleOnPlay, onPause: handleOnPause, onEnd: function onEnd(e) {
+      { id: 'fluid-video-container', className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
+      vidUrl && vidType == 'youtube' && React__default.createElement(YouTube, {
+        className: 'fluid-iframe',
+        videoId: getYoutubeId(vidUrl),
+        opts: opts,
+        onReady: handleOnReady,
+        onPlay: handleOnPlay,
+        onPause: handleOnPause,
+        onEnd: function onEnd(e) {
           return handleOnEnd(e);
-        } }),
+        }
+      }),
       vidUrl && vidType == 'mp4' && React__default.createElement(VideoMp4, { url: vidUrl, thumbnail: vidThumbnail, vidLoaded: vidLoaded }),
       vidUrl && vidType == 'brightcove' && React__default.createElement(Video, { node: { videoID: vidUrl, source: 'brightcove' }, accountIDs: accountIDs }),
       React__default.createElement(
@@ -13100,7 +13117,8 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
           style: {
             position: 'absolute',
             width: '100%',
-            height: '250px',
+            height: '270px',
+            maxHeight: '100%',
             background: 'linear-gradient(to bottom, transparent,black)',
             bottom: '-100%',
             transition: 'all .5s ease',
@@ -13143,7 +13161,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .vid-series .video-detail iframe {\n          height: 415px !important;\n        }\n        span.btn {\n          margin: 0 1rem;\n        }\n        .brightcove .video-js {\n          float: none;\n          width: 100%;\n          height: 385px;\n        }\n        @media screen and (max-width: 1399px) {\n          .brightcove .video-js {\n            height: 360px;\n          }\n        }\n        @media screen and (max-width: 495px) {\n          .brightcove .video-js {\n            height: 255px;\n          }\n        }\n      '
+      '\n     \n        #fluid-video-container > div {\n          position: relative;\n          padding-bottom: 56.25%; /* 16:9 */\n          height: 0;\n        }\n        #fluid-video-container .fluid-iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100% !important;\n        }\n\n        span.btn {\n          margin: 0 1rem;\n        }\n        .brightcove .video-js {\n          float: none;\n          width: 100%;\n          height: 385px;\n        }\n        @media screen and (max-width: 1399px) {\n          .brightcove .video-js {\n            height: 360px;\n          }\n        }\n        @media screen and (max-width: 495px) {\n          .brightcove .video-js {\n            height: 255px;\n          }\n        }\n      '
     )
   );
 };
@@ -13593,6 +13611,25 @@ var MultiFigure = function MultiFigure(props) {
   return null;
 };
 
+var AnchorLinkElement = function AnchorLinkElement(props) {
+  var articleId = props.articleId,
+      _props$node = props.node,
+      _props$node$id = _props$node.id,
+      id = _props$node$id === undefined ? '' : _props$node$id,
+      _props$node$content = _props$node.content,
+      content = _props$node$content === undefined ? [] : _props$node$content,
+      getSerializers = props.getSerializers;
+
+
+  var elementId = articleId ? id + '-' + articleId : id;
+
+  return React__default.createElement(
+    'div',
+    { id: elementId },
+    React__default.createElement(BlockContent, { blocks: content, serializers: getSerializers })
+  );
+};
+
 var Figure = dynamic(function () {
   return import('./Figure-cc1affbe.js');
 }, { ssr: false });
@@ -13635,7 +13672,8 @@ var getSerializers = function getSerializers() {
       _props$ = props[7],
       autoplay = _props$ === undefined ? false : _props$,
       _props$2 = props[8],
-      contextualADFlag = _props$2 === undefined ? false : _props$2;
+      contextualADFlag = _props$2 === undefined ? false : _props$2,
+      articleId = props[9];
 
   return {
     types: {
@@ -13735,6 +13773,11 @@ var getSerializers = function getSerializers() {
         var node = _ref16.node;
 
         return React__default.createElement(NativeAd, { node: node });
+      },
+      html_anchor_links: function html_anchor_links(_ref17) {
+        var node = _ref17.node;
+
+        return React__default.createElement(AnchorLinkElement, { node: node, getSerializers: getSerializers.apply(undefined, props), articleId: articleId });
       }
     },
     marks: {
@@ -13758,6 +13801,17 @@ var getSerializers = function getSerializers() {
             href = _props$mark.href,
             blank = _props$mark.blank;
 
+
+        if (href.charAt(0) === '#') {
+          var elementId = href.slice(1);
+          var scrollId = articleId ? '#' + elementId + '-' + articleId : '#' + elementId;
+          return React__default.createElement(
+            'a',
+            { href: scrollId },
+            children
+          );
+        }
+
         var isExernalUrl = checkUrlIsExternal(href);
         return React__default.createElement(
           'a',
@@ -13765,32 +13819,32 @@ var getSerializers = function getSerializers() {
           children
         );
       },
-      alignleft: function alignleft(_ref17) {
-        var children = _ref17.children;
+      alignleft: function alignleft(_ref18) {
+        var children = _ref18.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'left' } },
           children
         );
       },
-      alignright: function alignright(_ref18) {
-        var children = _ref18.children;
+      alignright: function alignright(_ref19) {
+        var children = _ref19.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'right' } },
           children
         );
       },
-      aligncenter: function aligncenter(_ref19) {
-        var children = _ref19.children;
+      aligncenter: function aligncenter(_ref20) {
+        var children = _ref20.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'center' } },
           children
         );
       },
-      alignjustify: function alignjustify(_ref20) {
-        var children = _ref20.children;
+      alignjustify: function alignjustify(_ref21) {
+        var children = _ref21.children;
         return React__default.createElement(
           'div',
           { style: { textAlign: 'justify' } },
@@ -13876,11 +13930,6 @@ var Feature = function Feature(props) {
   return React__default.createElement(
     'div',
     null,
-    React__default.createElement(
-      'style',
-      { jsx: true },
-      '\n        .carousel-indicators {\n          visibility: hidden;\n        }\n\n        .carousel-control-prev-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z\'/%3E%3C/svg%3E") !important;\n        }\n        .carousel-control-next-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.218 19l-1.782-1.75 5.25-5.25-5.25-5.25 1.782-1.75 6.968 7-6.968 7z\'/%3E%3C/svg%3E") !important;\n        }\n        .carousel-item img {\n          padding-left: 0 !important;\n          max-height: 500px !important;\n          min-height: 500px !important;\n        }\n        .carousel-item::after {\n          content: \'\';\n          position: absolute;\n          width: 100%;\n          height: 10px;\n          bottom: 0;\n          left: 0;\n          z-index: 999;\n          background: rgba(255, 255, 255, 0.6);\n        }\n        .carousel-caption {\n          padding-right: 0 !important;\n          justify-content: left !important;\n          display: flex;\n          flex-direction: row-reverse;\n          justify-content: center !important;\n          align-items: center;\n          bottom: 5px;\n          width: 100%;\n          padding-top: 0px;\n          left: 0 !important;\n          padding-bottom: 0px;\n        }\n        .carousel-caption a {\n          width: 100%;\n          margin-top: auto;\n          padding: 8%;\n          margin-bottom: 0px;\n          background: rgba(255, 255, 255, 0.6);\n        }\n        .carousel-caption a p,\n        .carousel-caption a h3 {\n          color: #3e3f3a !important;\n          text-align: left;\n          word-break: break-word;\n        }\n\n        .carousel-control-prev,\n        .carousel-control-next {\n          z-index: 999;\n        }\n        .carousel-caption h3,\n        .carousel-caption p {\n          font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n        }\n        .carousel-caption p {\n          font-size: 1.2em;\n        }\n        .carousel-caption h3 {\n          font-size: 1.6em;\n          font-weight: 400;\n        }\n        .carousel-item {\n          background: #eee !important;\n        }\n\n        .carousel-control-prev-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm7.58 0l5.988-5.995 1.414 1.416-4.574 4.579 4.574 4.59-1.414 1.416-5.988-6.006z\'/%3E%3C/svg%3E") !important;\n        }\n        .carousel-control-next-icon {\n          width: 25%;\n          height: 100%;\n          background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' fill=\'%23000000\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.218 19l-1.782-1.75 5.25-5.25-5.25-5.25 1.782-1.75 6.968 7-6.968 7z\'/%3E%3C/svg%3E") !important;\n        }\n      '
-    ),
     React__default.createElement(
       Carousel$1,
       { touch: true, controls: controls },
@@ -14803,7 +14852,8 @@ export default Publication
 var PublicationLanding = function PublicationLanding(props) {
   var publication = props.publication,
       year = props.year,
-      href = props.href;
+      href = props.href,
+      pdf = props.pdf;
 
 
   var router = useRouter();
@@ -14865,44 +14915,45 @@ var PublicationLanding = function PublicationLanding(props) {
     ),
     issueData && issueData.length > 0 ? issueData.map(function (issue, key) {
       return React__default.createElement(
-        'a',
-        { key: key, href: publication.identifier.current + '/' + issue.identifier.current },
+        Card,
+        { key: key, className: 'issueCard' },
         React__default.createElement(
-          Card,
-          { className: 'issueCard' },
+          Row,
+          null,
           React__default.createElement(
-            Row,
-            null,
-            React__default.createElement(
-              Col,
-              { md: 3, id: 'issueThumbnail' },
-              React__default.createElement(Card.Img, { src: issue.thumbnail })
-            ),
+            Col,
+            { md: 3, id: 'issueThumbnail' },
+            React__default.createElement(Card.Img, { src: issue.thumbnail })
+          ),
+          React__default.createElement(
+            Col,
+            { md: 9, id: 'issueDetail' },
             React__default.createElement(
-              Col,
-              { md: 9, id: 'issueDetail' },
+              Card.Body,
+              null,
               React__default.createElement(
-                Card.Body,
+                Card.Title,
                 null,
-                React__default.createElement(
-                  Card.Title,
-                  null,
-                  issue.name
-                ),
-                React__default.createElement(
-                  'p',
-                  null,
-                  'Volume: ',
-                  issue.volume,
-                  React__default.createElement('br', null),
-                  'Issue: ',
-                  issue.number
-                ),
-                React__default.createElement(
-                  Button,
-                  null,
-                  'View Issue'
-                )
+                issue.name
+              ),
+              React__default.createElement(
+                'p',
+                null,
+                'Volume: ',
+                issue.volume,
+                React__default.createElement('br', null),
+                'Issue: ',
+                issue.number
+              ),
+              React__default.createElement(
+                'a',
+                { href: publication.identifier.current + '/' + issue.identifier.current, className: 'btn btn-primary', style: { marginTop: '20px', marginLeft: '1rem' } },
+                'View Issue'
+              ),
+              issue.pdf && issue.pdf.asset && issue.pdf.asset.url && React__default.createElement(
+                'a',
+                { href: issue.pdf.asset.url, target: '_blank', className: 'btn btn-primary', style: { marginTop: '20px', marginLeft: '1rem' } },
+                'Download Issue'
               )
             )
           )
@@ -16855,6 +16906,7 @@ var Article = function Article(props) {
       drupalLeadSettings = props.drupalLeadSettings,
       currentPage = props.currentPage,
       _props$article = props.article,
+      articleId = _props$article._id,
       title = _props$article.title,
       passwordLock = _props$article.passwordLock,
       authorDetails = _props$article.authorDetails,
@@ -17015,7 +17067,7 @@ var Article = function Article(props) {
         React__default.Fragment,
         null,
         React__default.createElement(BlockContent, _extends$2({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
           blocks: [].concat(_toConsumableArray(body.slice(0, selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
@@ -17032,7 +17084,7 @@ var Article = function Article(props) {
           React__default.createElement(DFPAdSlot, _extends$2({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: checkIsVideoAdFound }))
         ),
         React__default.createElement(BlockContent, _extends$2({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(_toConsumableArray(body.slice(selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
@@ -17040,12 +17092,14 @@ var Article = function Article(props) {
     } else if (indexes.length >= 2 && body.length > 3 && payload.contextualAD && !payload.contextualVideoAD) {
       payload = _extends$2({}, payload, {
         contextualAD: _extends$2({}, payload.contextualAD, {
-          slotId: (payload.contextualAD.slotId || 'contextual_ad') + '-' + payload._id
+          slotId: (payload.contextualAD.slotId || 'contextual_ad') + '-' + payload._id,
+          className: 'ADFluid',
+          sizes: ['fluid']
         })
       });
       var _selectedIndex = indexes[1] + 1;
 
-      var _checkIsAdFound = function _checkIsAdFound(isFound) {
+      var _checkIsAdFound = function _checkIsAdFound(isFound, adData) {
         if (!isFound) {
           var parent = document.getElementById('contextual-native-ad-' + payload._id);
           parent.style.height = '0%';
@@ -17053,6 +17107,12 @@ var Article = function Article(props) {
           parent.style.display = 'none';
           setContextualADFlag(false);
         } else {
+          var _parent = document.getElementById('contextual-native-ad-' + payload._id);
+          if (adData && adData.event && adData.event.size && _parent) {
+            _parent.style.width = adData.event.size[0] + 'px';
+            _parent.style.height = adData.event.size[1] + 'px';
+            _parent.style.margin = 'auto';
+          }
           if (body[0]._type === 'figure' || body[1]._type === 'figure' || body[2]._type === 'figure' || body[3]._type === 'figure') {
             setContextualADFlag(true);
           }
@@ -17063,7 +17123,7 @@ var Article = function Article(props) {
         React__default.Fragment,
         null,
         React__default.createElement(BlockContent, _extends$2({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(_toConsumableArray(body.slice(0, _selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
@@ -17075,7 +17135,7 @@ var Article = function Article(props) {
         ),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
         React__default.createElement(BlockContent, _extends$2({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(_toConsumableArray(body.slice(_selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
@@ -17106,7 +17166,7 @@ var Article = function Article(props) {
         React__default.Fragment,
         null,
         React__default.createElement(BlockContent, _extends$2({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag, articleId),
           blocks: [].concat(_toConsumableArray(body.slice(0, _selectedIndex2))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
@@ -17117,14 +17177,14 @@ var Article = function Article(props) {
           React__default.createElement(DFPAdSlot, _extends$2({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound2 }))
         ),
         React__default.createElement(BlockContent, _extends$2({
-          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
           blocks: [].concat(_toConsumableArray(body.slice(_selectedIndex2))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
       );
     } else {
       return React__default.createElement(BlockContent, _extends$2({
-        serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+        serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, undefined, articleId),
         blocks: articleBody,
         imageOptions: { w: 320, h: 240, fit: 'max' }
       }, client.config()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.411",
+  "version": "1.0.414",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",