@mjhls/mjh-framework 1.0.389 → 1.0.390

package/dist/esm/index.js

@@ -6409,170 +6409,6 @@ var TableShow = function TableShow(_ref) {
   );
 };
 
-var download = createCommonjsModule(function (module, exports) {
-//download.js v4.2, by dandavis; 2008-2016. [MIT] see http://danml.com/download.html for tests/usage
-// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
-// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
-// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
-// v4 adds AMD/UMD, commonJS, and plain browser support
-// v4.1 adds url download capability via solo URL argument (same domain/CORS only)
-// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
-// https://github.com/rndme/download
-
-(function (root, factory) {
-	{
-		// Node. Does not work with strict CommonJS, but
-		// only CommonJS-like environments that support module.exports,
-		// like Node.
-		module.exports = factory();
-	}
-}(commonjsGlobal, function () {
-
-	return function download(data, strFileName, strMimeType) {
-
-		var self = window, // this script is only for browsers anyway...
-			defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
-			mimeType = strMimeType || defaultMime,
-			payload = data,
-			url = !strFileName && !strMimeType && payload,
-			anchor = document.createElement("a"),
-			toString = function(a){return String(a);},
-			myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
-			fileName = strFileName || "download",
-			blob,
-			reader;
-			myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
-	  
-		if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
-			payload=[payload, mimeType];
-			mimeType=payload[0];
-			payload=payload[1];
-		}
-
-
-		if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
-			fileName = url.split("/").pop().split("?")[0];
-			anchor.href = url; // assign href prop to temp anchor
-		  	if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
-        		var ajax=new XMLHttpRequest();
-        		ajax.open( "GET", url, true);
-        		ajax.responseType = 'blob';
-        		ajax.onload= function(e){ 
-				  download(e.target.response, fileName, defaultMime);
-				};
-        		setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
-			    return ajax;
-			} // end if valid url?
-		} // end if url?
-
-
-		//go ahead and download dataURLs right away
-		if(/^data:([\w+-]+\/[\w+.-]+)?[,;]/.test(payload)){
-		
-			if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
-				payload=dataUrlToBlob(payload);
-				mimeType=payload.type || defaultMime;
-			}else {			
-				return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
-					navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
-					saver(payload) ; // everyone else can save dataURLs un-processed
-			}
-			
-		}else {//not data url, is it a string with special needs?
-			if(/([\x80-\xff])/.test(payload)){			  
-				var i=0, tempUiArr= new Uint8Array(payload.length), mx=tempUiArr.length;
-				for(i;i<mx;++i) tempUiArr[i]= payload.charCodeAt(i);
-			 	payload=new myBlob([tempUiArr], {type: mimeType});
-			}		  
-		}
-		blob = payload instanceof myBlob ?
-			payload :
-			new myBlob([payload], {type: mimeType}) ;
-
-
-		function dataUrlToBlob(strUrl) {
-			var parts= strUrl.split(/[:;,]/),
-			type= parts[1],
-			decoder= parts[2] == "base64" ? atob : decodeURIComponent,
-			binData= decoder( parts.pop() ),
-			mx= binData.length,
-			i= 0,
-			uiArr= new Uint8Array(mx);
-
-			for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);
-
-			return new myBlob([uiArr], {type: type});
-		 }
-
-		function saver(url, winMode){
-
-			if ('download' in anchor) { //html5 A[download]
-				anchor.href = url;
-				anchor.setAttribute("download", fileName);
-				anchor.className = "download-js-link";
-				anchor.innerHTML = "downloading...";
-				anchor.style.display = "none";
-				document.body.appendChild(anchor);
-				setTimeout(function() {
-					anchor.click();
-					document.body.removeChild(anchor);
-					if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
-				}, 66);
-				return true;
-			}
-
-			// handle non-a[download] safari as best we can:
-			if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
-				if(/^data:/.test(url))	url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
-				if(!window.open(url)){ // popup blocked, offer direct download:
-					if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
-				}
-				return true;
-			}
-
-			//do iframe dataURL download (old ch+FF):
-			var f = document.createElement("iframe");
-			document.body.appendChild(f);
-
-			if(!winMode && /^data:/.test(url)){ // force a mime that will download:
-				url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
-			}
-			f.src=url;
-			setTimeout(function(){ document.body.removeChild(f); }, 333);
-
-		}//end saver
-
-
-
-
-		if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
-			return navigator.msSaveBlob(blob, fileName);
-		}
-
-		if(self.URL){ // simple fast and modern way using Blob and URL:
-			saver(self.URL.createObjectURL(blob), true);
-		}else {
-			// handle non-Blob()+non-URL browsers:
-			if(typeof blob === "string" || blob.constructor===toString ){
-				try{
-					return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );
-				}catch(y){
-					return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );
-				}
-			}
-
-			// Blob but not URL support:
-			reader=new FileReader();
-			reader.onload=function(e){
-				saver(this.result);
-			};
-			reader.readAsDataURL(blob);
-		}
-		return true;
-	}; /* end download() */
-}));
-});
-
 var Media = function Media(_ref) {
   var node = _ref.node,
       client = _ref.client;
@@ -6661,9 +6497,7 @@ var Media = function Media(_ref) {
     return React__default.createElement(
       'a',
       _extends$2({}, uploadDoc.downloadMedia ? {
-        onClick: function onClick() {
-          download(uploadDoc.asset.url);
-        }
+        href: uploadDoc.asset.url + '?dl='
       } : { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self', rel: 'noopener noreferrer' }, {
         style: { paddingLeft: '4px', paddingRight: '4px' },
         id: 'media-link' }),
@@ -15714,38 +15548,41 @@ var fbsHero = function fbsHero(props) {
     'div',
     { className: 'article-hero' },
     React__default.createElement(
-      'a',
-      { href: '/view/' + topArticle.url.current },
+      'div',
+      { className: 'fbs-top-article' },
       React__default.createElement(
         'div',
-        { className: 'fbs-top-article' },
+        { className: 'fbs-top-article--img' },
         React__default.createElement(
-          'div',
-          { className: 'fbs-top-article--img' },
+          'a',
+          { href: '/view/' + topArticle.url.current },
           React__default.createElement('img', { src: topArticleThumbnail, alt: topArticleAltText })
-        ),
+        )
+      ),
+      React__default.createElement(
+        'div',
+        { className: 'fbs-top-article--body' },
         React__default.createElement(
-          'div',
-          { className: 'fbs-top-article--body' },
+          'a',
+          { href: '/view/' + topArticle.url.current },
           React__default.createElement(
             'h1',
             null,
             topArticle.title
-          ),
+          )
+        ),
+        React__default.createElement(
+          'p',
+          null,
+          moment(topArticle.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
+        ),
+        topArticle.authorMapping && topArticle.authorMapping.length > 0 && React__default.createElement(
+          'div',
+          { className: 'author-wrapper' },
           React__default.createElement(
-            'p',
-            null,
-            moment(topArticle.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
-          ),
-          topArticle.authorMapping && topArticle.authorMapping[0] && React__default.createElement(
-            'p',
-            null,
-            'By ',
-            React__default.createElement(
-              'b',
-              null,
-              topArticle.authorMapping[0].displayName
-            )
+            LazyLoad,
+            { height: 50 },
+            React__default.createElement(AuthorComponent, { key: topArticle.url.current, index: topArticle.url.current, authors: topArticle.authorMapping })
           )
         )
       )
@@ -15764,31 +15601,34 @@ var fbsHero = function fbsHero(props) {
         }
 
         return React__default.createElement(
-          'a',
-          { key: index, href: '/view/' + article.url.current, className: 'fbs-sub-article' },
-          React__default.createElement('img', { src: articleThumbnail, alt: articleAltText }),
+          'div',
+          { key: index, className: 'fbs-sub-article' },
+          React__default.createElement(
+            'a',
+            { href: '/view/' + article.url.current },
+            React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+          ),
           React__default.createElement(
             'div',
             null,
             React__default.createElement(
-              'h2',
-              { className: 'fbs-sub-article--title' },
-              article.title
+              'a',
+              { href: '/view/' + article.url.current },
+              React__default.createElement(
+                'h2',
+                { className: 'fbs-sub-article--title' },
+                article.title
+              )
             ),
             React__default.createElement(
               'p',
               null,
               moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
             ),
-            article.authorMapping && article.authorMapping[0] && React__default.createElement(
-              'p',
-              null,
-              'By ',
-              React__default.createElement(
-                'b',
-                null,
-                article.authorMapping[0].displayName
-              )
+            article.authorMapping && article.authorMapping.length > 0 && React__default.createElement(
+              LazyLoad,
+              { height: 50 },
+              React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
             )
           )
         );
@@ -15797,7 +15637,7 @@ var fbsHero = function fbsHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n        }\n        .fbs-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n        }\n        .fbs-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n         \n        }\n\n        .fbs-top-article--body {\n        }\n        .fbs-top-article--body h1 {\n          color: #252525 !important;\n          font-size: 1.6rem;\n          font-weight: bold;\n          text-align: center;\n          margin-top: 1rem;\n        }\n        .fbs-top-article--body p {\n          text-align: center;\n          margin-bottom: 0;\n          color: #252525;\n        }\n        .fbs-top-article--body p:first-of-type {\n          font-size: 0.9rem;\n        }\n        .fbs-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n\n          padding-top: 1.75rem;\n          margin-left: -1rem;\n          margin-rigth: -1rem;\n        }\n        .fbs-sub-article {\n          width: calc(50% - 2rem);\n          min-width: 350px;\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0 1rem 1.75rem;\n        }\n        .fbs-sub-article img {\n          margin-right: 1rem;\n          width: 145px;\n          min-width: 145px;\n          max-height: 100px;\n          object-fit: cover;\n        }\n        .fbs-sub-article p {\n          margin-bottom: 0;\n          font-size: 0.8rem;\n          color: #252525;\n        }\n        .fbs-sub-article .fbs-sub-article--title {\n          font-weight: bold;\n          font-size: 1rem;\n          color: #252525;\n        }\n      '
+      '\n        .author-wrapper {\n          text-align: center;\n        }\n        .article-hero {\n          margin-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n          padding-bottom: 0.5rem;\n        }\n        .fbs-top-article {\n          width: 100%;\n          margin-bottom: 1rem;\n          padding-bottom: 1rem;\n          border-bottom: 1px solid #ddd;\n        }\n        .fbs-top-article img {\n          width: 100%;\n\n          max-height: 300px;\n          min-height: 275px;\n          object-fit: cover;\n        }\n\n        .fbs-top-article--body {\n        }\n        .fbs-top-article--body h1 {\n          color: #252525 !important;\n          font-size: 1.6rem;\n          font-weight: bold;\n          text-align: center;\n          margin-top: 1rem;\n        }\n        .fbs-top-article--body p {\n          text-align: center;\n          margin-bottom: 0;\n          color: #252525;\n        }\n        .fbs-top-article--body p:first-of-type {\n          font-size: 0.9rem;\n        }\n        .fbs-sub-article-container {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n\n          padding-top: 1.75rem;\n          margin-left: -1rem;\n          margin-rigth: -1rem;\n        }\n        .fbs-sub-article {\n          width: calc(50% - 2rem);\n          min-width: 350px;\n          display: flex;\n          flex-direction: row;\n          flex: 1 1 auto;\n          margin: 0 1rem 1.75rem;\n        }\n        .fbs-sub-article img {\n          margin-right: 1rem;\n          width: 145px;\n          min-width: 145px;\n          max-height: 100px;\n          object-fit: cover;\n        }\n        .fbs-sub-article p {\n          margin-bottom: 0;\n          font-size: 0.8rem;\n          color: #252525;\n        }\n        .fbs-sub-article .fbs-sub-article--title {\n          font-weight: bold;\n          font-size: 1rem;\n          color: #252525;\n        }\n      '
     )
   );
 };
@@ -16029,31 +15869,38 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
             articleThumbnail = props.thumbnail;
           }
           return React__default.createElement(
-            'a',
-            { key: index, href: '/view/' + article.url.current, className: 'sub-article' },
+            'div',
+            { key: index, className: 'sub-article' },
             React__default.createElement(
-              'figure',
-              null,
-              React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+              'a',
+              { href: '/view/' + article.url.current },
+              React__default.createElement(
+                'figure',
+                null,
+                React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+              )
             ),
             React__default.createElement(
               'div',
               { className: 'sub-article--body' },
               React__default.createElement(
-                'h2',
-                null,
-                article.title
+                'a',
+                { href: '/view/' + article.url.current },
+                React__default.createElement(
+                  'h2',
+                  null,
+                  article.title
+                )
               ),
               React__default.createElement('div', null),
               moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM Do YYYY, h:mma'),
-              article.authorMapping && article.authorMapping[0] && article.authorMapping[0].displayName && React__default.createElement(
-                'p',
-                { className: 'mb-2' },
-                'By ',
+              article.authorMapping && article.authorMapping.length > 0 && React__default.createElement(
+                'div',
+                { className: 'author-wrapper' },
                 React__default.createElement(
-                  'b',
-                  null,
-                  article.authorMapping[0].displayName
+                  LazyLoad,
+                  { height: 50 },
+                  React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
                 )
               )
             )
@@ -16077,31 +15924,38 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
             articleThumbnail = props.thumbnail;
           }
           return React__default.createElement(
-            'a',
-            { key: index, href: '/view/' + article.url.current, className: 'sub-article' },
+            'div',
+            { key: index, className: 'sub-article' },
             React__default.createElement(
-              'figure',
-              null,
-              React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+              'a',
+              { href: '/view/' + article.url.current },
+              React__default.createElement(
+                'figure',
+                null,
+                React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+              )
             ),
             React__default.createElement(
               'div',
               { className: 'sub-article--body' },
               React__default.createElement(
-                'h2',
-                null,
-                article.title
+                'a',
+                { href: '/view/' + article.url.current },
+                React__default.createElement(
+                  'h2',
+                  null,
+                  article.title
+                )
               ),
               React__default.createElement('div', null),
               moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM Do YYYY, h:mma'),
-              article.authorMapping && article.authorMapping[0] && article.authorMapping[0].displayName && React__default.createElement(
-                'p',
-                { className: 'mb-2' },
-                'By ',
+              article.authorMapping && article.authorMapping.length > 0 && React__default.createElement(
+                'div',
+                { className: 'author-wrapper' },
                 React__default.createElement(
-                  'b',
-                  null,
-                  article.authorMapping[0].displayName
+                  LazyLoad,
+                  { height: 50 },
+                  React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
                 )
               )
             )
@@ -16121,31 +15975,38 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
             articleThumbnail = props.thumbnail;
           }
           return React__default.createElement(
-            'a',
-            { key: index, href: '/view/' + article.url.current, className: 'sub-article' },
+            'div',
+            { key: index, className: 'sub-article' },
             React__default.createElement(
-              'figure',
-              null,
-              React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+              'a',
+              { href: '/view/' + article.url.current },
+              React__default.createElement(
+                'figure',
+                null,
+                React__default.createElement('img', { src: articleThumbnail, alt: articleAltText })
+              )
             ),
             React__default.createElement(
               'div',
               { className: 'sub-article--body' },
               React__default.createElement(
-                'h2',
-                null,
-                article.title
+                'a',
+                { href: '/view/' + article.url.current },
+                React__default.createElement(
+                  'h2',
+                  null,
+                  article.title
+                )
               ),
               React__default.createElement('div', null),
               moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM Do YYYY, h:mma'),
-              article.authorMapping && article.authorMapping[0] && article.authorMapping[0].displayName && React__default.createElement(
-                'p',
-                { className: 'mb-2' },
-                'By ',
+              article.authorMapping && article.authorMapping.length > 0 && React__default.createElement(
+                'div',
+                { className: 'author-wrapper' },
                 React__default.createElement(
-                  'b',
-                  null,
-                  article.authorMapping[0].displayName
+                  LazyLoad,
+                  { height: 50 },
+                  React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
                 )
               )
             )
@@ -16156,7 +16017,7 @@ var OncliveLargeHero = function OncliveLargeHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-hero-container {\n          margin: 0 -0.8rem;\n        }\n        @media screen and (min-width: 1400px) {\n          .article-hero-container {\n            display: flex;\n            flex-direction: row;\n            margin-bottom: 30px;\n          }\n          .top-outer {\n            width: 50%;\n          }\n          .sub-outer-container {\n            width: 50%;\n          }\n        }\n        .top-article {\n          // width: 50%;\n          margin: 0 1rem;\n          height: 100%;\n          display: block;\n        }\n        .top-article figure {\n          width: 100%;\n          height: 60%;\n        }\n        .top-article figure img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .top-article--body h1 {\n          font-size: 1.4rem;\n          color: black !important;\n          font-weight: bold;\n        }\n        // .sub-articles-container {\n        //   width: 50%;\n        //   flex: 1 1 auto;\n        //   min-width: 350px;\n        // }\n        .sub-article {\n          margin: 0 1rem 1rem;\n          display: flex;\n          flex-direction: row;\n        }\n        .sub-article figure {\n          width: 125px;\n        }\n        .sub-article figure img {\n          width: 125px;\n          height: auto;\n          object-fit: cover;\n        }\n        .sub-article--body {\n          padding-left: 1rem;\n          font-size: 0.9rem;\n        }\n        .sub-article--body h2 {\n          font-size: 1rem;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 1368px) {\n          .article-hero-container {\n            flex-direction: column;\n          }\n          .top-article {\n            // width: unset;\n            flex: 1 1 auto;\n          }\n          .sub-articles-container {\n            width: 100%;\n            margin-top: 1rem;\n            min-width: 280px;\n          }\n        }\n        @media screen and (max-width: 1399px) and (min-width: 992px) {\n          .top-article {\n            // width: 50%;\n            flex: 1 1 auto;\n            margin-bottom: 1rem;\n          }\n          .middle-group {\n            display: none;\n          }\n          .middle-single {\n            display: block !important;\n            margin-top: 0 !important;\n          }\n          .top-article figure img {\n            max-height: 180px !important;\n          }\n          .top-article-summary {\n            display: none;\n          }\n        }\n        // @media only screen and (min-width) {\n        //   .sub-outer-container {\n        //     width: 50%;\n        //     flex: 1 1 auto;\n        //     min-width: 350px;\n        //   }\n        // }\n        .middle-single {\n          display: none;\n        }\n        .top-outer {\n          display: flex;\n        }\n      '
+      '\n        .article-hero-container {\n          margin: 0 -0.8rem;\n        }\n        .author-wrapper {\n          font-style: normal !important;\n        }\n        @media screen and (min-width: 1400px) {\n          .article-hero-container {\n            display: flex;\n            flex-direction: row;\n            margin-bottom: 30px;\n          }\n          .top-outer {\n            width: 50%;\n          }\n          .sub-outer-container {\n            width: 50%;\n          }\n        }\n        .top-article {\n          // width: 50%;\n          margin: 0 1rem;\n          height: 100%;\n          display: block;\n        }\n        .top-article figure {\n          width: 100%;\n          height: 60%;\n        }\n        .top-article figure img {\n          width: 100%;\n          height: 100%;\n          object-fit: cover;\n        }\n        .top-article--body h1 {\n          font-size: 1.4rem;\n          color: black !important;\n          font-weight: bold;\n        }\n        // .sub-articles-container {\n        //   width: 50%;\n        //   flex: 1 1 auto;\n        //   min-width: 350px;\n        // }\n        .sub-article {\n          margin: 0 1rem 1rem;\n          display: flex;\n          flex-direction: row;\n        }\n        .sub-article figure {\n          width: 125px;\n        }\n        .sub-article figure img {\n          width: 125px;\n          height: auto;\n          object-fit: cover;\n        }\n        .sub-article--body {\n          padding-left: 1rem;\n          font-size: 0.9rem;\n        }\n        .sub-article--body h2 {\n          font-size: 1rem;\n          font-weight: bold;\n        }\n        @media screen and (max-width: 1368px) {\n          .article-hero-container {\n            flex-direction: column;\n          }\n          .top-article {\n            // width: unset;\n            flex: 1 1 auto;\n          }\n          .sub-articles-container {\n            width: 100%;\n            margin-top: 1rem;\n            min-width: 280px;\n          }\n        }\n        @media screen and (max-width: 1399px) and (min-width: 992px) {\n          .top-article {\n            // width: 50%;\n            flex: 1 1 auto;\n            margin-bottom: 1rem;\n          }\n          .middle-group {\n            display: none;\n          }\n          .middle-single {\n            display: block !important;\n            margin-top: 0 !important;\n          }\n          .top-article figure img {\n            max-height: 180px !important;\n          }\n          .top-article-summary {\n            display: none;\n          }\n        }\n        // @media only screen and (min-width) {\n        //   .sub-outer-container {\n        //     width: 50%;\n        //     flex: 1 1 auto;\n        //     min-width: 350px;\n        //   }\n        // }\n        .middle-single {\n          display: none;\n        }\n        .top-outer {\n          display: flex;\n        }\n      '
     )
   );
 };
@@ -16295,28 +16156,31 @@ var YahooHero = function YahooHero(props) {
         }
 
         return React__default.createElement(
-          'a',
-          { href: '/view/' + article.url.current, key: index, className: 'yh-sub-article' },
-          React__default.createElement('img', { src: articleThumbnail }),
+          'div',
+          { key: index, className: 'yh-sub-article' },
           React__default.createElement(
-            'h6',
-            { className: 'yh-sub-article--title' },
-            article.title
+            'a',
+            { href: '/view/' + article.url.current },
+            React__default.createElement('img', { src: articleThumbnail })
+          ),
+          React__default.createElement(
+            'a',
+            { href: '/view/' + article.url.current },
+            React__default.createElement(
+              'h6',
+              { className: 'yh-sub-article--title' },
+              article.title
+            )
           ),
           React__default.createElement(
             'p',
             { className: 'yh-sub-article--info' },
             moment(article.published).format(removeTimeStamp ? 'MMMM DD, YYYY' : 'MMMM DD, YYYY hh:mma')
           ),
-          article.authorMapping && article.authorMapping[0] && React__default.createElement(
-            'p',
-            null,
-            'By ',
-            React__default.createElement(
-              'b',
-              null,
-              article.authorMapping[0].displayName
-            )
+          article.authorMapping && article.authorMapping.length > 0 && React__default.createElement(
+            LazyLoad,
+            { height: 50 },
+            React__default.createElement(AuthorComponent, { key: index.toString(), index: index, authors: article.authorMapping })
           )
         );
       })
@@ -16324,7 +16188,7 @@ var YahooHero = function YahooHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
+      '\n        .article-hero{\n          padding-bottom:15px\n        }\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 315px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
     )
   );
 };
@@ -17483,25 +17347,21 @@ var renderAuthor$1 = function renderAuthor(authorName, authorURL, index, length)
 
   if (authorName && authorURL) {
     return React__default.createElement(
-      'a',
-      { href: '/' + defaultUrl + '/' + authorURL.current, key: index },
-      authorName,
-      length !== index + 1 && React__default.createElement(
-        'span',
-        { style: { paddingLeft: 7, paddingRight: 7 } },
-        '|'
-      )
+      'span',
+      null,
+      React__default.createElement(
+        'a',
+        { href: '/' + defaultUrl + '/' + authorURL.current, key: index },
+        authorName
+      ),
+      length !== index + 1 && ' , '
     );
   } else if (authorName) {
     return React__default.createElement(
       'span',
       { key: index },
       authorName,
-      length !== index + 1 && React__default.createElement(
-        'span',
-        { style: { paddingLeft: 7, paddingRight: 7 } },
-        '|'
-      )
+      length !== index + 1 && ' , '
     );
   }
 };
@@ -17649,7 +17509,7 @@ var Article = function Article(props) {
 
           if (ele['_type'] === 'block' && ele.children.some(function (child) {
             return child.text.trim().length > 0;
-          }) && ele['listItem'] !== 'bullet' && ele['style'] === 'normal') {
+          }) && ele['listItem'] !== 'bullet' && ele['style'] === 'normal' || ele['_type'] === 'figure') {
             indexes.push(arr.indexOf(ele));
           }
         }
@@ -17671,10 +17531,13 @@ var Article = function Article(props) {
       return indexes;
     };
     var indexes = findIndex(body);
-    if (indexes.length >= 2 && body.length > 3 && payload.contextualAD) {
+    if (indexes.length >= 2 && body.length > 3 && payload.contextualAD && payload.contextualVideoAD) {
       payload = _extends$2({}, payload, {
         contextualAD: _extends$2({}, payload.contextualAD, {
           slotId: (payload.contextualAD.slotId || 'native-ad') + '-' + payload._id
+        }),
+        contextualVideoAD: _extends$2({}, payload.contextualVideoAD, {
+          slotId: (payload.contextualVideoAD.slotId || 'in-context_video') + '-' + payload._id
         })
       });
       var selectedIndex = indexes[1] + 1;
@@ -17687,9 +17550,19 @@ var Article = function Article(props) {
           parent.style.display = 'none';
           setContextualADFlag(false);
         } else {
-          if (body && body[1] && body[1]._type === 'figure') {
-            setContextualADFlag(true);
-          }
+          setContextualADFlag(true);
+        }
+      };
+
+      var checkIsVideoAdFound = function checkIsVideoAdFound(isFound) {
+        if (!isFound) {
+          var parent = document.getElementById('contextual-video-ad-' + payload._id);
+          parent.style.height = '0%';
+          parent.style.width = '0%';
+          parent.style.display = 'none';
+          setContextualADFlag(false);
+        } else {
+          setContextualADFlag(true);
         }
       };
 
@@ -17707,12 +17580,100 @@ var Article = function Article(props) {
           { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
           React__default.createElement(DFPAdSlot, _extends$2({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: checkIsAdFound }))
         ),
+        React__default.createElement('span', { className: 'clearfix' }),
+        React__default.createElement(
+          'div',
+          { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
+          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),
           blocks: [].concat(_toConsumableArray(body.slice(selectedIndex))),
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
       );
+    } 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 || 'native-ad') + '-' + payload._id
+        })
+      });
+      var _selectedIndex = indexes[1] + 1;
+
+      var _checkIsAdFound = function _checkIsAdFound(isFound) {
+        if (!isFound) {
+          var parent = document.getElementById('contextual-native-ad-' + payload._id);
+          parent.style.height = '0%';
+          parent.style.width = '0%';
+          parent.style.display = 'none';
+          setContextualADFlag(false);
+        } else {
+          setContextualADFlag(true);
+        }
+      };
+
+      return React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(BlockContent, _extends$2({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag),
+          blocks: [].concat(_toConsumableArray(body.slice(0, _selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        React__default.createElement('span', { className: 'clearfix' }),
+        React__default.createElement(
+          'div',
+          { id: 'contextual-native-ad-' + payload._id, className: 'contextual-native-ad' },
+          React__default.createElement(DFPAdSlot, _extends$2({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound }))
+        ),
+        React__default.createElement(BlockContent, _extends$2({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false),
+          blocks: [].concat(_toConsumableArray(body.slice(_selectedIndex))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config()))
+      );
+    } else if (indexes.length >= 2 && body.length > 3 && payload.contextualVideoAD && !payload.contextualAD) {
+      payload = _extends$2({}, payload, {
+        contextualVideoAD: _extends$2({}, payload.contextualVideoAD, {
+          slotId: (payload.contextualVideoAD.slotId || 'in-context_video') + '-' + payload._id
+        })
+      });
+      var _selectedIndex2 = indexes[1] + 1;
+
+      var _checkIsAdFound2 = function _checkIsAdFound2(isFound) {
+        if (!isFound) {
+          var parent = document.getElementById('contextual-video-ad-' + payload._id);
+          parent.style.height = '0%';
+          parent.style.width = '0%';
+          parent.style.display = 'none';
+          setContextualADFlag(false);
+        } else {
+          if (body && body[1] && body[1]._type === 'figure') {
+            setContextualADFlag(true);
+          }
+        }
+      };
+
+      return React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(BlockContent, _extends$2({
+          serializers: getSerializers(client, pageview, videoAccountIDs, function () {}, true, drupalLeadSettings, currentPage, false, contextualADFlag),
+          blocks: [].concat(_toConsumableArray(body.slice(0, _selectedIndex2))),
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        React__default.createElement('span', { className: 'clearfix' }),
+        React__default.createElement(
+          'div',
+          { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
+          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),
+          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),
@@ -18127,6 +18088,9 @@ var ArticleQueue = function ArticleQueue(props) {
     InfiniteScroll,
     { dataLength: queueData.length, next: loadmore, scrollThreshold: '60%', hasMore: true, style: { overflow: 'hidden' } },
     queueData.map(function (article, index) {
+      if (!checkSponseredArticle(article) && Ads.getVideoContextualAD) {
+        article.contextualVideoAD = Ads.getVideoContextualAD(getTargeting(article, 'in-context_video'));
+      }
       if (!checkSponseredArticle(article) && Ads.getNativeContextualAD) {
         article.contextualAD = Ads.getNativeContextualAD(getTargeting(article, 'native-ad'));
       }