@mjhls/mjh-framework 1.0.695 → 1.0.696-1034-2

package/dist/esm/{index-754010eb.js → index-d3fdad5e.js}

@@ -28,6 +28,7 @@ import { u as util } from './util-7700fc59.js';
 import { R as ReactPlayerLoader } from './brightcove-react-player-loader.es-83f53e4e.js';
 import Pagination from 'react-bootstrap/Pagination';
 import Head from 'next/head';
+import Figure$1$1 from 'react-bootstrap/Figure';
 
 var urlFor = function urlFor(source, builder) {
   return builder.image(source).auto('format');
@@ -7061,6 +7062,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
   var today = moment().utc().format();
 
   var Videos = nodes.videos.filter(function (video) {
+    console.dir(video);
     if ((video.is_visible === true || !video.hasOwnProperty('is_visible')) && (today >= video.published || !video.hasOwnProperty('published'))) {
       return video;
     }
@@ -8044,12 +8046,65 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var articleContainerRef = useRef(null);
   var arrowRef = useRef(null);
 
-  var _useState = useState(0),
+  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? useState(router.asPath.split('=')[1]) : useState(null),
+      _ref3 = _slicedToArray(_ref2, 2),
+      selectedArticle = _ref3[0],
+      setSelectedArticle = _ref3[1];
+
+  var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      contentWidth = _useState2[0],
-      setContentWidth = _useState2[1];
+      firstLoad = _useState2[0],
+      setFirstLoad = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentURL = _useState4[0],
+      setCurrentURL = _useState4[1];
+
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentTitle = _useState6[0],
+      setCurrentTitle = _useState6[1];
+
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      currentSummary = _useState8[0],
+      setCurrentSummary = _useState8[1];
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      currentThumbnail = _useState10[0],
+      setCurrentThumbnail = _useState10[1];
+
+  var _useState11 = useState(null),
+      _useState12 = _slicedToArray(_useState11, 2),
+      sensorVisible = _useState12[0],
+      setSensorVisible = _useState12[1];
+
+  var _useState13 = useState(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      contentWidth = _useState14[0],
+      setContentWidth = _useState14[1];
 
-  var upArrowClicked = false;
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      upArrowClicked = _useState16[0],
+      setUpArrowClicked = _useState16[1];
+
+  var _useState17 = useState(null),
+      _useState18 = _slicedToArray(_useState17, 2),
+      articleScrollHeight = _useState18[0],
+      setArticleScrollHeight = _useState18[1];
+
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      articleClicked = _useState20[0],
+      setArticleClicked = _useState20[1];
+
+  var _useState21 = useState(null),
+      _useState22 = _slicedToArray(_useState21, 2),
+      articleIndex = _useState22[0],
+      setArticleIndex = _useState22[1];
 
   var Articles = nodes.articles.filter(function (article) {
     if ((article.is_visible === true || !article.hasOwnProperty('is_visible')) && today >= article.published) {
@@ -8082,7 +8137,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           'a',
           { onClick: function onClick(e) {
               return articleCardClickHandler(e);
-            }, 'data-articleid': '' + article.param.current },
+            }, 'data-cardlabel': '' + articleLabel, 'data-articleIndex': '' + index, 'data-articleid': '' + article.param.current },
           React__default.createElement(
             'div',
             { className: 'prevNext-thumbnail' },
@@ -8112,43 +8167,17 @@ var ArticleSeries = function ArticleSeries(_ref) {
     });
   };
 
-  var _ref2 = router && router.asPath && router.asPath.split('?')[1] ? useState(router.asPath.split('=')[1]) : useState(null),
-      _ref3 = _slicedToArray(_ref2, 2),
-      selectedArticle = _ref3[0],
-      setSelectedArticle = _ref3[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      firstLoad = _useState4[0],
-      setFirstLoad = _useState4[1];
-
-  var _useState5 = useState(null),
-      _useState6 = _slicedToArray(_useState5, 2),
-      currentURL = _useState6[0],
-      setCurrentURL = _useState6[1];
-
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      currentTitle = _useState8[0],
-      setCurrentTitle = _useState8[1];
-
-  var _useState9 = useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      currentSummary = _useState10[0],
-      setCurrentSummary = _useState10[1];
-
-  var _useState11 = useState(null),
-      _useState12 = _slicedToArray(_useState11, 2),
-      currentThumbnail = _useState12[0],
-      setCurrentThumbnail = _useState12[1];
-
   var articleCardClickHandler = function articleCardClickHandler(e) {
     e.preventDefault();
     var articleClicked = e.currentTarget.dataset.articleid;
+    setArticleClicked(true);
+    setArticleIndex(e.currentTarget.dataset.articleindex);
+    setSensorVisible(false);
     setSelectedArticle(articleClicked);
-    scrollToArticle(articleClicked);
+    scrollToArticle(articleClicked, e.currentTarget.dataset.cardlabel);
+    arrowRef.current.style.visibility = 'hidden';
   };
-  var scrollToArticle = function scrollToArticle(id) {
+  var scrollToArticle = function scrollToArticle(id, cardLabel) {
     var localArticleID = id ? id : selectedArticle;
     var findArticle = function findArticle(ref) {
       if (ref) {
@@ -8156,13 +8185,18 @@ var ArticleSeries = function ArticleSeries(_ref) {
       }
       return false;
     };
+    console.log('cardLabel', cardLabel);
+    var isNextPrev = cardLabel === 'Next' || 'Previous' ? true : false;
+    console.log(isNextPrev);
     var indexOfRef = refArray.current.findIndex(findArticle);
-
     if (indexOfRef >= 0) {
       var newOffsetTop = !firstLoad ? refArray.current[indexOfRef].wraperRef.current.offsetTop : refArray.current[indexOfRef].wraperRef.current.offsetTop + document.getElementsByTagName('header')[0].clientHeight;
       // console.dir(refArray.current[indexOfRef].wraperRef.current)
       // console.log(document.getElementsByTagName('header')[0].clientHeight)
       // console.log(refArray.current[indexOfRef].wraperRef.current.offsetTop)
+
+      setArticleScrollHeight(newOffsetTop);
+
       window.scrollTo({ top: newOffsetTop, behavior: 'smooth' });
       //refArray.current[indexOfRef].wraperRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
     }
@@ -8175,6 +8209,12 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
+  useEffect(function () {
+    if (articleClicked === true) {
+      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor(Articles[articleIndex].thumbnail.asset).url());
+    }
+  }, [articleClicked]);
+
   var onChangeArticle = function onChangeArticle(path, visibility, title, summary, shareImage) {
     var currentPath = window && window.location && window.location.pathname ? window.location.pathname.replace('?seriesArticle=', '') : '';
     var newPath = (router && router.asPath && router.asPath.split('?')[0]) + '?seriesArticle=' + path;
@@ -8214,7 +8254,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
     var window = e.currentTarget;
     if (preVscroll > window.scrollY) {
       isScrollDown = false;
-      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && !upArrowClicked) {
+      if (window.scrollY > articleContainerRef.current.offsetTop && preVscroll !== 0 && upArrowClicked === false && articleClicked === false) {
         arrowRef.current.style.visibility = 'visible';
       }
     } else if (preVscroll < window.scrollY) {
@@ -8228,8 +8268,15 @@ var ArticleSeries = function ArticleSeries(_ref) {
     if (preVscroll <= articleContainerRef.current.offsetTop) {
       arrowRef.current.style.visibility = 'hidden';
     }
+    if (window.scrollY >= articleScrollHeight && articleClicked === true) {
+      setArticleClicked(false);
+      setSensorVisible(true);
+      setUpArrowClicked(false);
+    }
     if (window.scrollY === 0 && upArrowClicked === true) {
-      upArrowClicked = false;
+      setUpArrowClicked(false);
+      setSensorVisible(true);
+      setArticleClicked(false);
     }
   };
 
@@ -8243,6 +8290,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   useLayoutEffect(function () {
     //console.log('useLayoutEffect')
     if (!firstLoad) {
+      setUpArrowClicked(false);
       if (main_39) {
         grabLoadedAds();
       } else {
@@ -8285,26 +8333,34 @@ var ArticleSeries = function ArticleSeries(_ref) {
     }
   };
 
-  var handleArrowClick = function handleArrowClick() {
-    var newPath = router.asPath.split('?')[0];
-    var title = nodes.seriesTitle;
-    isScrollDown = true;
-    upArrowClicked = true;
-    arrowRef.current.style.visibility = 'hidden';
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-    window.history.pushState({}, '', newPath);
-    document.title = title;
+  useEffect(function () {
+    console.log('sensorVisible Effect');
+    if (sensorVisible === false && articleClicked === false) {
+      var newPath = router.asPath.split('?')[0];
+      var title = nodes.seriesTitle;
+      isScrollDown = true;
+      setUpArrowClicked(true);
+      arrowRef.current.style.visibility = 'hidden';
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      window.history.pushState({}, '', newPath);
+      document.title = title;
 
-    setCurrentURL(newPath);
-    setCurrentTitle(title);
-    if (rootArticle) {
-      setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
-      setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
-    } else {
-      setCurrentSummary('');
-      setCurrentThumbnail('');
+      setCurrentURL(newPath);
+      setCurrentTitle(title);
+      if (rootArticle) {
+        setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
+        setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
+      } else {
+        setCurrentSummary('');
+        setCurrentThumbnail('');
+      }
+      refreshAD(newPath);
     }
-    refreshAD(newPath);
+  }, [sensorVisible]);
+
+  var handleArrowClick = function handleArrowClick() {
+    console.log('handleArrowClick');
+    setSensorVisible(false);
   };
 
   return React__default.createElement(
@@ -8368,6 +8424,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React__default.createElement(
             InscreenSensor,
             {
+              visible: sensorVisible,
               offSetTop: 120,
               className: 'inscreen-wrapper',
               key: '' + article.param.current,
@@ -8376,7 +8433,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                 return refArray.current[index] = ele;
               },
               onChange: function onChange(visible) {
-                if (!upArrowClicked) {
+                if (upArrowClicked === false && articleClicked === false) {
                   if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
                     onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
                   }
@@ -8549,12 +8606,14 @@ var FigureComponent = function FigureComponent(props) {
   if (typeof window === 'undefined') return null;
 
   var node = props.node,
-      client = props.client;
+      client = props.client,
+      getSerializers = props.getSerializers;
 
 
   if (!node.asset) return null;
 
   var caption = node.caption,
+      imgcaption = node.imgcaption,
       alt = node.alt,
       blank = node.blank,
       link = node.link,
@@ -8606,6 +8665,18 @@ var FigureComponent = function FigureComponent(props) {
     imageWidth = '100%';
   }
 
+  var FigureCaption = useCallback(function () {
+    if (imgcaption && imgcaption.length > 0) {
+      return React__default.createElement(
+        'div',
+        { className: 'figure-caption' },
+        React__default.createElement(BlockContent, { blocks: imgcaption, serializers: getSerializers })
+      );
+    } else if (caption) {
+      return React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } });
+    } else return null;
+  }, [caption, imgcaption]);
+
   var figureStyle = disableTextWrap ? { maxWidth: '100%', width: imageWidth, margin: imageFloat !== 'none' ? imageFloat === 'left' ? '' : '0 0 0 auto' : '' } : {
     width: imageWidth,
     maxWidth: '100%',
@@ -8618,17 +8689,17 @@ var FigureComponent = function FigureComponent(props) {
     React__default.Fragment,
     null,
     React__default.createElement(
-      Figure$1,
+      Figure$1$1,
       { className: '' + class_name, style: figureStyle },
       link ? React__default.createElement(
         'a',
         { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement(Figure$1.Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$3(node, client).url(), alt: alt && alt }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+        React__default.createElement(Figure$1$1.Image, { style: { maxWidth: '100%' }, className: 'figure-image', src: urlFor$3(node, client).url(), alt: alt && alt }),
+        React__default.createElement(FigureCaption, null)
       ) : React__default.createElement(
         React__default.Fragment,
         null,
-        React__default.createElement(Figure$1.Image, {
+        React__default.createElement(Figure$1$1.Image, {
           style: { maxWidth: '100%', cursor: 'pointer', width: 'auto' },
           className: 'figure-image',
           src: urlFor$3(node, client).url(),
@@ -8638,7 +8709,7 @@ var FigureComponent = function FigureComponent(props) {
             setShowLightbox(true);
           }
         }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+        React__default.createElement(FigureCaption, null)
       ),
       React__default.createElement(LightBox, {
         showLightbox: showLightbox,
@@ -8652,7 +8723,7 @@ var FigureComponent = function FigureComponent(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n      '
+      '\n        .figure-caption,\n        .figure-caption h1,\n        .figure-caption h2,\n        .figure-caption h3,\n        .figure-caption h4,\n        .figure-caption h5,\n        .figure-caption h6,\n        .figure-caption p,\n        .figure-caption ul {\n          color: #6c757d;\n          font-size: 0.875rem;\n        }\n      '
     )
   );
 };
@@ -8681,7 +8752,8 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
 
 var MultiFigure = function MultiFigure(props) {
   var images = props.node.images,
-      client = props.client;
+      client = props.client,
+      getSerializers = props.getSerializers;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -8696,16 +8768,32 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxImage = useRef(null);
   var lightboxContainer = useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
+
+  var FigureCaption = function FigureCaption(_ref) {
+    var caption = _ref.caption,
+        imgcaption = _ref.imgcaption;
+
+    if (imgcaption && imgcaption.length > 0) {
+      return React__default.createElement(
+        'div',
+        { className: 'multi-figure-caption' },
+        React__default.createElement(BlockContent, { blocks: imgcaption, serializers: getSerializers })
+      );
+    } else if (caption) {
+      return React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'multi-figure-caption\'>' + caption + '</span>' } });
+    } else return null;
+  };
+
   if (images && images.length > 0) {
     return React__default.createElement(
       'div',
       { className: 'multi-figure-container' },
       React__default.createElement(
-        Row$1,
+        Row,
         { noGutters: true },
         images.map(function (image, index) {
           return React__default.createElement(
-            Col$1,
+            Col,
             { xs: 12, md: 12 / images.length, key: index },
             image.link ? React__default.createElement(
               'a',
@@ -8718,11 +8806,7 @@ var MultiFigure = function MultiFigure(props) {
                   { once: true },
                   React__default.createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor$4(image.asset, client).url(), alt: image.alt })
                 ),
-                image.caption && React__default.createElement(
-                  'span',
-                  { className: 'multi-figure-caption' },
-                  image.caption
-                )
+                React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
             ) : React__default.createElement(
               'div',
@@ -8741,11 +8825,7 @@ var MultiFigure = function MultiFigure(props) {
                   }
                 })
               ),
-              image.caption && React__default.createElement(
-                'span',
-                { className: 'multi-figure-caption' },
-                image.caption
-              )
+              React__default.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
           );
         })
@@ -8758,7 +8838,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: cover;\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              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              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              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              height: 300px;\n            }\n          }\n\n          .multi-figure-caption {\n            font-size: 90%;\n            color: #6c757d;\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: cover;\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              height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              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              height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              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        '
       )
     );
   }
@@ -8867,12 +8947,12 @@ var getSerializers = function getSerializers() {
       figure: function figure(_ref4) {
         var node = _ref4.node;
 
-        return React__default.createElement(Figure, { node: node, client: client, contextualADFlag: contextualADFlag });
+        return React__default.createElement(Figure, { node: node, client: client, contextualADFlag: contextualADFlag, getSerializers: getSerializers.apply(undefined, props) });
       },
       multifigure: function multifigure(_ref5) {
         var node = _ref5.node;
 
-        return React__default.createElement(MultiFigure, { node: node, client: client });
+        return React__default.createElement(MultiFigure, { node: node, client: client, getSerializers: getSerializers.apply(undefined, props) });
       },
       slideshow: function slideshow(_ref6) {
         var node = _ref6.node;
@@ -9052,4 +9132,4 @@ var getSerializers = function getSerializers() {
   };
 };
 
-export { InscreenSensor as I, getSerializers as g, renderAuthor as r };
+export { getSerializers as g, renderAuthor as r };

package/dist/esm/index.js

@@ -79,11 +79,12 @@ import 'react-bootstrap/Form';
 import './index-d2f90501.js';
 import './js.cookie-6874175c.js';
 export { default as CMEDeck } from './CMEDeck.js';
-export { g as getSerializers } from './index-754010eb.js';
+export { g as getSerializers } from './index-d3fdad5e.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
 import 'next/head';
+import 'react-bootstrap/Figure';
 export { default as ExternalResources } from './ExternalResources.js';
 export { Column1 } from './Column1.js';
 export { default as SideFooter } from './SideFooter.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mjhls/mjh-framework",
-  "version": "1.0.695",
+  "version": "1.0.696-1034-2",
   "description": "Foundation Framework",
   "author": "mjh-framework",
   "license": "MIT",