@mjhls/mjh-framework 1.0.850-slideshow → 1.0.851

package/README.md

@@ -1,4 +1,4 @@
-# mjh-framework v. 1.0.850
+# mjh-framework v. 1.0.851
 
 [![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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -56,6 +56,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 require('react-bootstrap/Container');
 require('./visibility-sensor-eb2c5b69.js');
 require('./YoutubeGroup.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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 var index = require('./index-f86bb269.js');
 var Router = require('next/router');
 var Button = require('react-bootstrap/Button');
@@ -56,6 +56,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');
@@ -57,6 +57,9 @@ require('./inherits-c2065b95.js');
 require('./_object-sap-a175b4a9.js');
 require('./define-property-c88be878.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 require('./_commonjsHelpers-06173234.js');
 require('./_to-object-6de10e57.js');
 require('./_object-pie-083f2dd6.js');
@@ -67,6 +67,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 require('./define-property-c88be878.js');
 require('./_to-object-6de10e57.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -67,6 +67,9 @@ require('./entities-3f9d0f2f.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -70,6 +70,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
 require('./_to-object-6de10e57.js');
@@ -55,6 +55,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 require('./_commonjsHelpers-06173234.js');
 require('./es6.string.iterator-c2573ffd.js');
@@ -57,6 +57,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 require('react-bootstrap/Container');
 require('./visibility-sensor-eb2c5b69.js');
 require('./YoutubeGroup.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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 var AdSlot = require('./AdSlot.js');
 var SeriesSlider = require('./SeriesSlider-cbab9f0f.js');
 var getTargeting = require('./getTargeting-faf37284.js');
@@ -66,6 +66,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 require('./debounce-d4a2369b.js');
 require('./isSymbol-03abbdf0.js');
 require('./toNumber-5e1fac58.js');
@@ -1721,31 +1724,39 @@ var View = function View(props) {
     }
   }, []);
 
-  var isVideoSeries = false;
-  //check for certain serializers that need to disable infinite scroll
-  var checkBodyForDisableInfiniteScroll = function checkBodyForDisableInfiniteScroll(article) {
+  // disable infinite scroll
+  var checkVideoSeries = function checkVideoSeries(article) {
     if (!article || !article.body) {
       return false;
     }
     for (var i = 0; i < article.body.length; i++) {
-      if (article.body[i]._type === 'articleSeries' || article.body[i]._type === 'slideshows') {
-        return true;
-      }
       var row = article.body[i];
       if (typeof row.videos !== 'undefined') {
-        isVideoSeries = true;
         return true;
       }
     }
     return false;
   };
 
-  var disableInfiniteScroll = checkBodyForDisableInfiniteScroll(props.article);
+  var checkArticleSeries = function checkArticleSeries(article) {
+    if (!article || !article.body) {
+      return false;
+    }
+    for (var i = 0; i < article.body.length; i++) {
+      if (article.body[i]._type === 'articleSeries') {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  var isVideoSeries = checkVideoSeries(props.article);
+  var isArticleSeries = checkArticleSeries(props.article);
   var commentsEnabledInTaxonomy = Array.isArray(content_placement) && content_placement.some(function (t) {
     return t.showComments === true;
   });
   var showDisqus = commentsEnabledInTaxonomy || hideComments === false;
-  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !disableInfiniteScroll && !article.ExcludeFromInfiniteScroll && !sponsoredFlag && infiniteScrollFlag && !article.showIsi && (!article.documentGroup || !article.documentGroup.isSeries) && !showDisqus;
+  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !isVideoSeries && !isArticleSeries && !article.ExcludeFromInfiniteScroll && !sponsoredFlag && infiniteScrollFlag && !article.showIsi && (!article.documentGroup || !article.documentGroup.isSeries) && !showDisqus;
 
   if (['Articles', 'Videos', 'Podcasts'].includes(article.category.name)) {
     title = null;

package/dist/cjs/getSerializers.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('react');
-var getSerializers = require('./index-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 require('./BlockContent-36e54d77.js');
 require('./entities-3f9d0f2f.js');
 require('./slicedToArray-5d1bc3b3.js');
@@ -55,6 +55,9 @@ require('./define-property-c88be878.js');
 require('./index.esm-974f47d9.js');
 require('./iconBase-68959171.js');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 
 
 

package/dist/cjs/{index-991f0c65.js → index-1b7af74f.js}

@@ -34,6 +34,9 @@ var Head = require('next/head');
 var inherits = require('./inherits-c2065b95.js');
 var index_esm = require('./index.esm-974f47d9.js');
 var Figure$1 = require('react-bootstrap/Figure');
+var OverlayTrigger = require('react-bootstrap/OverlayTrigger');
+var Tooltip = require('react-bootstrap/Tooltip');
+var Popover = require('react-bootstrap/Popover');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,6 +49,9 @@ var Row__default = /*#__PURE__*/_interopDefaultLegacy(Row);
 var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
 var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
 var Figure__default = /*#__PURE__*/_interopDefaultLegacy(Figure$1);
+var OverlayTrigger__default = /*#__PURE__*/_interopDefaultLegacy(OverlayTrigger);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
+var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 
 var onChangeSlide = function onChangeSlide(selectedIndex, router) {
   var pageNumber = selectedIndex + 1;
@@ -8175,7 +8181,7 @@ var Slideshow = function Slideshow(_ref) {
               { href: slide.slideshowImage.link && slide.slideshowImage.link, target: slide.slideshowImage.blank ? '_blank' : '_self' },
               React__default['default'].createElement(
                 'div',
-                { style: { textAlign: 'center' }, className: '' },
+                { className: 'embed-responsive embed-responsive-slide' },
                 React__default['default'].createElement(
                   index$2.LazyLoad,
                   null,
@@ -8185,8 +8191,13 @@ var Slideshow = function Slideshow(_ref) {
                     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', className: 'embed-item-img' })
+                    React__default['default'].createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', className: 'embed-responsive-item' })
                   )
+                ),
+                React__default['default'].createElement(
+                  'style',
+                  { jsx: 'true' },
+                  '\n                        .embed-responsive-slide::before {\n                          padding-top: ' + slide.slideshowImage.height / slide.slideshowImage.width * 100 + '%;\n                        }\n                      '
                 )
               )
             ),
@@ -8208,7 +8219,7 @@ var Slideshow = function Slideshow(_ref) {
     React__default['default'].createElement(
       'style',
       { jsx: 'true' },
-      '\n        .embed-item-img {\n          max-width: 100%;\n          max-height: 750px;\n        }\n        .carousel-indicators {\n          bottom: -2.5rem !important;\n        }\n        .carousel-indicators li {\n          width: 20px;\n          height: 20px;\n          border-radius: 50% !important;\n          background-color: var(--secondary);\n        }\n        .carousel-control-prev {\n          justify-content: flex-start;\n        }\n        .carousel-control-next {\n          justify-content: flex-end;\n        }\n      '
+      '\n        .carousel-indicators {\n          bottom: -2.5rem !important;\n        }\n        .carousel-indicators li {\n          width: 20px;\n          height: 20px;\n          border-radius: 50% !important;\n          background-color: var(--secondary);\n        }\n        .carousel-control-prev {\n          justify-content: flex-start;\n        }\n        .carousel-control-next {\n          justify-content: flex-end;\n        }\n      '
     )
   );
 };
@@ -9012,6 +9023,74 @@ var FigureComponent = function FigureComponent(props) {
   var _node$widthP = node.widthP,
       widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
 
+  var infoBox = node.infoBox ? node.infoBox : [];
+
+  var renderTooltip = function renderTooltip(props) {
+    if (infoBox[0].title) {
+      return React__default['default'].createElement(
+        Popover__default['default'],
+        { id: 'popover-basic-' + infoBox[0].title },
+        React__default['default'].createElement(
+          Popover__default['default'].Title,
+          { as: 'h3' },
+          infoBox[0].title
+        ),
+        React__default['default'].createElement(
+          Popover__default['default'].Content,
+          null,
+          React__default['default'].createElement(BlockContent.BlockContent, { blocks: infoBox[0].infoText, serializers: getSerializers })
+        )
+      );
+    } else {
+      return React__default['default'].createElement(
+        Tooltip__default['default'],
+        _extends._extends({ id: 'button-tooltip' }, props),
+        React__default['default'].createElement(BlockContent.BlockContent, { blocks: infoBox[0].infoText, serializers: getSerializers })
+      );
+    }
+  };
+
+  var FigureImageWOverLay = React__default['default'].memo(function (_ref3) {
+    var node = _ref3.node,
+        client = _ref3.client,
+        imgAlt = _ref3.imgAlt,
+        link = _ref3.link,
+        handleClickFigure = _ref3.handleClickFigure;
+
+    var figureImageStyle = link ? { maxWidth: '100%' } : { maxWidth: '100%', cursor: 'pointer', width: 'auto' };
+    var triggerAction = main.main_42 ? 'click' : 'hover';
+    var placementLocation = main.main_42 ? 'top' : infoBox[0].alignment ? infoBox[0].alignment : 'right';
+    return React__default['default'].createElement(
+      'picture',
+      null,
+      React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+      React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+      React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
+      main.main_42 && link ? React__default['default'].createElement('img', _extends._extends({
+        style: figureImageStyle,
+        className: 'figure-image',
+        src: urlFor({ source: node, client: client }),
+        alt: imgAlt ? imgAlt : 'figure image'
+      }, !link && !main.main_42 && {
+        onClick: function onClick() {
+          return handleClickFigure(node, client);
+        }
+      })) : React__default['default'].createElement(
+        OverlayTrigger__default['default'],
+        { trigger: triggerAction, placement: placementLocation, delay: { show: 250, hide: 400 }, overlay: renderTooltip() },
+        React__default['default'].createElement('img', _extends._extends({
+          style: figureImageStyle,
+          className: 'figure-image',
+          src: urlFor({ source: node, client: client }),
+          alt: imgAlt ? imgAlt : 'figure image'
+        }, !link && !main.main_42 && {
+          onClick: function onClick() {
+            return handleClickFigure(node, client);
+          }
+        }))
+      )
+    );
+  });
 
   var screenWidth = window.innerWidth;
 
@@ -9079,7 +9158,29 @@ var FigureComponent = function FigureComponent(props) {
   return React__default['default'].createElement(
     React__default['default'].Fragment,
     null,
-    React__default['default'].createElement(
+    infoBox.length >= 1 ? React__default['default'].createElement(
+      Figure__default['default'],
+      { className: '' + class_name, style: figureStyle },
+      link ? React__default['default'].createElement(
+        'a',
+        { target: blank ? '_blank' : '_self', href: link },
+        React__default['default'].createElement(FigureImageWOverLay, { 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(FigureImageWOverLay, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
+        React__default['default'].createElement(FigureCaption, null)
+      ),
+      React__default['default'].createElement(LightBox, {
+        showLightbox: showLightbox,
+        lightboxImgSrc: lightboxImgSrc,
+        closeLightbox: function closeLightbox() {
+          setLightboxImgSrc('');
+          setShowLightbox(false);
+        }
+      })
+    ) : React__default['default'].createElement(
       Figure__default['default'],
       { className: '' + class_name, style: figureStyle },
       link ? React__default['default'].createElement(
@@ -9193,6 +9294,73 @@ var MultiFigure = function MultiFigure(props) {
     setOpenImg(true);
   }, [client]);
 
+  var FigureImageWOverLay = React__default['default'].memo(function (_ref3) {
+    var imagesCount = _ref3.imagesCount,
+        image = _ref3.image,
+        client = _ref3.client,
+        imgAlt = _ref3.imgAlt,
+        link = _ref3.link,
+        handleClickFigure = _ref3.handleClickFigure;
+
+    var triggerAction = main.main_42 ? 'click' : 'hover';
+    var placementLocation = main.main_42 ? 'top' : image.infoBox[0] ? image.infoBox[0].alignment : 'right';
+    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' }) }),
+      main.main_42 && link ? 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 && !main.main_42 && {
+        onClick: function onClick() {
+          return handleClickFigure(image, client);
+        }
+      })) : React__default['default'].createElement(
+        OverlayTrigger__default['default'],
+        { trigger: triggerAction, placement: placementLocation, delay: { show: 250, hide: 400 }, overlay: renderTooltip(image) },
+        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 && !main.main_42 && {
+          onClick: function onClick() {
+            return handleClickFigure(image, client);
+          }
+        }))
+      )
+    );
+  });
+
+  var renderTooltip = function renderTooltip(image) {
+    if (image.infoBox[0].title) {
+      return React__default['default'].createElement(
+        Popover__default['default'],
+        { id: 'popover-basic-' + image.infoBox[0].title },
+        React__default['default'].createElement(
+          Popover__default['default'].Title,
+          { as: 'h3' },
+          image.infoBox[0].title
+        ),
+        React__default['default'].createElement(
+          Popover__default['default'].Content,
+          null,
+          React__default['default'].createElement(BlockContent.BlockContent, { blocks: image.infoBox[0].infoText, serializers: getSerializers })
+        )
+      );
+    } else {
+      return React__default['default'].createElement(
+        Tooltip__default['default'],
+        _extends._extends({ id: 'button-tooltip' }, props),
+        React__default['default'].createElement(BlockContent.BlockContent, { blocks: image.infoBox[0].infoText, serializers: getSerializers })
+      );
+    }
+  };
+
   if (images && images.length > 0) {
     return React__default['default'].createElement(
       'div',
@@ -9201,33 +9369,63 @@ var MultiFigure = function MultiFigure(props) {
         Row__default['default'],
         { noGutters: true, style: { alignItems: 'center' } },
         images.map(function (image, index) {
-          return React__default['default'].createElement(
-            Col__default['default'],
-            { xs: 12, md: 12 / images.length, key: index },
-            image.link ? React__default['default'].createElement(
-              'a',
-              _extends._extends({}, image.link && { href: image.link, target: image.blank ? '_blank' : '_self' }, { style: { cursor: image.link ? 'pointer' : 'default' } }),
-              React__default['default'].createElement(
+          if (image.infoBox) {
+            return React__default['default'].createElement(
+              Col__default['default'],
+              { xs: 12, md: 12 / images.length, key: index },
+              image.link ? React__default['default'].createElement(
+                'a',
+                _extends._extends({}, image.link && { href: image.link, target: image.blank ? '_blank' : '_self' }, { style: { cursor: image.link ? 'pointer' : 'default' } }),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'multi-figure-image-container' },
+                  React__default['default'].createElement(
+                    index$2.LazyLoad,
+                    { once: true },
+                    React__default['default'].createElement(FigureImageWOverLay, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
+                  ),
+                  React__default['default'].createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
+                )
+              ) : React__default['default'].createElement(
                 'div',
                 { className: 'multi-figure-image-container' },
                 React__default['default'].createElement(
                   index$2.LazyLoad,
                   { once: true },
-                  React__default['default'].createElement(FigureImage, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
+                  React__default['default'].createElement(FigureImageWOverLay, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
                 ),
                 React__default['default'].createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
-            ) : React__default['default'].createElement(
-              'div',
-              { className: 'multi-figure-image-container' },
-              React__default['default'].createElement(
-                index$2.LazyLoad,
-                { once: 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 })
-            )
-          );
+            );
+          } else {
+            return React__default['default'].createElement(
+              Col__default['default'],
+              { xs: 12, md: 12 / images.length, key: index },
+              image.link ? React__default['default'].createElement(
+                'a',
+                _extends._extends({}, image.link && { href: image.link, target: image.blank ? '_blank' : '_self' }, { style: { cursor: image.link ? 'pointer' : 'default' } }),
+                React__default['default'].createElement(
+                  'div',
+                  { className: 'multi-figure-image-container' },
+                  React__default['default'].createElement(
+                    index$2.LazyLoad,
+                    { once: true },
+                    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 })
+                )
+              ) : React__default['default'].createElement(
+                'div',
+                { className: 'multi-figure-image-container' },
+                React__default['default'].createElement(
+                  index$2.LazyLoad,
+                  { once: 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 })
+              )
+            );
+          }
         })
       ),
       React__default['default'].createElement(

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-991f0c65.js');
+var getSerializers = require('./index-1b7af74f.js');
 var Beam = require('./Beam.js');
 var Segment = require('./Segment.js');
 var KMTracker = require('./KMTracker.js');
@@ -183,6 +183,9 @@ require('react-bootstrap/Modal');
 require('./util-6f784d85.js');
 require('react-bootstrap/Pagination');
 require('react-bootstrap/Figure');
+require('react-bootstrap/OverlayTrigger');
+require('react-bootstrap/Tooltip');
+require('react-bootstrap/Popover');
 require('./index-bd6c9f56.js');
 require('swr');
 require('passport-local');

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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import ArticleSeriesListing from './ArticleSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -54,6 +54,9 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 import 'react-bootstrap/Container';
 import './visibility-sensor-f40c2564.js';
 import './YoutubeGroup.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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import { m as momentTimezone } from './index-79cfd25c.js';
 import { useRouter } from 'next/router';
 import Button from 'react-bootstrap/Button';
@@ -54,6 +54,9 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 
 var ExternalResources = function ExternalResources(props) {
   var resources = props.resources,

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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';
@@ -55,6 +55,9 @@ import './inherits-a41fe93f.js';
 import './_object-sap-f353c2a9.js';
 import './define-property-fe54dc9f.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 
 function HorizontalArticleListing(_ref) {
   var _ref$data = _ref.data,

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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './_to-object-b50e61c3.js';
 import './_object-pie-133f504a.js';
@@ -65,6 +65,9 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 
 /* usage
 import Settings, { Ads } from '../../../../settings'

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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import './define-property-fe54dc9f.js';
 import './_to-object-b50e61c3.js';
 import './es6.string.iterator-bc33758b.js';
@@ -65,6 +65,9 @@ import './entities-932b50cf.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 
 /**
  * Copyright (c) 2013-present, Facebook, Inc.

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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -68,6 +68,9 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 
 var ImageSlider = function ImageSlider(props) {
   var innerSlider = useRef(null);

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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
 import './_to-object-b50e61c3.js';
@@ -53,6 +53,9 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 
 var _this = undefined;
 

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-2dcd3f28.js';
+import { g as getSerializers } from './index-37df0726.js';
 import VideoSeriesListing from './VideoSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -55,6 +55,9 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 import 'react-bootstrap/Container';
 import './visibility-sensor-f40c2564.js';
 import './YoutubeGroup.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-2dcd3f28.js';
+import { r as renderAuthor, g as getSerializers } from './index-37df0726.js';
 import DFPAdSlot from './AdSlot.js';
 import { S as SeriesSlider } from './SeriesSlider-5c62a578.js';
 import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-c3401fa7.js';
@@ -64,6 +64,9 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 import './debounce-533d9748.js';
 import './isSymbol-a7e9aafe.js';
 import './toNumber-5aeba6e7.js';
@@ -1711,31 +1714,39 @@ var View = function View(props) {
     }
   }, []);
 
-  var isVideoSeries = false;
-  //check for certain serializers that need to disable infinite scroll
-  var checkBodyForDisableInfiniteScroll = function checkBodyForDisableInfiniteScroll(article) {
+  // disable infinite scroll
+  var checkVideoSeries = function checkVideoSeries(article) {
     if (!article || !article.body) {
       return false;
     }
     for (var i = 0; i < article.body.length; i++) {
-      if (article.body[i]._type === 'articleSeries' || article.body[i]._type === 'slideshows') {
-        return true;
-      }
       var row = article.body[i];
       if (typeof row.videos !== 'undefined') {
-        isVideoSeries = true;
         return true;
       }
     }
     return false;
   };
 
-  var disableInfiniteScroll = checkBodyForDisableInfiniteScroll(props.article);
+  var checkArticleSeries = function checkArticleSeries(article) {
+    if (!article || !article.body) {
+      return false;
+    }
+    for (var i = 0; i < article.body.length; i++) {
+      if (article.body[i]._type === 'articleSeries') {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  var isVideoSeries = checkVideoSeries(props.article);
+  var isArticleSeries = checkArticleSeries(props.article);
   var commentsEnabledInTaxonomy = Array.isArray(content_placement) && content_placement.some(function (t) {
     return t.showComments === true;
   });
   var showDisqus = commentsEnabledInTaxonomy || hideComments === false;
-  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !disableInfiniteScroll && !article.ExcludeFromInfiniteScroll && !sponsoredFlag && infiniteScrollFlag && !article.showIsi && (!article.documentGroup || !article.documentGroup.isSeries) && !showDisqus;
+  var needInfiniteScroll = ['Articles', 'Videos', 'Podcasts'].includes(article.category.name) && article.taxonomyMapping && article.passwordLock !== true && !isVideoSeries && !isArticleSeries && !article.ExcludeFromInfiniteScroll && !sponsoredFlag && infiniteScrollFlag && !article.showIsi && (!article.documentGroup || !article.documentGroup.isSeries) && !showDisqus;
 
   if (['Articles', 'Videos', 'Podcasts'].includes(article.category.name)) {
     title = null;

package/dist/esm/getSerializers.js

@@ -1,5 +1,5 @@
 import 'react';
-export { g as default } from './index-2dcd3f28.js';
+export { g as default } from './index-37df0726.js';
 import './BlockContent-52cf21c5.js';
 import './entities-932b50cf.js';
 import './slicedToArray-be2f7a22.js';
@@ -53,3 +53,6 @@ import './define-property-fe54dc9f.js';
 import './index.esm-3fdda599.js';
 import './iconBase-602d52fe.js';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';

package/dist/esm/{index-2dcd3f28.js → index-37df0726.js}

@@ -32,6 +32,9 @@ import Head from 'next/head';
 import { _ as _inherits$1, a as _classCallCheck$1, b as _possibleConstructorReturn$1, c as _Object$getPrototypeOf, d as _createClass$1, e as classCallCheck, p as possibleConstructorReturn, i as inherits } from './inherits-a41fe93f.js';
 import { d as IoIosArrowDropupCircle } from './index.esm-3fdda599.js';
 import Figure$2 from 'react-bootstrap/Figure';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Tooltip from 'react-bootstrap/Tooltip';
+import Popover from 'react-bootstrap/Popover';
 
 var onChangeSlide = function onChangeSlide(selectedIndex, router) {
   var pageNumber = selectedIndex + 1;
@@ -8161,7 +8164,7 @@ var Slideshow = function Slideshow(_ref) {
               { href: slide.slideshowImage.link && slide.slideshowImage.link, target: slide.slideshowImage.blank ? '_blank' : '_self' },
               React.createElement(
                 'div',
-                { style: { textAlign: 'center' }, className: '' },
+                { className: 'embed-responsive embed-responsive-slide' },
                 React.createElement(
                   LazyLoad,
                   null,
@@ -8171,8 +8174,13 @@ var Slideshow = function Slideshow(_ref) {
                     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', className: 'embed-item-img' })
+                    React.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', className: 'embed-responsive-item' })
                   )
+                ),
+                React.createElement(
+                  'style',
+                  { jsx: 'true' },
+                  '\n                        .embed-responsive-slide::before {\n                          padding-top: ' + slide.slideshowImage.height / slide.slideshowImage.width * 100 + '%;\n                        }\n                      '
                 )
               )
             ),
@@ -8194,7 +8202,7 @@ var Slideshow = function Slideshow(_ref) {
     React.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .embed-item-img {\n          max-width: 100%;\n          max-height: 750px;\n        }\n        .carousel-indicators {\n          bottom: -2.5rem !important;\n        }\n        .carousel-indicators li {\n          width: 20px;\n          height: 20px;\n          border-radius: 50% !important;\n          background-color: var(--secondary);\n        }\n        .carousel-control-prev {\n          justify-content: flex-start;\n        }\n        .carousel-control-next {\n          justify-content: flex-end;\n        }\n      '
+      '\n        .carousel-indicators {\n          bottom: -2.5rem !important;\n        }\n        .carousel-indicators li {\n          width: 20px;\n          height: 20px;\n          border-radius: 50% !important;\n          background-color: var(--secondary);\n        }\n        .carousel-control-prev {\n          justify-content: flex-start;\n        }\n        .carousel-control-next {\n          justify-content: flex-end;\n        }\n      '
     )
   );
 };
@@ -8998,6 +9006,74 @@ var FigureComponent = function FigureComponent(props) {
   var _node$widthP = node.widthP,
       widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
 
+  var infoBox = node.infoBox ? node.infoBox : [];
+
+  var renderTooltip = function renderTooltip(props) {
+    if (infoBox[0].title) {
+      return React.createElement(
+        Popover,
+        { id: 'popover-basic-' + infoBox[0].title },
+        React.createElement(
+          Popover.Title,
+          { as: 'h3' },
+          infoBox[0].title
+        ),
+        React.createElement(
+          Popover.Content,
+          null,
+          React.createElement(BlockContent, { blocks: infoBox[0].infoText, serializers: getSerializers })
+        )
+      );
+    } else {
+      return React.createElement(
+        Tooltip,
+        _extends({ id: 'button-tooltip' }, props),
+        React.createElement(BlockContent, { blocks: infoBox[0].infoText, serializers: getSerializers })
+      );
+    }
+  };
+
+  var FigureImageWOverLay = React.memo(function (_ref3) {
+    var node = _ref3.node,
+        client = _ref3.client,
+        imgAlt = _ref3.imgAlt,
+        link = _ref3.link,
+        handleClickFigure = _ref3.handleClickFigure;
+
+    var figureImageStyle = link ? { maxWidth: '100%' } : { maxWidth: '100%', cursor: 'pointer', width: 'auto' };
+    var triggerAction = main_42 ? 'click' : 'hover';
+    var placementLocation = main_42 ? 'top' : infoBox[0].alignment ? infoBox[0].alignment : 'right';
+    return React.createElement(
+      'picture',
+      null,
+      React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+      React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+      React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
+      main_42 && link ? React.createElement('img', _extends({
+        style: figureImageStyle,
+        className: 'figure-image',
+        src: urlFor({ source: node, client: client }),
+        alt: imgAlt ? imgAlt : 'figure image'
+      }, !link && !main_42 && {
+        onClick: function onClick() {
+          return handleClickFigure(node, client);
+        }
+      })) : React.createElement(
+        OverlayTrigger,
+        { trigger: triggerAction, placement: placementLocation, delay: { show: 250, hide: 400 }, overlay: renderTooltip() },
+        React.createElement('img', _extends({
+          style: figureImageStyle,
+          className: 'figure-image',
+          src: urlFor({ source: node, client: client }),
+          alt: imgAlt ? imgAlt : 'figure image'
+        }, !link && !main_42 && {
+          onClick: function onClick() {
+            return handleClickFigure(node, client);
+          }
+        }))
+      )
+    );
+  });
 
   var screenWidth = window.innerWidth;
 
@@ -9065,7 +9141,29 @@ var FigureComponent = function FigureComponent(props) {
   return React.createElement(
     React.Fragment,
     null,
-    React.createElement(
+    infoBox.length >= 1 ? React.createElement(
+      Figure$2,
+      { className: '' + class_name, style: figureStyle },
+      link ? React.createElement(
+        'a',
+        { target: blank ? '_blank' : '_self', href: link },
+        React.createElement(FigureImageWOverLay, { node: node, client: client, imgAlt: alt, link: link }),
+        React.createElement(FigureCaption, null)
+      ) : React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(FigureImageWOverLay, { node: node, client: client, imgAlt: alt, handleClickFigure: handleClickFigure }),
+        React.createElement(FigureCaption, null)
+      ),
+      React.createElement(LightBox, {
+        showLightbox: showLightbox,
+        lightboxImgSrc: lightboxImgSrc,
+        closeLightbox: function closeLightbox() {
+          setLightboxImgSrc('');
+          setShowLightbox(false);
+        }
+      })
+    ) : React.createElement(
       Figure$2,
       { className: '' + class_name, style: figureStyle },
       link ? React.createElement(
@@ -9179,6 +9277,73 @@ var MultiFigure = function MultiFigure(props) {
     setOpenImg(true);
   }, [client]);
 
+  var FigureImageWOverLay = React.memo(function (_ref3) {
+    var imagesCount = _ref3.imagesCount,
+        image = _ref3.image,
+        client = _ref3.client,
+        imgAlt = _ref3.imgAlt,
+        link = _ref3.link,
+        handleClickFigure = _ref3.handleClickFigure;
+
+    var triggerAction = main_42 ? 'click' : 'hover';
+    var placementLocation = main_42 ? 'top' : image.infoBox[0] ? image.infoBox[0].alignment : 'right';
+    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' }) }),
+      main_42 && link ? React.createElement('img', _extends({
+        'images-count': imagesCount,
+        className: 'multi-figure-image',
+        src: urlFor({ source: image, client: client }),
+        alt: imgAlt ? imgAlt : 'multi figure'
+      }, !link && !main_42 && {
+        onClick: function onClick() {
+          return handleClickFigure(image, client);
+        }
+      })) : React.createElement(
+        OverlayTrigger,
+        { trigger: triggerAction, placement: placementLocation, delay: { show: 250, hide: 400 }, overlay: renderTooltip(image) },
+        React.createElement('img', _extends({
+          'images-count': imagesCount,
+          className: 'multi-figure-image',
+          src: urlFor({ source: image, client: client }),
+          alt: imgAlt ? imgAlt : 'multi figure'
+        }, !link && !main_42 && {
+          onClick: function onClick() {
+            return handleClickFigure(image, client);
+          }
+        }))
+      )
+    );
+  });
+
+  var renderTooltip = function renderTooltip(image) {
+    if (image.infoBox[0].title) {
+      return React.createElement(
+        Popover,
+        { id: 'popover-basic-' + image.infoBox[0].title },
+        React.createElement(
+          Popover.Title,
+          { as: 'h3' },
+          image.infoBox[0].title
+        ),
+        React.createElement(
+          Popover.Content,
+          null,
+          React.createElement(BlockContent, { blocks: image.infoBox[0].infoText, serializers: getSerializers })
+        )
+      );
+    } else {
+      return React.createElement(
+        Tooltip,
+        _extends({ id: 'button-tooltip' }, props),
+        React.createElement(BlockContent, { blocks: image.infoBox[0].infoText, serializers: getSerializers })
+      );
+    }
+  };
+
   if (images && images.length > 0) {
     return React.createElement(
       'div',
@@ -9187,33 +9352,63 @@ var MultiFigure = function MultiFigure(props) {
         Row$1,
         { noGutters: true, style: { alignItems: 'center' } },
         images.map(function (image, index) {
-          return React.createElement(
-            Col$1,
-            { xs: 12, md: 12 / images.length, key: index },
-            image.link ? React.createElement(
-              'a',
-              _extends({}, image.link && { href: image.link, target: image.blank ? '_blank' : '_self' }, { style: { cursor: image.link ? 'pointer' : 'default' } }),
-              React.createElement(
+          if (image.infoBox) {
+            return React.createElement(
+              Col$1,
+              { xs: 12, md: 12 / images.length, key: index },
+              image.link ? React.createElement(
+                'a',
+                _extends({}, image.link && { href: image.link, target: image.blank ? '_blank' : '_self' }, { style: { cursor: image.link ? 'pointer' : 'default' } }),
+                React.createElement(
+                  'div',
+                  { className: 'multi-figure-image-container' },
+                  React.createElement(
+                    LazyLoad,
+                    { once: true },
+                    React.createElement(FigureImageWOverLay, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
+                  ),
+                  React.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
+                )
+              ) : React.createElement(
                 'div',
                 { className: 'multi-figure-image-container' },
                 React.createElement(
                   LazyLoad,
                   { once: true },
-                  React.createElement(FigureImage, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
+                  React.createElement(FigureImageWOverLay, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
                 ),
                 React.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
-            ) : React.createElement(
-              'div',
-              { className: 'multi-figure-image-container' },
-              React.createElement(
-                LazyLoad,
-                { once: 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 })
-            )
-          );
+            );
+          } else {
+            return React.createElement(
+              Col$1,
+              { xs: 12, md: 12 / images.length, key: index },
+              image.link ? React.createElement(
+                'a',
+                _extends({}, image.link && { href: image.link, target: image.blank ? '_blank' : '_self' }, { style: { cursor: image.link ? 'pointer' : 'default' } }),
+                React.createElement(
+                  'div',
+                  { className: 'multi-figure-image-container' },
+                  React.createElement(
+                    LazyLoad,
+                    { once: true },
+                    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 })
+                )
+              ) : React.createElement(
+                'div',
+                { className: 'multi-figure-image-container' },
+                React.createElement(
+                  LazyLoad,
+                  { once: 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 })
+              )
+            );
+          }
         })
       ),
       React.createElement(

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-2dcd3f28.js';
+export { g as getSerializers } from './index-37df0726.js';
 export { default as Beam } from './Beam.js';
 export { default as Segment } from './Segment.js';
 export { default as KMTracker } from './KMTracker.js';
@@ -180,6 +180,9 @@ import 'react-bootstrap/Modal';
 import './util-3ab476bf.js';
 import 'react-bootstrap/Pagination';
 import 'react-bootstrap/Figure';
+import 'react-bootstrap/OverlayTrigger';
+import 'react-bootstrap/Tooltip';
+import 'react-bootstrap/Popover';
 import './index-db3bb315.js';
 import 'swr';
 import 'passport-local';

package/package.json

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