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

package/dist/esm/TaxonomyDescription.js

@@ -36,7 +36,6 @@ import { a as _asyncToGenerator, r as regenerator } from './asyncToGenerator-fc1
 import './Segment.js';
 import './Beam.js';
 import './AdSlot.js';
-import 'react-bootstrap/Button';
 import { B as BlockContent } from './BlockContent-e9b4ddcf.js';
 import './index-c7e2ac95.js';
 import './smoothscroll-0cd4c7a6.js';
@@ -44,7 +43,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { g as getSerializers } from './index-0d1eb0c4.js';
+import { g as getSerializers } from './index-59b21a97.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import Head from 'next/head';
@@ -52,6 +51,7 @@ import 'react-share';
 import './SocialShare.js';
 import './_object-to-array-7e804fce.js';
 import 'react-bootstrap/Pagination';
+import 'react-bootstrap/Button';
 import 'react-bootstrap/Figure';
 
 var _this = undefined;

package/dist/esm/TemplateNormal.js

@@ -26,7 +26,6 @@ import './asyncToGenerator-fc1c2e29.js';
 import './Segment.js';
 import './Beam.js';
 import './AdSlot.js';
-import 'react-bootstrap/Button';
 import './get-1e515072.js';
 import './eq-b470f743.js';
 import './react-social-icons-a7d5c5c7.js';
@@ -34,6 +33,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import 'next/head';
+import 'react-bootstrap/Button';
 import './defineProperty-94fd8bfc.js';
 import 'react-bootstrap/Form';
 import { Column1 } from './Column1.js';
@@ -55,7 +55,7 @@ import './NavFooter-e27bd93b.js';
 import './index.esm-fd746768.js';
 import './SocialIcons.js';
 import 'react-bootstrap/FormControl';
-import './SocialSearchComponent-03c3e869.js';
+import './SocialSearchComponent-db5ba548.js';
 import MagazineNav from './NavMagazine.js';
 import { NavNative } from './NavNative.js';
 import './Search.js';

package/dist/esm/VideoProgramLandingPage.js

@@ -39,7 +39,6 @@ import { a as _asyncToGenerator, r as regenerator } from './asyncToGenerator-fc1
 import './Segment.js';
 import './Beam.js';
 import './AdSlot.js';
-import Button$1 from 'react-bootstrap/Button';
 import { B as BlockContent } from './BlockContent-e9b4ddcf.js';
 import './index-c7e2ac95.js';
 import './smoothscroll-0cd4c7a6.js';
@@ -49,7 +48,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
 import VideoSeriesListing from './VideoSeriesListing.js';
-import { g as getSerializers } from './index-0d1eb0c4.js';
+import { g as getSerializers } from './index-59b21a97.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';
@@ -57,6 +56,7 @@ import 'react-share';
 import './SocialShare.js';
 import './_object-to-array-7e804fce.js';
 import 'react-bootstrap/Pagination';
+import Button$1 from 'react-bootstrap/Button';
 import 'react-bootstrap/Figure';
 import Form from 'react-bootstrap/Form';
 

package/dist/esm/View.js

@@ -38,7 +38,6 @@ import { a as _asyncToGenerator, r as regenerator } from './asyncToGenerator-fc1
 import './Segment.js';
 import './Beam.js';
 import DFPAdSlot from './AdSlot.js';
-import Button$1 from 'react-bootstrap/Button';
 import { B as BlockContent } from './BlockContent-e9b4ddcf.js';
 import './index-c7e2ac95.js';
 import './smoothscroll-0cd4c7a6.js';
@@ -46,7 +45,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-import { r as renderAuthor, g as getSerializers } from './index-0d1eb0c4.js';
+import { r as renderAuthor, g as getSerializers } from './index-59b21a97.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import Head from 'next/head';
@@ -54,6 +53,7 @@ import 'react-share';
 import SocialShare from './SocialShare.js';
 import './_object-to-array-7e804fce.js';
 import 'react-bootstrap/Pagination';
+import Button$1 from 'react-bootstrap/Button';
 import 'react-bootstrap/Figure';
 import Form from 'react-bootstrap/Form';
 import FormControl from 'react-bootstrap/FormControl';
@@ -64,7 +64,7 @@ import getSeriesDetail from './getSeriesDetail.js';
 import 'nookies';
 import getQuery from './getQuery.js';
 import getRelatedArticle from './getRelatedArticle.js';
-import { S as SeriesSlider } from './SeriesSlider-afab5c1b.js';
+import { S as SeriesSlider } from './SeriesSlider-8dc17b11.js';
 import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-82e86707.js';
 import getKeywords from './getKeywords.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';

package/dist/esm/YahooHero.js

@@ -25,7 +25,7 @@ var YahooHero = function YahooHero(props) {
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 600 });
+    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail, imageWidth: 600 });
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -73,8 +73,8 @@ var YahooHero = function YahooHero(props) {
       subArticles.map(function (article, index) {
         var articleThumbnail = '';
         var articleAltText = article.title;
-        if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
+        if (article.thumbnail && article.thumbnail) {
+          articleThumbnail = urlFor({ client: client, source: article.thumbnail, imageWidth: 250 });
 
           articleAltText = article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
@@ -114,7 +114,7 @@ var YahooHero = function YahooHero(props) {
     React__default.createElement(
       'style',
       { jsx: 'true' },
-      '\n        .article-hero{\n          padding-bottom:15px\n        }\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 615px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          height: 315px;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          max-height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
+      '\n        .article-hero{\n          padding-bottom:15px\n        }\n        .yh-top-article {\n          display: flex;\n          flex-direction: row;\n          position: relative;\n          font-family: Roboto, sans-serif;\n          margin-bottom: 1rem;\n          border-radius: 15px;\n          overflow: hidden;\n          min-height: 315px;\n        }\n        .yh-top-article--img {\n          width: 100%;\n          min-height: 240px;\n          overflow: hidden;\n        }\n        .yh-top-article--img img {\n          width: 100%;\n          height: auto;\n          min-height: 100%;\n          max-height: 615px;\n          object-fit: cover;\n        }\n        .yh-top-article--body {\n          height: 100%;\n          width: 40%;\n          min-width: 320px;\n          right: 0;\n          position: absolute;\n          color: white;\n          padding: 1.75rem;\n          display: flex;\n          align-items: flex-start;\n          justify-content: center;\n          flex-direction: column;\n        }\n        .yh-top-article--body h1 {\n          color: white!important;\n          font-size: 1.4rem;\n          font-weight: 500;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--body p {\n          font-size: 0.9rem;\n          margin-bottom: 0.5rem;\n        }\n        .yh-top-article--blur {\n          height: 100%;\n          width: 40%;\n          right: 0;\n          position: absolute;\n          filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));\n          background: rgba(0,0,0,.65);\n          min-width: 320px;\n        }\n        .yh-sub-article-container {\n          display: flex;\n          justify-content: space-between;\n        }\n        .yh-sub-article {\n          width: 23.25%;\n        }\n        .yh-sub-article p.yh-sub-article--title {\n          font-weight: bold;\n        }\n        .yh-sub-article img {\n          width: 100%;\n          max-height: 150px;\n          object-fit: cover;\n          border-radius: 15px;\n        }\n        .yh-sub-article img[src=\'' + props.thumbnail + '\']{\n          object-fit: contain;\n        }\n        .yh-sub-article--title {\n          font-weight: bold;\n          margin-top: .25rem;\n          font-size: 1rem;\n          margin-bottom: .25rem;\n        }\n        .yh-sub-article--info {\n          font-size: .8rem;\n          margin-bottom: 0;\n\n        }\n        @media screen and (max-width: 968px) {\n          .yh-sub-article-container {\n            flex-wrap: wrap;\n          }\n          .yh-sub-article {\n            width: 48%;\n            margin-bottom: 1rem;\n          }\n        }\n      '
     )
   );
 };

package/dist/esm/getSerializers.js

@@ -36,7 +36,6 @@ import './asyncToGenerator-fc1c2e29.js';
 import './Segment.js';
 import './Beam.js';
 import './AdSlot.js';
-import 'react-bootstrap/Button';
 import './BlockContent-e9b4ddcf.js';
 import './index-c7e2ac95.js';
 import './smoothscroll-0cd4c7a6.js';
@@ -44,7 +43,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-29e48d38.js';
-export { g as default } from './index-0d1eb0c4.js';
+export { g as default } from './index-59b21a97.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';
@@ -52,4 +51,5 @@ import 'react-share';
 import './SocialShare.js';
 import './_object-to-array-7e804fce.js';
 import 'react-bootstrap/Pagination';
+import 'react-bootstrap/Button';
 import 'react-bootstrap/Figure';

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

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

package/dist/esm/index.js

@@ -43,7 +43,6 @@ export { default as Beam } from './Beam.js';
 export { default as AdSlot } from './AdSlot.js';
 import './ADInfeed-b566ce41.js';
 export { default as DeckContent } from './DeckContent.js';
-import 'react-bootstrap/Button';
 import './lodash-17fdfebb.js';
 import './ADlgInfeed-5eb7281d.js';
 import './getContentCategory-15dcc413.js';
@@ -71,7 +70,7 @@ import './index.esm-29e48d38.js';
 export { default as VideoSeriesListing } from './VideoSeriesListing.js';
 export { default as ArticleSeriesListing } from './ArticleSeriesListing.js';
 export { default as ArticleCarousel } from './ArticleCarousel.js';
-export { g as getSerializers } from './index-0d1eb0c4.js';
+export { g as getSerializers } from './index-59b21a97.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'next/head';
@@ -79,6 +78,7 @@ import 'react-share';
 export { default as SocialShare } from './SocialShare.js';
 import './_object-to-array-7e804fce.js';
 import 'react-bootstrap/Pagination';
+import 'react-bootstrap/Button';
 import 'react-bootstrap/Figure';
 export { default as HorizontalArticleListing } from './HorizontalArticleListing.js';
 export { default as MasterDeck } from './MasterDeck.js';
@@ -119,7 +119,7 @@ import './NavFooter-e27bd93b.js';
 import './index.esm-fd746768.js';
 export { default as SocialIcons } from './SocialIcons.js';
 import 'react-bootstrap/FormControl';
-import './SocialSearchComponent-03c3e869.js';
+import './SocialSearchComponent-db5ba548.js';
 export { default as NavMagazine } from './NavMagazine.js';
 export { NavNative } from './NavNative.js';
 export { default as Search } from './Search.js';
@@ -176,7 +176,7 @@ import 'swr';
 import 'passport-local';
 import 'mysql';
 import './md5-9be0e905.js';
-import './SeriesSlider-afab5c1b.js';
+import './SeriesSlider-8dc17b11.js';
 export { g as getTargeting } from './getTargeting-82e86707.js';
 export { default as View } from './View.js';
 export { default as getKeywords } from './getKeywords.js';

package/dist/esm/urlFor.js

@@ -13,7 +13,7 @@ function urlFor(_ref) {
       _ref$imageMaxHeight = _ref.imageMaxHeight,
       imageMaxHeight = _ref$imageMaxHeight === undefined ? null : _ref$imageMaxHeight,
       _ref$imageFit = _ref.imageFit,
-      imageFit = _ref$imageFit === undefined ? null : _ref$imageFit;
+      imageFit = _ref$imageFit === undefined ? 'crop' : _ref$imageFit;
 
 
   //checks for old usage so it wont break view pages

package/package.json

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

package/dist/cjs/{SocialSearchComponent-cea213aa.js → SocialSearchComponent-97dd19a5.js}

@@ -6,8 +6,8 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var main = require('./main-02daeefe.js');
 var slicedToArray = require('./slicedToArray-8f385299.js');
-var Button = _interopDefault(require('react-bootstrap/Button'));
 var iconBase = require('./iconBase-68959171.js');
+var Button = _interopDefault(require('react-bootstrap/Button'));
 var Form = _interopDefault(require('react-bootstrap/Form'));
 var index_esm$2 = require('./index.esm-4d410430.js');
 var SocialIcons = require('./SocialIcons.js');

package/dist/esm/{SocialSearchComponent-03c3e869.js → SocialSearchComponent-db5ba548.js}

@@ -1,8 +1,8 @@
 import React__default, { useState, useRef, useEffect } from 'react';
 import { f as main_30, c as main_37 } from './main-e4a934b2.js';
 import { _ as _slicedToArray } from './slicedToArray-641f241f.js';
-import Button$1 from 'react-bootstrap/Button';
 import { I as IconContext } from './iconBase-602d52fe.js';
+import Button$1 from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
 import { G as GoSearch } from './index.esm-fd746768.js';
 import SocialIcons from './SocialIcons.js';