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

package/dist/cjs/{index-55c6de08.js → index-e5fd35c7.js}

@@ -3,10 +3,10 @@
 var React = require('react');
 var slicedToArray = require('./slicedToArray-5d1bc3b3.js');
 var reactBootstrap = require('react-bootstrap');
-var urlFor = require('./urlFor.js');
-var index = require('./index-fc2f1ca2.js');
+var index = require('./index-efca863c.js');
+var index$1 = require('./index-fc2f1ca2.js');
 var Router = require('next/router');
-var index$1 = require('./index-187c967e.js');
+var index$2 = require('./index-187c967e.js');
 var PropTypes = require('prop-types');
 var _commonjsHelpers = require('./_commonjsHelpers-06173234.js');
 var util = require('./util-6f784d85.js');
@@ -15,7 +15,7 @@ var Segment = require('./Segment.js');
 var main = require('./main-025fdc78.js');
 var BlockContent = require('./BlockContent-36e54d77.js');
 var _extends = require('./extends-29bdbc6d.js');
-var index$2 = require('./index-eadd5035.js');
+var index$3 = require('./index-eadd5035.js');
 var _typeof$1 = require('./typeof-88a668c5.js');
 var brightcoveReactPlayerLoader_es = require('./brightcove-react-player-loader.es-a195642e.js');
 var GroupDeck = require('./GroupDeck.js');
@@ -47,6 +47,10 @@ var Col__default = /*#__PURE__*/_interopDefaultLegacy(Col);
 var Head__default = /*#__PURE__*/_interopDefaultLegacy(Head);
 var Figure__default = /*#__PURE__*/_interopDefaultLegacy(Figure$1);
 
+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;
@@ -65,6 +69,8 @@ var Slideshow$1 = function Slideshow(_ref) {
       carouselIndex = _useState2[0],
       setCarouselIndex = _useState2[1];
 
+  var builder = index.imageUrlBuilder(client);
+
   React.useEffect(function () {
     var itemArr = router.asPath.split('?page=');
     var pageNumber = parseInt(itemArr[1]);
@@ -76,7 +82,7 @@ var Slideshow$1 = function Slideshow(_ref) {
   }, [router]);
 
   React.useEffect(function () {
-    index.lib_3.refresh();
+    index$1.lib_3.refresh();
     if (pageview) pageview(router.asPath);
   }, [router]);
 
@@ -92,7 +98,7 @@ var Slideshow$1 = 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('img', { src: slide.asset && urlFor$4(slide.asset, builder).url(), alt: slide.alt && slide.alt, style: { width: '100%' } }),
           slide.caption && React__default['default'].createElement(
             'p',
             { className: 'p-2' },
@@ -1897,7 +1903,7 @@ var YouTubePlayer = function YouTubePlayer(_ref) {
   var url = _ref.url,
       autoplay = _ref.autoplay;
 
-  var id = index$1.getYoutubeId(url);
+  var id = index$2.getYoutubeId(url);
 
   var _useState = React.useState(false),
       _useState2 = slicedToArray._slicedToArray(_useState, 2),
@@ -2073,6 +2079,11 @@ var Media = function Media(_ref) {
       _node$disableTextWrap = node.disableTextWrap,
       disableTextWrap = _node$disableTextWrap === undefined ? false : _node$disableTextWrap;
 
+  var builder = index.imageUrlBuilder(client);
+
+  var urlFor = function urlFor(source) {
+    return builder.image(source).auto('format');
+  };
 
   if (typeof window === 'undefined') {
     return null;
@@ -2150,9 +2161,9 @@ var Media = function Media(_ref) {
         'a',
         { href: uploadDoc.asset.url, target: blank ? '_blank' : '_self' },
         React__default['default'].createElement(
-          index$2.LazyLoad,
+          index$3.LazyLoad,
           { once: true },
-          React__default['default'].createElement(reactBootstrap.Figure.Image, _extends._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor({ sorce: poster, client: client }) }, alt && { alt: alt }))
+          React__default['default'].createElement(reactBootstrap.Figure.Image, _extends._extends({ className: 'media-image', style: { maxWidth: '100%' }, src: urlFor(poster).url() }, alt && { alt: alt }))
         ),
         caption && React__default['default'].createElement(
           reactBootstrap.Figure.Caption,
@@ -7154,6 +7165,11 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     }
   });
 
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
+
   var router = Router.useRouter();
 
   var _useState = React.useState(false),
@@ -7219,12 +7235,12 @@ 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/' + index$1.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
+          data.push({ title: vid.title, thumbnail: 'https://img.youtube.com/vi/' + index$2.getYoutubeId(vid.url) + '/hqdefault.jpg', url: vid.url });
         }
       }
     });
@@ -7233,7 +7249,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);
       }
@@ -7244,7 +7260,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);
       }
@@ -7284,7 +7300,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
     //Small pause before starting next video
     setTimeout(function () {
       //Youtube API to start video playing automatically
-      var id = index$1.getYoutubeId(vidUrl);
+      var id = index$2.getYoutubeId(vidUrl);
       event.target.loadVideoById(id);
     }, 1500);
   };
@@ -7424,7 +7440,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
           return React__default['default'].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())
           );
         })
       ),
@@ -7461,7 +7477,7 @@ var YouTubeGallery = function YouTubeGallery(_ref) {
       { id: 'fluid-video-container', className: 'video-block', style: { position: 'relative', overflow: 'hidden' } },
       vidUrl && vidType == 'youtube' && React__default['default'].createElement(YouTube, {
         className: 'fluid-iframe',
-        videoId: index$1.getYoutubeId(vidUrl),
+        videoId: index$2.getYoutubeId(vidUrl),
         opts: opts,
         onReady: handleOnReady,
         onPlay: handleOnPlay,
@@ -7883,7 +7899,7 @@ var Quiz = function Quiz(_ref) {
         setEndIndex(numberOfPaginations - 1);
         newPath = window.location.pathname;
         window.history.pushState(null, null, newPath);
-        index.lib_3.refresh();
+        index$1.lib_3.refresh();
         if (pageview) pageview(newPath);
         break;
       case 'last':
@@ -7892,7 +7908,7 @@ var Quiz = function Quiz(_ref) {
         setEndIndex(pageCount - pageCount % numberOfPaginations + numberOfPaginations - 1);
         newPath = window.location.pathname + '?page=' + pageCount;
         window.history.pushState(null, null, newPath);
-        index.lib_3.refresh();
+        index$1.lib_3.refresh();
         if (pageview) pageview(newPath);
         break;
       case 'next':
@@ -7903,7 +7919,7 @@ var Quiz = function Quiz(_ref) {
         }
         newPath = window.location.pathname + '?page=' + (currentPage + 1);
         window.history.pushState(null, null, newPath);
-        index.lib_3.refresh();
+        index$1.lib_3.refresh();
         if (pageview) pageview(newPath);
         break;
       case 'prev':
@@ -7914,14 +7930,14 @@ var Quiz = function Quiz(_ref) {
         }
         newPath = window.location.pathname + '?page=' + (currentPage - 1);
         window.history.pushState(null, null, newPath);
-        index.lib_3.refresh();
+        index$1.lib_3.refresh();
         if (pageview) pageview(newPath);
         break;
       default:
         setCurrentPage(control);
         newPath = window.location.pathname + '?page=' + control;
         window.history.pushState(null, null, newPath);
-        index.lib_3.refresh();
+        index$1.lib_3.refresh();
         if (pageview) pageview(newPath);
     }
   };
@@ -8109,6 +8125,11 @@ var Leads = function Leads(_ref) {
   );
 };
 
+var urlFor$3 = function urlFor(source, client) {
+  var builder = index.imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
 var Slideshow = function Slideshow(_ref) {
   var slides = _ref.node.slides,
       client = _ref.client,
@@ -8135,7 +8156,7 @@ var Slideshow = function Slideshow(_ref) {
   // }, [router])
 
   React.useEffect(function () {
-    index.lib_3.refresh();
+    index$1.lib_3.refresh();
     if (pageview) pageview(router.asPath);
   }, [router]);
 
@@ -8163,9 +8184,9 @@ var Slideshow = function Slideshow(_ref) {
               'a',
               { href: slide.slideshowImage.link && slide.slideshowImage.link, target: slide.slideshowImage.blank ? '_blank' : '_self' },
               React__default['default'].createElement(
-                index$2.LazyLoad,
+                index$3.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('img', { src: urlFor$3(slide.slideshowImage, client).url(), alt: slide.slideshowImage.alt || 'slideshow image', style: { width: '100%' } })
               )
             ),
             React__default['default'].createElement(
@@ -8228,6 +8249,10 @@ var Formstack = function Formstack(_ref) {
   );
 };
 
+var urlFor$2 = function urlFor(source, client) {
+  var builder = index.imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
 var MultiMedia = function MultiMedia(props) {
   var medias = props.node.medias,
       client = props.client;
@@ -8258,9 +8283,9 @@ var MultiMedia = function MultiMedia(props) {
                 'div',
                 { className: 'multi-media-image-container' },
                 imageBox && React__default['default'].createElement(
-                  index$2.LazyLoad,
+                  index$3.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('img', { 'images-count': medias.length, className: 'multi-media-image', src: urlFor$2(media.poster, client).url(), alt: media.alt })
                 ),
                 media.caption && React__default['default'].createElement(
                   'span',
@@ -8374,6 +8399,10 @@ var ArticleSeries = function ArticleSeries(_ref) {
   var today = moment.moment().utc().format();
 
   var authorPrefix = 'authors';
+  var builder = index.imageUrlBuilder(client);
+  function urlFor(source) {
+    return builder.image(source);
+  }
   var router = Router.useRouter();
 
   var refArray = React.useRef([]);
@@ -8476,7 +8505,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
           React__default['default'].createElement(
             'div',
             { className: 'prevNext-thumbnail' },
-            React__default['default'].createElement('img', { src: urlFor({ client: client, source: article.thumbnail.asset }) }),
+            React__default['default'].createElement('img', { src: urlFor(article.thumbnail.asset).url() }),
             React__default['default'].createElement(
               'div',
               { className: 'prevNext-reading ' + showReading },
@@ -8546,7 +8575,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
 
   React.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]);
 
@@ -8635,7 +8664,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
   });
 
   var grabLoadedAds = function grabLoadedAds() {
-    index.lib_3.getGoogletag().then(function (googletag) {
+    index$1.lib_3.getGoogletag().then(function (googletag) {
       var checkIfReady = window.setInterval(function () {
         if (window.googletag && googletag.pubadsReady) {
           clearInterval(checkIfReady);
@@ -8651,18 +8680,18 @@ var ArticleSeries = function ArticleSeries(_ref) {
     if (pageview) pageview(path);
 
     if (!main.main_43) {
-      index.lib_3.getGoogletag().then(function (googletag) {
+      index$1.lib_3.getGoogletag().then(function (googletag) {
         if (window.googletag && googletag.pubadsReady) {
-          index.lib_3.refresh();
+          index$1.lib_3.refresh();
         }
       });
     }
     //Refresh leaderboard ad on mobile
     if (main.main_43) {
       var leaderboardSlotId = '';
-      index.lib_3.getGoogletag().then(function (googletag) {
+      index$1.lib_3.getGoogletag().then(function (googletag) {
         if (window.googletag && googletag.pubadsReady) {
-          index.lib_3.refresh(leaderboardSlotId);
+          index$1.lib_3.refresh(leaderboardSlotId);
         }
       });
     }
@@ -8684,7 +8713,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('');
@@ -8770,7 +8799,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());
                   }
                 }
               } },
@@ -8806,7 +8835,7 @@ var ArticleSeries = function ArticleSeries(_ref) {
                   return React__default['default'].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())
                   );
                 })
               ),
@@ -8916,6 +8945,16 @@ var LightBox = function LightBox(_ref) {
   );
 };
 
+var urlFor$1 = function urlFor(source, client) {
+  var builder = index.imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
+var generateSrcSet = function generateSrcSet(source, client, width) {
+  var builder = index.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;
@@ -8933,13 +8972,13 @@ var FigureImage = React__default['default'].memo(function (_ref2) {
   return React__default['default'].createElement(
     'picture',
     null,
-    React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1500, imageFit: 'max' }) }),
-    React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 1000, imageFit: 'max' }) }),
-    React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: urlFor({ source: node, client: client, imageWidth: 500, imageFit: 'max' }) }),
+    React__default['default'].createElement('source', { media: '(min-width: 1200px)', srcSet: generateSrcSet(node, client, 1500) }),
+    React__default['default'].createElement('source', { media: '(min-width: 600px)', srcSet: generateSrcSet(node, client, 1000) }),
+    React__default['default'].createElement('source', { media: '(max-width: 600px)', srcSet: generateSrcSet(node, client, 500) }),
     React__default['default'].createElement('img', _extends._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() {
@@ -9043,7 +9082,7 @@ var FigureComponent = function FigureComponent(props) {
   };
 
   var handleClickFigure = React.useCallback(function (node, client) {
-    setLightboxImgSrc(urlFor({ source: node, client: client }));
+    setLightboxImgSrc(urlFor$1(node, client).url());
     setShowLightbox(true);
   }, [node, client]);
 
@@ -9083,6 +9122,11 @@ var FigureComponent = function FigureComponent(props) {
 
 var Figure = React__default['default'].memo(FigureComponent, compareProps);
 
+var urlFor = function urlFor(source, client) {
+  var builder = index.imageUrlBuilder(client);
+  return builder.image(source).auto('format');
+};
+
 function useOutsideAlerter(ref, container, setOpenImg, setOpenImgSrc) {
   React.useEffect(function () {
     function handleClickOutside(event) {
@@ -9150,9 +9194,9 @@ var MultiFigure = function MultiFigure(props) {
                 'div',
                 { className: 'multi-figure-image-container' },
                 React__default['default'].createElement(
-                  index$2.LazyLoad,
+                  index$3.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('img', { 'images-count': images.length, className: 'multi-figure-image', src: urlFor(image.asset, client).url(), alt: image.alt })
                 ),
                 React__default['default'].createElement(FigureCaption, { caption: image.caption, imgcaption: image.imgcaption })
               )
@@ -9160,15 +9204,15 @@ var MultiFigure = function MultiFigure(props) {
               'div',
               { className: 'multi-figure-image-container' },
               React__default['default'].createElement(
-                index$2.LazyLoad,
+                index$3.LazyLoad,
                 { once: true },
                 React__default['default'].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);
                   }
                 })

package/dist/cjs/index.js

@@ -53,7 +53,7 @@ var ADSkyscraper = require('./ADSkyscraper.js');
 var Search = require('./Search.js');
 var Feature = require('./Feature.js');
 var React = require('react');
-var urlFor = require('./urlFor.js');
+var index$1 = require('./index-efca863c.js');
 var Row = require('react-bootstrap/Row');
 var Col = require('react-bootstrap/Col');
 require('react-bootstrap/Badge');
@@ -83,7 +83,7 @@ var VerticalHero = require('./VerticalHero.js');
 var YahooHero = require('./YahooHero.js');
 var GridHero = require('./GridHero.js');
 var ConferenceArticleCard = require('./ConferenceArticleCard.js');
-var getSerializers = require('./index-55c6de08.js');
+var getSerializers = require('./index-e5fd35c7.js');
 var Beam = require('./Beam.js');
 var Segment = require('./Segment.js');
 var KMTracker = require('./KMTracker.js');
@@ -97,6 +97,7 @@ var VideoProgramLandingPage = require('./VideoProgramLandingPage.js');
 var VideoSeriesLandingPage = require('./VideoSeriesLandingPage.js');
 var ArticleProgramLandingPage = require('./ArticleProgramLandingPage.js');
 var ArticleSeriesLandingPage = require('./ArticleSeriesLandingPage.js');
+var urlFor = require('./urlFor.js');
 var getTargeting = require('./getTargeting-be6168ad.js');
 var getKeywords = require('./getKeywords.js');
 var getQuery = require('./getQuery.js');
@@ -140,7 +141,6 @@ require('./eq-5fc26c07.js');
 require('./AuthorComponent-c21aac7f.js');
 require('react-bootstrap/Media');
 require('./BlockContent-36e54d77.js');
-require('./index-efca863c.js');
 require('./react-social-icons-af932527.js');
 require('./index-187c967e.js');
 require('./smoothscroll-99df7f93.js');
@@ -189,7 +189,7 @@ require('swr');
 require('passport-local');
 require('mysql');
 require('./md5-e1ca5797.js');
-require('./SeriesSlider-d54fa925.js');
+require('./SeriesSlider-c022ce04.js');
 require('./style-inject.es-dcee06b6.js');
 require('disqus-react');
 require('react-twitter-embed');
@@ -222,6 +222,20 @@ var FeatureArticles = function FeatureArticles(props) {
       styles = _props$styles === undefined ? null : _props$styles;
 
 
+  var urlFor = function urlFor(source) {
+    var builder = index$1.imageUrlBuilder(client);
+    return builder.image(source).auto('format');
+  };
+
+  var renderImage = function renderImage(thumbnail, imageWidth, imageHeight) {
+    var url = urlFor(thumbnail);
+    if (imageHeight) url = url.height(imageHeight);
+    if (imageWidth) url = url.width(imageWidth);
+    return url.url();
+  };
+
+  //image width updated.
+
   return React__default['default'].createElement(
     'div',
     { className: 'featured-articles-wrapper' },
@@ -244,7 +258,7 @@ var FeatureArticles = function FeatureArticles(props) {
                 React__default['default'].createElement(
                   index.LazyLoad,
                   { height: imageHeight },
-                  React__default['default'].createElement('img', { style: { width: '100%', borderRadius: '10px' }, src: article.feature_img ? urlFor({ client: client, source: article.feature_img, imageWidth: imageWidth, imageHeight: imageHeight }) : defaultImage })
+                  React__default['default'].createElement('img', { style: { width: '100%', borderRadius: '10px' }, src: article.feature_img ? renderImage(article.feature_img, imageWidth, imageHeight) : defaultImage })
                 )
               )
             )
@@ -329,7 +343,6 @@ exports.ADWebcast = ADWebcast;
 exports.ADSkyscraper = ADSkyscraper;
 exports.Search = Search;
 exports.Feature = Feature;
-exports.urlFor = urlFor;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Hero = Hero;
 exports.AlphabeticList = AlphabeticList;
@@ -369,6 +382,7 @@ exports.VideoProgramLandingPage = VideoProgramLandingPage;
 exports.VideoSeriesLandingPage = VideoSeriesLandingPage;
 exports.ArticleProgramLandingPage = ArticleProgramLandingPage;
 exports.ArticleSeriesLandingPage = ArticleSeriesLandingPage;
+exports.urlFor = urlFor;
 exports.getTargeting = getTargeting.getTargeting;
 exports.getKeywords = getKeywords;
 exports.getQuery = getQuery;

package/dist/cjs/urlFor.js

@@ -4,40 +4,8 @@ var index = require('./index-efca863c.js');
 require('./_commonjsHelpers-06173234.js');
 
 // Sanity image auto formating
-
-function urlFor(_ref) {
-  var client = _ref.client,
-      source = _ref.source,
-      _ref$imageWidth = _ref.imageWidth,
-      imageWidth = _ref$imageWidth === undefined ? null : _ref$imageWidth,
-      _ref$imageHeight = _ref.imageHeight,
-      imageHeight = _ref$imageHeight === undefined ? null : _ref$imageHeight,
-      _ref$imageMaxHeight = _ref.imageMaxHeight,
-      imageMaxHeight = _ref$imageMaxHeight === undefined ? null : _ref$imageMaxHeight,
-      _ref$imageFit = _ref.imageFit,
-      imageFit = _ref$imageFit === undefined ? null : _ref$imageFit;
-
-
-  //checks for old usage so it wont break view pages
-  //All view pages are using  urlFor(client, thumbnail.asset).url()
-  //will need to update to urlFor({client, source: thumbnail.asset})
-  //All framework components are using new format
-  if (arguments[1] && arguments[1]._ref) {
-    return index.imageUrlBuilder(client).image(source).auto('format');
-  }
-
-  if (imageWidth && imageHeight) {
-    imageMaxHeight = imageHeight;
-    imageHeight = null;
-  }
-
-  var builder = index.imageUrlBuilder(client);
-  var url = builder.image(source);
-  if (imageWidth) url = url.width(imageWidth);
-  if (imageHeight) url = url.height(imageHeight);
-  if (imageMaxHeight) url = url.maxHeight(imageMaxHeight);
-  if (imageFit) url = url.fit(imageFit);
-  return url.auto('format').url();
+function urlFor(client, source) {
+  return index.imageUrlBuilder(client).image(source).auto('format');
 }
 
 module.exports = urlFor;

package/dist/esm/AlgoliaSearch.js

@@ -7,7 +7,7 @@ import { c as createCommonjsModule, u as unwrapExports } from './_commonjsHelper
 import { _ as _objectWithoutPropertiesLoose$1, a as _setPrototypeOf, b as _extends, c as classnames } from './index-67e1773f.js';
 import { E as EventEmitter } from './events-6c3a7a63.js';
 import { DropdownButton } from 'react-bootstrap';
-import urlFor from './urlFor.js';
+import { i as imageUrlBuilder } from './index-0dbff1d1.js';
 import { m as moment } from './moment-bc12cb97.js';
 import { L as LazyLoad } from './index-35bdcc81.js';
 import './_to-object-b50e61c3.js';
@@ -18,7 +18,6 @@ import './_is-array-3e99e06e.js';
 import './_library-528f1934.js';
 import './_object-sap-f353c2a9.js';
 import './define-property-fe54dc9f.js';
-import './index-0dbff1d1.js';
 import 'react-dom';
 
 function _objectWithoutProperties(source, excluded) {
@@ -14117,7 +14116,7 @@ var AlgoliaSearch = function (_React$Component) {
           styles = _props$propsObj.styles,
           client = _props$propsObj.client;
 
-
+      var builder = imageUrlBuilder(client);
       var hit = props.hit;
       return React.createElement(
         'div',
@@ -14135,7 +14134,7 @@ var AlgoliaSearch = function (_React$Component) {
                 LazyLoad,
                 null,
                 React.createElement('img', {
-                  src: hit.thumbnail && hit.thumbnail.asset ? urlFor({ client: client, source: hit.thumbnail }) : hit.thumbnail && _typeof$2(hit.thumbnail === 'string') ? hit.thumbnail : this.props.defaultImage
+                  src: hit.thumbnail && hit.thumbnail.asset ? builder.image(hit.thumbnail).url() : hit.thumbnail && _typeof$2(hit.thumbnail === 'string') ? hit.thumbnail : this.props.defaultImage
                 })
               )
             )

package/dist/esm/ArticleCarousel.js

@@ -16,7 +16,6 @@ import './index-35bdcc81.js';
 import 'react-dom';
 import 'prop-types';
 import './smoothscroll-fa4e3f8c.js';
-import './urlFor.js';
 import './index-0dbff1d1.js';
 import './main-b5c5aac1.js';
 

package/dist/esm/ArticleProgramLandingPage.js

@@ -3,7 +3,7 @@ import { _ as _slicedToArray } from './slicedToArray-be2f7a22.js';
 import { _ as _extends } from './extends-60e0e1c6.js';
 import React from 'react';
 import { B as BlockContent } from './BlockContent-52cf21c5.js';
-import { g as getSerializers } from './index-e8c6a892.js';
+import { g as getSerializers } from './index-04c4d8d6.js';
 import ArticleSeriesListing from './ArticleSeriesListing.js';
 import './_commonjsHelpers-0c4b6f40.js';
 import './es6.string.iterator-bc33758b.js';
@@ -16,7 +16,6 @@ import './_object-pie-133f504a.js';
 import 'prop-types';
 import './index-0dbff1d1.js';
 import 'react-bootstrap';
-import './urlFor.js';
 import './index-2446af28.js';
 import './events-6c3a7a63.js';
 import 'next/router';

package/dist/esm/ArticleSeriesListing.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';