@mjhls/mjh-framework 1.0.832-beta.0 → 1.0.832-beta.1

package/dist/cjs/ArticleProgramLandingPage.js

@@ -53,7 +53,7 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/ExternalResources.js

@@ -49,7 +49,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/HorizontalArticleListing.js

@@ -50,7 +50,7 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 var index_esm = require('./index.esm-90433435.js');
 var ArticleCarousel = require('./ArticleCarousel.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/IssueLanding.js

@@ -58,7 +58,7 @@ require('./timeDifferenceCalc.js');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/MediaSeriesLanding.js

@@ -56,7 +56,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/PartnerDetailListing.js

@@ -58,7 +58,7 @@ require('./timeDifferenceCalc.js');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/TaxonomyDescription.js

@@ -49,7 +49,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 var Head = _interopDefault(require('next/head'));

package/dist/cjs/VideoProgramLandingPage.js

@@ -53,7 +53,7 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/View.js

@@ -51,7 +51,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 var Head = _interopDefault(require('next/head'));
@@ -438,6 +438,56 @@ var getSocialShareDisableFlag = function getSocialShareDisableFlag(article) {
   return showSocialShare;
 };
 
+function generateSchema(props) {
+  var _props$article = props.article,
+      title = _props$article.title,
+      summary = _props$article.summary,
+      url = _props$article.url,
+      authorDetails = _props$article.authorDetails,
+      thumbnail = _props$article.thumbnail,
+      published = _props$article.published,
+      _updatedAt = _props$article._updatedAt,
+      seoTag = _props$article.seoTag,
+      _props$Website = props.Website,
+      liveDomain = _props$Website.liveDomain,
+      websiteTitle = _props$Website.title,
+      logo = _props$Website.logo,
+      client = props.client;
+
+  var isAuthorFound = authorDetails && authorDetails.length > 0 && authorDetails[0].displayName;
+
+  if (title && thumbnail && published && websiteTitle && liveDomain && logo && isAuthorFound) {
+    return {
+      '@context': 'https://schema.org',
+      '@type': 'NewsArticle',
+      mainEntityOfPage: 'https://' + liveDomain + '/view/' + url.current,
+      headline: title,
+      description: summary,
+      image: urlFor({ source: thumbnail, client: client }),
+      keywords: seoTag.join(),
+      author: {
+        '@type': 'Person',
+        name: authorDetails[0].displayName
+      },
+      publisher: {
+        '@type': 'Organization',
+        name: websiteTitle,
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://' + liveDomain + logo
+        }
+      },
+      datePublished: published,
+      dateModified: _updatedAt
+    };
+  }
+  return null;
+}
+
+var Schema = function Schema(props) {
+  return React__default.createElement('script', { type: 'application/ld+json', dangerouslySetInnerHTML: { __html: stringify._JSON$stringify(generateSchema(props)) } });
+};
+
 var Article = React.forwardRef(function (props, ref) {
   var onVote = function () {
     var _ref = asyncToGenerator._asyncToGenerator( /*#__PURE__*/asyncToGenerator.regenerator.mark(function _callee(nodeKey, selectedChoice) {
@@ -1281,7 +1331,8 @@ var Article = React.forwardRef(function (props, ref) {
           )
         )
       ),
-      props.infiniteScroll && React__default.createElement('hr', { className: 'article-seperater mb-5 mt-3' })
+      props.infiniteScroll && React__default.createElement('hr', { className: 'article-seperater mb-5 mt-3' }),
+      React__default.createElement(Schema, { article: props.article, Website: props.Website, client: props.client })
     );
   };
 

package/dist/cjs/getSerializers.js

@@ -45,7 +45,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-90433435.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/cjs/{index-0b9683e0.js → index-a0bdcb69.js}

@@ -85,14 +85,7 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           reactBootstrap.Carousel.Item,
           { key: slide._key },
-          React__default.createElement(
-            'picture',
-            null,
-            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
-            React__default.createElement('img', { src: urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
-          ),
+          React__default.createElement('img', { src: slide.asset && urlFor({ source: slide.asset, client: client }), alt: slide.alt && slide.alt, style: { width: '100%' } }),
           slide.caption && React__default.createElement(
             'p',
             { className: 'p-2' },
@@ -2182,14 +2175,7 @@ var Media = function Media(_ref) {
         React__default.createElement(
           index$2.LazyLoad,
           { once: true },
-          React__default.createElement(
-            'picture',
-            null,
-            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
-            React__default.createElement('img', _extends$1._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
-          )
+          React__default.createElement(reactBootstrap.Figure.Image, _extends$1._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
         ),
         caption && React__default.createElement(
           reactBootstrap.Figure.Caption,
@@ -8156,14 +8142,7 @@ var Slideshow$1 = function Slideshow(_ref) {
               React__default.createElement(
                 index$2.LazyLoad,
                 null,
-                React__default.createElement(
-                  'picture',
-                  null,
-                  React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-                  React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-                  React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
-                  React__default.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
-                )
+                React__default.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
               )
             ),
             React__default.createElement(
@@ -8258,14 +8237,7 @@ var MultiMedia = function MultiMedia(props) {
                 imageBox && React__default.createElement(
                   index$2.LazyLoad,
                   { once: true },
-                  React__default.createElement(
-                    'picture',
-                    null,
-                    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
-                    React__default.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt || '' })
-                  )
+                  React__default.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt })
                 ),
                 media.caption && React__default.createElement(
                   'span',
@@ -9103,33 +9075,6 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   }, [ref]);
 }
 
-var FigureImage$1 = React__default.memo(function (_ref) {
-  var imagesCount = _ref.imagesCount,
-      image = _ref.image,
-      client = _ref.client,
-      imgAlt = _ref.imgAlt,
-      link = _ref.link,
-      handleClickFigure = _ref.handleClickFigure;
-
-  return React__default.createElement(
-    'picture',
-    null,
-    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
-    React__default.createElement('img', _extends$1._extends({
-      'images-count': imagesCount,
-      className: 'multi-figure-image',
-      src: urlFor({ source: image, client: client }),
-      alt: imgAlt ? imgAlt : 'multi figure'
-    }, !link && {
-      onClick: function onClick() {
-        return handleClickFigure(image, client);
-      }
-    }))
-  );
-});
-
 var MultiFigure = function MultiFigure(props) {
   var images = props.node.images,
       client = props.client,
@@ -9149,9 +9094,9 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxContainer = React.useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
 
-  var FigureCaption = function FigureCaption(_ref2) {
-    var caption = _ref2.caption,
-        imgcaption = _ref2.imgcaption;
+  var FigureCaption = function FigureCaption(_ref) {
+    var caption = _ref.caption,
+        imgcaption = _ref.imgcaption;
 
     if (imgcaption && imgcaption.length > 0) {
       return React__default.createElement(
@@ -9164,11 +9109,6 @@ var MultiFigure = function MultiFigure(props) {
     } else return null;
   };
 
-  var handleClickFigure = React.useCallback(function (image, client) {
-    setOpenImgSrc(urlFor({ source: image, client: client }));
-    setOpenImg(true);
-  }, [client]);
-
   if (images && images.length > 0) {
     return React__default.createElement(
       'div',
@@ -9189,7 +9129,7 @@ var MultiFigure = function MultiFigure(props) {
                 React__default.createElement(
                   index$2.LazyLoad,
                   { once: true },
-                  React__default.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
+                  React__default.createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor({ source: image.asset, client: client }), alt: image.alt })
                 ),
                 React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9199,7 +9139,16 @@ var MultiFigure = function MultiFigure(props) {
               React__default.createElement(
                 index$2.LazyLoad,
                 { once: true },
-                React__default.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
+                React__default.createElement('img', {
+                  'images-count': images.length,
+                  className: 'multi-figure-image',
+                  src: urlFor({ source: image.asset, client: client }),
+                  alt: image.alt,
+                  onClick: function onClick() {
+                    setOpenImgSrc(urlFor({ source: image, client: client }));
+                    setOpenImg(true);
+                  }
+                })
               ),
               React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
@@ -9214,7 +9163,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n            cursor: pointer;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
+        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
       )
     );
   }

package/dist/cjs/index.js

@@ -76,7 +76,7 @@ require('./index.esm-90433435.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
 var ArticleCarousel = require('./ArticleCarousel.js');
-var getSerializers = require('./index-0b9683e0.js');
+var getSerializers = require('./index-a0bdcb69.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-156bd4d6.js');
 require('next/head');

package/dist/esm/ArticleProgramLandingPage.js

@@ -48,7 +48,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import ArticleSeriesListing from './ArticleSeriesListing.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/ExternalResources.js

@@ -43,7 +43,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/HorizontalArticleListing.js

@@ -45,7 +45,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import { I as IoIosArrowForward } from './index.esm-29e48d38.js';
 import ArticleCarousel from './ArticleCarousel.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/IssueLanding.js

@@ -53,7 +53,7 @@ import './timeDifferenceCalc.js';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/MediaSeriesLanding.js

@@ -50,7 +50,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/PartnerDetailListing.js

@@ -53,7 +53,7 @@ import './timeDifferenceCalc.js';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/TaxonomyDescription.js

@@ -43,7 +43,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import Head from 'next/head';

package/dist/esm/VideoProgramLandingPage.js

@@ -48,7 +48,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import VideoSeriesListing from './VideoSeriesListing.js';
-import { g as getSerializers } from './index-59b21a97.js';
+import { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/View.js

@@ -45,7 +45,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { r as renderAuthor, g as getSerializers } from './index-59b21a97.js';
+import { r as renderAuthor, g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import Head from 'next/head';
@@ -432,6 +432,56 @@ var getSocialShareDisableFlag = function getSocialShareDisableFlag(article) {
   return showSocialShare;
 };
 
+function generateSchema(props) {
+  var _props$article = props.article,
+      title = _props$article.title,
+      summary = _props$article.summary,
+      url = _props$article.url,
+      authorDetails = _props$article.authorDetails,
+      thumbnail = _props$article.thumbnail,
+      published = _props$article.published,
+      _updatedAt = _props$article._updatedAt,
+      seoTag = _props$article.seoTag,
+      _props$Website = props.Website,
+      liveDomain = _props$Website.liveDomain,
+      websiteTitle = _props$Website.title,
+      logo = _props$Website.logo,
+      client = props.client;
+
+  var isAuthorFound = authorDetails && authorDetails.length > 0 && authorDetails[0].displayName;
+
+  if (title && thumbnail && published && websiteTitle && liveDomain && logo && isAuthorFound) {
+    return {
+      '@context': 'https://schema.org',
+      '@type': 'NewsArticle',
+      mainEntityOfPage: 'https://' + liveDomain + '/view/' + url.current,
+      headline: title,
+      description: summary,
+      image: urlFor({ source: thumbnail, client: client }),
+      keywords: seoTag.join(),
+      author: {
+        '@type': 'Person',
+        name: authorDetails[0].displayName
+      },
+      publisher: {
+        '@type': 'Organization',
+        name: websiteTitle,
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://' + liveDomain + logo
+        }
+      },
+      datePublished: published,
+      dateModified: _updatedAt
+    };
+  }
+  return null;
+}
+
+var Schema = function Schema(props) {
+  return React__default.createElement('script', { type: 'application/ld+json', dangerouslySetInnerHTML: { __html: _JSON$stringify(generateSchema(props)) } });
+};
+
 var Article = forwardRef(function (props, ref) {
   var onVote = function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(nodeKey, selectedChoice) {
@@ -1275,7 +1325,8 @@ var Article = forwardRef(function (props, ref) {
           )
         )
       ),
-      props.infiniteScroll && React__default.createElement('hr', { className: 'article-seperater mb-5 mt-3' })
+      props.infiniteScroll && React__default.createElement('hr', { className: 'article-seperater mb-5 mt-3' }),
+      React__default.createElement(Schema, { article: props.article, Website: props.Website, client: props.client })
     );
   };
 

package/dist/esm/getSerializers.js

@@ -43,7 +43,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-export { g as default } from './index-59b21a97.js';
+export { g as default } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/dist/esm/{index-59b21a97.js → index-d9cf292f.js}

@@ -78,14 +78,7 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           Carousel.Item,
           { key: slide._key },
-          React__default.createElement(
-            'picture',
-            null,
-            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
-            React__default.createElement('img', { src: urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
-          ),
+          React__default.createElement('img', { src: slide.asset && urlFor({ source: slide.asset, client: client }), alt: slide.alt && slide.alt, style: { width: '100%' } }),
           slide.caption && React__default.createElement(
             'p',
             { className: 'p-2' },
@@ -2175,14 +2168,7 @@ var Media = function Media(_ref) {
         React__default.createElement(
           LazyLoad,
           { once: true },
-          React__default.createElement(
-            'picture',
-            null,
-            React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-            React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
-            React__default.createElement('img', _extends$1({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
-          )
+          React__default.createElement(Figure$1.Image, _extends$1({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
         ),
         caption && React__default.createElement(
           Figure$1.Caption,
@@ -8149,14 +8135,7 @@ var Slideshow$1 = function Slideshow(_ref) {
               React__default.createElement(
                 LazyLoad,
                 null,
-                React__default.createElement(
-                  'picture',
-                  null,
-                  React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-                  React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-                  React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
-                  React__default.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
-                )
+                React__default.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
               )
             ),
             React__default.createElement(
@@ -8251,14 +8230,7 @@ var MultiMedia = function MultiMedia(props) {
                 imageBox && React__default.createElement(
                   LazyLoad,
                   { once: true },
-                  React__default.createElement(
-                    'picture',
-                    null,
-                    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-                    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
-                    React__default.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt || '' })
-                  )
+                  React__default.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt })
                 ),
                 media.caption && React__default.createElement(
                   'span',
@@ -9096,33 +9068,6 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   }, [ref]);
 }
 
-var FigureImage$1 = React__default.memo(function (_ref) {
-  var imagesCount = _ref.imagesCount,
-      image = _ref.image,
-      client = _ref.client,
-      imgAlt = _ref.imgAlt,
-      link = _ref.link,
-      handleClickFigure = _ref.handleClickFigure;
-
-  return React__default.createElement(
-    'picture',
-    null,
-    React__default.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-    React__default.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
-    React__default.createElement('img', _extends$1({
-      'images-count': imagesCount,
-      className: 'multi-figure-image',
-      src: urlFor({ source: image, client: client }),
-      alt: imgAlt ? imgAlt : 'multi figure'
-    }, !link && {
-      onClick: function onClick() {
-        return handleClickFigure(image, client);
-      }
-    }))
-  );
-});
-
 var MultiFigure = function MultiFigure(props) {
   var images = props.node.images,
       client = props.client,
@@ -9142,9 +9087,9 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxContainer = useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
 
-  var FigureCaption = function FigureCaption(_ref2) {
-    var caption = _ref2.caption,
-        imgcaption = _ref2.imgcaption;
+  var FigureCaption = function FigureCaption(_ref) {
+    var caption = _ref.caption,
+        imgcaption = _ref.imgcaption;
 
     if (imgcaption && imgcaption.length > 0) {
       return React__default.createElement(
@@ -9157,11 +9102,6 @@ var MultiFigure = function MultiFigure(props) {
     } else return null;
   };
 
-  var handleClickFigure = useCallback(function (image, client) {
-    setOpenImgSrc(urlFor({ source: image, client: client }));
-    setOpenImg(true);
-  }, [client]);
-
   if (images && images.length > 0) {
     return React__default.createElement(
       'div',
@@ -9182,7 +9122,7 @@ var MultiFigure = function MultiFigure(props) {
                 React__default.createElement(
                   LazyLoad,
                   { once: true },
-                  React__default.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
+                  React__default.createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor({ source: image.asset, client: client }), alt: image.alt })
                 ),
                 React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9192,7 +9132,16 @@ var MultiFigure = function MultiFigure(props) {
               React__default.createElement(
                 LazyLoad,
                 { once: true },
-                React__default.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
+                React__default.createElement('img', {
+                  'images-count': images.length,
+                  className: 'multi-figure-image',
+                  src: urlFor({ source: image.asset, client: client }),
+                  alt: image.alt,
+                  onClick: function onClick() {
+                    setOpenImgSrc(urlFor({ source: image, client: client }));
+                    setOpenImg(true);
+                  }
+                })
               ),
               React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
@@ -9207,7 +9156,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n            cursor: pointer;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
+        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
       )
     );
   }

package/dist/esm/index.js

@@ -70,7 +70,7 @@ import './index.esm-29e48d38.js';
 export { default as VideoSeriesListing } from './VideoSeriesListing.js';
 export { default as ArticleSeriesListing } from './ArticleSeriesListing.js';
 export { default as ArticleCarousel } from './ArticleCarousel.js';
-export { g as getSerializers } from './index-59b21a97.js';
+export { g as getSerializers } from './index-d9cf292f.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.832-beta.0",
+  "version": "1.0.832-beta.1",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",