@mjhls/mjh-framework 1.0.836-deck-pagination-v1 → 1.0.837-formassembly-segment-v1

package/README.md

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

package/dist/cjs/ArticleProgramLandingPage.js

@@ -51,7 +51,7 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/DeckQueue.js

@@ -63,10 +63,10 @@ var DeckQueue = function (_React$Component) {
 
     return _ret = (_temp = (_this = inherits._possibleConstructorReturn(this, (_ref = DeckQueue.__proto__ || inherits._Object$getPrototypeOf(DeckQueue)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.client = _this.props.client, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.imageHeight = _this.props.imageHeight ? _this.props.imageHeight : 270, _this.state = {
       data: _this.data,
-      per: _this.params ? _this.params.itemsPerPage : 10,
+      per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
       from: _this.params ? _this.params.from : 0,
-      to: _this.params ? _this.params.to : 10,
+      to: _this.params ? _this.params.to : 2,
       total_pages: null,
       scrolling: true,
       query: _this.query,

package/dist/cjs/ExternalResources.js

@@ -46,7 +46,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/HorizontalArticleListing.js

@@ -48,7 +48,7 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 var index_esm = require('./index.esm-974f47d9.js');
 var ArticleCarousel = require('./ArticleCarousel.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/IssueLanding.js

@@ -56,7 +56,7 @@ require('./timeDifferenceCalc.js');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/MediaSeriesLanding.js

@@ -53,7 +53,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/PartnerDetailListing.js

@@ -56,7 +56,7 @@ require('./timeDifferenceCalc.js');
 var QueueDeckExpanded = require('./QueueDeckExpanded.js');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/TaxonomyDescription.js

@@ -46,7 +46,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 var Head = require('next/head');

package/dist/cjs/VideoProgramLandingPage.js

@@ -51,7 +51,7 @@ require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/VideoSeriesListing.js

@@ -81,7 +81,7 @@ var VideoSeriesListing = function (_React$Component) {
         });
         return tempObj;
       }),
-      per: _this.params ? _this.params.itemsPerPage : 2,
+      per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
       from: _this.params ? _this.params.from : 0,
       to: _this.params ? _this.params.to : 2,
@@ -235,9 +235,7 @@ var VideoSeriesListing = function (_React$Component) {
             { key: index, style: { marginBottom: '2rem' }, counter: itemCounter++ },
             React__default['default'].createElement(
               'div',
-              {
-                className: 'video-title-banner',
-                style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', fontSize: '1.25rem', borderBottom: '1px solid #d4a64d' } },
+              { className: 'video-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', fontSize: '1.25rem', borderBottom: '1px solid #d4a64d' } },
               React__default['default'].createElement(
                 'a',
                 { href: '/' + _this.props.page + '/' + docSeries.url.current },

package/dist/cjs/View.js

@@ -48,7 +48,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 var Head = require('next/head');

package/dist/cjs/getSerializers.js

@@ -46,7 +46,7 @@ require('./GroupDeck.js');
 require('react-bootstrap');
 require('./iconBase-68959171.js');
 require('./index.esm-974f47d9.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/cjs/{index-1a3ac358.js → index-f5eddbab.js}

@@ -92,7 +92,14 @@ var Slideshow = function Slideshow(_ref) {
         return React__default['default'].createElement(
           reactBootstrap.Carousel.Item,
           { key: slide._key },
-          React__default['default'].createElement('img', { src: slide.asset && urlFor({ source: slide.asset, client: client }), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React__default['default'].createElement(
+            'picture',
+            null,
+            React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React__default['default'].createElement('img', { src: urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
+          ),
           slide.caption && React__default['default'].createElement(
             'p',
             { className: 'p-2' },
@@ -2152,7 +2159,14 @@ var Media = function Media(_ref) {
         React__default['default'].createElement(
           index$2.LazyLoad,
           { once: true },
-          React__default['default'].createElement(reactBootstrap.Figure.Image, _extends._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          React__default['default'].createElement(
+            'picture',
+            null,
+            React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React__default['default'].createElement('img', _extends._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          )
         ),
         caption && React__default['default'].createElement(
           reactBootstrap.Figure.Caption,
@@ -8165,7 +8179,14 @@ var Slideshow$1 = function Slideshow(_ref) {
               React__default['default'].createElement(
                 index$2.LazyLoad,
                 null,
-                React__default['default'].createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                React__default['default'].createElement(
+                  'picture',
+                  null,
+                  React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                  React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                  React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                  React__default['default'].createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                )
               )
             ),
             React__default['default'].createElement(
@@ -8260,7 +8281,14 @@ var MultiMedia = function MultiMedia(props) {
                 imageBox && React__default['default'].createElement(
                   index$2.LazyLoad,
                   { once: true },
-                  React__default['default'].createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt })
+                  React__default['default'].createElement(
+                    'picture',
+                    null,
+                    React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                    React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                    React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                    React__default['default'].createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt || '' })
+                  )
                 ),
                 media.caption && React__default['default'].createElement(
                   'span',
@@ -9098,6 +9126,33 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   }, [ref]);
 }
 
+var FigureImage$1 = React__default['default'].memo(function (_ref) {
+  var imagesCount = _ref.imagesCount,
+      image = _ref.image,
+      client = _ref.client,
+      imgAlt = _ref.imgAlt,
+      link = _ref.link,
+      handleClickFigure = _ref.handleClickFigure;
+
+  return React__default['default'].createElement(
+    'picture',
+    null,
+    React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+    React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+    React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React__default['default'].createElement('img', _extends._extends({
+      'images-count': imagesCount,
+      className: 'multi-figure-image',
+      src: urlFor({ source: image, client: client }),
+      alt: imgAlt ? imgAlt : 'multi figure'
+    }, !link && {
+      onClick: function onClick() {
+        return handleClickFigure(image, client);
+      }
+    }))
+  );
+});
+
 var MultiFigure = function MultiFigure(props) {
   var images = props.node.images,
       client = props.client,
@@ -9117,9 +9172,9 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxContainer = React.useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
 
-  var FigureCaption = function FigureCaption(_ref) {
-    var caption = _ref.caption,
-        imgcaption = _ref.imgcaption;
+  var FigureCaption = function FigureCaption(_ref2) {
+    var caption = _ref2.caption,
+        imgcaption = _ref2.imgcaption;
 
     if (imgcaption && imgcaption.length > 0) {
       return React__default['default'].createElement(
@@ -9132,6 +9187,11 @@ var MultiFigure = function MultiFigure(props) {
     } else return null;
   };
 
+  var handleClickFigure = React.useCallback(function (image, client) {
+    setOpenImgSrc(urlFor({ source: image, client: client }));
+    setOpenImg(true);
+  }, [client]);
+
   if (images && images.length > 0) {
     return React__default['default'].createElement(
       'div',
@@ -9152,7 +9212,7 @@ var MultiFigure = function MultiFigure(props) {
                 React__default['default'].createElement(
                   index$2.LazyLoad,
                   { once: true },
-                  React__default['default'].createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor({ source: image.asset, client: client }), alt: image.alt })
+                  React__default['default'].createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
                 ),
                 React__default['default'].createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9162,16 +9222,7 @@ var MultiFigure = function MultiFigure(props) {
               React__default['default'].createElement(
                 index$2.LazyLoad,
                 { once: true },
-                React__default['default'].createElement('img', {
-                  'images-count': images.length,
-                  className: 'multi-figure-image',
-                  src: urlFor({ source: image.asset, client: client }),
-                  alt: image.alt,
-                  onClick: function onClick() {
-                    setOpenImgSrc(urlFor({ source: image, client: client }));
-                    setOpenImg(true);
-                  }
-                })
+                React__default['default'].createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
               ),
               React__default['default'].createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
@@ -9186,7 +9237,7 @@ var MultiFigure = function MultiFigure(props) {
       React__default['default'].createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
+        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n            cursor: pointer;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
       )
     );
   }
@@ -9481,7 +9532,7 @@ var FormAssembly = function FormAssembly(props) {
   React.useEffect(function () {
     if (FormID) {
       var src = 'https://' + enterpriseDomainName + '.tfaforms.net/' + FormID;
-      var anonymousID = analytics.user() && analytics.user().anonymousId();
+      var anonymousID = typeof analytics !== 'undefined' && analytics.user() && analytics.user().anonymousId();
       if (anonymousID && needSegmentSupport) {
         src = src + '?tfa_1=' + anonymousID;
       }

package/dist/cjs/index.js

@@ -74,7 +74,7 @@ require('./index.esm-974f47d9.js');
 var VideoSeriesListing = require('./VideoSeriesListing.js');
 var ArticleSeriesListing = require('./ArticleSeriesListing.js');
 var ArticleCarousel = require('./ArticleCarousel.js');
-var getSerializers = require('./index-1a3ac358.js');
+var getSerializers = require('./index-f5eddbab.js');
 require('./util-f2c1b65b.js');
 require('./brightcove-react-player-loader.es-5c98aec7.js');
 require('next/head');

package/dist/esm/ArticleProgramLandingPage.js

@@ -49,7 +49,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
 import ArticleSeriesListing from './ArticleSeriesListing.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/DeckQueue.js

@@ -53,10 +53,10 @@ var DeckQueue = function (_React$Component) {
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DeckQueue.__proto__ || _Object$getPrototypeOf(DeckQueue)).call.apply(_ref, [this].concat(args))), _this), _this.page = _this.props.page, _this.data = _this.props.dataRecord, _this.query = _this.props.query, _this.params = _this.props.params, _this.client = _this.props.client, _this.pointer = _this.props.pointer ? _this.props.pointer : false, _this.pointerArray = _this.props.pointerArray ? _this.props.pointerArray : false, _this.defaultImage = _this.props.defaultImage ? _this.props.defaultImage : '/placeholder.jpg', _this.imageHeight = _this.props.imageHeight ? _this.props.imageHeight : 270, _this.state = {
       data: _this.data,
-      per: _this.params ? _this.params.itemsPerPage : 10,
+      per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
       from: _this.params ? _this.params.from : 0,
-      to: _this.params ? _this.params.to : 10,
+      to: _this.params ? _this.params.to : 2,
       total_pages: null,
       scrolling: true,
       query: _this.query,

package/dist/esm/ExternalResources.js

@@ -44,7 +44,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/HorizontalArticleListing.js

@@ -46,7 +46,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import { I as IoIosArrowForward } from './index.esm-3fdda599.js';
 import ArticleCarousel from './ArticleCarousel.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/IssueLanding.js

@@ -54,7 +54,7 @@ import './timeDifferenceCalc.js';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/MediaSeriesLanding.js

@@ -51,7 +51,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/PartnerDetailListing.js

@@ -54,7 +54,7 @@ import './timeDifferenceCalc.js';
 import QueueDeckExpanded from './QueueDeckExpanded.js';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/TaxonomyDescription.js

@@ -44,7 +44,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import Head from 'next/head';

package/dist/esm/VideoProgramLandingPage.js

@@ -49,7 +49,7 @@ import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
 import VideoSeriesListing from './VideoSeriesListing.js';
-import { g as getSerializers } from './index-9ae17e46.js';
+import { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/VideoSeriesListing.js

@@ -74,7 +74,7 @@ var VideoSeriesListing = function (_React$Component) {
         });
         return tempObj;
       }),
-      per: _this.params ? _this.params.itemsPerPage : 2,
+      per: _this.params ? _this.params.to : 2,
       page: _this.props.currentPage || 1,
       from: _this.params ? _this.params.from : 0,
       to: _this.params ? _this.params.to : 2,
@@ -228,9 +228,7 @@ var VideoSeriesListing = function (_React$Component) {
             { key: index, style: { marginBottom: '2rem' }, counter: itemCounter++ },
             React.createElement(
               'div',
-              {
-                className: 'video-title-banner',
-                style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', fontSize: '1.25rem', borderBottom: '1px solid #d4a64d' } },
+              { className: 'video-title-banner', style: { fontWeight: 'bold', color: 'var(--primary)', padding: '.25rem 0', fontSize: '1.25rem', borderBottom: '1px solid #d4a64d' } },
               React.createElement(
                 'a',
                 { href: '/' + _this.props.page + '/' + docSeries.url.current },

package/dist/esm/View.js

@@ -46,7 +46,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
-import { r as renderAuthor, g as getSerializers } from './index-9ae17e46.js';
+import { r as renderAuthor, g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import Head from 'next/head';

package/dist/esm/getSerializers.js

@@ -44,7 +44,7 @@ import './GroupDeck.js';
 import 'react-bootstrap';
 import './iconBase-602d52fe.js';
 import './index.esm-3fdda599.js';
-export { g as default } from './index-9ae17e46.js';
+export { g as default } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/dist/esm/{index-9ae17e46.js → index-fed909cb.js}

@@ -78,7 +78,14 @@ var Slideshow = function Slideshow(_ref) {
         return React.createElement(
           Carousel.Item,
           { key: slide._key },
-          React.createElement('img', { src: slide.asset && urlFor({ source: slide.asset, client: client }), alt: slide.alt && slide.alt, style: { width: '100%' } }),
+          React.createElement(
+            'picture',
+            null,
+            React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.asset, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React.createElement('img', { src: urlFor({ source: slide.asset, client: client }), alt: slide.alt || '', style: { width: '100%' } })
+          ),
           slide.caption && React.createElement(
             'p',
             { className: 'p-2' },
@@ -2138,7 +2145,14 @@ var Media = function Media(_ref) {
         React.createElement(
           LazyLoad,
           { once: true },
-          React.createElement(Figure$1.Image, _extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          React.createElement(
+            'picture',
+            null,
+            React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+            React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+            React.createElement('img', _extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ source: poster, client: client }) }, alt && { alt: alt }))
+          )
         ),
         caption && React.createElement(
           Figure$1.Caption,
@@ -8151,7 +8165,14 @@ var Slideshow$1 = function Slideshow(_ref) {
               React.createElement(
                 LazyLoad,
                 null,
-                React.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                React.createElement(
+                  'picture',
+                  null,
+                  React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                  React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                  React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: slide.slideshowImage, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                  React.createElement('img', { src: urlFor({ source: slide.slideshowImage, client: client }), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
+                )
               )
             ),
             React.createElement(
@@ -8246,7 +8267,14 @@ var MultiMedia = function MultiMedia(props) {
                 imageBox && React.createElement(
                   LazyLoad,
                   { once: true },
-                  React.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt })
+                  React.createElement(
+                    'picture',
+                    null,
+                    React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+                    React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+                    React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: media.poster, client: client, imageWidth: 500, imageFit: 'max' }) }),
+                    React.createElement('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor({ source: media.poster, client: client }), alt: media.alt || '' })
+                  )
                 ),
                 media.caption && React.createElement(
                   'span',
@@ -9084,6 +9112,33 @@ function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   }, [ref]);
 }
 
+var FigureImage$1 = React.memo(function (_ref) {
+  var imagesCount = _ref.imagesCount,
+      image = _ref.image,
+      client = _ref.client,
+      imgAlt = _ref.imgAlt,
+      link = _ref.link,
+      handleClickFigure = _ref.handleClickFigure;
+
+  return React.createElement(
+    'picture',
+    null,
+    React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1500, imageFit: 'max' }) }),
+    React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 1000, imageFit: 'max' }) }),
+    React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: image, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React.createElement('img', _extends({
+      'images-count': imagesCount,
+      className: 'multi-figure-image',
+      src: urlFor({ source: image, client: client }),
+      alt: imgAlt ? imgAlt : 'multi figure'
+    }, !link && {
+      onClick: function onClick() {
+        return handleClickFigure(image, client);
+      }
+    }))
+  );
+});
+
 var MultiFigure = function MultiFigure(props) {
   var images = props.node.images,
       client = props.client,
@@ -9103,9 +9158,9 @@ var MultiFigure = function MultiFigure(props) {
   var lightboxContainer = useRef(null);
   useOutsideAlerter(lightboxImage, lightboxContainer, setOpenImg, setOpenImgSrc);
 
-  var FigureCaption = function FigureCaption(_ref) {
-    var caption = _ref.caption,
-        imgcaption = _ref.imgcaption;
+  var FigureCaption = function FigureCaption(_ref2) {
+    var caption = _ref2.caption,
+        imgcaption = _ref2.imgcaption;
 
     if (imgcaption && imgcaption.length > 0) {
       return React.createElement(
@@ -9118,6 +9173,11 @@ var MultiFigure = function MultiFigure(props) {
     } else return null;
   };
 
+  var handleClickFigure = useCallback(function (image, client) {
+    setOpenImgSrc(urlFor({ source: image, client: client }));
+    setOpenImg(true);
+  }, [client]);
+
   if (images && images.length > 0) {
     return React.createElement(
       'div',
@@ -9138,7 +9198,7 @@ var MultiFigure = function MultiFigure(props) {
                 React.createElement(
                   LazyLoad,
                   { once: true },
-                  React.createElement('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor({ source: image.asset, client: client }), alt: image.alt })
+                  React.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, link: image.link })
                 ),
                 React.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9148,16 +9208,7 @@ var MultiFigure = function MultiFigure(props) {
               React.createElement(
                 LazyLoad,
                 { once: true },
-                React.createElement('img', {
-                  'images-count': images.length,
-                  className: 'multi-figure-image',
-                  src: urlFor({ source: image.asset, client: client }),
-                  alt: image.alt,
-                  onClick: function onClick() {
-                    setOpenImgSrc(urlFor({ source: image, client: client }));
-                    setOpenImg(true);
-                  }
-                })
+                React.createElement(FigureImage$1, { imagesCount: images.length, image: image, client: client, imgAlt: image.alt, handleClickFigure: handleClickFigure })
               ),
               React.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
             )
@@ -9172,7 +9223,7 @@ var MultiFigure = function MultiFigure(props) {
       React.createElement(
         'style',
         { jsx: 'true' },
-        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
+        '\n          .multi-figure-caption,\n          .multi-figure-caption h1,\n          .multi-figure-caption h2,\n          .multi-figure-caption h3,\n          .multi-figure-caption h4,\n          .multi-figure-caption h5,\n          .multi-figure-caption h6,\n          .multi-figure-caption p,\n          .multi-figure-caption ul {\n            color: #6c757d;\n            font-size: 0.875rem;\n          }\n\n          .multi-figure-container {\n            margin-bottom: 1rem;\n          }\n          .multi-figure-image {\n            width: 100%;\n            height: auto;\n            object-fit: contain;\n            cursor: pointer;\n          }\n          .multi-figure-image-container {\n            padding-right: 0.5rem;\n          }\n          /* Small devices (portrait tablets and  phones, 767px and down) */\n          @media (max-width: 767px) {\n            .multi-figure-image-container {\n              margin-bottom: 1rem;\n            }\n          }\n\n          /* Medium devices (landscape tablets, 768px and up) */\n          @media (min-width: 768px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 100px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 130px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 200px;\n            }\n            .multi-figure-container [class*=\'col-\'] + [class*=\'col-\'] {\n              padding-left: 0.75rem;\n            }\n          }\n\n          /* Large devices (laptops/desktops, 992px and up) */\n          @media (min-width: 992px) {\n            .multi-figure-image[images-count=\'4\'] {\n              max-height: 150px;\n            }\n            .multi-figure-image[images-count=\'3\'] {\n              max-height: 200px;\n            }\n            .multi-figure-image[images-count=\'2\'] {\n              max-height: 300px;\n            }\n          }\n\n          /* Styles the lightbox, removes it from sight and adds the fade-in transition */\n\n          .lightbox-target {\n            position: fixed;\n            top: -100%;\n            width: 100%;\n            background: rgba(0, 0, 0, 0.7);\n            width: 100%;\n            opacity: 0;\n            -webkit-transition: opacity 0.5s ease-in-out;\n            -moz-transition: opacity 0.5s ease-in-out;\n            -o-transition: opacity 0.5s ease-in-out;\n            transition: opacity 0.5s ease-in-out;\n            overflow: hidden;\n          }\n\n          .lightbox-target.close {\n            opacity: 0;\n          }\n\n          /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */\n\n          .lightbox-target img {\n            margin: auto;\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            max-height: 0%;\n            max-width: 0%;\n            border: 3px solid white;\n            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Styles the close link, adds the slide down transition */\n\n          a.lightbox-close {\n            display: block;\n            width: 50px;\n            height: 50px;\n            box-sizing: border-box;\n            background: white;\n            color: black;\n            text-decoration: none;\n            position: absolute;\n            top: -80px;\n            right: 0;\n            -webkit-transition: 0.5s ease-in-out;\n            -moz-transition: 0.5s ease-in-out;\n            -o-transition: 0.5s ease-in-out;\n            transition: 0.5s ease-in-out;\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:before {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(45deg);\n            -moz-transform: rotate(45deg);\n            -o-transform: rotate(45deg);\n            transform: rotate(45deg);\n          }\n\n          /* Provides part of the "X" to eliminate an image from the close link */\n\n          a.lightbox-close:after {\n            content: \'\';\n            display: block;\n            height: 30px;\n            width: 1px;\n            background: black;\n            position: absolute;\n            left: 26px;\n            top: 10px;\n            -webkit-transform: rotate(-45deg);\n            -moz-transform: rotate(-45deg);\n            -o-transform: rotate(-45deg);\n            transform: rotate(-45deg);\n          }\n\n          /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */\n\n          .lightbox-target.open {\n            opacity: 1;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            z-index: 3000000;\n          }\n\n          .lightbox-target.open img {\n            max-height: 100%;\n            max-width: 100%;\n          }\n\n          .lightbox-target.open a.lightbox-close {\n            top: 0px;\n          }\n        '
       )
     );
   }
@@ -9467,7 +9518,7 @@ var FormAssembly = function FormAssembly(props) {
   useEffect(function () {
     if (FormID) {
       var src = 'https://' + enterpriseDomainName + '.tfaforms.net/' + FormID;
-      var anonymousID = analytics.user() && analytics.user().anonymousId();
+      var anonymousID = typeof analytics !== 'undefined' && analytics.user() && analytics.user().anonymousId();
       if (anonymousID && needSegmentSupport) {
         src = src + '?tfa_1=' + anonymousID;
       }

package/dist/esm/index.js

@@ -71,7 +71,7 @@ import './index.esm-3fdda599.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-9ae17e46.js';
+export { g as getSerializers } from './index-fed909cb.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-4abff0b1.js';
 import 'next/head';

package/package.json

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