@mjhls/mjh-framework 1.0.271 → 1.0.273

package/README.md

@@ -1,5 +1,5 @@
 
-# mjh-framework v. 1.0.271
+# mjh-framework v. 1.0.273
 
 > Foundation Framework
 

package/dist/cjs/{ADInfeed-0da6acd4.js → ADInfeed-f560c2f9.js}

@@ -6,7 +6,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var Card = _interopDefault(require('react-bootstrap/Card'));
 var slicedToArray = require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-93d892f5.js');
+var AdSlot = require('./AdSlot-f69a31ec.js');
 
 var ADInfeed = function ADInfeed(_ref) {
   var index = _ref.index,

package/dist/cjs/{AdSlot-93d892f5.js → AdSlot-f69a31ec.js}

@@ -1114,7 +1114,7 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
   }, 500);
 
   var matchAd = function matchAd(element) {
-    return slotId.includes(element);
+    return slotId && slotId.includes(element);
   };
 
   return React__default.createElement(

package/dist/cjs/DeckContent.js

@@ -28,9 +28,9 @@ var index$1 = require('./index-39beccb3.js');
 var index$2 = require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
 require('./slicedToArray-e38fb29d.js');
-require('./AdSlot-93d892f5.js');
+require('./AdSlot-f69a31ec.js');
 require('./promise-b96c61f8.js');
-var ADInfeed = require('./ADInfeed-0da6acd4.js');
+var ADInfeed = require('./ADInfeed-f560c2f9.js');
 
 var DeckContent = function (_React$Component) {
   inherits$2._inherits(DeckContent, _React$Component);

package/dist/cjs/Figure-fe3e9705.js

@@ -0,0 +1,145 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+require('./_commonjsHelpers-06173234.js');
+require('./_to-object-329a650b.js');
+require('./web.dom.iterable-0998bdc3.js');
+require('./core.get-iterator-method-e049ca4a.js');
+var React = require('react');
+var React__default = _interopDefault(React);
+var index$1 = require('./index-39beccb3.js');
+var slicedToArray = require('./slicedToArray-e38fb29d.js');
+var reactBootstrap = require('react-bootstrap');
+
+var urlFor = function urlFor(source, client) {
+  var builder = index$1.imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var compareProps = function compareProps(prevProps, nextProps) {
+  if (nextProps.node.asset && nextProps.node.asset._ref) {
+    return prevProps.node.asset._ref === nextProps.node.asset._ref;
+  }
+};
+
+var FigureComponent = function FigureComponent(props) {
+  var _useState = React.useState(false),
+      _useState2 = slicedToArray._slicedToArray(_useState, 2),
+      openImg = _useState2[0],
+      setOpenImg = _useState2[1];
+
+  var _useState3 = React.useState(''),
+      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
+      openImgSrc = _useState4[0],
+      setOpenImgSrc = _useState4[1];
+
+  var node = props.node,
+      client = props.client;
+  var caption = node.caption,
+      alt = node.alt,
+      blank = node.blank,
+      link = node.link,
+      _node$alignment = node.alignment,
+      alignment = _node$alignment === undefined ? 'center' : _node$alignment;
+  var _node$widthP = node.widthP,
+      widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
+
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  var screenWidth = window.innerWidth;
+
+  if (client.clientConfig && client.clientConfig.defaultImageSize && widthP === 'auto') {
+    widthP = client.clientConfig.defaultImageSize;
+  }
+
+  var imageFloat = null;
+  if (screenWidth > 1000) {
+    var align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = align;
+  } else {
+    var _align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = _align;
+  }
+
+  var figureMargin = null;
+  if (imageFloat === 'none') {
+    figureMargin = '0 auto 1rem';
+  }
+  if (imageFloat === 'left') {
+    figureMargin = '0 1.5rem 1.5rem 0';
+  }
+  if (imageFloat === 'right') {
+    figureMargin = '0 0 1.5rem 1.5rem';
+  }
+
+  var imageWidth = null;
+  if (screenWidth > 1000) {
+    if (widthP === 'auto') {
+      if (imageFloat === 'none') {
+        imageWidth = 'auto';
+      } else {
+        imageWidth = '30%';
+      }
+    } else {
+      imageWidth = widthP + '%';
+    }
+  } else {
+    imageWidth = '100%';
+  }
+
+  if (!node.asset) return null;
+
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    imageWidth !== null && imageFloat !== null && React__default.createElement(
+      reactBootstrap.Figure,
+      { className: 'd-block', style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: figureMargin } },
+      link ? React__default.createElement(
+        'a',
+        { target: blank ? '_blank' : '_self', href: link },
+        React__default.createElement(reactBootstrap.Figure.Image, { style: { width: '100%' }, className: 'figure-image', src: urlFor(node, client).url(), alt: alt && alt }),
+        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+      ) : React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(reactBootstrap.Figure.Image, {
+          style: { width: '100%' },
+          className: 'figure-image',
+          src: urlFor(node, client).url(),
+          alt: alt && alt,
+          onClick: function onClick() {
+            setOpenImgSrc(urlFor(node, client).url());
+            setOpenImg(true);
+          }
+        }),
+        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
+      React__default.createElement('img', { src: openImgSrc }),
+      React__default.createElement('a', {
+        className: 'lightbox-close',
+        onClick: function onClick() {
+          setOpenImgSrc('');
+          setOpenImg(false);
+        }
+      })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\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: 9999;\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      '
+    )
+  );
+};
+
+var Figure = React__default.memo(FigureComponent, compareProps);
+
+exports.default = Figure;

package/dist/cjs/{GridContent-524f2ad8.js → GridContent-8d5a738c.js}

@@ -21,7 +21,7 @@ var Router__default = _interopDefault(Router);
 var index$1 = require('./index-39beccb3.js');
 var index$2 = require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
-var ADInfeed = require('./ADInfeed-0da6acd4.js');
+var ADInfeed = require('./ADInfeed-f560c2f9.js');
 var get$1 = require('./get-1f91592f.js');
 
 var Dfp = React__default.lazy(function () {

package/dist/cjs/GridContent.js

@@ -24,11 +24,11 @@ require('./index-39beccb3.js');
 require('./index-fa0fb52c.js');
 require('./entities-310b46ee.js');
 require('./slicedToArray-e38fb29d.js');
-require('./AdSlot-93d892f5.js');
+require('./AdSlot-f69a31ec.js');
 require('./promise-b96c61f8.js');
-require('./ADInfeed-0da6acd4.js');
+require('./ADInfeed-f560c2f9.js');
 require('./get-1f91592f.js');
-var GridContent = require('./GridContent-524f2ad8.js');
+var GridContent = require('./GridContent-8d5a738c.js');
 
 
 

package/dist/cjs/{Normal-2eec2d56.js → Normal-7ed9eee9.js}

@@ -13,7 +13,7 @@ var Row = _interopDefault(require('react-bootstrap/Row'));
 var Col = _interopDefault(require('react-bootstrap/Col'));
 var Link = _interopDefault(require('next/link'));
 var slicedToArray = require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-93d892f5.js');
+var AdSlot = require('./AdSlot-f69a31ec.js');
 var get$1 = require('./get-1f91592f.js');
 var reactBootstrap = require('react-bootstrap');
 var index_esm = require('./index.esm-340d3792.js');
@@ -1297,7 +1297,6 @@ var NavMagazine = function NavMagazine(props) {
 
   React.useEffect(function () {
     var navOffsetTop = navRef.current.getBoundingClientRect().top;
-    var navOffsetHeight = navRef.current.getBoundingClientRect().height;
     var adSection = document.querySelector('.AD728x90');
     var stickyNav = window.addEventListener('scroll', function () {
       if (window.pageYOffset > navOffsetTop) {
@@ -1306,7 +1305,6 @@ var NavMagazine = function NavMagazine(props) {
           navRef.current.style.top = 0;
           navRef.current.style.width = '100%';
           navRef.current.style.zIndex = '9999';
-          adSection.style.marginTop = navOffsetHeight + 'px';
         }
       } else {
         if (navRef.current && navRef.current.style) {
@@ -2071,7 +2069,6 @@ var HamMagazine = function HamMagazine(props) {
 
   React.useEffect(function () {
     var navOffsetTop = navRef.current.getBoundingClientRect().top;
-    var navOffsetHeight = navRef.current.getBoundingClientRect().height;
     var adSection = document.querySelector('.AD728x90');
     var stickyNav = window.addEventListener('scroll', function () {
       if (window.pageYOffset > navOffsetTop) {
@@ -2080,7 +2077,6 @@ var HamMagazine = function HamMagazine(props) {
           navRef.current.style.top = 0;
           navRef.current.style.width = '100%';
           navRef.current.style.zIndex = '9999';
-          adSection.style.marginTop = navOffsetHeight + 'px';
         }
       } else {
         if (navRef.current && navRef.current.style) {
@@ -2371,8 +2367,29 @@ var AD728x90 = function AD728x90(_ref) {
       adTargeting = _useState4[0],
       setTargeting = _useState4[1];
 
+  var adRef = React.useRef(null);
+
   React.useEffect(function () {
     if (window && window.innerWidth && window.innerWidth < 768) {
+      var navbar = document.querySelector('.navbar');
+      var AdOffsetTop = adRef.current.getBoundingClientRect().top;
+      window.addEventListener('scroll', function () {
+        if (window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
+          if (adRef.current && adRef.current.style) {
+            adRef.current.style.position = 'fixed';
+            adRef.current.style.top = '60px';
+            adRef.current.style.left = '0px';
+            adRef.current.style.zIndex = '9999';
+            adRef.current.style.width = '100%';
+            adRef.current.style.marginTop = '2px';
+          }
+        } else {
+          if (adRef.current && adRef.current.style) {
+            adRef.current.style.position = 'relative';
+            adRef.current.style.top = '';
+          }
+        }
+      });
       setMobileView(true);
       adTargeting['pos'] = pos && pos.length ? pos : 'top-mobile';
     } else {
@@ -2384,21 +2401,25 @@ var AD728x90 = function AD728x90(_ref) {
   var browserSizes = [[728, 90], [970, 90], [320, 50], [300, 50]];
   var mobileSizes = [[320, 50], [300, 50]];
 
-  return React__default.createElement(AdSlot.DFPAdSlot, {
-    slotId: slotId,
-    networkID: networkID,
-    adUnit: adUnit,
-    targeting: adTargeting,
-    className: 'AD728x90',
-    sizes: mobileView ? mobileSizes : browserSizes,
-    sizeMapping: [{
-      viewport: [768, 1],
-      sizes: [[728, 90], [970, 90]]
-    }, {
-      viewport: [1, 1],
-      sizes: [[320, 50], [300, 50]]
-    }]
-  });
+  return React__default.createElement(
+    'div',
+    { className: 'leaderboard-ad-wrapper', ref: adRef, style: { backgroundColor: '#fff' } },
+    React__default.createElement(AdSlot.DFPAdSlot, {
+      slotId: slotId,
+      networkID: networkID,
+      adUnit: adUnit,
+      targeting: adTargeting,
+      className: 'AD728x90',
+      sizes: mobileView ? mobileSizes : browserSizes,
+      sizeMapping: [{
+        viewport: [768, 1],
+        sizes: [[728, 90], [970, 90]]
+      }, {
+        viewport: [1, 1],
+        sizes: [[320, 50], [300, 50]]
+      }]
+    })
+  );
 };
 
 // Main

package/dist/cjs/TemplateNormal.js

@@ -15,13 +15,13 @@ require('react-bootstrap/Row');
 require('react-bootstrap/Col');
 require('next/link');
 require('./slicedToArray-e38fb29d.js');
-require('./AdSlot-93d892f5.js');
+require('./AdSlot-f69a31ec.js');
 require('./promise-b96c61f8.js');
 require('./get-1f91592f.js');
 require('react-bootstrap');
 require('./index.esm-340d3792.js');
 require('react-bootstrap/Button');
-var TemplateNormal = require('./Normal-2eec2d56.js');
+var TemplateNormal = require('./Normal-7ed9eee9.js');
 require('react-bootstrap/ListGroup');
 require('next/head');
 require('react-bootstrap/Nav');

package/dist/cjs/index.js

@@ -30,12 +30,12 @@ var index$1 = require('./index-39beccb3.js');
 require('./index-fa0fb52c.js');
 var entities = require('./entities-310b46ee.js');
 var slicedToArray = require('./slicedToArray-e38fb29d.js');
-var AdSlot = require('./AdSlot-93d892f5.js');
+var AdSlot = require('./AdSlot-f69a31ec.js');
 require('./promise-b96c61f8.js');
-require('./ADInfeed-0da6acd4.js');
+require('./ADInfeed-f560c2f9.js');
 var DeckContent = require('./DeckContent.js');
 require('./get-1f91592f.js');
-var GridContent = require('./GridContent-524f2ad8.js');
+var GridContent = require('./GridContent-8d5a738c.js');
 var DeckQueue = require('./DeckQueue.js');
 require('react-bootstrap/Media');
 var ThumbnailCard = require('./ThumbnailCard.js');
@@ -54,7 +54,7 @@ var IssueDeck = require('./IssueDeck.js');
 require('react-bootstrap/Badge');
 var IssueContentDeck = require('./IssueContentDeck.js');
 var Spinner = _interopDefault(require('react-bootstrap/Spinner'));
-var TemplateNormal = require('./Normal-2eec2d56.js');
+var TemplateNormal = require('./Normal-7ed9eee9.js');
 require('react-bootstrap/ListGroup');
 var Head = _interopDefault(require('next/head'));
 var Accordion = _interopDefault(require('react-bootstrap/Accordion'));
@@ -67,6 +67,7 @@ require('react-bootstrap/Form');
 require('react-bootstrap/FormControl');
 var Modal = _interopDefault(require('react-bootstrap/Modal'));
 var Pagination = _interopDefault(require('react-bootstrap/Pagination'));
+var dynamic = _interopDefault(require('next/dynamic'));
 var Carousel = _interopDefault(require('react-bootstrap/Carousel'));
 var Breadcrumb = _interopDefault(require('react-bootstrap/Breadcrumb'));
 var DropdownButton = _interopDefault(require('react-bootstrap/DropdownButton'));
@@ -3082,153 +3083,7 @@ var ADWelcome = function ADWelcome(_ref) {
   );
 };
 
-var urlFor$1 = function urlFor(source, client) {
-  var builder = index$1.imageUrlBuilder(client);
-  return builder.image(source).auto('format');
-};
-
-var FigureComponent = function FigureComponent(_ref) {
-  var node = _ref.node,
-      client = _ref.client;
-
-  var imgElement = React.useRef(null);
-
-  var _useState = React.useState(null),
-      _useState2 = slicedToArray._slicedToArray(_useState, 2),
-      imageWidth = _useState2[0],
-      setimageWidth = _useState2[1];
-
-  var _useState3 = React.useState(null),
-      _useState4 = slicedToArray._slicedToArray(_useState3, 2),
-      imgFloat = _useState4[0],
-      setimgFloat = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      _useState6 = slicedToArray._slicedToArray(_useState5, 2),
-      openImg = _useState6[0],
-      setOpenImg = _useState6[1];
-
-  var _useState7 = React.useState(''),
-      _useState8 = slicedToArray._slicedToArray(_useState7, 2),
-      openImgSrc = _useState8[0],
-      setOpenImgSrc = _useState8[1];
-
-  var caption = node.caption,
-      alt = node.alt,
-      blank = node.blank,
-      link = node.link,
-      _node$alignment = node.alignment,
-      alignment = _node$alignment === undefined ? 'center' : _node$alignment;
-  var _node$widthP = node.widthP,
-      widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
-
-
-  if (client.clientConfig && client.clientConfig.defaultImageSize && widthP === 'auto') {
-    widthP = client.clientConfig.defaultImageSize;
-  }
-
-  var figureMargin = void 0;
-  if (imgFloat === 'none') {
-    figureMargin = '0 auto 1rem';
-  }
-  if (imgFloat === 'left') {
-    figureMargin = '0 1.5rem 1.5rem 0';
-  }
-  if (imgFloat === 'right') {
-    figureMargin = '0 0 1.5rem 1.5rem';
-  }
-
-  var loadImg = function loadImg() {
-    var screenWidth = window.innerWidth;
-    if (screenWidth > 1000) {
-      if (widthP === 'auto') {
-        if (imgFloat === 'none') setimageWidth('auto');else setimageWidth('30%');
-      } else {
-        setimageWidth(widthP + '%');
-      }
-    } else {
-      setimageWidth('100%');
-    }
-  };
-
-  React.useEffect(function () {
-    var screenWidth = window.innerWidth;
-    if (screenWidth > 1000) {
-      if (widthP === 'auto') {
-        if (imgFloat === 'none') setimageWidth('auto');else setimageWidth('30%');
-      } else {
-        setimageWidth(widthP + '%');
-      }
-    } else {
-      setimageWidth('100%');
-    }
-  }, [widthP, imgFloat]);
-
-  React.useEffect(function () {
-    var screenWidth = window.innerWidth;
-    if (screenWidth > 1000) {
-      var align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
-      setimgFloat(align);
-    } else {
-      var _align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
-      setimgFloat(_align);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (!node.asset) return null;
-
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    imageWidth && imgFloat && React__default.createElement(
-      reactBootstrap.Figure,
-      { className: 'd-block', style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imgFloat, margin: figureMargin } },
-      link ? React__default.createElement(
-        'a',
-        { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement(reactBootstrap.Figure.Image, { style: { width: '100%' }, className: 'figure-image', ref: imgElement, onLoad: loadImg, src: urlFor$1(node, client).url(), alt: alt && alt }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
-      ) : React__default.createElement(
-        React__default.Fragment,
-        null,
-        React__default.createElement(reactBootstrap.Figure.Image, {
-          style: { width: '100%' },
-          className: 'figure-image',
-          ref: imgElement,
-          onLoad: loadImg,
-          src: urlFor$1(node, client).url(),
-          alt: alt && alt,
-          onClick: function onClick() {
-            setOpenImgSrc(urlFor$1(node, client).url());
-            setOpenImg(true);
-          }
-        }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
-      )
-    ),
-    React__default.createElement(
-      'div',
-      { className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
-      React__default.createElement('img', { src: openImgSrc }),
-      React__default.createElement('a', {
-        className: 'lightbox-close',
-        onClick: function onClick() {
-          setOpenImgSrc('');
-          setOpenImg(false);
-        }
-      })
-    ),
-    React__default.createElement(
-      'style',
-      { jsx: 'true' },
-      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\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: 9999;\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      '
-    )
-  );
-};
-
-var urlFor$2 = function urlFor(source, builder) {
+var urlFor$1 = function urlFor(source, builder) {
   return builder.image(source).auto('format');
 };
 
@@ -3279,7 +3134,7 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           reactBootstrap.Carousel.Item,
           { key: slide._key },
-          React__default.createElement('img', { src: slide.asset && urlFor$2(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React__default.createElement('img', { src: slide.asset && urlFor$1(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
           slide.caption && React__default.createElement(
             'p',
             { className: 'p-2' },
@@ -13522,7 +13377,7 @@ var Leads = function Leads(_ref) {
   );
 };
 
-var urlFor$3 = function urlFor(source, client) {
+var urlFor$2 = function urlFor(source, client) {
   var builder = index$1.imageUrlBuilder(client);
   return builder.image(source).auto('format');
 };
@@ -13576,7 +13431,7 @@ var Slideshow$1 = function Slideshow(_ref) {
             React__default.createElement(
               'a',
               { href: slide.slideshowImage.link && slide.slideshowImage.link, target: slide.slideshowImage.blank ? '_blank' : '_self' },
-              React__default.createElement('img', { src: urlFor$3(slide.slideshowImage, client).url(), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+              React__default.createElement('img', { src: urlFor$2(slide.slideshowImage, client).url(), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
             ),
             React__default.createElement(
               'div',
@@ -13614,6 +13469,10 @@ var NativeAd = function NativeAd(props) {
   );
 };
 
+var Figure = dynamic(function () {
+  return new Promise(function (resolve) { resolve(require('./Figure-fe3e9705.js')); });
+}, { ssr: false });
+
 var checkUrlIsExternal = function checkUrlIsExternal(url) {
   if (/https?:\/\/((?:[\w\d-]+\.)+[\w\d]{2,})|(^mailto)/i.test(url)) {
     return true;
@@ -13669,7 +13528,7 @@ var getSerializers = function getSerializers() {
       figure: function figure(_ref3) {
         var node = _ref3.node;
 
-        return React__default.createElement(FigureComponent, { node: node, client: client });
+        return React__default.createElement(Figure, { node: node, client: client });
       },
       slideshow: function slideshow(_ref4) {
         var node = _ref4.node;
@@ -13977,13 +13836,13 @@ var SetCookie = function SetCookie(key, value) {
   js_cookie.set(key, value, { expires: 1, sameSite: 'none', secure: true });
 };
 
-var urlFor$4 = function urlFor(source, client) {
+var urlFor$3 = function urlFor(source, client) {
   var builder = index$1.imageUrlBuilder(client);
   return builder.image(source).auto('format');
 };
 
 var renderCardImage = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
-  var url = urlFor$4(thumbnail, client);
+  var url = urlFor$3(thumbnail, client);
   if (imageHeight) url = url.height(imageHeight);
   if (imageWidth) url = url.width(imageWidth);
   return url.url();

package/dist/esm/{ADInfeed-e546ea87.js → ADInfeed-a77b2850.js}

@@ -1,7 +1,7 @@
 import React__default, { useState } from 'react';
 import Card from 'react-bootstrap/Card';
 import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';
-import { D as DFPAdSlot } from './AdSlot-9b4ae186.js';
+import { D as DFPAdSlot } from './AdSlot-69bf3195.js';
 
 var ADInfeed = function ADInfeed(_ref) {
   var index = _ref.index,

package/dist/esm/{AdSlot-9b4ae186.js → AdSlot-69bf3195.js}

@@ -1109,7 +1109,7 @@ var DFPAdSlot = function DFPAdSlot(_ref) {
   }, 500);
 
   var matchAd = function matchAd(element) {
-    return slotId.includes(element);
+    return slotId && slotId.includes(element);
   };
 
   return React__default.createElement(

package/dist/esm/DeckContent.js

@@ -22,9 +22,9 @@ import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
 import './slicedToArray-d0a9593a.js';
-import './AdSlot-9b4ae186.js';
+import './AdSlot-69bf3195.js';
 import './promise-683a9c54.js';
-import { A as ADInfeed } from './ADInfeed-e546ea87.js';
+import { A as ADInfeed } from './ADInfeed-a77b2850.js';
 
 var DeckContent = function (_React$Component) {
   _inherits(DeckContent, _React$Component);

package/dist/esm/Figure-d6e22818.js

@@ -0,0 +1,140 @@
+import './_commonjsHelpers-0c4b6f40.js';
+import './_to-object-b9b796ec.js';
+import './web.dom.iterable-3be50d6c.js';
+import './core.get-iterator-method-31c1fb1a.js';
+import React__default, { useState } from 'react';
+import { i as imageUrlBuilder } from './index-3849e3fe.js';
+import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';
+import { Figure as Figure$1 } from 'react-bootstrap';
+
+var urlFor = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var compareProps = function compareProps(prevProps, nextProps) {
+  if (nextProps.node.asset && nextProps.node.asset._ref) {
+    return prevProps.node.asset._ref === nextProps.node.asset._ref;
+  }
+};
+
+var FigureComponent = function FigureComponent(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      openImg = _useState2[0],
+      setOpenImg = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openImgSrc = _useState4[0],
+      setOpenImgSrc = _useState4[1];
+
+  var node = props.node,
+      client = props.client;
+  var caption = node.caption,
+      alt = node.alt,
+      blank = node.blank,
+      link = node.link,
+      _node$alignment = node.alignment,
+      alignment = _node$alignment === undefined ? 'center' : _node$alignment;
+  var _node$widthP = node.widthP,
+      widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
+
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  var screenWidth = window.innerWidth;
+
+  if (client.clientConfig && client.clientConfig.defaultImageSize && widthP === 'auto') {
+    widthP = client.clientConfig.defaultImageSize;
+  }
+
+  var imageFloat = null;
+  if (screenWidth > 1000) {
+    var align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = align;
+  } else {
+    var _align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
+    imageFloat = _align;
+  }
+
+  var figureMargin = null;
+  if (imageFloat === 'none') {
+    figureMargin = '0 auto 1rem';
+  }
+  if (imageFloat === 'left') {
+    figureMargin = '0 1.5rem 1.5rem 0';
+  }
+  if (imageFloat === 'right') {
+    figureMargin = '0 0 1.5rem 1.5rem';
+  }
+
+  var imageWidth = null;
+  if (screenWidth > 1000) {
+    if (widthP === 'auto') {
+      if (imageFloat === 'none') {
+        imageWidth = 'auto';
+      } else {
+        imageWidth = '30%';
+      }
+    } else {
+      imageWidth = widthP + '%';
+    }
+  } else {
+    imageWidth = '100%';
+  }
+
+  if (!node.asset) return null;
+
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    imageWidth !== null && imageFloat !== null && React__default.createElement(
+      Figure$1,
+      { className: 'd-block', style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imageFloat, margin: figureMargin } },
+      link ? React__default.createElement(
+        'a',
+        { target: blank ? '_blank' : '_self', href: link },
+        React__default.createElement(Figure$1.Image, { style: { width: '100%' }, className: 'figure-image', src: urlFor(node, client).url(), alt: alt && alt }),
+        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+      ) : React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(Figure$1.Image, {
+          style: { width: '100%' },
+          className: 'figure-image',
+          src: urlFor(node, client).url(),
+          alt: alt && alt,
+          onClick: function onClick() {
+            setOpenImgSrc(urlFor(node, client).url());
+            setOpenImg(true);
+          }
+        }),
+        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
+      )
+    ),
+    React__default.createElement(
+      'div',
+      { className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
+      React__default.createElement('img', { src: openImgSrc }),
+      React__default.createElement('a', {
+        className: 'lightbox-close',
+        onClick: function onClick() {
+          setOpenImgSrc('');
+          setOpenImg(false);
+        }
+      })
+    ),
+    React__default.createElement(
+      'style',
+      { jsx: 'true' },
+      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\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: 9999;\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      '
+    )
+  );
+};
+
+var Figure = React__default.memo(FigureComponent, compareProps);
+
+export default Figure;

package/dist/esm/{GridContent-f4fd38a7.js → GridContent-b8b5f361.js}

@@ -15,7 +15,7 @@ import { withRouter } from 'next/router';
 import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import { L as LazyLoad } from './index-5f9f807a.js';
 import { c as clean_html_1 } from './entities-7cc3bf45.js';
-import { A as ADInfeed } from './ADInfeed-e546ea87.js';
+import { A as ADInfeed } from './ADInfeed-a77b2850.js';
 import { g as get_1 } from './get-b2201dc8.js';
 
 var Dfp = React__default.lazy(function () {

package/dist/esm/GridContent.js

@@ -22,8 +22,8 @@ import './index-3849e3fe.js';
 import './index-5f9f807a.js';
 import './entities-7cc3bf45.js';
 import './slicedToArray-d0a9593a.js';
-import './AdSlot-9b4ae186.js';
+import './AdSlot-69bf3195.js';
 import './promise-683a9c54.js';
-import './ADInfeed-e546ea87.js';
+import './ADInfeed-a77b2850.js';
 import './get-b2201dc8.js';
-export { G as default } from './GridContent-f4fd38a7.js';
+export { G as default } from './GridContent-b8b5f361.js';

package/dist/esm/{Normal-f90f9ca7.js → Normal-21cfb458.js}

@@ -8,7 +8,7 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import Link from 'next/link';
 import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';
-import { D as DFPAdSlot } from './AdSlot-9b4ae186.js';
+import { D as DFPAdSlot } from './AdSlot-69bf3195.js';
 import { g as get_1 } from './get-b2201dc8.js';
 import { Dropdown } from 'react-bootstrap';
 import { G as GenIcon, b as IoMdLogIn, c as IoIosHome } from './index.esm-536609db.js';
@@ -1292,7 +1292,6 @@ var NavMagazine = function NavMagazine(props) {
 
   useEffect(function () {
     var navOffsetTop = navRef.current.getBoundingClientRect().top;
-    var navOffsetHeight = navRef.current.getBoundingClientRect().height;
     var adSection = document.querySelector('.AD728x90');
     var stickyNav = window.addEventListener('scroll', function () {
       if (window.pageYOffset > navOffsetTop) {
@@ -1301,7 +1300,6 @@ var NavMagazine = function NavMagazine(props) {
           navRef.current.style.top = 0;
           navRef.current.style.width = '100%';
           navRef.current.style.zIndex = '9999';
-          adSection.style.marginTop = navOffsetHeight + 'px';
         }
       } else {
         if (navRef.current && navRef.current.style) {
@@ -2066,7 +2064,6 @@ var HamMagazine = function HamMagazine(props) {
 
   useEffect(function () {
     var navOffsetTop = navRef.current.getBoundingClientRect().top;
-    var navOffsetHeight = navRef.current.getBoundingClientRect().height;
     var adSection = document.querySelector('.AD728x90');
     var stickyNav = window.addEventListener('scroll', function () {
       if (window.pageYOffset > navOffsetTop) {
@@ -2075,7 +2072,6 @@ var HamMagazine = function HamMagazine(props) {
           navRef.current.style.top = 0;
           navRef.current.style.width = '100%';
           navRef.current.style.zIndex = '9999';
-          adSection.style.marginTop = navOffsetHeight + 'px';
         }
       } else {
         if (navRef.current && navRef.current.style) {
@@ -2366,8 +2362,29 @@ var AD728x90 = function AD728x90(_ref) {
       adTargeting = _useState4[0],
       setTargeting = _useState4[1];
 
+  var adRef = useRef(null);
+
   useEffect(function () {
     if (window && window.innerWidth && window.innerWidth < 768) {
+      var navbar = document.querySelector('.navbar');
+      var AdOffsetTop = adRef.current.getBoundingClientRect().top;
+      window.addEventListener('scroll', function () {
+        if (window.pageYOffset + (AdOffsetTop - navbar.offsetHeight) > AdOffsetTop) {
+          if (adRef.current && adRef.current.style) {
+            adRef.current.style.position = 'fixed';
+            adRef.current.style.top = '60px';
+            adRef.current.style.left = '0px';
+            adRef.current.style.zIndex = '9999';
+            adRef.current.style.width = '100%';
+            adRef.current.style.marginTop = '2px';
+          }
+        } else {
+          if (adRef.current && adRef.current.style) {
+            adRef.current.style.position = 'relative';
+            adRef.current.style.top = '';
+          }
+        }
+      });
       setMobileView(true);
       adTargeting['pos'] = pos && pos.length ? pos : 'top-mobile';
     } else {
@@ -2379,21 +2396,25 @@ var AD728x90 = function AD728x90(_ref) {
   var browserSizes = [[728, 90], [970, 90], [320, 50], [300, 50]];
   var mobileSizes = [[320, 50], [300, 50]];
 
-  return React__default.createElement(DFPAdSlot, {
-    slotId: slotId,
-    networkID: networkID,
-    adUnit: adUnit,
-    targeting: adTargeting,
-    className: 'AD728x90',
-    sizes: mobileView ? mobileSizes : browserSizes,
-    sizeMapping: [{
-      viewport: [768, 1],
-      sizes: [[728, 90], [970, 90]]
-    }, {
-      viewport: [1, 1],
-      sizes: [[320, 50], [300, 50]]
-    }]
-  });
+  return React__default.createElement(
+    'div',
+    { className: 'leaderboard-ad-wrapper', ref: adRef, style: { backgroundColor: '#fff' } },
+    React__default.createElement(DFPAdSlot, {
+      slotId: slotId,
+      networkID: networkID,
+      adUnit: adUnit,
+      targeting: adTargeting,
+      className: 'AD728x90',
+      sizes: mobileView ? mobileSizes : browserSizes,
+      sizeMapping: [{
+        viewport: [768, 1],
+        sizes: [[728, 90], [970, 90]]
+      }, {
+        viewport: [1, 1],
+        sizes: [[320, 50], [300, 50]]
+      }]
+    })
+  );
 };
 
 // Main

package/dist/esm/TemplateNormal.js

@@ -13,13 +13,13 @@ import 'react-bootstrap/Row';
 import 'react-bootstrap/Col';
 import 'next/link';
 import './slicedToArray-d0a9593a.js';
-import './AdSlot-9b4ae186.js';
+import './AdSlot-69bf3195.js';
 import './promise-683a9c54.js';
 import './get-b2201dc8.js';
 import 'react-bootstrap';
 import './index.esm-536609db.js';
 import 'react-bootstrap/Button';
-export { T as default } from './Normal-f90f9ca7.js';
+export { T as default } from './Normal-21cfb458.js';
 import 'react-bootstrap/ListGroup';
 import 'next/head';
 import 'react-bootstrap/Nav';

package/dist/esm/index.js

@@ -22,13 +22,13 @@ import { i as imageUrlBuilder } from './index-3849e3fe.js';
 import './index-5f9f807a.js';
 import { h as html_decode_1, c as clean_html_1 } from './entities-7cc3bf45.js';
 import { _ as _slicedToArray } from './slicedToArray-d0a9593a.js';
-import { _ as _JSON$stringify, a as _asyncToGenerator, r as regenerator, D as DFPAdSlot, B as Beam } from './AdSlot-9b4ae186.js';
-export { D as AdSlot, B as Beam } from './AdSlot-9b4ae186.js';
+import { _ as _JSON$stringify, a as _asyncToGenerator, r as regenerator, D as DFPAdSlot, B as Beam } from './AdSlot-69bf3195.js';
+export { D as AdSlot, B as Beam } from './AdSlot-69bf3195.js';
 import './promise-683a9c54.js';
-import './ADInfeed-e546ea87.js';
+import './ADInfeed-a77b2850.js';
 export { default as DeckContent } from './DeckContent.js';
 import './get-b2201dc8.js';
-export { A as AD, G as GridContent } from './GridContent-f4fd38a7.js';
+export { A as AD, G as GridContent } from './GridContent-b8b5f361.js';
 export { default as DeckQueue } from './DeckQueue.js';
 import 'react-bootstrap/Media';
 export { default as ThumbnailCard } from './ThumbnailCard.js';
@@ -39,7 +39,7 @@ export { default as GroupDeck } from './GroupDeck.js';
 import { g as getYoutubeId } from './YoutubeGroup-a87b8967.js';
 export { Y as YoutubeGroup } from './YoutubeGroup-a87b8967.js';
 import 'smoothscroll-polyfill';
-import { Spinner as Spinner$1, Container as Container$1, Row as Row$1, Col as Col$1, Figure, Carousel, Table, Button as Button$1, ProgressBar, Card } from 'react-bootstrap';
+import { Spinner as Spinner$1, Container as Container$1, Row as Row$1, Col as Col$1, Carousel, Table, Figure as Figure$1, Button as Button$1, ProgressBar, Card } from 'react-bootstrap';
 export { default as QueueDeckExpanded } from './QueueDeckExpanded.js';
 import { I as IoMdArrowDropdown } from './index.esm-536609db.js';
 export { default as VideoSeriesListing } from './VideoSeriesListing.js';
@@ -50,8 +50,8 @@ export { default as IssueDeck } from './IssueDeck.js';
 import 'react-bootstrap/Badge';
 export { default as IssueContentDeck } from './IssueContentDeck.js';
 import Spinner from 'react-bootstrap/Spinner';
-import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-f90f9ca7.js';
-export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-f90f9ca7.js';
+import { M as MdPictureAsPdf, T as TemplateNormal } from './Normal-21cfb458.js';
+export { A as AD728x90, C as Column1, a as Column2, b as Column3, f as HamMagazine, H as Header, L as LeftNav, e as NavDvm, c as NavMagazine, N as NavNative, d as NavNormal, P as PageFilter, S as Search, g as SideFooter, T as TemplateNormal } from './Normal-21cfb458.js';
 import 'react-bootstrap/ListGroup';
 import Head from 'next/head';
 import Accordion from 'react-bootstrap/Accordion';
@@ -64,6 +64,7 @@ import 'react-bootstrap/Form';
 import 'react-bootstrap/FormControl';
 import Modal from 'react-bootstrap/Modal';
 import Pagination from 'react-bootstrap/Pagination';
+import dynamic from 'next/dynamic';
 import Carousel$1 from 'react-bootstrap/Carousel';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
 import DropdownButton from 'react-bootstrap/DropdownButton';
@@ -3080,153 +3081,7 @@ var ADWelcome = function ADWelcome(_ref) {
   );
 };
 
-var urlFor$1 = function urlFor(source, client) {
-  var builder = imageUrlBuilder(client);
-  return builder.image(source).auto('format');
-};
-
-var FigureComponent = function FigureComponent(_ref) {
-  var node = _ref.node,
-      client = _ref.client;
-
-  var imgElement = useRef(null);
-
-  var _useState = useState(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      imageWidth = _useState2[0],
-      setimageWidth = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      imgFloat = _useState4[0],
-      setimgFloat = _useState4[1];
-
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      openImg = _useState6[0],
-      setOpenImg = _useState6[1];
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      openImgSrc = _useState8[0],
-      setOpenImgSrc = _useState8[1];
-
-  var caption = node.caption,
-      alt = node.alt,
-      blank = node.blank,
-      link = node.link,
-      _node$alignment = node.alignment,
-      alignment = _node$alignment === undefined ? 'center' : _node$alignment;
-  var _node$widthP = node.widthP,
-      widthP = _node$widthP === undefined ? 'auto' : _node$widthP;
-
-
-  if (client.clientConfig && client.clientConfig.defaultImageSize && widthP === 'auto') {
-    widthP = client.clientConfig.defaultImageSize;
-  }
-
-  var figureMargin = void 0;
-  if (imgFloat === 'none') {
-    figureMargin = '0 auto 1rem';
-  }
-  if (imgFloat === 'left') {
-    figureMargin = '0 1.5rem 1.5rem 0';
-  }
-  if (imgFloat === 'right') {
-    figureMargin = '0 0 1.5rem 1.5rem';
-  }
-
-  var loadImg = function loadImg() {
-    var screenWidth = window.innerWidth;
-    if (screenWidth > 1000) {
-      if (widthP === 'auto') {
-        if (imgFloat === 'none') setimageWidth('auto');else setimageWidth('30%');
-      } else {
-        setimageWidth(widthP + '%');
-      }
-    } else {
-      setimageWidth('100%');
-    }
-  };
-
-  useEffect(function () {
-    var screenWidth = window.innerWidth;
-    if (screenWidth > 1000) {
-      if (widthP === 'auto') {
-        if (imgFloat === 'none') setimageWidth('auto');else setimageWidth('30%');
-      } else {
-        setimageWidth(widthP + '%');
-      }
-    } else {
-      setimageWidth('100%');
-    }
-  }, [widthP, imgFloat]);
-
-  useEffect(function () {
-    var screenWidth = window.innerWidth;
-    if (screenWidth > 1000) {
-      var align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
-      setimgFloat(align);
-    } else {
-      var _align = ['center', 'top'].includes(alignment.toLowerCase()) ? 'none' : alignment.toLowerCase();
-      setimgFloat(_align);
-    }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (!node.asset) return null;
-
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    imageWidth && imgFloat && React__default.createElement(
-      Figure,
-      { className: 'd-block', style: { width: imageWidth, maxWidth: '100%', clear: 'both', float: imgFloat, margin: figureMargin } },
-      link ? React__default.createElement(
-        'a',
-        { target: blank ? '_blank' : '_self', href: link },
-        React__default.createElement(Figure.Image, { style: { width: '100%' }, className: 'figure-image', ref: imgElement, onLoad: loadImg, src: urlFor$1(node, client).url(), alt: alt && alt }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
-      ) : React__default.createElement(
-        React__default.Fragment,
-        null,
-        React__default.createElement(Figure.Image, {
-          style: { width: '100%' },
-          className: 'figure-image',
-          ref: imgElement,
-          onLoad: loadImg,
-          src: urlFor$1(node, client).url(),
-          alt: alt && alt,
-          onClick: function onClick() {
-            setOpenImgSrc(urlFor$1(node, client).url());
-            setOpenImg(true);
-          }
-        }),
-        caption && React__default.createElement('div', { dangerouslySetInnerHTML: { __html: '<span class=\'figure-caption\'>' + caption + '</span>' } })
-      )
-    ),
-    React__default.createElement(
-      'div',
-      { className: 'lightbox-target ' + (openImg ? 'open' : 'close') },
-      React__default.createElement('img', { src: openImgSrc }),
-      React__default.createElement('a', {
-        className: 'lightbox-close',
-        onClick: function onClick() {
-          setOpenImgSrc('');
-          setOpenImg(false);
-        }
-      })
-    ),
-    React__default.createElement(
-      'style',
-      { jsx: 'true' },
-      '\n        figure-caption {\n          font-size: 90%;\n          color: #6c757d;\n        }\n        /*Eliminates padding, centers the thumbnail */\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: 9999;\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      '
-    )
-  );
-};
-
-var urlFor$2 = function urlFor(source, builder) {
+var urlFor$1 = function urlFor(source, builder) {
   return builder.image(source).auto('format');
 };
 
@@ -3277,7 +3132,7 @@ var Slideshow = function Slideshow(_ref) {
         return React__default.createElement(
           Carousel.Item,
           { key: slide._key },
-          React__default.createElement('img', { src: slide.asset && urlFor$2(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React__default.createElement('img', { src: slide.asset && urlFor$1(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
           slide.caption && React__default.createElement(
             'p',
             { className: 'p-2' },
@@ -5977,14 +5832,14 @@ var Media = function Media(_ref) {
     if (uploadDoc && uploadDoc.asset) {
       if (poster && poster.asset && caption && caption !== '') {
         return React__default.createElement(
-          Figure,
+          Figure$1,
           { className: 'mb-3' },
           React__default.createElement(
             'a',
             { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-            React__default.createElement(Figure.Image, { src: urlFor(poster).url(), fluid: true }),
+            React__default.createElement(Figure$1.Image, { src: urlFor(poster).url(), fluid: true }),
             React__default.createElement(
-              Figure.Caption,
+              Figure$1.Caption,
               { className: 'text-center' },
               caption
             )
@@ -5992,12 +5847,12 @@ var Media = function Media(_ref) {
         );
       } else if (poster && poster.asset) {
         return React__default.createElement(
-          Figure,
+          Figure$1,
           { className: 'mb-3' },
           React__default.createElement(
             'a',
             { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
-            React__default.createElement(Figure.Image, { src: urlFor(poster).url(), fluid: true })
+            React__default.createElement(Figure$1.Image, { src: urlFor(poster).url(), fluid: true })
           )
         );
       } else if (caption && caption !== '') {
@@ -13520,7 +13375,7 @@ var Leads = function Leads(_ref) {
   );
 };
 
-var urlFor$3 = function urlFor(source, client) {
+var urlFor$2 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
   return builder.image(source).auto('format');
 };
@@ -13574,7 +13429,7 @@ var Slideshow$1 = function Slideshow(_ref) {
             React__default.createElement(
               'a',
               { href: slide.slideshowImage.link && slide.slideshowImage.link, target: slide.slideshowImage.blank ? '_blank' : '_self' },
-              React__default.createElement('img', { src: urlFor$3(slide.slideshowImage, client).url(), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+              React__default.createElement('img', { src: urlFor$2(slide.slideshowImage, client).url(), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
             ),
             React__default.createElement(
               'div',
@@ -13612,6 +13467,10 @@ var NativeAd = function NativeAd(props) {
   );
 };
 
+var Figure = dynamic(function () {
+  return import('./Figure-d6e22818.js');
+}, { ssr: false });
+
 var checkUrlIsExternal = function checkUrlIsExternal(url) {
   if (/https?:\/\/((?:[\w\d-]+\.)+[\w\d]{2,})|(^mailto)/i.test(url)) {
     return true;
@@ -13667,7 +13526,7 @@ var getSerializers = function getSerializers() {
       figure: function figure(_ref3) {
         var node = _ref3.node;
 
-        return React__default.createElement(FigureComponent, { node: node, client: client });
+        return React__default.createElement(Figure, { node: node, client: client });
       },
       slideshow: function slideshow(_ref4) {
         var node = _ref4.node;
@@ -13975,13 +13834,13 @@ var SetCookie = function SetCookie(key, value) {
   js_cookie.set(key, value, { expires: 1, sameSite: 'none', secure: true });
 };
 
-var urlFor$4 = function urlFor(source, client) {
+var urlFor$3 = function urlFor(source, client) {
   var builder = imageUrlBuilder(client);
   return builder.image(source).auto('format');
 };
 
 var renderCardImage = function renderCardImage(thumbnail, client, imageHeight, imageWidth) {
-  var url = urlFor$4(thumbnail, client);
+  var url = urlFor$3(thumbnail, client);
   if (imageHeight) url = url.height(imageHeight);
   if (imageWidth) url = url.width(imageWidth);
   return url.url();

package/package.json

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