@mjhls/mjh-framework 1.0.817-image-crop-test-v4 → 1.0.818

package/dist/esm/VerticalHero.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import './moment-bc12cb97.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 
 var VerticalHero = function VerticalHero(props) {
   var client = props.client;
+
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
   var _props$heroTitle = props.heroTitle,
       heroTitle = _props$heroTitle === undefined ? '' : _props$heroTitle;
 
@@ -29,7 +33,7 @@ var VerticalHero = function VerticalHero(props) {
         var articleThumbnail = '';
         var articleAltText = article.title;
         if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 500 });
+          articleThumbnail = urlFor(article.thumbnail.asset).width(500).url();
           articleAltText = article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
           articleThumbnail = props.thumbnail;

package/dist/esm/VideoProgramLandingPage.js

@@ -5,7 +5,7 @@ import { B as BlockContent } from './BlockContent-52cf21c5.js';
 import Col from 'react-bootstrap/Col';
 import Form from 'react-bootstrap/Form';
 import Button from 'react-bootstrap/Button';
-import { g as getSerializers } from './index-e8c6a892.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import VideoSeriesListing from './VideoSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -19,7 +19,6 @@ import 'prop-types';
 import './index-0dbff1d1.js';
 import './slicedToArray-be2f7a22.js';
 import 'react-bootstrap';
-import './urlFor.js';
 import './index-2446af28.js';
 import './events-6c3a7a63.js';
 import 'next/router';

package/dist/esm/VideoSeriesCard.js

@@ -1,7 +1,7 @@
 import { _ as _typeof } from './typeof-a286cf0c.js';
 import React from 'react';
 import { L as LazyLoad } from './index-35bdcc81.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as moment } from './moment-bc12cb97.js';
 import { s as styleInject } from './style-inject.es-1f59c1d0.js';
 import 'prop-types';
@@ -13,7 +13,6 @@ import './_is-array-3e99e06e.js';
 import './_object-pie-133f504a.js';
 import './_library-528f1934.js';
 import 'react-dom';
-import './index-0dbff1d1.js';
 
 var css = ".VideoSeriesCard-module_article__Hlc3e {\n  width: 100%;\n  margin: 0 0 1rem 0;\n}\n.VideoSeriesCard-module_article__Hlc3e a {\n  display: flex;\n  width: 100%;\n  color: #000000;\n}\n.VideoSeriesCard-module_thumb__3hGyJ {\n  width: 25%;\n}\n.VideoSeriesCard-module_thumb__3hGyJ img {\n  width: 100%;\n  height: auto;\n}\n.VideoSeriesCard-module_info__2_i1N {\n  width: 75%;\n  font-size: 1rem;\n}\n.VideoSeriesCard-module_info__2_i1N h2 {\n  font-weight: bold;\n  font-size: 1.25rem;\n  margin: 0;\n}\n.VideoSeriesCard-module_published__1fI0q {\n  color: #6d6d6d;\n  margin: 0;\n}\n.VideoSeriesCard-module_summary__3hWJT {\n  margin: 0.5rem 0 0 0;\n}\n.VideoSeriesCard-module_author__aU35o {\n  margin: 0;\n}\n.VideoSeriesCard-module_author__aU35o span {\n  color: #6d6d6d;\n}\n@media only screen and (max-width: 568px) {\n  .VideoSeriesCard-module_article__Hlc3e {\n    margin: 1rem 0;\n    box-shadow: 2px 4px 8px rgba(0,0,0,.2);\n  }\n  .VideoSeriesCard-module_article__Hlc3e a {\n    flex-direction: column;\n    align-items: center;\n  }\n  .VideoSeriesCard-module_thumb__3hGyJ {\n    overflow: hidden;\n    width: 100%;\n    margin-bottom: 1rem;\n  }\n  .VideoSeriesCard-module_thumb__3hGyJ img{\n    border-radius: 10px 10px 0 0;    \n  }\n  .VideoSeriesCard-module_thumb__3hGyJ figure {\n    margin: 0;\n  }\n  .VideoSeriesCard-module_info__2_i1N {\n    width: 90%;\n    padding: 1rem !important;\n  }\n  .VideoSeriesCard-module_info__2_i1N h2 {\n    font-size: 1rem;\n  }\n}\n";
 var styles = { "article": "VideoSeriesCard-module_article__Hlc3e", "thumb": "VideoSeriesCard-module_thumb__3hGyJ", "info": "VideoSeriesCard-module_info__2_i1N", "published": "VideoSeriesCard-module_published__1fI0q", "summary": "VideoSeriesCard-module_summary__3hWJT", "author": "VideoSeriesCard-module_author__aU35o" };
@@ -27,7 +26,7 @@ var VideoSeriesCard = function VideoSeriesCard(props) {
       index = props.index;
 
   var episode = parseInt(index) + 1;
-
+  var builder = imageUrlBuilder(client);
   return React.createElement(
     'div',
     { className: styles.article },
@@ -44,7 +43,7 @@ var VideoSeriesCard = function VideoSeriesCard(props) {
             LazyLoad,
             null,
             React.createElement('img', {
-              src: data.thumbnail && data.thumbnail.asset ? urlFor({ client: client, source: data.thumbnail }) : data.thumbnail && _typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
+              src: data.thumbnail && data.thumbnail.asset ? builder.image(data.thumbnail).url() : data.thumbnail && _typeof(data.thumbnail == 'string') ? data.thumbnail : defaultImage
             })
           )
         )

package/dist/esm/VideoSeriesLandingPage.js

@@ -46,7 +46,6 @@ import './Segment.js';
 import './main-b5c5aac1.js';
 import './ADInfeed-7aaa47e1.js';
 import './index-35bdcc81.js';
-import './urlFor.js';
 import './style-inject.es-1f59c1d0.js';
 
 var _this = undefined;

package/dist/esm/VideoSeriesListing.js

@@ -29,7 +29,6 @@ import './core.get-iterator-method-133dfacd.js';
 import './index-c7e2ac95.js';
 import './index-35bdcc81.js';
 import './smoothscroll-fa4e3f8c.js';
-import './urlFor.js';
 import './index-0dbff1d1.js';
 import './main-b5c5aac1.js';
 import './isSymbol-a7e9aafe.js';
@@ -254,7 +253,7 @@ var VideoSeriesListing = function (_React$Component) {
   _createClass(VideoSeriesListing, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
-      // console.log(this.state)
+      console.log(this.state);
     }
   }, {
     key: 'render',

package/dist/esm/View.js

@@ -15,9 +15,9 @@ import FormControl from 'react-bootstrap/FormControl';
 import Button from 'react-bootstrap/Button';
 import { V as VisibilitySensor } from './visibility-sensor-f40c2564.js';
 import SocialShare from './SocialShare.js';
-import { r as renderAuthor, g as getSerializers } from './index-e8c6a892.js';
+import { r as renderAuthor, g as getSerializers } from './index-04c4d8d6.js';
 import DFPAdSlot from './AdSlot.js';
-import { S as SeriesSlider } from './SeriesSlider-8f2aca58.js';
+import { S as SeriesSlider } from './SeriesSlider-8414085b.js';
 import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-68291ce9.js';
 import getKeywords from './getKeywords.js';
 import urlFor from './urlFor.js';
@@ -143,7 +143,7 @@ var DocumentGroup = function DocumentGroup(_ref) {
   var thumbnailUrl = false;
 
   if (article.documentGroup.thumbnail) {
-    thumbnailUrl = urlFor({ client: client, source: article.documentGroup.thumbnail });
+    thumbnailUrl = urlFor(client, article.documentGroup.thumbnail).url();
   }
 
   return React.createElement(
@@ -235,7 +235,7 @@ var ISI = function ISI(props) {
       var article_body = document.getElementById('article__block');
       var isi = document.getElementById('isi');
       var articleBottomPosition = article_body.getBoundingClientRect().bottom - window.innerHeight;
-      // console.log(articleBottomPosition, bottomOfArticle)
+      console.log(articleBottomPosition, bottomOfArticle);
       if (articleBottomPosition < 30 && !isi.classList.contains('in-view')) {
         setbottomOfArticle(true);
       }
@@ -361,7 +361,7 @@ var RelatedArticle = function RelatedArticle(_ref) {
           { className: styles.imgWrapper, href: '/view/' + (article.url ? article.url.current : '') },
           article.thumbnail ? React.createElement('img', {
             style: { objectFit: 'cover', objectPosition: 'center' },
-            src: article.thumbnail && urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 }),
+            src: article.thumbnail && urlFor(client, article.thumbnail.asset).width(250).url(),
             alt: article.title
           }) : React.createElement(
             React.Fragment,
@@ -965,7 +965,7 @@ var Article = forwardRef(function (props, ref) {
     var shareUrl = shareBaseUrl + props.article.url.current;
     var shareTitle = article.title;
     var shareSummary = article.summary;
-    var shareImage = thumbnail && thumbnail.asset ? urlFor({ client: props.client, source: thumbnail.asset }) : shareImageDefault;
+    var shareImage = thumbnail && thumbnail.asset ? urlFor(props.client, thumbnail.asset).url() : shareImageDefault;
     var siteName = props.website && props.website.title ? props.website.title : '';
     var shareKeywords = getKeywords(props.article).join(',');
 
@@ -1064,7 +1064,7 @@ var Article = forwardRef(function (props, ref) {
                     return React.createElement(
                       'span',
                       { key: index },
-                      renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor({ client: props.client, source: authorDetail.profileImage, imageHeight: authorImgHeight }))
+                      renderAuthor(authorDetail.displayName, authorDetail.url, index, authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor(props.client, authorDetail.profileImage).height(authorImgHeight).url())
                     );
                   }),
                   React.createElement(
@@ -1774,7 +1774,7 @@ View.returnGetInitialProps = function () {
                         seriesUrl: '?seriesArticle=' + seriesArticle,
                         seriesTitle: subArticle.title,
                         seriesSummary: subArticle.summary,
-                        seriesThumbnail: subArticle.thumbnail && subArticle.thumbnail.asset ? urlFor({ client: client, source: subArticle.thumbnail.asset }) : null
+                        seriesThumbnail: subArticle.thumbnail && subArticle.thumbnail.asset ? urlFor(client, subArticle.thumbnail.asset).url() : null
                       };
                       article.seriesShareOptions = seriesShareOptions;
                     }
@@ -1787,7 +1787,7 @@ View.returnGetInitialProps = function () {
                         seriesUrl: '?seriesVid=' + seriesVid,
                         seriesTitle: video.title,
                         seriesSummary: video.intro,
-                        seriesThumbnail: video.thumbnail && video.thumbnail.asset ? urlFor({ client: client, source: video.thumbnail.asset }) : null
+                        seriesThumbnail: video.thumbnail && video.thumbnail.asset ? urlFor(client, video.thumbnail.asset).url() : null
                       };
                       article.seriesShareOptions = seriesShareOptions;
                     }

package/dist/esm/YahooHero.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { m as moment } from './moment-bc12cb97.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { c as clean_html_1 } from './entities-932b50cf.js';
 import { A as AuthorComponent } from './AuthorComponent-5ae7409f.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import './_commonjsHelpers-0c4b6f40.js';
-import './index-0dbff1d1.js';
 import './slicedToArray-be2f7a22.js';
 import './web.dom.iterable-4109ff68.js';
 import './es6.string.iterator-bc33758b.js';
@@ -21,11 +20,15 @@ var YahooHero = function YahooHero(props) {
   var subArticles = props.dataRecord.slice(1, props.dataRecord.length);
   var client = props.client;
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source).auto('format');
+  }
 
   var topArticleThumbnail = '';
   var topArticleAltText = topArticle.title;
   if (topArticle.thumbnail && topArticle.thumbnail.asset) {
-    topArticleThumbnail = urlFor({ client: client, source: topArticle.thumbnail.asset, imageWidth: 600 });
+    topArticleThumbnail = urlFor(topArticle.thumbnail.asset).width(600).url();
     topArticleAltText = topArticle.thumbnail.asset.originalFileName;
   } else if (props.thumbnail) {
     topArticleThumbnail = props.thumbnail;
@@ -74,8 +77,7 @@ var YahooHero = function YahooHero(props) {
         var articleThumbnail = '';
         article.title;
         if (article.thumbnail && article.thumbnail.asset) {
-          articleThumbnail = urlFor({ client: client, source: article.thumbnail.asset, imageWidth: 250 });
-
+          articleThumbnail = urlFor(article.thumbnail.asset).width(250).url();
           article.thumbnail.asset.originalFileName;
         } else if (props.thumbnail) {
           articleThumbnail = props.thumbnail;
@@ -114,7 +116,7 @@ var YahooHero = function YahooHero(props) {
     React.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: 315px;\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          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/YoutubeGroup.js

@@ -4,7 +4,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { g as getYoutubeId } from './index-c7e2ac95.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import { s as smoothscroll } from './smoothscroll-fa4e3f8c.js';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as main_43, a as main_49, b as main_42 } from './main-b5c5aac1.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -16,7 +16,6 @@ import './_library-528f1934.js';
 import './core.get-iterator-method-133dfacd.js';
 import 'react-dom';
 import 'prop-types';
-import './index-0dbff1d1.js';
 
 /*
 GROQ query -
@@ -51,6 +50,11 @@ var YoutubeGroup = function YoutubeGroup(props) {
       tileHeight = _useState8[0],
       setTileHeight = _useState8[1];
 
+  var urlFor = function urlFor(source, client) {
+    var builder = imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
   useEffect(function () {
     //IE11 Polyfill
     smoothscroll.polyfill();
@@ -244,7 +248,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
             var url = video.url;
             var thumbnail = void 0;
             if (video.thumbnail && video.thumbnail.asset) {
-              thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              thumbnail = urlFor(video.thumbnail, props.client);
             } else if (_typeof(video.thumbnail == 'string')) {
               thumbnail = video.thumbnail;
             } else {
@@ -299,7 +303,7 @@ var YoutubeGroup = function YoutubeGroup(props) {
             var _url = '' + video.link;
             var _thumbnail = void 0;
             if (video.thumbnail && video.thumbnail.asset) {
-              _thumbnail = urlFor({ source: video.thumbnail, client: props.client });
+              _thumbnail = urlFor(video.thumbnail, props.client);
             } else {
               _thumbnail = 'https://img.youtube.com/vi/' + getYoutubeId(video.url) + '/hqdefault.jpg';
             }

package/dist/esm/getSerializers.js

@@ -1,5 +1,5 @@
 import 'react';
-export { g as default } from './index-e8c6a892.js';
+export { g as default } from './index-04c4d8d6.js';
 import './BlockContent-52cf21c5.js';
 import './entities-932b50cf.js';
 import './slicedToArray-be2f7a22.js';
@@ -9,7 +9,6 @@ import './es6.string.iterator-bc33758b.js';
 import './_to-object-b50e61c3.js';
 import './core.get-iterator-method-133dfacd.js';
 import 'react-bootstrap';
-import './urlFor.js';
 import './index-0dbff1d1.js';
 import './index-2446af28.js';
 import './events-6c3a7a63.js';

package/dist/esm/{index-e8c6a892.js → index-04c4d8d6.js}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useLayoutEffect, useCallback } from 'react';
 import { _ as _slicedToArray, a as _getIterator } from './slicedToArray-be2f7a22.js';
 import { Carousel, Table, Figure as Figure$1, Card, Row, Col, Button, ProgressBar } from 'react-bootstrap';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { l as lib_3 } from './index-2446af28.js';
 import Router, { useRouter } from 'next/router';
 import { g as getYoutubeId } from './index-c7e2ac95.js';
@@ -33,6 +33,10 @@ import { _ as _inherits$1, a as _classCallCheck$1, b as _possibleConstructorRetu
 import { d as IoIosArrowDropupCircle } from './index.esm-3fdda599.js';
 import Figure$2 from 'react-bootstrap/Figure';
 
+var urlFor$4 = function urlFor(source, builder) {
+  return builder.image(source).auto('format');
+};
+
 var onChangeSlide = function onChangeSlide(selectedIndex, router) {
   var pageNumber = selectedIndex + 1;
   var href = '/view/' + router.query.url + '?page=' + pageNumber;
@@ -51,6 +55,8 @@ var Slideshow$1 = function Slideshow(_ref) {
       carouselIndex = _useState2[0],
       setCarouselIndex = _useState2[1];
 
+  var builder = imageUrlBuilder(client);
+
   useEffect(function () {
     var itemArr = router.asPath.split('?page=');
     var pageNumber = parseInt(itemArr[1]);
@@ -78,7 +84,7 @@ var Slideshow$1 = 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('img', { src: slide.asset && urlFor$4(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
           slide.caption && React.createElement(
             'p',
             { className: 'p-2' },
@@ -2059,6 +2065,11 @@ var Media = function Media(_ref) {
       _node$disableTextWrap = node.disableTextWrap,
       disableTextWrap = _node$disableTextWrap === undefined ? false : _node$disableTextWrap;
 
+  var builder = imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source).auto('format');
+  };
 
   if (typeof window === 'undefined') {
     return null;
@@ -2138,7 +2149,7 @@ var Media = function Media(_ref) {
         React.createElement(
           LazyLoad,
           { once: true },
-          React.createElement(Figure$1.Image, _extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ sorce: poster, client: client }) }, alt && { alt: alt }))
+          React.createElement(Figure$1.Image, _extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor(poster).url() }, alt && { alt: alt }))
         ),
         caption && React.createElement(
           Figure$1.Caption,
@@ -7140,6 +7151,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     }
   });
 
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
+
   var router = useRouter();
 
   var _useState = useState(false),
@@ -7205,10 +7221,10 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
 
     Videos.forEach(function (vid) {
       if (vid.type == 'mp4') {
-        data.push({ title: vid.title, thumbnail: urlFor({ client: client, source: vid.thumbnail.asset }), url: vid.url });
+        data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
       } else {
         if (vid.thumbnail && vid.thumbnail.asset) {
-          data.push({ title: vid.title, thumbnail: urlFor({ client: client, source: vid.thumbnail.asset }), url: vid.url });
+          data.push({ title: vid.title, thumbnail: urlFor(vid.thumbnail.asset).url(), url: vid.url });
         } else {
           data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
         }
@@ -7219,7 +7235,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     if (data.length < seriesVid || !seriesVid) {
       setSeries(1);
       setVidUrl(Videos[0].url);
-      setVidThumbnail(Videos[0].thumbnail && Videos[0].thumbnail.asset ? urlFor({ client: client, source: Videos[0].thumbnail.asset }) : '');
+      setVidThumbnail(Videos[0].thumbnail && Videos[0].thumbnail.asset ? urlFor(Videos[0].thumbnail.asset).url() : '');
       if (Videos[0].type) {
         setVidType(Videos[0].type);
       }
@@ -7230,7 +7246,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     } else {
       setSeries(seriesVid);
       setVidUrl(Videos[seriesVid - 1].url);
-      setVidThumbnail(Videos[seriesVid - 1].thumbnail && Videos[seriesVid - 1].thumbnail.asset ? urlFor({ client: client, source: Videos[seriesVid - 1].thumbnail.asset }) : '');
+      setVidThumbnail(Videos[seriesVid - 1].thumbnail && Videos[seriesVid - 1].thumbnail.asset ? urlFor(Videos[seriesVid - 1].thumbnail.asset).url() : '');
       if (Videos[0].type) {
         setVidType(Videos[seriesVid - 1].type);
       }
@@ -7410,7 +7426,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
           return React.createElement(
             'span',
             { key: index },
-            renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, '', authorDetail.profileImage && urlFor({ client: client, source: authorDetail.profileImage, imageHeight: authorImgHeight }))
+            renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, '', authorDetail.profileImage && urlFor(client, authorDetail.profileImage).height(authorImgHeight).url())
           );
         })
       ),
@@ -8095,6 +8111,11 @@ var Leads = function Leads(_ref) {
   );
 };
 
+var urlFor$3 = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
 var Slideshow = function Slideshow(_ref) {
   var slides = _ref.node.slides,
       client = _ref.client,
@@ -8151,7 +8172,7 @@ var Slideshow = 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('img', { src: urlFor$3(slide.slideshowImage, client).url(), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
               )
             ),
             React.createElement(
@@ -8214,6 +8235,10 @@ var Formstack = function Formstack(_ref) {
   );
 };
 
+var urlFor$2 = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
 var MultiMedia = function MultiMedia(props) {
   var medias = props.node.medias,
       client = props.client;
@@ -8246,7 +8271,7 @@ 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('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor$2(media.poster, client).url(), alt: media.alt })
                 ),
                 media.caption && React.createElement(
                   'span',
@@ -8360,6 +8385,10 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var today = moment().utc().format();
 
   var authorPrefix = 'authors';
+  var builder = imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
   var router = useRouter();
 
   var refArray = useRef([]);
@@ -8462,7 +8491,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React.createElement(
             'div',
             { className: 'prevNext-thumbnail' },
-            React.createElement('img', { src: urlFor({ client: client, source: article.thumbnail.asset }) }),
+            React.createElement('img', { src: urlFor(article.thumbnail.asset).url() }),
             React.createElement(
               'div',
               { className: 'prevNext-reading ' + showReading },
@@ -8532,7 +8561,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
 
   useEffect(function () {
     if (articleClicked === true) {
-      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor({ client: client, source: Articles[articleIndex].thumbnail.asset }));
+      onChangeArticle(Articles[articleIndex].param.current, 'top', Articles[articleIndex].title, Articles[articleIndex].summary, urlFor(Articles[articleIndex].thumbnail.asset).url());
     }
   }, [articleClicked]);
 
@@ -8670,7 +8699,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
       setCurrentTitle(title);
       if (rootArticle) {
         setCurrentSummary(rootArticle.summary ? rootArticle.summary : '');
-        setCurrentThumbnail(urlFor({ client: client, source: rootArticle.thumbnail.asset }));
+        setCurrentThumbnail(urlFor(rootArticle.thumbnail.asset).url());
       } else {
         setCurrentSummary('');
         setCurrentThumbnail('');
@@ -8756,7 +8785,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
               onChange: function onChange(visible) {
                 if (upArrowClicked === false && articleClicked === false) {
                   if (visible === 'top' || visible === 'bottom' || visible === 'small-top') {
-                    onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor({ client: client, source: article.thumbnail.asset }));
+                    onChangeArticle(article.param.current, visible, article.title, article.summary, urlFor(article.thumbnail.asset).url());
                   }
                 }
               } },
@@ -8792,7 +8821,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                   return React.createElement(
                     'span',
                     { key: index },
-                    renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor({ client: client, source: authorDetail.profileImage }))
+                    renderAuthor(authorDetail.displayName, authorDetail.url, index, article.authorDetails.length, authorPrefix, authorDetail.biography && renderAuthorBiography(authorDetail.biography[0]), authorDetail.profileImage && urlFor(client, authorDetail.profileImage).url())
                   );
                 })
               ),
@@ -8902,6 +8931,16 @@ var LightBox = function LightBox(_ref) {
   );
 };
 
+var urlFor$1 = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var generateSrcSet = function generateSrcSet(source, client, width) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).width(width).fit('max').auto('format').url();
+};
+
 var compareProps = function compareProps(prevProps, nextProps) {
   if (nextProps.node.asset && nextProps.node.asset._ref) {
     return prevProps.node.asset._ref === nextProps.node.asset._ref;
@@ -8919,13 +8958,13 @@ var FigureImage = React.memo(function (_ref2) {
   return React.createElement(
     'picture',
     null,
-    React.createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-    React.createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-    React.createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React.createElement('source', { media: '(min-width: 1200px)', srcSet: generateSrcSet(node, client, 1500) }),
+    React.createElement('source', { media: '(min-width: 600px)', srcSet: generateSrcSet(node, client, 1000) }),
+    React.createElement('source', { media: '(max-width: 600px)', srcSet: generateSrcSet(node, client, 500) }),
     React.createElement('img', _extends({
       style: figureImageStyle,
       className: 'figure-image',
-      src: urlFor({ source: node, client: client }),
+      src: urlFor$1(node, client).url(),
       alt: imgAlt ? imgAlt : 'figure image'
     }, !link && {
       onClick: function onClick() {
@@ -9029,7 +9068,7 @@ var FigureComponent = function FigureComponent(props) {
   };
 
   var handleClickFigure = useCallback(function (node, client) {
-    setLightboxImgSrc(urlFor({ source: node, client: client }));
+    setLightboxImgSrc(urlFor$1(node, client).url());
     setShowLightbox(true);
   }, [node, client]);
 
@@ -9069,6 +9108,11 @@ var FigureComponent = function FigureComponent(props) {
 
 var Figure = React.memo(FigureComponent, compareProps);
 
+var urlFor = function urlFor(source, client) {
+  var builder = imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
 function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   useEffect(function () {
     function handleClickOutside(event) {
@@ -9138,7 +9182,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('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor(image.asset, client).url(), alt: image.alt })
                 ),
                 React.createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9151,10 +9195,10 @@ var MultiFigure = function MultiFigure(props) {
                 React.createElement('img', {
                   'images-count': images.length,
                   className: 'multi-figure-image',
-                  src: urlFor({ source: image.asset, client: client }),
+                  src: urlFor(image.asset, client).url(),
                   alt: image.alt,
                   onClick: function onClick() {
-                    setOpenImgSrc(urlFor({ source: image, client: client }));
+                    setOpenImgSrc(urlFor(image, client).url());
                     setOpenImg(true);
                   }
                 })