@mjhls/mjh-framework 1.0.836 → 1.0.837

package/README.md

@@ -1,4 +1,4 @@
-# mjh-framework v. 1.0.836
+# mjh-framework v. 1.0.837
 
 [![NPM](https://img.shields.io/npm/v/mjh-framework.svg)](https://www.npmjs.com/package/mjh-framework) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 

package/dist/cjs/ArticleProgramLandingPage.js

@@ -5,7 +5,7 @@ var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
 var _extends = require('./extends-29bdbc6d.js');
 var React = require('react');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/ExternalResources.js

@@ -4,7 +4,7 @@ var _extends = require('./extends-29bdbc6d.js');
 var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
 var React = require('react');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 var index = require('./index-f86bb269.js');
 var Router = require('next/router');
 var Button = require('react-bootstrap/Button');

package/dist/cjs/HorizontalArticleListing.js

@@ -5,7 +5,7 @@ var React = require('react');
 var ArticleCarousel = require('./ArticleCarousel.js');
 var index_esm = require('./index.esm-974f47d9.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');

package/dist/cjs/IssueLanding.js

@@ -5,7 +5,7 @@ var React = require('react');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var Breadcrumbs = require('./Breadcrumbs.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');

package/dist/cjs/MediaSeriesLanding.js

@@ -17,7 +17,7 @@ var urlFor = require('./urlFor.js');
 var moment = require('./moment-aca40de1.js');
 var styleInject_es = require('./style-inject.es-dcee06b6.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 require('./define-property-c88be878.js');
 require('./_to-object-6de10e57.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/PartnerDetailListing.js

@@ -11,7 +11,7 @@ var moment = require('./moment-aca40de1.js');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 var Breadcrumbs = require('./Breadcrumbs.js');
 var Feature = require('./Feature.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/TaxonomyDescription.js

@@ -6,7 +6,7 @@ var React = require('react');
 var Router = require('next/router');
 var Head = require('next/head');
 var BlockContent = require('./BlockContent-36e54d77.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
 require('./_to-object-6de10e57.js');

package/dist/cjs/VideoProgramLandingPage.js

@@ -7,7 +7,7 @@ var BlockContent = require('./BlockContent-36e54d77.js');
 var Col = require('react-bootstrap/Col');
 var Form = require('react-bootstrap/Form');
 var Button = require('react-bootstrap/Button');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');

package/dist/cjs/View.js

@@ -17,7 +17,7 @@ var FormControl = require('react-bootstrap/FormControl');
 var Button = require('react-bootstrap/Button');
 var visibilitySensor = require('./visibility-sensor-eb2c5b69.js');
 var SocialShare = require('./SocialShare.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 var AdSlot = require('./AdSlot.js');
 var SeriesSlider = require('./SeriesSlider-cbab9f0f.js');
 var getTargeting = require('./getTargeting-be6168ad.js');

package/dist/cjs/getSerializers.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('react');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 require('./BlockContent-36e54d77.js');
 require('./entities-3f9d0f2f.js');
 require('./slicedToArray-5d1bc3b3.js');

package/dist/cjs/{index-393c5040.js → index-0a582ba9.js}

@@ -92,7 +92,14 @@ var Slideshow$1 = function Slideshow(_ref) {
         return React__default['default'].createElement(
           reactBootstrap.Carousel.Item,
           { key: slide._key },
-          React__default['default'].createElement('img', { src: slide.asset && urlFor({ source: slide.asset, client: client }), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React__default['default'].createElement(
+            'picture',
+            null,
+            React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React__default['default'].createElement('img', { src: urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
+          ),
           slide.caption && React__default['default'].createElement(
             'p',
             { className: 'p-2' },
@@ -2152,7 +2159,14 @@ var Media = function Media(_ref) {
         React__default['default'].createElement(
           index$2.LazyLoad,
           { once: true },
-          React__default['default'].createElement(reactBootstrap.Figure.Image, _extends._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          React__default['default'].createElement(
+            'picture',
+            null,
+            React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React__default['default'].createElement('img', _extends._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          )
         ),
         caption && React__default['default'].createElement(
           reactBootstrap.Figure.Caption,
@@ -8165,7 +8179,14 @@ var Slideshow = function Slideshow(_ref) {
               React__default['default'].createElement(
                 index$2.LazyLoad,
                 null,
-                React__default['default'].createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                React__default['default'].createElement(
+                  'picture',
+                  null,
+                  React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                  React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                  React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                  React__default['default'].createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                )
               )
             ),
             React__default['default'].createElement(
@@ -8260,7 +8281,14 @@ var MultiMedia = function MultiMedia(props) {
                 imageBox && React__default['default'].createElement(
                   index$2.LazyLoad,
                   { once: true },
-                  React__default['default'].createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt })
+                  React__default['default'].createElement(
+                    'picture',
+                    null,
+                    React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                    React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                    React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                    React__default['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['default'].createElement(
                   'span',
@@ -8922,7 +8950,7 @@ var compareProps = function compareProps(prevProps, nextProps) {
   }
 };
 
-var FigureImage = React__default['default'].memo(function (_ref2) {
+var FigureImage$1 = React__default['default'].memo(function (_ref2) {
   var node = _ref2.node,
       client = _ref2.client,
       imgAlt = _ref2.imgAlt,
@@ -9056,12 +9084,12 @@ var FigureComponent = function FigureComponent(props) {
       link ? React__default['default'].createElement(
         'a',
         { target: blank ? '_blank' : '_self', href: link },
-        React__default['default'].createElement(FigureImage, { node: node, client: client, imgAlt: alt, link: link }),
+        React__default['default'].createElement(FigureImage$1, { node: node, client: client, imgAlt: alt, link: link }),
         React__default['default'].createElement(FigureCaption, null)
       ) : React__default['default'].createElement(
         React__default['default'].Fragment,
         null,
-        React__default['default'].createElement(FigureImage, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
+        React__default['default'].createElement(FigureImage$1, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
         React__default['default'].createElement(FigureCaption, null)
       ),
       React__default['default'].createElement(LightBox, {
@@ -9098,6 +9126,33 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   }, [ref]);
 }
 
+var FigureImage = React__default['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['default'].createElement(
+    'picture',
+    null,
+    React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+    React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+    React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React__default['default'].createElement('img', _extends._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,
@@ -9117,9 +9172,9 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxContainer = React.useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
 
-  var FigureCaption = function FigureCaption(_ref) {
-    var caption = _ref.caption,
-        imgcaption = _ref.imgcaption;
+  var FigureCaption = function FigureCaption(_ref2) {
+    var caption = _ref2.caption,
+        imgcaption = _ref2.imgcaption;
 
     if (imgcaption && imgcaption.length > 0) {
       return React__default['default'].createElement(
@@ -9132,6 +9187,11 @@ 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['default'].createElement(
       'div',
@@ -9152,7 +9212,7 @@ var MultiFigure = function MultiFigure(props) {
                 React__default['default'].createElement(
                   index$2.LazyLoad,
                   { once: true },
-                  React__default['default'].createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor({ source: image.asset, client: client }), alt: image.alt })
+                  React__default['default'].createElement(FigureImage, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
                 ),
                 React__default['default'].createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9162,16 +9222,7 @@ var MultiFigure = function MultiFigure(props) {
               React__default['default'].createElement(
                 index$2.LazyLoad,
                 { once: true },
-                React__default['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['default'].createElement(FigureImage, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
               ),
               React__default['default'].createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
@@ -9186,7 +9237,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default['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          }\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            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        '
       )
     );
   }

package/dist/cjs/index.js

@@ -82,7 +82,7 @@ var VerticalHero = require('./VerticalHero.js');
 var YahooHero = require('./YahooHero.js');
 var GridHero = require('./GridHero.js');
 var ConferenceArticleCard = require('./ConferenceArticleCard.js');
-var getSerializers = require('./index-393c5040.js');
+var getSerializers = require('./index-0a582ba9.js');
 var Beam = require('./Beam.js');
 var Segment = require('./Segment.js');
 var KMTracker = require('./KMTracker.js');

package/dist/esm/ArticleProgramLandingPage.js

@@ -3,7 +3,7 @@ import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import { _ as _extends } from './extends-60e0e1c6.js';
 import React from 'react';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import ArticleSeriesListing from './ArticleSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/ExternalResources.js

@@ -2,7 +2,7 @@ import { _ as _extends } from './extends-60e0e1c6.js';
 import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import React, { useState, useEffect } from 'react';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import { m as momentTimezone } from './index-79cfd25c.js';
 import { useRouter } from 'next/router';
 import Button from 'react-bootstrap/Button';

package/dist/esm/HorizontalArticleListing.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ArticleCarousel from './ArticleCarousel.js';
 import { I as IoIosArrowForward } from './index.esm-3fdda599.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';

package/dist/esm/IssueLanding.js

@@ -3,7 +3,7 @@ import React from 'react';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import Breadcrumbs from './Breadcrumbs.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';

package/dist/esm/MediaSeriesLanding.js

@@ -15,7 +15,7 @@ import urlFor from './urlFor.js';
 import { m as moment } from './moment-bc12cb97.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import './define-property-fe54dc9f.js';
 import './_to-object-b50e61c3.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/PartnerDetailListing.js

@@ -9,7 +9,7 @@ import { m as moment } from './moment-bc12cb97.js';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import Breadcrumbs from './Breadcrumbs.js';
 import Feature from './Feature.js';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/TaxonomyDescription.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { useRouter } from 'next/router';
 import Head from 'next/head';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
 import './_to-object-b50e61c3.js';

package/dist/esm/VideoProgramLandingPage.js

@@ -5,7 +5,7 @@ import { B as BlockContent } from './BlockContent-52cf21c5.js';
 import Col from 'react-bootstrap/Col';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
-import { g as getSerializers } from './index-f21b15a5.js';
+import { g as getSerializers } from './index-66ffc224.js';
 import VideoSeriesListing from './VideoSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';

package/dist/esm/View.js

@@ -15,7 +15,7 @@ import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
 import { V as VisibilitySensor } from './visibility-sensor-f40c2564.js';
 import SocialShare from './SocialShare.js';
-import { r as renderAuthor, g as getSerializers } from './index-f21b15a5.js';
+import { r as renderAuthor, g as getSerializers } from './index-66ffc224.js';
 import DFPAdSlot from './AdSlot.js';
 import { S as SeriesSlider } from './SeriesSlider-5c62a578.js';
 import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-68291ce9.js';

package/dist/esm/getSerializers.js

@@ -1,5 +1,5 @@
 import 'react';
-export { g as default } from './index-f21b15a5.js';
+export { g as default } from './index-66ffc224.js';
 import './BlockContent-52cf21c5.js';
 import './entities-932b50cf.js';
 import './slicedToArray-be2f7a22.js';

package/dist/esm/{index-f21b15a5.js → index-66ffc224.js}

@@ -78,7 +78,14 @@ var Slideshow$1 = function Slideshow(_ref) {
         return React.createElement(
           Carousel.Item,
           { key: slide._key },
-          React.createElement('img', { src: slide.asset && urlFor({ source: slide.asset, client: client }), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React.createElement(
+            'picture',
+            null,
+            React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React.createElement('img', { src: urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
+          ),
           slide.caption && React.createElement(
             'p',
             { className: 'p-2' },
@@ -2138,7 +2145,14 @@ var Media = function Media(_ref) {
         React.createElement(
           LazyLoad,
           { once: true },
-          React.createElement(Figure$1.Image, _extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          React.createElement(
+            'picture',
+            null,
+            React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React.createElement('img', _extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          )
         ),
         caption && React.createElement(
           Figure$1.Caption,
@@ -8151,7 +8165,14 @@ var Slideshow = function Slideshow(_ref) {
               React.createElement(
                 LazyLoad,
                 null,
-                React.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                React.createElement(
+                  'picture',
+                  null,
+                  React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                  React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                  React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                  React.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                )
               )
             ),
             React.createElement(
@@ -8246,7 +8267,14 @@ var MultiMedia = function MultiMedia(props) {
                 imageBox && React.createElement(
                   LazyLoad,
                   { once: true },
-                  React.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt })
+                  React.createElement(
+                    'picture',
+                    null,
+                    React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                    React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                    React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                    React.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt || '' })
+                  )
                 ),
                 media.caption && React.createElement(
                   'span',
@@ -8908,7 +8936,7 @@ var compareProps = function compareProps(prevProps, nextProps) {
   }
 };
 
-var FigureImage = React.memo(function (_ref2) {
+var FigureImage$1 = React.memo(function (_ref2) {
   var node = _ref2.node,
       client = _ref2.client,
       imgAlt = _ref2.imgAlt,
@@ -9042,12 +9070,12 @@ var FigureComponent = function FigureComponent(props) {
       link ? React.createElement(
         'a',
         { target: blank ? '_blank' : '_self', href: link },
-        React.createElement(FigureImage, { node: node, client: client, imgAlt: alt, link: link }),
+        React.createElement(FigureImage$1, { node: node, client: client, imgAlt: alt, link: link }),
         React.createElement(FigureCaption, null)
       ) : React.createElement(
         React.Fragment,
         null,
-        React.createElement(FigureImage, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
+        React.createElement(FigureImage$1, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
         React.createElement(FigureCaption, null)
       ),
       React.createElement(LightBox, {
@@ -9084,6 +9112,33 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   }, [ref]);
 }
 
+var FigureImage = React.memo(function (_ref) {
+  var imagesCount = _ref.imagesCount,
+      image = _ref.image,
+      client = _ref.client,
+      imgAlt = _ref.imgAlt,
+      link = _ref.link,
+      handleClickFigure = _ref.handleClickFigure;
+
+  return React.createElement(
+    'picture',
+    null,
+    React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+    React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+    React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React.createElement('img', _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,
@@ -9103,9 +9158,9 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxContainer = useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
 
-  var FigureCaption = function FigureCaption(_ref) {
-    var caption = _ref.caption,
-        imgcaption = _ref.imgcaption;
+  var FigureCaption = function FigureCaption(_ref2) {
+    var caption = _ref2.caption,
+        imgcaption = _ref2.imgcaption;
 
     if (imgcaption && imgcaption.length > 0) {
       return React.createElement(
@@ -9118,6 +9173,11 @@ 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.createElement(
       'div',
@@ -9138,7 +9198,7 @@ var MultiFigure = function MultiFigure(props) {
                 React.createElement(
                   LazyLoad,
                   { once: true },
-                  React.createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor({ source: image.asset, client: client }), alt: image.alt })
+                  React.createElement(FigureImage, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
                 ),
                 React.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9148,16 +9208,7 @@ var MultiFigure = function MultiFigure(props) {
               React.createElement(
                 LazyLoad,
                 { once: true },
-                React.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.createElement(FigureImage, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
               ),
               React.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
@@ -9172,7 +9223,7 @@ var MultiFigure = function MultiFigure(props) {
       React.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          }\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            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        '
       )
     );
   }

package/dist/esm/index.js

@@ -79,7 +79,7 @@ export { default as VerticalHero } from './VerticalHero.js';
 export { default as YahooHero } from './YahooHero.js';
 export { default as GridHero } from './GridHero.js';
 export { default as ConferenceArticleCard } from './ConferenceArticleCard.js';
-export { g as getSerializers } from './index-f21b15a5.js';
+export { g as getSerializers } from './index-66ffc224.js';
 export { default as Beam } from './Beam.js';
 export { default as Segment } from './Segment.js';
 export { default as KMTracker } from './KMTracker.js';

package/package.json

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