npm - @micromag/screen-urbania-article - Versions diffs - 0.4.71 → 0.4.76 - Mend

@micromag/screen-urbania-article 0.4.71 → 0.4.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/es/index.js CHANGED Viewed

@@ -1,13 +1,10 @@
 import { FormattedMessage, defineMessage, useIntl } from 'react-intl';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { c } from 'react/compiler-runtime';
 import { getJSON } from '@folklore/fetch';
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect } from 'react';
 import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromColor, mergeRefs, isValidUrl } from '@micromag/core/utils';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
-import { ScreenElement, Empty, PlaceholderSubtitle, PlaceholderTitle, PlaceholderImage, PlaceholderText } from '@micromag/core/components';
+import { ScreenElement, PlaceholderSubtitle, Empty, PlaceholderTitle, PlaceholderImage, PlaceholderText } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerWebView, useViewerContext, useViewerInteraction, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useDimensionObserver, useResizeObserver } from '@micromag/core/hooks';
 import Background from '@micromag/element-background';
@@ -19,62 +16,78 @@ import Text from '@micromag/element-text';
 import UrbaniaAuthor from '@micromag/element-urbania-author';
 import Visual from '@micromag/element-visual';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useSpring, easings, animated } from '@react-spring/web';
+import { easings, useSpring, animated } from '@react-spring/web';
 import { useGesture } from '@use-gesture/react';
 import isString from 'lodash/isString';
 import queryString from 'query-string';
 import Layout from '@micromag/element-layout';
-function Arrow(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-    _ref$strokeWidth = _ref.strokeWidth,
-    strokeWidth = _ref$strokeWidth === void 0 ? 3 : _ref$strokeWidth,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsx("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0",
-    y: "0px",
-    width: "48.53px",
-    height: "12.38px",
-    viewBox: "0 0 48.53 12.38",
-    className: className,
-    xmlSpace: "preserve",
-    children: /*#__PURE__*/jsx("g", {
+function Arrow(t0) {
+  const $ = c(6);
+  const {
+    color: t1,
+    strokeWidth: t2,
+    className: t3
+  } = t0;
+  const color = t1 === undefined ? "currentColor" : t1;
+  const strokeWidth = t2 === undefined ? 3 : t2;
+  const className = t3 === undefined ? null : t3;
+  const t4 = `${strokeWidth}px`;
+  let t5;
+  if ($[0] !== color || $[1] !== t4) {
+    t5 = /*#__PURE__*/jsx("g", {
       transform: "matrix(1, 0, 0, 1, 0, 0)",
       children: /*#__PURE__*/jsx("path", {
         id: "b",
         fill: "none",
         stroke: color,
-        strokeWidth: "".concat(strokeWidth, "px"),
+        strokeWidth: t4,
         strokeLinejoin: "round",
         strokeLinecap: "round",
         d: "M1.5,10.88L24.26,1.5l22.77,9.38"
       })
-    })
-  });
+    });
+    $[0] = color;
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  let t6;
+  if ($[3] !== className || $[4] !== t5) {
+    t6 = /*#__PURE__*/jsx("svg", {
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      x: "0",
+      y: "0px",
+      width: "48.53px",
+      height: "12.38px",
+      viewBox: "0 0 48.53 12.38",
+      className: className,
+      xmlSpace: "preserve",
+      children: t5
+    });
+    $[3] = className;
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+  return t6;
 }
-function WatchIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#222' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsx("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    x: "0",
-    y: "0px",
-    width: "17.76px",
-    height: "17.76px",
-    viewBox: "0 0 17.76 17.76",
-    className: className,
-    xmlSpace: "preserve",
-    children: /*#__PURE__*/jsxs("g", {
+function WatchIcon(t0) {
+  const $ = c(5);
+  const {
+    color: t1,
+    className: t2
+  } = t0;
+  const color = t1 === undefined ? "#222" : t1;
+  const className = t2 === undefined ? null : t2;
+  let t3;
+  if ($[0] !== color) {
+    t3 = /*#__PURE__*/jsxs("g", {
       transform: "translate(0 0)",
       children: [/*#__PURE__*/jsx("path", {
         fill: color,
@@ -83,274 +96,632 @@ function WatchIcon(_ref) {
         fill: color,
         d: "M7.42,8.89v-2.61c-.02-.2,.09-.4,.28-.48,.15-.06,.32-.04,.44,.06,.39,.28,.78,.56,1.17,.85,.82,.59,1.63,1.19,2.45,1.78,.22,.11,.3,.38,.19,.59-.04,.08-.11,.15-.19,.19-.6,.45-1.21,.89-1.82,1.33-.59,.43-1.18,.86-1.78,1.29-.16,.17-.43,.17-.6,0-.02-.02-.03-.03-.04-.05-.07-.11-.1-.24-.1-.37,0-.86,0-1.72,0-2.58h0Z"
       })]
-    })
-  });
+    });
+    $[0] = color;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== className || $[3] !== t3) {
+    t4 = /*#__PURE__*/jsx("svg", {
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlnsXlink: "http://www.w3.org/1999/xlink",
+      x: "0",
+      y: "0px",
+      width: "17.76px",
+      height: "17.76px",
+      viewBox: "0 0 17.76 17.76",
+      className: className,
+      xmlSpace: "preserve",
+      children: t3
+    });
+    $[2] = className;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
 }
 var styles$1 = {"container":"micromag-screen-urbania-article-urbania-base-article-container","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-isPlaceholder","articleContent":"micromag-screen-urbania-article-urbania-base-article-articleContent","visual":"micromag-screen-urbania-article-urbania-base-article-visual","isVideo":"micromag-screen-urbania-article-urbania-base-article-isVideo","title":"micromag-screen-urbania-article-urbania-base-article-title","description":"micromag-screen-urbania-article-urbania-base-article-description","sponsors":"micromag-screen-urbania-article-urbania-base-article-sponsors","callToAction":"micromag-screen-urbania-article-urbania-base-article-callToAction","placeholder":"micromag-screen-urbania-article-urbania-base-article-placeholder","emptyContainer":"micromag-screen-urbania-article-urbania-base-article-emptyContainer","small":"micromag-screen-urbania-article-urbania-base-article-small","empty":"micromag-screen-urbania-article-urbania-base-article-empty","background":"micromag-screen-urbania-article-urbania-base-article-background","video":"micromag-screen-urbania-article-urbania-base-article-video","content":"micromag-screen-urbania-article-urbania-base-article-content","overTitle":"micromag-screen-urbania-article-urbania-base-article-overTitle","authors":"micromag-screen-urbania-article-urbania-base-article-authors","lede":"micromag-screen-urbania-article-urbania-base-article-lede","isAboveDescription":"micromag-screen-urbania-article-urbania-base-article-isAboveDescription","sponsor":"micromag-screen-urbania-article-urbania-base-article-sponsor","quatre95":"micromag-screen-urbania-article-urbania-base-article-quatre95","author":"micromag-screen-urbania-article-urbania-base-article-author","urbania":"micromag-screen-urbania-article-urbania-base-article-urbania","dehors":"micromag-screen-urbania-article-urbania-base-article-dehors","universities":"micromag-screen-urbania-article-urbania-base-article-universities","footerContainer":"micromag-screen-urbania-article-urbania-base-article-footerContainer","footer":"micromag-screen-urbania-article-urbania-base-article-footer","arrow":"micromag-screen-urbania-article-urbania-base-article-arrow","icon":"micromag-screen-urbania-article-urbania-base-article-icon","button":"micromag-screen-urbania-article-urbania-base-article-button","mediaControls":"micromag-screen-urbania-article-urbania-base-article-mediaControls","header":"micromag-screen-urbania-article-urbania-base-article-header","bottom":"micromag-screen-urbania-article-urbania-base-article-bottom","visible":"micromag-screen-urbania-article-urbania-base-article-visible","withGradient":"micromag-screen-urbania-article-urbania-base-article-withGradient","image":"micromag-screen-urbania-article-urbania-base-article-image","isCurrent":"micromag-screen-urbania-article-urbania-base-article-isCurrent","slowZoom":"micromag-screen-urbania-article-urbania-base-article-slowZoom","img":"micromag-screen-urbania-article-urbania-base-article-img"};
-var _excluded$1 = ["callToAction"];
-function UrbaniaArticle(_ref) {
-  var _ref$hasArticle = _ref.hasArticle,
-    hasArticle = _ref$hasArticle === void 0 ? false : _ref$hasArticle,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? null : _ref$type,
-    _ref$image = _ref.image,
-    image = _ref$image === void 0 ? null : _ref$image,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? null : _ref$description,
-    _ref$overTitle = _ref.overTitle,
-    overTitle = _ref$overTitle === void 0 ? null : _ref$overTitle,
-    _ref$author = _ref.author,
-    author = _ref$author === void 0 ? null : _ref$author,
-    _ref$sponsors = _ref.sponsors,
-    sponsors = _ref$sponsors === void 0 ? null : _ref$sponsors,
-    _ref$sponsorPrefix = _ref.sponsorPrefix,
-    sponsorPrefix = _ref$sponsorPrefix === void 0 ? null : _ref$sponsorPrefix,
-    _ref$sponsorColor = _ref.sponsorColor,
-    sponsorColor = _ref$sponsorColor === void 0 ? null : _ref$sponsorColor,
-    _ref$site = _ref.site,
-    site = _ref$site === void 0 ? null : _ref$site,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _ref2 = background || {},
-    _ref2$color = _ref2.color,
-    backgroundColor = _ref2$color === void 0 ? null : _ref2$color;
-  var _useViewerWebView = useViewerWebView(),
-    openedWebView = _useViewerWebView.opened,
-    openWebView = _useViewerWebView.open;
-  var _useViewerContext = useViewerContext(),
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth,
-    viewerTopHeight = _useViewerContext.topHeight;
-  var _useViewerInteraction = useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted,
-    playing = _usePlaybackContext.playing;
-  var _useDimensionObserver = useDimensionObserver(),
-    contentRef = _useDimensionObserver.ref,
-    contentRect = _useDimensionObserver.entry.contentRect,
-    contentHeight = _useDimensionObserver.height;
-  var _ref3 = contentRect || {},
-    contentTop = _ref3.top;
-  var _useMemo = useMemo(function () {
-      // const defaultImageHeight = width * 0.8;
-      var difference = height - contentHeight - contentTop + 1;
-      return {
-        imageHeight: difference
-      };
-    }, [contentTop, contentHeight, width, height]),
-    _useMemo$minContentHe = _useMemo.minContentHeight,
-    minContentHeight = _useMemo$minContentHe === void 0 ? null : _useMemo$minContentHe;
-  var isVideo = type === 'video';
-  var hasOverTitle = isTextFilled(overTitle);
-  var hasTitle = isTextFilled(title);
-  var hasDescription = isTextFilled(description);
-  var hasSponsor = (sponsors || []).length > 0 && isTextFilled(sponsors[0]);
-  var _ref4 = author || {},
-    authorFullName = _ref4.name;
-  var hasAuthor = isTextFilled(authorFullName);
-  var _ref5 = image || {},
-    _ref5$url = _ref5.url,
-    url = _ref5$url === void 0 ? null : _ref5$url,
-    _ref5$type = _ref5.type,
-    imageType = _ref5$type === void 0 ? null : _ref5$type;
-  var hasImage = url !== null;
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer) || hasArticle;
-  var footerCta = {
-    buttonClassName: styles$1.button,
-    labelClassName: styles$1.label,
-    arrowClassName: styles$1.arrow,
-    arrow: /*#__PURE__*/jsx(Arrow, {}),
-    icon: type === 'video' ? /*#__PURE__*/jsx(WatchIcon, {
+function UrbaniaArticle(t0) {
+  const $ = c(173);
+  const {
+    hasArticle: t1,
+    type: t2,
+    image: t3,
+    title: t4,
+    description: t5,
+    overTitle: t6,
+    author: t7,
+    sponsors: t8,
+    sponsorPrefix: t9,
+    sponsorColor: t10,
+    site: t11,
+    header: t12,
+    footer: t13,
+    background: t14,
+    current: t15,
+    preload: t16,
+    spacing: t17,
+    mediaRef: t18,
+    className: t19
+  } = t0;
+  const hasArticle = t1 === undefined ? false : t1;
+  const type = t2 === undefined ? null : t2;
+  const image = t3 === undefined ? null : t3;
+  const title = t4 === undefined ? null : t4;
+  const description = t5 === undefined ? null : t5;
+  const overTitle = t6 === undefined ? null : t6;
+  const author = t7 === undefined ? null : t7;
+  const sponsors = t8 === undefined ? null : t8;
+  const sponsorPrefix = t9 === undefined ? null : t9;
+  const sponsorColor = t10 === undefined ? null : t10;
+  const site = t11 === undefined ? null : t11;
+  const header = t12 === undefined ? null : t12;
+  const footer = t13 === undefined ? null : t13;
+  const background = t14 === undefined ? null : t14;
+  const current = t15 === undefined ? true : t15;
+  const preload = t16 === undefined ? true : t16;
+  const spacing = t17 === undefined ? 20 : t17;
+  const customMediaRef = t18 === undefined ? null : t18;
+  const className = t19 === undefined ? null : t19;
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  let t20;
+  if ($[0] !== background) {
+    t20 = background || {};
+    $[0] = background;
+    $[1] = t20;
+  } else {
+    t20 = $[1];
+  }
+  const {
+    color: t21
+  } = t20;
+  const backgroundColor = t21 === undefined ? null : t21;
+  const {
+    opened: openedWebView,
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    bottomSidesWidth: viewerBottomSidesWidth,
+    topHeight: viewerTopHeight
+  } = useViewerContext();
+  const {
+    enableInteraction,
+    disableInteraction
+  } = useViewerInteraction();
+  const {
+    muted,
+    playing
+  } = usePlaybackContext();
+  const {
+    ref: contentRef,
+    entry: t22,
+    height: contentHeight
+  } = useDimensionObserver();
+  const {
+    contentRect
+  } = t22;
+  let t23;
+  if ($[2] !== contentRect) {
+    t23 = contentRect || {};
+    $[2] = contentRect;
+    $[3] = t23;
+  } else {
+    t23 = $[3];
+  }
+  const {
+    top: contentTop
+  } = t23;
+  const difference = height - contentHeight - contentTop + 1;
+  let t24;
+  if ($[4] !== difference) {
+    t24 = {
+      imageHeight: difference
+    };
+    $[4] = difference;
+    $[5] = t24;
+  } else {
+    t24 = $[5];
+  }
+  const {
+    minContentHeight: t25
+  } = t24;
+  const minContentHeight = t25 === undefined ? null : t25;
+  const isVideo = type === "video";
+  let t26;
+  if ($[6] !== overTitle) {
+    t26 = isTextFilled(overTitle);
+    $[6] = overTitle;
+    $[7] = t26;
+  } else {
+    t26 = $[7];
+  }
+  const hasOverTitle = t26;
+  let t27;
+  if ($[8] !== title) {
+    t27 = isTextFilled(title);
+    $[8] = title;
+    $[9] = t27;
+  } else {
+    t27 = $[9];
+  }
+  const hasTitle = t27;
+  const hasDescription = isTextFilled(description);
+  let t28;
+  if ($[10] !== sponsors) {
+    t28 = (sponsors || []).length > 0 && isTextFilled(sponsors[0]);
+    $[10] = sponsors;
+    $[11] = t28;
+  } else {
+    t28 = $[11];
+  }
+  const hasSponsor = t28;
+  let t29;
+  if ($[12] !== author) {
+    t29 = author || {};
+    $[12] = author;
+    $[13] = t29;
+  } else {
+    t29 = $[13];
+  }
+  const {
+    name: authorFullName
+  } = t29;
+  let t30;
+  if ($[14] !== authorFullName) {
+    t30 = isTextFilled(authorFullName);
+    $[14] = authorFullName;
+    $[15] = t30;
+  } else {
+    t30 = $[15];
+  }
+  const hasAuthor = t30;
+  let t31;
+  if ($[16] !== image) {
+    t31 = image || {};
+    $[16] = image;
+    $[17] = t31;
+  } else {
+    t31 = $[17];
+  }
+  const {
+    url: t32,
+    type: t33
+  } = t31;
+  const url = t32 === undefined ? null : t32;
+  const imageType = t33 === undefined ? null : t33;
+  const hasImage = url !== null;
+  let t34;
+  if ($[18] !== header) {
+    t34 = isHeaderFilled(header);
+    $[18] = header;
+    $[19] = t34;
+  } else {
+    t34 = $[19];
+  }
+  const hasHeader = t34;
+  let t35;
+  if ($[20] !== footer || $[21] !== hasArticle) {
+    t35 = isFooterFilled(footer) || hasArticle;
+    $[20] = footer;
+    $[21] = hasArticle;
+    $[22] = t35;
+  } else {
+    t35 = $[22];
+  }
+  const hasFooter = t35;
+  let t36;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t36 = /*#__PURE__*/jsx(Arrow, {});
+    $[23] = t36;
+  } else {
+    t36 = $[23];
+  }
+  let t37;
+  if ($[24] !== type) {
+    t37 = type === "video" ? /*#__PURE__*/jsx(WatchIcon, {
       className: styles$1.icon
-    }) : null
-  };
-  var _ref6 = footer || {},
-    _ref6$callToAction = _ref6.callToAction,
-    callToAction = _ref6$callToAction === void 0 ? null : _ref6$callToAction,
-    otherFooterProps = _objectWithoutProperties(_ref6, _excluded$1);
-  var footerProps = getFooterProps(_objectSpread(_objectSpread({}, otherFooterProps), {}, {
-    callToAction: _objectSpread(_objectSpread({}, callToAction), footerCta)
-  }), {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview,
-    animationDisabled: isPreview,
-    focusable: current && isView,
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  });
-  var _ref7 = background || {},
-    _ref7$video = _ref7.video,
-    backgroundVideo = _ref7$video === void 0 ? null : _ref7$video;
-  var hasVideoBackground = backgroundVideo !== null;
-  var mediaShouldLoad = current || preload;
-  var finalPlaying = playing && current;
-  var isVideoBackground = imageType !== 'video' && hasVideoBackground;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current, isVideoBackground),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var backgroundPlaying = current && !openedWebView && (isView || isEdit) && (isCurrentMedia || !isView);
-  var items = [/*#__PURE__*/jsx(ScreenElement, {
-    placeholder: /*#__PURE__*/jsx(PlaceholderSubtitle, {
+    }) : null;
+    $[24] = type;
+    $[25] = t37;
+  } else {
+    t37 = $[25];
+  }
+  let t38;
+  if ($[26] !== current || $[27] !== disableInteraction || $[28] !== enableInteraction || $[29] !== footer || $[30] !== isPreview || $[31] !== isView || $[32] !== openWebView || $[33] !== t37) {
+    const footerCta = {
+      buttonClassName: styles$1.button,
+      labelClassName: styles$1.label,
+      arrowClassName: styles$1.arrow,
+      arrow: t36,
+      icon: t37
+    };
+    const {
+      callToAction: t39,
+      ...otherFooterProps
+    } = footer || {};
+    const callToAction = t39 === undefined ? null : t39;
+    t38 = getFooterProps({
+      ...otherFooterProps,
+      callToAction: {
+        ...callToAction,
+        ...footerCta
+      }
+    }, {
+      isView,
+      current,
+      openWebView,
+      isPreview,
+      animationDisabled: isPreview,
+      focusable: current && isView,
+      enableInteraction,
+      disableInteraction
+    });
+    $[26] = current;
+    $[27] = disableInteraction;
+    $[28] = enableInteraction;
+    $[29] = footer;
+    $[30] = isPreview;
+    $[31] = isView;
+    $[32] = openWebView;
+    $[33] = t37;
+    $[34] = t38;
+  } else {
+    t38 = $[34];
+  }
+  const footerProps = t38;
+  let t39;
+  if ($[35] !== background) {
+    t39 = background || {};
+    $[35] = background;
+    $[36] = t39;
+  } else {
+    t39 = $[36];
+  }
+  const {
+    video: t40
+  } = t39;
+  const backgroundVideo = t40 === undefined ? null : t40;
+  const hasVideoBackground = backgroundVideo !== null;
+  const mediaShouldLoad = current || preload;
+  const finalPlaying = playing && current;
+  const isVideoBackground = imageType !== "video" && hasVideoBackground;
+  const {
+    ref: mediaRef,
+    isCurrent: t41
+  } = usePlaybackMediaRef(current, isVideoBackground);
+  const isCurrentMedia = t41 === undefined ? false : t41;
+  const backgroundPlaying = current && !openedWebView && (isView || isEdit) && (isCurrentMedia || !isView);
+  let t42;
+  let t43;
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t42 = /*#__PURE__*/jsx(PlaceholderSubtitle, {
       className: styles$1.placeholder
-    }),
-    empty: /*#__PURE__*/jsx("div", {
-      className: classNames([styles$1.emptyContainer, styles$1.small]),
+    });
+    t43 = classNames([styles$1.emptyContainer, styles$1.small]);
+    $[37] = t42;
+    $[38] = t43;
+  } else {
+    t42 = $[37];
+    t43 = $[38];
+  }
+  let t44;
+  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+    t44 = /*#__PURE__*/jsx("div", {
+      className: t43,
       children: /*#__PURE__*/jsx(Empty, {
         className: styles$1.empty,
         children: /*#__PURE__*/jsx(FormattedMessage, {
           id: "pRzSQ7",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Overtitle"
-          }]
+          defaultMessage: "Overtitle"
         })
       })
-    }),
-    isEmpty: !hasOverTitle,
-    children: hasOverTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
-      className: classNames([styles$1.overTitle])
-    }, overTitle)) : null
-  }, "overTitle"), /*#__PURE__*/jsx(ScreenElement, {
-    placeholder: /*#__PURE__*/jsx(PlaceholderTitle, {
+    });
+    $[39] = t44;
+  } else {
+    t44 = $[39];
+  }
+  const t45 = !hasOverTitle;
+  let t46;
+  if ($[40] !== hasOverTitle || $[41] !== overTitle) {
+    t46 = hasOverTitle ? /*#__PURE__*/jsx(Heading, {
+      className: classNames([styles$1.overTitle]),
+      ...overTitle
+    }) : null;
+    $[40] = hasOverTitle;
+    $[41] = overTitle;
+    $[42] = t46;
+  } else {
+    t46 = $[42];
+  }
+  let t47;
+  if ($[43] !== t45 || $[44] !== t46) {
+    t47 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: t42,
+      empty: t44,
+      isEmpty: t45,
+      children: t46
+    }, "overTitle");
+    $[43] = t45;
+    $[44] = t46;
+    $[45] = t47;
+  } else {
+    t47 = $[45];
+  }
+  let t48;
+  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+    t48 = /*#__PURE__*/jsx(PlaceholderTitle, {
       className: styles$1.placeholder
-    }),
-    empty: /*#__PURE__*/jsx("div", {
+    });
+    $[46] = t48;
+  } else {
+    t48 = $[46];
+  }
+  let t49;
+  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+    t49 = /*#__PURE__*/jsx("div", {
       className: styles$1.emptyContainer,
       children: /*#__PURE__*/jsx(Empty, {
         className: styles$1.empty,
         children: /*#__PURE__*/jsx(FormattedMessage, {
           id: "2ZOPe+",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Title"
-          }]
+          defaultMessage: "Title"
         })
       })
-    }),
-    isEmpty: !hasTitle,
-    children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
-      className: classNames([styles$1.title])
-    }, title)) : null
-  }, "title"), /*#__PURE__*/jsx(ScreenElement, {
-    empty: /*#__PURE__*/jsx("div", {
+    });
+    $[47] = t49;
+  } else {
+    t49 = $[47];
+  }
+  const t50 = !hasTitle;
+  let t51;
+  if ($[48] !== hasTitle || $[49] !== title) {
+    t51 = hasTitle ? /*#__PURE__*/jsx(Heading, {
+      className: classNames([styles$1.title]),
+      ...title
+    }) : null;
+    $[48] = hasTitle;
+    $[49] = title;
+    $[50] = t51;
+  } else {
+    t51 = $[50];
+  }
+  let t52;
+  if ($[51] !== t50 || $[52] !== t51) {
+    t52 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: t48,
+      empty: t49,
+      isEmpty: t50,
+      children: t51
+    }, "title");
+    $[51] = t50;
+    $[52] = t51;
+    $[53] = t52;
+  } else {
+    t52 = $[53];
+  }
+  const T0 = ScreenElement;
+  const t53 = "authors";
+  let t54;
+  if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+    t54 = /*#__PURE__*/jsx("div", {
       className: styles$1.emptyContainer,
       children: /*#__PURE__*/jsx(Empty, {
         className: styles$1.empty,
         children: /*#__PURE__*/jsx(FormattedMessage, {
           id: "6jX5Tb",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Authors"
-          }]
+          defaultMessage: "Authors"
         })
       })
-    }),
-    isEmpty: !hasAuthor,
-    children: hasAuthor ? /*#__PURE__*/jsx("div", {
-      className: classNames([styles$1.authors, _defineProperty({}, styles$1.isAboveDescription, hasDescription)]),
-      children: /*#__PURE__*/jsx(UrbaniaAuthor, {
-        author: author,
-        shouldLoad: mediaShouldLoad
-      })
-    }) : null
-  }, "authors"), /*#__PURE__*/jsx(ScreenElement, {
-    empty: /*#__PURE__*/jsx("div", {
+    });
+    $[54] = t54;
+  } else {
+    t54 = $[54];
+  }
+  const t55 = !hasAuthor;
+  const t56 = hasAuthor ? /*#__PURE__*/jsx("div", {
+    className: classNames([styles$1.authors, {
+      [styles$1.isAboveDescription]: hasDescription
+    }]),
+    children: /*#__PURE__*/jsx(UrbaniaAuthor, {
+      author: author,
+      shouldLoad: mediaShouldLoad
+    })
+  }) : null;
+  let t57;
+  if ($[55] !== T0 || $[56] !== t54 || $[57] !== t55 || $[58] !== t56) {
+    t57 = /*#__PURE__*/jsx(T0, {
+      empty: t54,
+      isEmpty: t55,
+      children: t56
+    }, t53);
+    $[55] = T0;
+    $[56] = t54;
+    $[57] = t55;
+    $[58] = t56;
+    $[59] = t57;
+  } else {
+    t57 = $[59];
+  }
+  let t58;
+  if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+    t58 = /*#__PURE__*/jsx("div", {
       className: styles$1.emptyContainer,
       children: /*#__PURE__*/jsx(Empty, {
         className: styles$1.empty,
         children: /*#__PURE__*/jsx(FormattedMessage, {
           id: "zl6zsZ",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Lede"
-          }]
+          defaultMessage: "Lede"
         })
       })
-    }),
-    isEmpty: !hasDescription && !hasArticle,
-    children: hasDescription ? /*#__PURE__*/jsx("div", {
+    });
+    $[60] = t58;
+  } else {
+    t58 = $[60];
+  }
+  const t59 = !hasDescription && !hasArticle;
+  let t60;
+  if ($[61] !== description || $[62] !== hasDescription) {
+    t60 = hasDescription ? /*#__PURE__*/jsx("div", {
       className: classNames([styles$1.description]),
-      children: /*#__PURE__*/jsx(Text, _objectSpread({
-        className: classNames([styles$1.lede])
-      }, description))
-    }) : null
-  }, "description"), /*#__PURE__*/jsx(ScreenElement, {
-    empty: /*#__PURE__*/jsx("div", {
-      className: classNames([styles$1.emptyContainer, styles$1.small]),
+      children: /*#__PURE__*/jsx(Text, {
+        className: classNames([styles$1.lede]),
+        ...description
+      })
+    }) : null;
+    $[61] = description;
+    $[62] = hasDescription;
+    $[63] = t60;
+  } else {
+    t60 = $[63];
+  }
+  let t61;
+  if ($[64] !== t59 || $[65] !== t60) {
+    t61 = /*#__PURE__*/jsx(ScreenElement, {
+      empty: t58,
+      isEmpty: t59,
+      children: t60
+    }, "description");
+    $[64] = t59;
+    $[65] = t60;
+    $[66] = t61;
+  } else {
+    t61 = $[66];
+  }
+  let t62;
+  if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+    t62 = classNames([styles$1.emptyContainer, styles$1.small]);
+    $[67] = t62;
+  } else {
+    t62 = $[67];
+  }
+  let t63;
+  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+    t63 = /*#__PURE__*/jsx("div", {
+      className: t62,
       children: /*#__PURE__*/jsx(Empty, {
         className: styles$1.empty,
         children: /*#__PURE__*/jsx(FormattedMessage, {
           id: "zGIcdn",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Sponsors"
-          }]
+          defaultMessage: "Sponsors"
         })
       })
-    }),
-    isEmpty: !hasSponsor && !hasArticle,
-    children: hasSponsor ? /*#__PURE__*/jsx("div", {
+    });
+    $[68] = t63;
+  } else {
+    t63 = $[68];
+  }
+  const t64 = !hasSponsor && !hasArticle;
+  let t65;
+  if ($[69] !== hasSponsor || $[70] !== sponsorColor || $[71] !== sponsorPrefix || $[72] !== sponsors) {
+    t65 = hasSponsor ? /*#__PURE__*/jsx("div", {
       className: styles$1.sponsors,
-      style: _objectSpread({}, getStyleFromColor(sponsorColor)),
-      children: sponsors.map(function () {
-        var sponsor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-        var _ref9 = sponsor || {},
-          _ref9$body = _ref9.body,
-          body = _ref9$body === void 0 ? '' : _ref9$body;
+      style: {
+        ...getStyleFromColor(sponsorColor)
+      },
+      children: sponsors.map(t66 => {
+        const sponsor = t66 === undefined ? null : t66;
+        const {
+          body: t67
+        } = sponsor || {};
+        const body = t67 === undefined ? "" : t67;
         return /*#__PURE__*/jsxs(React.Fragment, {
           children: [sponsorPrefix !== null ? /*#__PURE__*/jsx("span", {
             className: styles$1.sponsor,
             children: sponsorPrefix
           }) : null, /*#__PURE__*/jsx("span", {
             children: "\xA0"
-          }), /*#__PURE__*/jsx(Heading, _objectSpread({
+          }), /*#__PURE__*/jsx(Heading, {
             className: styles$1.sponsor,
-            size: "6"
-          }, sponsor))]
+            size: "6",
+            ...sponsor
+          })]
         }, body);
       })
-    }) : null
-  }, "sponsors")].filter(function (it) {
-    return it !== null;
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles$1.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$1.isCurrent, current), styles$1.isVideo, isVideo), styles$1.hasVideoBackground, hasVideoBackground), styles$1.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": isStatic || isCapture,
-    children: [/*#__PURE__*/jsx(Background, {
+    }) : null;
+    $[69] = hasSponsor;
+    $[70] = sponsorColor;
+    $[71] = sponsorPrefix;
+    $[72] = sponsors;
+    $[73] = t65;
+  } else {
+    t65 = $[73];
+  }
+  let t66;
+  if ($[74] !== t64 || $[75] !== t65) {
+    t66 = /*#__PURE__*/jsx(ScreenElement, {
+      empty: t63,
+      isEmpty: t64,
+      children: t65
+    }, "sponsors");
+    $[74] = t64;
+    $[75] = t65;
+    $[76] = t66;
+  } else {
+    t66 = $[76];
+  }
+  let t67;
+  if ($[77] !== t47 || $[78] !== t52 || $[79] !== t57 || $[80] !== t61 || $[81] !== t66) {
+    t67 = [t47, t52, t57, t61, t66].filter(_temp$2);
+    $[77] = t47;
+    $[78] = t52;
+    $[79] = t57;
+    $[80] = t61;
+    $[81] = t66;
+    $[82] = t67;
+  } else {
+    t67 = $[82];
+  }
+  const items = t67;
+  let t68;
+  if ($[83] !== className || $[84] !== current || $[85] !== hasVideoBackground || $[86] !== isPlaceholder || $[87] !== isVideo) {
+    t68 = classNames([styles$1.container, className, {
+      [styles$1.isCurrent]: current,
+      [styles$1.isVideo]: isVideo,
+      [styles$1.hasVideoBackground]: hasVideoBackground,
+      [styles$1.isPlaceholder]: isPlaceholder
+    }]);
+    $[83] = className;
+    $[84] = current;
+    $[85] = hasVideoBackground;
+    $[86] = isPlaceholder;
+    $[87] = isVideo;
+    $[88] = t68;
+  } else {
+    t68 = $[88];
+  }
+  const t69 = isStatic || isCapture;
+  let t70;
+  if ($[89] !== customMediaRef || $[90] !== isVideoBackground || $[91] !== mediaRef) {
+    t70 = isVideoBackground ? mergeRefs(mediaRef, customMediaRef) : null;
+    $[89] = customMediaRef;
+    $[90] = isVideoBackground;
+    $[91] = mediaRef;
+    $[92] = t70;
+  } else {
+    t70 = $[92];
+  }
+  let t71;
+  if ($[93] !== background || $[94] !== backgroundPlaying || $[95] !== height || $[96] !== isPreview || $[97] !== mediaShouldLoad || $[98] !== muted || $[99] !== resolution || $[100] !== t70 || $[101] !== width) {
+    t71 = /*#__PURE__*/jsx(Background, {
       className: styles$1.background,
       background: background,
       width: width,
@@ -359,274 +730,755 @@ function UrbaniaArticle(_ref) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: mediaShouldLoad,
-      mediaRef: isVideoBackground ? mergeRefs(mediaRef, customMediaRef) : null,
+      mediaRef: t70,
       withoutVideo: isPreview
-    }), /*#__PURE__*/jsxs(Container, {
+    });
+    $[93] = background;
+    $[94] = backgroundPlaying;
+    $[95] = height;
+    $[96] = isPreview;
+    $[97] = mediaShouldLoad;
+    $[98] = muted;
+    $[99] = resolution;
+    $[100] = t70;
+    $[101] = width;
+    $[102] = t71;
+  } else {
+    t71 = $[102];
+  }
+  let t72;
+  if ($[103] !== hasHeader || $[104] !== header || $[105] !== isPlaceholder || $[106] !== isPreview || $[107] !== spacing || $[108] !== viewerTopHeight) {
+    t72 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+      className: styles$1.header,
+      style: {
+        paddingTop: spacing / 2,
+        paddingLeft: spacing,
+        paddingRight: spacing,
+        transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
+      },
+      children: /*#__PURE__*/jsx(Header, {
+        ...header
+      })
+    }, "header") : null;
+    $[103] = hasHeader;
+    $[104] = header;
+    $[105] = isPlaceholder;
+    $[106] = isPreview;
+    $[107] = spacing;
+    $[108] = viewerTopHeight;
+    $[109] = t72;
+  } else {
+    t72 = $[109];
+  }
+  const t73 = styles$1[`${site}`];
+  const t74 = site !== null;
+  let t75;
+  if ($[110] !== t73 || $[111] !== t74) {
+    t75 = classNames([styles$1.articleContent, {
+      [t73]: t74
+    }]);
+    $[110] = t73;
+    $[111] = t74;
+    $[112] = t75;
+  } else {
+    t75 = $[112];
+  }
+  let t76;
+  if ($[113] !== backgroundColor || $[114] !== isVideo) {
+    t76 = !isVideo ? getStyleFromColor(backgroundColor, "backgroundColor") : null;
+    $[113] = backgroundColor;
+    $[114] = isVideo;
+    $[115] = t76;
+  } else {
+    t76 = $[115];
+  }
+  let t77;
+  if ($[116] !== minContentHeight || $[117] !== spacing || $[118] !== t76) {
+    t77 = {
+      paddingTop: spacing,
+      minHeight: minContentHeight,
+      ...t76
+    };
+    $[116] = minContentHeight;
+    $[117] = spacing;
+    $[118] = t76;
+    $[119] = t77;
+  } else {
+    t77 = $[119];
+  }
+  let t78;
+  if ($[120] !== contentRef || $[121] !== items || $[122] !== t75 || $[123] !== t77) {
+    t78 = /*#__PURE__*/jsx("div", {
+      className: t75,
+      style: t77,
+      ref: contentRef,
+      children: items
+    });
+    $[120] = contentRef;
+    $[121] = items;
+    $[122] = t75;
+    $[123] = t77;
+    $[124] = t78;
+  } else {
+    t78 = $[124];
+  }
+  let t79;
+  if ($[125] === Symbol.for("react.memo_cache_sentinel")) {
+    t79 = /*#__PURE__*/jsx(PlaceholderImage, {
+      className: styles$1.placeholder
+    });
+    $[125] = t79;
+  } else {
+    t79 = $[125];
+  }
+  let t80;
+  if ($[126] === Symbol.for("react.memo_cache_sentinel")) {
+    t80 = /*#__PURE__*/jsx("div", {
+      className: styles$1.emptyContainer,
+      children: /*#__PURE__*/jsx(Empty, {
+        className: styles$1.empty,
+        children: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "ebsPd4",
+          defaultMessage: "Image"
+        })
+      })
+    });
+    $[126] = t80;
+  } else {
+    t80 = $[126];
+  }
+  const t81 = !hasImage && !hasArticle;
+  let t82;
+  if ($[127] !== hasImage || $[128] !== height || $[129] !== image || $[130] !== isVideo || $[131] !== mediaShouldLoad || $[132] !== resolution || $[133] !== width) {
+    t82 = hasImage && !isVideo ? /*#__PURE__*/jsx(Visual, {
+      className: styles$1.image,
+      imageClassName: styles$1.img,
+      media: image,
+      width: width,
+      height: height,
+      resolution: resolution,
+      objectFit: {
+        fit: "cover"
+      },
+      shouldLoad: mediaShouldLoad
+    }) : null;
+    $[127] = hasImage;
+    $[128] = height;
+    $[129] = image;
+    $[130] = isVideo;
+    $[131] = mediaShouldLoad;
+    $[132] = resolution;
+    $[133] = width;
+    $[134] = t82;
+  } else {
+    t82 = $[134];
+  }
+  let t83;
+  if ($[135] !== customMediaRef || $[136] !== finalPlaying || $[137] !== hasImage || $[138] !== hasVideoBackground || $[139] !== height || $[140] !== image || $[141] !== isPreview || $[142] !== isVideo || $[143] !== mediaRef || $[144] !== mediaShouldLoad || $[145] !== muted || $[146] !== resolution || $[147] !== width) {
+    t83 = hasImage && isVideo && !hasVideoBackground ? /*#__PURE__*/jsx(Visual, {
+      className: styles$1.video,
+      media: image,
+      width: width,
+      height: height,
+      resolution: resolution,
+      objectFit: {
+        fit: "cover"
+      },
+      shouldLoad: mediaShouldLoad,
+      playing: finalPlaying,
+      muted: muted,
+      withoutVideo: isPreview,
+      mediaRef: mergeRefs(mediaRef, customMediaRef),
+      autoPlay: true
+    }) : null;
+    $[135] = customMediaRef;
+    $[136] = finalPlaying;
+    $[137] = hasImage;
+    $[138] = hasVideoBackground;
+    $[139] = height;
+    $[140] = image;
+    $[141] = isPreview;
+    $[142] = isVideo;
+    $[143] = mediaRef;
+    $[144] = mediaShouldLoad;
+    $[145] = muted;
+    $[146] = resolution;
+    $[147] = width;
+    $[148] = t83;
+  } else {
+    t83 = $[148];
+  }
+  let t84;
+  if ($[149] !== t81 || $[150] !== t82 || $[151] !== t83) {
+    t84 = /*#__PURE__*/jsx("div", {
+      className: styles$1.visual,
+      children: /*#__PURE__*/jsxs(ScreenElement, {
+        placeholder: t79,
+        empty: t80,
+        isEmpty: t81,
+        children: [t82, t83]
+      }, "image")
+    });
+    $[149] = t81;
+    $[150] = t82;
+    $[151] = t83;
+    $[152] = t84;
+  } else {
+    t84 = $[152];
+  }
+  let t85;
+  if ($[153] !== footerProps || $[154] !== hasFooter || $[155] !== isPlaceholder || $[156] !== spacing || $[157] !== viewerBottomSidesWidth) {
+    t85 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+      style: {
+        paddingTop: spacing,
+        paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
+        paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
+      },
+      className: styles$1.footer,
+      children: /*#__PURE__*/jsx(Footer, {
+        ...footerProps
+      })
+    }) : null;
+    $[153] = footerProps;
+    $[154] = hasFooter;
+    $[155] = isPlaceholder;
+    $[156] = spacing;
+    $[157] = viewerBottomSidesWidth;
+    $[158] = t85;
+  } else {
+    t85 = $[158];
+  }
+  let t86;
+  if ($[159] !== t85) {
+    t86 = /*#__PURE__*/jsx("div", {
+      className: styles$1.footerContainer,
+      children: t85
+    });
+    $[159] = t85;
+    $[160] = t86;
+  } else {
+    t86 = $[160];
+  }
+  let t87;
+  if ($[161] !== height || $[162] !== t72 || $[163] !== t78 || $[164] !== t84 || $[165] !== t86 || $[166] !== width) {
+    t87 = /*#__PURE__*/jsxs(Container, {
       className: styles$1.content,
       width: width,
       height: height,
-      children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
-        className: styles$1.header,
-        style: {
-          paddingTop: spacing / 2,
-          paddingLeft: spacing,
-          paddingRight: spacing,
-          transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-        },
-        children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
-      }, "header") : null, /*#__PURE__*/jsx("div", {
-        className: classNames([styles$1.articleContent, _defineProperty({}, styles$1["".concat(site)], site !== null)]),
-        style: _objectSpread({
-          paddingTop: spacing,
-          minHeight: minContentHeight
-        }, !isVideo ? getStyleFromColor(backgroundColor, 'backgroundColor') : null),
-        ref: contentRef,
-        children: items
-      }), /*#__PURE__*/jsx("div", {
-        className: styles$1.visual,
-        children: /*#__PURE__*/jsxs(ScreenElement, {
-          placeholder: /*#__PURE__*/jsx(PlaceholderImage, {
-            className: styles$1.placeholder
-          }),
-          empty: /*#__PURE__*/jsx("div", {
-            className: styles$1.emptyContainer,
-            children: /*#__PURE__*/jsx(Empty, {
-              className: styles$1.empty,
-              children: /*#__PURE__*/jsx(FormattedMessage, {
-                id: "ebsPd4",
-                defaultMessage: [{
-                  "type": 0,
-                  "value": "Image"
-                }]
-              })
-            })
-          }),
-          isEmpty: !hasImage && !hasArticle,
-          children: [hasImage && !isVideo ? /*#__PURE__*/jsx(Visual, {
-            className: styles$1.image,
-            imageClassName: styles$1.img,
-            media: image,
-            width: width,
-            height: height,
-            resolution: resolution,
-            objectFit: {
-              fit: 'cover'
-            },
-            shouldLoad: mediaShouldLoad
-          }) : null, hasImage && isVideo && !hasVideoBackground ? /*#__PURE__*/jsx(Visual, {
-            className: styles$1.video,
-            media: image,
-            width: width,
-            height: height,
-            resolution: resolution,
-            objectFit: {
-              fit: 'cover'
-            },
-            shouldLoad: mediaShouldLoad,
-            playing: finalPlaying,
-            muted: muted,
-            withoutVideo: isPreview,
-            mediaRef: mergeRefs(mediaRef, customMediaRef),
-            autoPlay: true
-          }) : null]
-        }, "image")
-      }), /*#__PURE__*/jsx("div", {
-        className: styles$1.footerContainer,
-        children: !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
-          style: {
-            paddingTop: spacing,
-            paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
-            paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
-          },
-          className: styles$1.footer,
-          children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
-        }) : null
-      })]
-    })]
-  });
+      children: [t72, t78, t84, t86]
+    });
+    $[161] = height;
+    $[162] = t72;
+    $[163] = t78;
+    $[164] = t84;
+    $[165] = t86;
+    $[166] = width;
+    $[167] = t87;
+  } else {
+    t87 = $[167];
+  }
+  let t88;
+  if ($[168] !== t68 || $[169] !== t69 || $[170] !== t71 || $[171] !== t87) {
+    t88 = /*#__PURE__*/jsxs("div", {
+      className: t68,
+      "data-screen-ready": t69,
+      children: [t71, t87]
+    });
+    $[168] = t68;
+    $[169] = t69;
+    $[170] = t71;
+    $[171] = t87;
+    $[172] = t88;
+  } else {
+    t88 = $[172];
+  }
+  return t88;
+}
+function _temp$2(it) {
+  return it !== null;
 }
-var _excluded = ["component", "title", "articleType", "overTitle", "sponsorLabel", "author", "image", "header", "footer", "url", "article"];
-function UrbaniaLoader(_ref) {
-  var _ref$component = _ref.component,
-    Component = _ref$component === void 0 ? UrbaniaArticle : _ref$component,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$articleType = _ref.articleType,
-    articleType = _ref$articleType === void 0 ? null : _ref$articleType,
-    _ref$overTitle = _ref.overTitle,
-    overTitle = _ref$overTitle === void 0 ? null : _ref$overTitle,
-    _ref$sponsorLabel = _ref.sponsorLabel,
-    sponsorLabel = _ref$sponsorLabel === void 0 ? null : _ref$sponsorLabel,
-    _ref$author = _ref.author,
-    author = _ref$author === void 0 ? null : _ref$author,
-    _ref$image = _ref.image,
-    image = _ref$image === void 0 ? null : _ref$image,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url,
-    _ref$article = _ref.article,
-    initialArticle = _ref$article === void 0 ? null : _ref$article,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(initialArticle),
-    _useState2 = _slicedToArray(_useState, 2),
-    article = _useState2[0],
-    setArticle = _useState2[1];
-  var finalUrl = url !== null && isValidUrl(url) ? url.replace(/^https?:\/\/([^.]+\.)?urbania\.(ca|ƒr)\//, 'https://urbania.$2/') : null;
-  useEffect(function () {
-    if (finalUrl !== null) {
-      getJSON("https://api.urbania.ca/documents?uri=".concat(finalUrl), {
-        mode: 'cors'
-      }).then(function (art) {
-        // console.log('art loaded', art);
-        setArticle(art || null);
-      })["catch"](function (_e) {
-        // console.log('art error', e);
-        setArticle(null);
-      });
-    }
-  }, [url, finalUrl, setArticle]);
-  var values = useMemo(function () {
-    var _ref2 = image || {},
-      _ref2$url = _ref2.url,
-      imageUrl = _ref2$url === void 0 ? null : _ref2$url;
-    var _ref3 = footer || {},
-      _ref3$callToAction = _ref3.callToAction,
-      callToAction = _ref3$callToAction === void 0 ? null : _ref3$callToAction;
-    var _ref4 = callToAction || {},
-      _ref4$url = _ref4.url,
-      ctaUrl = _ref4$url === void 0 ? null : _ref4$url;
-    // Straight from article
-    var _ref5 = article || {},
-      _ref5$type = _ref5.type,
-      type = _ref5$type === void 0 ? null : _ref5$type,
-      _ref5$title = _ref5.title,
-      articleTitle = _ref5$title === void 0 ? null : _ref5$title,
-      _ref5$image = _ref5.image,
-      articleImage = _ref5$image === void 0 ? null : _ref5$image,
-      _ref5$metadata = _ref5.metadata,
-      metadata = _ref5$metadata === void 0 ? {} : _ref5$metadata;
-    var hasArticle = article !== null;
-    var _ref6 = metadata || {},
-      _ref6$authors = _ref6.authors,
-      authors = _ref6$authors === void 0 ? [] : _ref6$authors,
-      _ref6$sponsors = _ref6.sponsors,
-      sponsors = _ref6$sponsors === void 0 ? [] : _ref6$sponsors,
-      _ref6$brands = _ref6.brands,
-      brands = _ref6$brands === void 0 ? [] : _ref6$brands;
-    var _ref7 = authors || [],
-      _ref8 = _slicedToArray(_ref7, 1),
-      _ref8$ = _ref8[0],
-      creditAuthor = _ref8$ === void 0 ? null : _ref8$;
-    var _ref9 = brands || [],
-      _ref0 = _slicedToArray(_ref9, 1),
-      _ref0$ = _ref0[0],
-      _ref0$2 = _ref0$ === void 0 ? {} : _ref0$,
-      _ref0$2$handle = _ref0$2.handle,
-      site = _ref0$2$handle === void 0 ? null : _ref0$2$handle;
-    var _ref1 = articleImage || {},
-      _ref1$sizes = _ref1.sizes,
-      sizes = _ref1$sizes === void 0 ? {} : _ref1$sizes;
-    var _ref10 = sizes || {},
-      _ref10$medium = _ref10.medium,
-      medium = _ref10$medium === void 0 ? {} : _ref10$medium,
-      _ref10$large = _ref10.large,
-      large = _ref10$large === void 0 ? {} : _ref10$large;
-    var _ref11 = creditAuthor || {},
-      _ref11$name = _ref11.name,
-      authorName = _ref11$name === void 0 ? null : _ref11$name,
-      _ref11$image = _ref11.image,
-      authorImage = _ref11$image === void 0 ? null : _ref11$image;
-    var hasCreditAuthorName = authorName !== null && authorName !== '';
-    var finalArticleAuthor = _objectSpread(_objectSpread({}, hasCreditAuthorName ? {
-      name: {
-        body: "<p>".concat(authorName, "</p>")
+function UrbaniaLoader(t0) {
+  const $ = c(101);
+  let props;
+  let t1;
+  let t10;
+  let t11;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== t0) {
+    ({
+      component: t1,
+      title: t2,
+      articleType: t3,
+      overTitle: t4,
+      sponsorLabel: t5,
+      author: t6,
+      image: t7,
+      header: t8,
+      footer: t9,
+      url: t10,
+      article: t11,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+    $[3] = t10;
+    $[4] = t11;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+    $[11] = t8;
+    $[12] = t9;
+  } else {
+    props = $[1];
+    t1 = $[2];
+    t10 = $[3];
+    t11 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+    t6 = $[9];
+    t7 = $[10];
+    t8 = $[11];
+    t9 = $[12];
+  }
+  const Component = t1 === undefined ? UrbaniaArticle : t1;
+  const title = t2 === undefined ? null : t2;
+  const articleType = t3 === undefined ? null : t3;
+  const overTitle = t4 === undefined ? null : t4;
+  const sponsorLabel = t5 === undefined ? null : t5;
+  const author = t6 === undefined ? null : t6;
+  const image = t7 === undefined ? null : t7;
+  const header = t8 === undefined ? null : t8;
+  const footer = t9 === undefined ? null : t9;
+  const url = t10 === undefined ? null : t10;
+  const initialArticle = t11 === undefined ? null : t11;
+  const [article, setArticle] = useState(initialArticle);
+  let t12;
+  if ($[13] !== url) {
+    t12 = url !== null && isValidUrl(url) ? url.replace(/^https?:\/\/([^.]+\.)?urbania\.(ca|ƒr)\//, "https://urbania.$2/") : null;
+    $[13] = url;
+    $[14] = t12;
+  } else {
+    t12 = $[14];
+  }
+  const finalUrl = t12;
+  let t13;
+  if ($[15] !== finalUrl) {
+    t13 = () => {
+      if (finalUrl !== null) {
+        getJSON(`https://api.urbania.ca/documents?uri=${finalUrl}`, {
+          mode: "cors"
+        }).then(art => {
+          setArticle(art || null);
+        }).catch(_e => {
+          setArticle(null);
+        });
       }
-    } : null), authorImage !== null ? {
-      image: authorImage
-    } : null);
-    // Type
-    var defaultType = articleType || type;
-    // Sponsors
-    var defaultSponsor = (sponsors || []).length > 0 ? (sponsors || []).map(function (_ref12) {
-      var _ref12$organisation = _ref12.organisation,
-        _ref12$organisation2 = _ref12$organisation === void 0 ? {} : _ref12$organisation,
-        _ref12$organisation2$ = _ref12$organisation2.name,
-        name = _ref12$organisation2$ === void 0 ? null : _ref12$organisation2$;
-      return name;
-    }).filter(function (name) {
-      return name !== null;
-    }).join(', ').trim() : null;
-    // Content
-    var hasTitle = isTextFilled(title);
-    var hasOverTitle = isTextFilled(overTitle);
-    var hasSponsorProps = isTextFilled(sponsorLabel);
-    var hasAuthorProps = author !== null && author.name !== null && isTextFilled(author.name);
-    var sponsorPrefix = !hasSponsorProps && defaultSponsor !== null ? /*#__PURE__*/jsx(FormattedMessage, {
+    };
+    $[15] = finalUrl;
+    $[16] = t13;
+  } else {
+    t13 = $[16];
+  }
+  let t14;
+  if ($[17] !== finalUrl || $[18] !== url) {
+    t14 = [url, finalUrl, setArticle];
+    $[17] = finalUrl;
+    $[18] = url;
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  useEffect(t13, t14);
+  let t15;
+  if ($[20] !== image) {
+    t15 = image || {};
+    $[20] = image;
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+  const {
+    url: t16
+  } = t15;
+  const imageUrl = t16 === undefined ? null : t16;
+  let t17;
+  if ($[22] !== footer) {
+    t17 = footer || {};
+    $[22] = footer;
+    $[23] = t17;
+  } else {
+    t17 = $[23];
+  }
+  const {
+    callToAction: t18
+  } = t17;
+  const callToAction = t18 === undefined ? null : t18;
+  let t19;
+  if ($[24] !== callToAction) {
+    t19 = callToAction || {};
+    $[24] = callToAction;
+    $[25] = t19;
+  } else {
+    t19 = $[25];
+  }
+  const {
+    url: t20
+  } = t19;
+  const ctaUrl = t20 === undefined ? null : t20;
+  let articleImage;
+  let articleTitle;
+  let defaultType;
+  let finalArticleAuthor;
+  let hasArticle;
+  let large;
+  let medium;
+  let site;
+  let t21;
+  if ($[26] !== article || $[27] !== articleType) {
+    const {
+      type: t22,
+      title: t23,
+      image: t24,
+      metadata: t25
+    } = article || {};
+    const type = t22 === undefined ? null : t22;
+    articleTitle = t23 === undefined ? null : t23;
+    articleImage = t24 === undefined ? null : t24;
+    const metadata = t25 === undefined ? {} : t25;
+    hasArticle = article !== null;
+    const {
+      authors: t26,
+      sponsors: t27,
+      brands: t28
+    } = metadata || {};
+    const authors = t26 === undefined ? [] : t26;
+    const sponsors = t27 === undefined ? [] : t27;
+    const brands = t28 === undefined ? [] : t28;
+    const [t29] = authors || [];
+    const creditAuthor = t29 === undefined ? null : t29;
+    const [t30] = brands || [];
+    const {
+      handle: t31
+    } = t30 === undefined ? {} : t30;
+    site = t31 === undefined ? null : t31;
+    const {
+      sizes: t32
+    } = articleImage || {};
+    const sizes = t32 === undefined ? {} : t32;
+    const {
+      medium: t33,
+      large: t34
+    } = sizes || {};
+    medium = t33 === undefined ? {} : t33;
+    large = t34 === undefined ? {} : t34;
+    const {
+      name: t35,
+      image: t36
+    } = creditAuthor || {};
+    const authorName = t35 === undefined ? null : t35;
+    const authorImage = t36 === undefined ? null : t36;
+    const hasCreditAuthorName = authorName !== null && authorName !== "";
+    finalArticleAuthor = {
+      ...(hasCreditAuthorName ? {
+        name: {
+          body: `<p>${authorName}</p>`
+        }
+      } : null),
+      ...(authorImage !== null ? {
+        image: authorImage
+      } : null)
+    };
+    defaultType = articleType || type;
+    t21 = (sponsors || []).length > 0 ? (sponsors || []).map(_temp$1).filter(_temp2$1).join(", ").trim() : null;
+    $[26] = article;
+    $[27] = articleType;
+    $[28] = articleImage;
+    $[29] = articleTitle;
+    $[30] = defaultType;
+    $[31] = finalArticleAuthor;
+    $[32] = hasArticle;
+    $[33] = large;
+    $[34] = medium;
+    $[35] = site;
+    $[36] = t21;
+  } else {
+    articleImage = $[28];
+    articleTitle = $[29];
+    defaultType = $[30];
+    finalArticleAuthor = $[31];
+    hasArticle = $[32];
+    large = $[33];
+    medium = $[34];
+    site = $[35];
+    t21 = $[36];
+  }
+  const defaultSponsor = t21;
+  let t22;
+  if ($[37] !== title) {
+    t22 = isTextFilled(title);
+    $[37] = title;
+    $[38] = t22;
+  } else {
+    t22 = $[38];
+  }
+  const hasTitle = t22;
+  let t23;
+  if ($[39] !== overTitle) {
+    t23 = isTextFilled(overTitle);
+    $[39] = overTitle;
+    $[40] = t23;
+  } else {
+    t23 = $[40];
+  }
+  const hasOverTitle = t23;
+  let t24;
+  if ($[41] !== sponsorLabel) {
+    t24 = isTextFilled(sponsorLabel);
+    $[41] = sponsorLabel;
+    $[42] = t24;
+  } else {
+    t24 = $[42];
+  }
+  const hasSponsorProps = t24;
+  const hasAuthorProps = author !== null && author.name !== null && isTextFilled(author.name);
+  let t25;
+  if ($[43] !== defaultSponsor || $[44] !== hasSponsorProps) {
+    t25 = !hasSponsorProps && defaultSponsor !== null ? /*#__PURE__*/jsx(FormattedMessage, {
       id: "+TPjd4",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Presented by"
-      }]
+      defaultMessage: "Presented by"
     }) : null;
-    return {
+    $[43] = defaultSponsor;
+    $[44] = hasSponsorProps;
+    $[45] = t25;
+  } else {
+    t25 = $[45];
+  }
+  const sponsorPrefix = t25;
+  let t26;
+  if ($[46] !== articleTitle || $[47] !== hasTitle || $[48] !== title) {
+    t26 = hasTitle ? title : {
+      ...title,
+      body: articleTitle
+    };
+    $[46] = articleTitle;
+    $[47] = hasTitle;
+    $[48] = title;
+    $[49] = t26;
+  } else {
+    t26 = $[49];
+  }
+  let t27;
+  if ($[50] !== hasOverTitle || $[51] !== overTitle) {
+    t27 = hasOverTitle ? overTitle : {
+      ...overTitle,
+      body: "En vedette"
+    };
+    $[50] = hasOverTitle;
+    $[51] = overTitle;
+    $[52] = t27;
+  } else {
+    t27 = $[52];
+  }
+  const t28 = hasAuthorProps ? author : null;
+  let t29;
+  if ($[53] !== finalArticleAuthor || $[54] !== t28) {
+    t29 = {
+      ...finalArticleAuthor,
+      ...t28
+    };
+    $[53] = finalArticleAuthor;
+    $[54] = t28;
+    $[55] = t29;
+  } else {
+    t29 = $[55];
+  }
+  let t30;
+  if ($[56] !== defaultSponsor || $[57] !== hasSponsorProps || $[58] !== sponsorLabel) {
+    t30 = defaultSponsor !== null && !hasSponsorProps ? [{
+      ...sponsorLabel,
+      body: `<strong>${defaultSponsor}</strong>`
+    }] : [sponsorLabel];
+    $[56] = defaultSponsor;
+    $[57] = hasSponsorProps;
+    $[58] = sponsorLabel;
+    $[59] = t30;
+  } else {
+    t30 = $[59];
+  }
+  let t31;
+  if ($[60] !== articleImage || $[61] !== image || $[62] !== imageUrl || $[63] !== large || $[64] !== medium) {
+    t31 = imageUrl !== null && image !== null ? image : {
+      type: "image",
+      ...articleImage,
+      sizes: {
+        medium,
+        large
+      }
+    };
+    $[60] = articleImage;
+    $[61] = image;
+    $[62] = imageUrl;
+    $[63] = large;
+    $[64] = medium;
+    $[65] = t31;
+  } else {
+    t31 = $[65];
+  }
+  let t32;
+  if ($[66] !== defaultType) {
+    t32 = defaultType === "video" ? {
+      body: "Regarder"
+    } : {
+      body: "Lire"
+    };
+    $[66] = defaultType;
+    $[67] = t32;
+  } else {
+    t32 = $[67];
+  }
+  let t33;
+  if ($[68] !== finalUrl || $[69] !== hasArticle) {
+    t33 = hasArticle ? {
+      active: finalUrl !== null
+    } : null;
+    $[68] = finalUrl;
+    $[69] = hasArticle;
+    $[70] = t33;
+  } else {
+    t33 = $[70];
+  }
+  const t34 = ctaUrl || finalUrl;
+  let t35;
+  if ($[71] !== callToAction || $[72] !== t32 || $[73] !== t33 || $[74] !== t34) {
+    t35 = {
+      type: "swipe-up",
+      label: t32,
+      inWebView: true,
+      ...callToAction,
+      ...t33,
+      url: t34
+    };
+    $[71] = callToAction;
+    $[72] = t32;
+    $[73] = t33;
+    $[74] = t34;
+    $[75] = t35;
+  } else {
+    t35 = $[75];
+  }
+  let t36;
+  if ($[76] !== footer || $[77] !== t35) {
+    t36 = {
+      ...footer,
+      callToAction: t35
+    };
+    $[76] = footer;
+    $[77] = t35;
+    $[78] = t36;
+  } else {
+    t36 = $[78];
+  }
+  let t37;
+  if ($[79] !== articleTitle || $[80] !== defaultType || $[81] !== finalUrl || $[82] !== header || $[83] !== site || $[84] !== sponsorPrefix || $[85] !== t26 || $[86] !== t27 || $[87] !== t29 || $[88] !== t30 || $[89] !== t31 || $[90] !== t36) {
+    t37 = {
       type: defaultType,
-      title: hasTitle ? title : _objectSpread(_objectSpread({}, title), {}, {
-        body: articleTitle
-      }),
-      articleTitle: articleTitle,
-      overTitle: hasOverTitle ? overTitle : _objectSpread(_objectSpread({}, overTitle), {}, {
-        body: 'En vedette'
-      }),
-      author: _objectSpread(_objectSpread({}, finalArticleAuthor), hasAuthorProps ? author : null),
-      sponsors: defaultSponsor !== null && !hasSponsorProps ? [_objectSpread(_objectSpread({}, sponsorLabel), {}, {
-        body: "<strong>".concat(defaultSponsor, "</strong>")
-      })] : [sponsorLabel],
-      sponsorPrefix: sponsorPrefix,
-      site: site,
-      image: imageUrl !== null && image !== null ? image : _objectSpread(_objectSpread({
-        type: 'image'
-      }, articleImage), {}, {
-        sizes: {
-          medium: medium,
-          large: large
-        }
-      }),
+      title: t26,
+      articleTitle,
+      overTitle: t27,
+      author: t29,
+      sponsors: t30,
+      sponsorPrefix,
+      site,
+      image: t31,
       url: finalUrl,
-      header: header,
-      footer: _objectSpread(_objectSpread({}, footer), {}, {
-        callToAction: _objectSpread(_objectSpread(_objectSpread({
-          type: 'swipe-up',
-          label: defaultType === 'video' ? {
-            body: 'Regarder'
-          } : {
-            body: 'Lire'
-          },
-          inWebView: true
-        }, callToAction), hasArticle ? {
-          active: finalUrl !== null
-        } : null), {}, {
-          url: ctaUrl || finalUrl
-        })
-      })
+      header,
+      footer: t36
     };
-  }, [article, url, title, finalUrl, props, articleType, overTitle, sponsorLabel, author, image, header, footer]);
-  var _ref13 = values || {},
-    _ref13$title = _ref13.title,
-    articleTitle = _ref13$title === void 0 ? null : _ref13$title;
-  var _ref14 = articleTitle || {},
-    _ref14$body = _ref14.body,
-    titleBody = _ref14$body === void 0 ? null : _ref14$body;
-  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, props), values), {}, {
-    hasArticle: titleBody !== null
-  }));
+    $[79] = articleTitle;
+    $[80] = defaultType;
+    $[81] = finalUrl;
+    $[82] = header;
+    $[83] = site;
+    $[84] = sponsorPrefix;
+    $[85] = t26;
+    $[86] = t27;
+    $[87] = t29;
+    $[88] = t30;
+    $[89] = t31;
+    $[90] = t36;
+    $[91] = t37;
+  } else {
+    t37 = $[91];
+  }
+  const values = t37;
+  let t38;
+  if ($[92] !== values) {
+    t38 = values || {};
+    $[92] = values;
+    $[93] = t38;
+  } else {
+    t38 = $[93];
+  }
+  const {
+    title: t39
+  } = t38;
+  const articleTitle_0 = t39 === undefined ? null : t39;
+  let t40;
+  if ($[94] !== articleTitle_0) {
+    t40 = articleTitle_0 || {};
+    $[94] = articleTitle_0;
+    $[95] = t40;
+  } else {
+    t40 = $[95];
+  }
+  const {
+    body: t41
+  } = t40;
+  const titleBody = t41 === undefined ? null : t41;
+  const t42 = titleBody !== null;
+  let t43;
+  if ($[96] !== Component || $[97] !== props || $[98] !== t42 || $[99] !== values) {
+    t43 = /*#__PURE__*/jsx(Component, {
+      ...props,
+      ...values,
+      hasArticle: t42
+    });
+    $[96] = Component;
+    $[97] = props;
+    $[98] = t42;
+    $[99] = values;
+    $[100] = t43;
+  } else {
+    t43 = $[100];
+  }
+  return t43;
+}
+function _temp2$1(name_0) {
+  return name_0 !== null;
+}
+function _temp$1(t0) {
+  const {
+    organisation: t1
+  } = t0;
+  const {
+    name: t2
+  } = t1 === undefined ? {} : t1;
+  const name = t2 === undefined ? null : t2;
+  return name;
 }
 // import * as transforms from './transforms/index';
@@ -638,19 +1490,13 @@ var definition = {
   group: {
     label: defineMessage({
       id: "oPjl8f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Urbania"
-      }]
+      defaultMessage: "Urbania"
     }),
     order: 10
   },
   title: defineMessage({
     id: "nJgzwC",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Urbania article"
-    }]
+    defaultMessage: "Urbania article"
   }),
   component: UrbaniaLoader,
   fields: [{
@@ -658,38 +1504,26 @@ var definition = {
     type: 'url',
     label: defineMessage({
       id: "2pO2Cj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Url"
-      }]
+      defaultMessage: "Url"
     })
   }, {
     name: 'articleType',
     type: 'select',
     label: defineMessage({
       id: "ppq6CK",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Type"
-      }]
+      defaultMessage: "Type"
     }),
     options: [{
       value: 'article',
       label: defineMessage({
         id: "pE7UhY",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Article"
-        }]
+        defaultMessage: "Article"
       })
     }, {
       value: 'video',
       label: defineMessage({
         id: "J9e9Qb",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Video"
-        }]
+        defaultMessage: "Video"
       })
     }]
   }, {
@@ -700,90 +1534,63 @@ var definition = {
     },
     label: defineMessage({
       id: "z2I2bJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Overtitle"
-      }]
+      defaultMessage: "Overtitle"
     })
   }, {
     name: 'title',
     type: 'heading-element',
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'description',
     type: 'text-element',
     label: defineMessage({
       id: "cuKSQz",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Lede"
-      }]
+      defaultMessage: "Lede"
     })
   }, {
     name: 'author',
     type: 'author-element',
     label: defineMessage({
       id: "73hxYw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Author"
-      }]
+      defaultMessage: "Author"
     })
   }, {
     name: 'sponsorLabel',
     type: 'heading-element',
     label: defineMessage({
       id: "hzvEim",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Sponsor Label"
-      }]
+      defaultMessage: "Sponsor Label"
     })
   }, {
     name: 'sponsorColor',
     type: 'color',
     label: defineMessage({
       id: "Qw8cb5",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Sponsor color"
-      }]
+      defaultMessage: "Sponsor color"
     })
   }, {
     name: 'image',
     type: 'visual',
     label: defineMessage({
       id: "k+coTi",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
+      defaultMessage: "Image"
     })
   }, {
     name: 'background',
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -798,10 +1605,7 @@ var definition = {
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {
@@ -816,327 +1620,763 @@ var definition = {
 var styles = {"container":"micromag-screen-urbania-article-urbania-base-article-card-container","background":"micromag-screen-urbania-article-urbania-base-article-card-background","content":"micromag-screen-urbania-article-urbania-base-article-card-content","layout":"micromag-screen-urbania-article-urbania-base-article-card-layout","text":"micromag-screen-urbania-article-urbania-base-article-card-text","cardContainer":"micromag-screen-urbania-article-urbania-base-article-card-cardContainer","isPlaceholder":"micromag-screen-urbania-article-urbania-base-article-card-isPlaceholder","card":"micromag-screen-urbania-article-urbania-base-article-card-card","callToAction":"micromag-screen-urbania-article-urbania-base-article-card-callToAction","arrow":"micromag-screen-urbania-article-urbania-base-article-card-arrow","ctaText":"micromag-screen-urbania-article-urbania-base-article-card-ctaText","cardInner":"micromag-screen-urbania-article-urbania-base-article-card-cardInner","pulse":"micromag-screen-urbania-article-urbania-base-article-card-pulse","dragHandle":"micromag-screen-urbania-article-urbania-base-article-card-dragHandle","articlePreview":"micromag-screen-urbania-article-urbania-base-article-card-articlePreview","articlePreviewInner":"micromag-screen-urbania-article-urbania-base-article-card-articlePreviewInner","articleTitle":"micromag-screen-urbania-article-urbania-base-article-card-articleTitle","placeholder":"micromag-screen-urbania-article-urbania-base-article-card-placeholder","empty":"micromag-screen-urbania-article-urbania-base-article-card-empty","header":"micromag-screen-urbania-article-urbania-base-article-card-header"};
-function UrbaniaArticleCard(_ref) {
-  var _ref$hasArticle = _ref.hasArticle,
-    hasArticle = _ref$hasArticle === void 0 ? false : _ref$hasArticle,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$author = _ref.author,
-    author = _ref$author === void 0 ? null : _ref$author,
-    _ref$text = _ref.text,
-    text = _ref$text === void 0 ? null : _ref$text,
-    _ref$image = _ref.image,
-    image = _ref$image === void 0 ? null : _ref$image,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$callToAction = _ref.callToAction,
-    callToAction = _ref$callToAction === void 0 ? null : _ref$callToAction,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var intl = useIntl();
-  var finalBackground = background !== null && (typeof background.color !== 'undefined' && background.color !== null || typeof background.image !== 'undefined' && background.image !== null || typeof background.video !== 'undefined' && background.video !== null) ? background : {
-    image: image
-  };
-  var _ref2 = finalBackground || {},
-    _ref2$video = _ref2.video,
-    backgroundVideo = _ref2$video === void 0 ? null : _ref2$video;
-  var isBackgroundVideo = backgroundVideo !== null;
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open,
-    _useViewerWebView$ope = _useViewerWebView.opened,
-    webviewOpened = _useViewerWebView$ope === void 0 ? false : _useViewerWebView$ope,
-    _useViewerWebView$clo = _useViewerWebView.close,
-    closeWebView = _useViewerWebView$clo === void 0 ? null : _useViewerWebView$clo;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight;
-  var _useViewerInteraction = useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var _usePlaybackContext = usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    muted = _usePlaybackContext.muted,
-    setControls = _usePlaybackContext.setControls,
-    setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setControlsSuggestPlay = _usePlaybackContext.setControlsSuggestPlay,
-    setPlaying = _usePlaybackContext.setPlaying;
-  var _ref3 = author || {},
-    _ref3$name = _ref3.name,
-    authorName = _ref3$name === void 0 ? null : _ref3$name;
-  var hasUrl = url !== null && isString(url) && url.length > 0;
-  var hasHeader = isHeaderFilled(header);
-  var hasText = isTextFilled(text);
-  var hasTitle = isTextFilled(title);
-  var hasAuthorName = isTextFilled(authorName);
-  var hasCta = isTextFilled(callToAction);
-  // const isSimple = hasUrl && url.indexOf('simple.urbania.ca') !== -1;
-  var finalUrl = useMemo(function () {
-    var cleanedUrl = hasUrl ? url.replace(/^https?:\/\/([^.]+\.)?urbania\.(fr|ca)\//, 'https://urbania.$2/') : url;
-    var currentQueryString = queryString.parse(cleanedUrl !== null && cleanedUrl.indexOf('?') !== -1 ? cleanedUrl.split('?')[1] : '');
-    return cleanedUrl !== null ? "".concat(cleanedUrl.split('?')[0], "?").concat(queryString.stringify(_objectSpread({
+function UrbaniaArticleCard(t0) {
+  const $ = c(148);
+  const {
+    hasArticle: t1,
+    url: t2,
+    title: t3,
+    author: t4,
+    text: t5,
+    image: t6,
+    header: t7,
+    background: t8,
+    callToAction: t9,
+    current: t10,
+    preload: t11,
+    spacing: t12,
+    mediaRef: t13,
+    className: t14
+  } = t0;
+  const hasArticle = t1 === undefined ? false : t1;
+  const url = t2 === undefined ? null : t2;
+  const title = t3 === undefined ? null : t3;
+  const author = t4 === undefined ? null : t4;
+  const text = t5 === undefined ? null : t5;
+  const image = t6 === undefined ? null : t6;
+  const header = t7 === undefined ? null : t7;
+  const background = t8 === undefined ? null : t8;
+  const callToAction = t9 === undefined ? null : t9;
+  const current = t10 === undefined ? true : t10;
+  const preload = t11 === undefined ? true : t11;
+  const spacing = t12 === undefined ? 20 : t12;
+  const customMediaRef = t13 === undefined ? null : t13;
+  const className = t14 === undefined ? null : t14;
+  const intl = useIntl();
+  let t15;
+  if ($[0] !== background || $[1] !== image) {
+    t15 = background !== null && (typeof background.color !== "undefined" && background.color !== null || typeof background.image !== "undefined" && background.image !== null || typeof background.video !== "undefined" && background.video !== null) ? background : {
+      image
+    };
+    $[0] = background;
+    $[1] = image;
+    $[2] = t15;
+  } else {
+    t15 = $[2];
+  }
+  const finalBackground = t15;
+  let t16;
+  if ($[3] !== finalBackground) {
+    t16 = finalBackground || {};
+    $[3] = finalBackground;
+    $[4] = t16;
+  } else {
+    t16 = $[4];
+  }
+  const {
+    video: t17
+  } = t16;
+  const backgroundVideo = t17 === undefined ? null : t17;
+  const isBackgroundVideo = backgroundVideo !== null;
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    open: openWebView,
+    opened: t18,
+    close: t19
+  } = useViewerWebView();
+  const webviewOpened = t18 === undefined ? false : t18;
+  const closeWebView = t19 === undefined ? null : t19;
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight
+  } = useViewerContext();
+  const {
+    enableInteraction,
+    disableInteraction
+  } = useViewerInteraction();
+  const {
+    playing,
+    muted,
+    setControls,
+    setControlsTheme,
+    setControlsSuggestPlay,
+    setPlaying
+  } = usePlaybackContext();
+  let t20;
+  if ($[5] !== author) {
+    t20 = author || {};
+    $[5] = author;
+    $[6] = t20;
+  } else {
+    t20 = $[6];
+  }
+  const {
+    name: t21
+  } = t20;
+  const authorName = t21 === undefined ? null : t21;
+  let t22;
+  if ($[7] !== url) {
+    t22 = url !== null && isString(url) && url.length > 0;
+    $[7] = url;
+    $[8] = t22;
+  } else {
+    t22 = $[8];
+  }
+  const hasUrl = t22;
+  let t23;
+  if ($[9] !== header) {
+    t23 = isHeaderFilled(header);
+    $[9] = header;
+    $[10] = t23;
+  } else {
+    t23 = $[10];
+  }
+  const hasHeader = t23;
+  let t24;
+  if ($[11] !== text) {
+    t24 = isTextFilled(text);
+    $[11] = text;
+    $[12] = t24;
+  } else {
+    t24 = $[12];
+  }
+  const hasText = t24;
+  let t25;
+  if ($[13] !== title) {
+    t25 = isTextFilled(title);
+    $[13] = title;
+    $[14] = t25;
+  } else {
+    t25 = $[14];
+  }
+  const hasTitle = t25;
+  let t26;
+  if ($[15] !== authorName) {
+    t26 = isTextFilled(authorName);
+    $[15] = authorName;
+    $[16] = t26;
+  } else {
+    t26 = $[16];
+  }
+  const hasAuthorName = t26;
+  let t27;
+  if ($[17] !== callToAction) {
+    t27 = isTextFilled(callToAction);
+    $[17] = callToAction;
+    $[18] = t27;
+  } else {
+    t27 = $[18];
+  }
+  const hasCta = t27;
+  let t28;
+  if ($[19] !== hasUrl || $[20] !== url) {
+    const cleanedUrl = hasUrl ? url.replace(/^https?:\/\/([^.]+\.)?urbania\.(fr|ca)\//, "https://urbania.$2/") : url;
+    const currentQueryString = queryString.parse(cleanedUrl !== null && cleanedUrl.indexOf("?") !== -1 ? cleanedUrl.split("?")[1] : "");
+    t28 = cleanedUrl !== null ? `${cleanedUrl.split("?")[0]}?${queryString.stringify({
       reader: true,
-      _ref: 'micromag'
-    }, currentQueryString))) : url;
-  }, [hasUrl, url]);
-  var mediaShouldLoad = current || preload;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current && !webviewOpened, true),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  // card animations
-  var withCardAnimation = !isPlaceholder && !isPreview && !isStatic;
-  var slideInDelay = withCardAnimation && isBackgroundVideo && backgroundPlaying;
-  var withCardBounce = withCardAnimation && current;
-  useEffect(function () {
-    if (!current) {
-      return function () {};
-    }
-    setControlsTheme({
-      seekBarOnly: true
-    });
-    if (isBackgroundVideo && !webviewOpened) {
-      setControls(true);
-    } else {
-      setControls(false);
-    }
-    return function () {
+      _ref: "micromag",
+      ...currentQueryString
+    })}` : url;
+    $[19] = hasUrl;
+    $[20] = url;
+    $[21] = t28;
+  } else {
+    t28 = $[21];
+  }
+  const finalUrl = t28;
+  const mediaShouldLoad = current || preload;
+  const {
+    ref: mediaRef,
+    isCurrent: t29
+  } = usePlaybackMediaRef(current && !webviewOpened, true);
+  const isCurrentMedia = t29 === undefined ? false : t29;
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const withCardAnimation = !isPlaceholder && !isPreview && !isStatic;
+  const slideInDelay = withCardAnimation && isBackgroundVideo && backgroundPlaying;
+  const withCardBounce = withCardAnimation && current;
+  let t30;
+  let t31;
+  if ($[22] !== current || $[23] !== isBackgroundVideo || $[24] !== setControls || $[25] !== setControlsTheme || $[26] !== webviewOpened) {
+    t30 = () => {
+      if (!current) {
+        return _temp;
+      }
+      setControlsTheme({
+        seekBarOnly: true
+      });
       if (isBackgroundVideo && !webviewOpened) {
+        setControls(true);
+      } else {
         setControls(false);
       }
+      return () => {
+        if (isBackgroundVideo && !webviewOpened) {
+          setControls(false);
+        }
+      };
     };
-  }, [current, setControls, isBackgroundVideo, webviewOpened, setControls, setControlsTheme]);
-  var toggleCard = useCallback(function () {
-    var newOpened = !webviewOpened;
-    if (newOpened) {
-      openWebView(finalUrl);
-      // console.log('web open');
-      disableInteraction();
-    } else {
-      enableInteraction();
-      // console.log('web not open');
-    }
-  }, [webviewOpened, disableInteraction, enableInteraction, openWebView, finalUrl]);
-  var bindGesture = useGesture({
-    onDrag: function onDrag(_ref4) {
-      var _ref4$movement = _slicedToArray(_ref4.movement, 2),
-        my = _ref4$movement[1];
-      if (!webviewOpened && my < 0 || webviewOpened && my > 0) {
-        toggleCard();
+    t31 = [current, setControls, isBackgroundVideo, webviewOpened, setControls, setControlsTheme];
+    $[22] = current;
+    $[23] = isBackgroundVideo;
+    $[24] = setControls;
+    $[25] = setControlsTheme;
+    $[26] = webviewOpened;
+    $[27] = t30;
+    $[28] = t31;
+  } else {
+    t30 = $[27];
+    t31 = $[28];
+  }
+  useEffect(t30, t31);
+  let t32;
+  if ($[29] !== disableInteraction || $[30] !== enableInteraction || $[31] !== finalUrl || $[32] !== openWebView || $[33] !== webviewOpened) {
+    t32 = () => {
+      const newOpened = !webviewOpened;
+      if (newOpened) {
+        openWebView(finalUrl);
+        disableInteraction();
+      } else {
+        enableInteraction();
       }
-    },
-    onWheel: function onWheel(_ref5) {
-      var _ref5$movement = _slicedToArray(_ref5.movement, 2),
-        my = _ref5$movement[1];
-      if (!webviewOpened && my > 0 || webviewOpened && my < 0) {
-        toggleCard();
+    };
+    $[29] = disableInteraction;
+    $[30] = enableInteraction;
+    $[31] = finalUrl;
+    $[32] = openWebView;
+    $[33] = webviewOpened;
+    $[34] = t32;
+  } else {
+    t32 = $[34];
+  }
+  const toggleCard = t32;
+  let t33;
+  if ($[35] !== toggleCard || $[36] !== webviewOpened) {
+    t33 = {
+      onDrag: t34 => {
+        const {
+          movement: t35
+        } = t34;
+        const [, my] = t35;
+        if (!webviewOpened && my < 0 || webviewOpened && my > 0) {
+          toggleCard();
+        }
+      },
+      onWheel: t36 => {
+        const {
+          movement: t37
+        } = t36;
+        const [, my_0] = t37;
+        if (!webviewOpened && my_0 > 0 || webviewOpened && my_0 < 0) {
+          toggleCard();
+        }
       }
-    }
-  }, {
-    drag: {
-      axis: 'y',
-      filterTaps: true,
-      preventDefault: true
-    },
-    wheel: {
-      axis: 'y'
-    }
-  });
-  var _useResizeObserver = useResizeObserver({
-      disabled: !webviewOpened
-    }),
-    articlePreviewRef = _useResizeObserver.ref,
-    _useResizeObserver$en = _useResizeObserver.entry.contentRect,
-    articlePreviewContentRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
-  var _ref6 = articlePreviewContentRect || {},
-    _ref6$height = _ref6.height,
-    articlePreviewHeight = _ref6$height === void 0 ? 0 : _ref6$height;
-  // Think about this
-  var minimumVisibility = 20;
-  var y = 100;
+    };
+    $[35] = toggleCard;
+    $[36] = webviewOpened;
+    $[37] = t33;
+  } else {
+    t33 = $[37];
+  }
+  let t34;
+  if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = {
+      drag: {
+        axis: "y",
+        filterTaps: true,
+        preventDefault: true
+      },
+      wheel: {
+        axis: "y"
+      }
+    };
+    $[38] = t34;
+  } else {
+    t34 = $[38];
+  }
+  const bindGesture = useGesture(t33, t34);
+  const t35 = !webviewOpened;
+  let t36;
+  if ($[39] !== t35) {
+    t36 = {
+      disabled: t35
+    };
+    $[39] = t35;
+    $[40] = t36;
+  } else {
+    t36 = $[40];
+  }
+  const {
+    ref: articlePreviewRef,
+    entry: t37
+  } = useResizeObserver(t36);
+  const {
+    contentRect: t38
+  } = t37;
+  const articlePreviewContentRect = t38 === undefined ? null : t38;
+  let t39;
+  if ($[41] !== articlePreviewContentRect) {
+    t39 = articlePreviewContentRect || {};
+    $[41] = articlePreviewContentRect;
+    $[42] = t39;
+  } else {
+    t39 = $[42];
+  }
+  const {
+    height: t40
+  } = t39;
+  const articlePreviewHeight = t40 === undefined ? 0 : t40;
+  let y = 100;
   if (current) {
-    y = 100 - Math.max(articlePreviewHeight / height * 100, minimumVisibility);
+    y = 100 - Math.max(articlePreviewHeight / height * 100, 20);
   }
-  var springStyle = useSpring({
-    from: {
-      y: isPreview ? y : 100
-    },
-    to: {
-      y: y
-    },
-    delay: slideInDelay ? 1500 : 0,
-    config: {
+  const t41 = isPreview ? y : 100;
+  let t42;
+  if ($[43] !== t41) {
+    t42 = {
+      y: t41
+    };
+    $[43] = t41;
+    $[44] = t42;
+  } else {
+    t42 = $[44];
+  }
+  let t43;
+  if ($[45] !== y) {
+    t43 = {
+      y
+    };
+    $[45] = y;
+    $[46] = t43;
+  } else {
+    t43 = $[46];
+  }
+  const t44 = slideInDelay ? 1500 : 0;
+  const t45 = y === 100 ? 1000 : 400;
+  let t46;
+  if ($[47] !== t45) {
+    t46 = {
       easing: easings.easeInOutSine,
-      duration: y === 100 ? 1000 : 400
-    }
-  });
-  // TODIO: current switches on/off for a split second and fucks this up
-  useEffect(function () {
-  }, [current, webviewOpened, closeWebView, enableInteraction]);
-  var onPlayError = useCallback(function () {
-    if (isView && playing && current && isBackgroundVideo) {
-      setPlaying(false);
-      setControlsSuggestPlay(true);
-    }
-  }, [isView, current, playing, isBackgroundVideo, setPlaying, setControlsSuggestPlay]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.isCurrent, current), styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": isStatic || isCapture,
-    children: [/*#__PURE__*/jsx(Background, {
+      duration: t45
+    };
+    $[47] = t45;
+    $[48] = t46;
+  } else {
+    t46 = $[48];
+  }
+  let t47;
+  if ($[49] !== t42 || $[50] !== t43 || $[51] !== t44 || $[52] !== t46) {
+    t47 = {
+      from: t42,
+      to: t43,
+      delay: t44,
+      config: t46
+    };
+    $[49] = t42;
+    $[50] = t43;
+    $[51] = t44;
+    $[52] = t46;
+    $[53] = t47;
+  } else {
+    t47 = $[53];
+  }
+  const springStyle = useSpring(t47);
+  let t48;
+  if ($[54] !== closeWebView || $[55] !== current || $[56] !== webviewOpened) {
+    t48 = () => {
+    };
+    $[54] = closeWebView;
+    $[55] = current;
+    $[56] = webviewOpened;
+    $[57] = t48;
+  } else {
+    t48 = $[57];
+  }
+  let t49;
+  if ($[58] !== closeWebView || $[59] !== current || $[60] !== enableInteraction || $[61] !== webviewOpened) {
+    t49 = [current, webviewOpened, closeWebView, enableInteraction];
+    $[58] = closeWebView;
+    $[59] = current;
+    $[60] = enableInteraction;
+    $[61] = webviewOpened;
+    $[62] = t49;
+  } else {
+    t49 = $[62];
+  }
+  useEffect(t48, t49);
+  let t50;
+  if ($[63] !== current || $[64] !== isBackgroundVideo || $[65] !== isView || $[66] !== playing || $[67] !== setControlsSuggestPlay || $[68] !== setPlaying) {
+    t50 = () => {
+      if (isView && playing && current && isBackgroundVideo) {
+        setPlaying(false);
+        setControlsSuggestPlay(true);
+      }
+    };
+    $[63] = current;
+    $[64] = isBackgroundVideo;
+    $[65] = isView;
+    $[66] = playing;
+    $[67] = setControlsSuggestPlay;
+    $[68] = setPlaying;
+    $[69] = t50;
+  } else {
+    t50 = $[69];
+  }
+  const onPlayError = t50;
+  let t51;
+  if ($[70] !== className || $[71] !== current || $[72] !== isPlaceholder) {
+    t51 = classNames([styles.container, className, {
+      [styles.isCurrent]: current,
+      [styles.isPlaceholder]: isPlaceholder
+    }]);
+    $[70] = className;
+    $[71] = current;
+    $[72] = isPlaceholder;
+    $[73] = t51;
+  } else {
+    t51 = $[73];
+  }
+  const t52 = isStatic || isCapture;
+  const t53 = backgroundPlaying && !webviewOpened;
+  let t54;
+  if ($[74] !== customMediaRef || $[75] !== mediaRef) {
+    t54 = mergeRefs(mediaRef, customMediaRef);
+    $[74] = customMediaRef;
+    $[75] = mediaRef;
+    $[76] = t54;
+  } else {
+    t54 = $[76];
+  }
+  let t55;
+  if ($[77] !== finalBackground || $[78] !== height || $[79] !== isPreview || $[80] !== mediaShouldLoad || $[81] !== muted || $[82] !== onPlayError || $[83] !== resolution || $[84] !== t53 || $[85] !== t54 || $[86] !== width) {
+    t55 = /*#__PURE__*/jsx(Background, {
       className: styles.background,
       background: finalBackground,
       width: width,
       height: height,
       resolution: resolution,
-      playing: backgroundPlaying && !webviewOpened,
+      playing: t53,
       muted: muted,
-      mediaRef: mergeRefs(mediaRef, customMediaRef),
+      mediaRef: t54,
       onPlayError: onPlayError,
       shouldLoad: mediaShouldLoad,
       withoutVideo: isPreview
-    }), /*#__PURE__*/jsxs(Container, {
-      className: styles.content,
-      width: width,
-      height: height,
-      children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
-        className: styles.header,
-        style: {
-          paddingTop: spacing / 2,
-          paddingLeft: spacing,
-          paddingRight: spacing,
-          transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-        },
-        children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
-      }, "header") : null, /*#__PURE__*/jsx(Layout, {
-        className: styles.layout,
-        height: height * 0.65,
-        children: /*#__PURE__*/jsx(ScreenElement, {
-          empty: /*#__PURE__*/jsx(Empty, {
-            className: styles.emptyText,
-            children: /*#__PURE__*/jsx(FormattedMessage, {
-              id: "z4CiV1",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Text"
-              }]
-            })
-          }),
-          placeholder: /*#__PURE__*/jsx(PlaceholderText, {
-            className: styles.placeholderText
-          }),
-          children: hasText ? /*#__PURE__*/jsx(Text, _objectSpread({
-            className: styles.text
-          }, text)) : null
-        }, "text")
-      }), /*#__PURE__*/jsx(Container, {
-        className: classNames([styles.cardContainer, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
-        children: /*#__PURE__*/jsx(ScreenElement, {
-          placeholderProps: {
-            className: styles.placeholder
-          },
-          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-            id: "yMpGIc",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Article"
-            }]
-          }),
-          emptyClassName: styles.empty,
-          isEmpty: !hasUrl || !hasArticle,
-          children: !isPlaceholder && hasArticle ? /*#__PURE__*/jsxs(animated.div, {
-            className: styles.card,
+    });
+    $[77] = finalBackground;
+    $[78] = height;
+    $[79] = isPreview;
+    $[80] = mediaShouldLoad;
+    $[81] = muted;
+    $[82] = onPlayError;
+    $[83] = resolution;
+    $[84] = t53;
+    $[85] = t54;
+    $[86] = width;
+    $[87] = t55;
+  } else {
+    t55 = $[87];
+  }
+  let t56;
+  if ($[88] !== hasHeader || $[89] !== header || $[90] !== isPlaceholder || $[91] !== isPreview || $[92] !== spacing || $[93] !== viewerTopHeight) {
+    t56 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+      className: styles.header,
+      style: {
+        paddingTop: spacing / 2,
+        paddingLeft: spacing,
+        paddingRight: spacing,
+        transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
+      },
+      children: /*#__PURE__*/jsx(Header, {
+        ...header
+      })
+    }, "header") : null;
+    $[88] = hasHeader;
+    $[89] = header;
+    $[90] = isPlaceholder;
+    $[91] = isPreview;
+    $[92] = spacing;
+    $[93] = viewerTopHeight;
+    $[94] = t56;
+  } else {
+    t56 = $[94];
+  }
+  const t57 = height * 0.65;
+  let t58;
+  let t59;
+  if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
+    t58 = /*#__PURE__*/jsx(Empty, {
+      className: styles.emptyText,
+      children: /*#__PURE__*/jsx(FormattedMessage, {
+        id: "z4CiV1",
+        defaultMessage: "Text"
+      })
+    });
+    t59 = /*#__PURE__*/jsx(PlaceholderText, {
+      className: styles.placeholderText
+    });
+    $[95] = t58;
+    $[96] = t59;
+  } else {
+    t58 = $[95];
+    t59 = $[96];
+  }
+  let t60;
+  if ($[97] !== hasText || $[98] !== text) {
+    t60 = hasText ? /*#__PURE__*/jsx(Text, {
+      className: styles.text,
+      ...text
+    }) : null;
+    $[97] = hasText;
+    $[98] = text;
+    $[99] = t60;
+  } else {
+    t60 = $[99];
+  }
+  let t61;
+  if ($[100] !== t60) {
+    t61 = /*#__PURE__*/jsx(ScreenElement, {
+      empty: t58,
+      placeholder: t59,
+      children: t60
+    }, "text");
+    $[100] = t60;
+    $[101] = t61;
+  } else {
+    t61 = $[101];
+  }
+  let t62;
+  if ($[102] !== t57 || $[103] !== t61) {
+    t62 = /*#__PURE__*/jsx(Layout, {
+      className: styles.layout,
+      height: t57,
+      children: t61
+    });
+    $[102] = t57;
+    $[103] = t61;
+    $[104] = t62;
+  } else {
+    t62 = $[104];
+  }
+  let t63;
+  if ($[105] !== isPlaceholder) {
+    t63 = classNames([styles.cardContainer, {
+      [styles.isPlaceholder]: isPlaceholder
+    }]);
+    $[105] = isPlaceholder;
+    $[106] = t63;
+  } else {
+    t63 = $[106];
+  }
+  let t64;
+  let t65;
+  if ($[107] === Symbol.for("react.memo_cache_sentinel")) {
+    t64 = {
+      className: styles.placeholder
+    };
+    t65 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "yMpGIc",
+      defaultMessage: "Article"
+    });
+    $[107] = t64;
+    $[108] = t65;
+  } else {
+    t64 = $[107];
+    t65 = $[108];
+  }
+  const t66 = !hasUrl || !hasArticle;
+  let t67;
+  if ($[109] !== articlePreviewRef || $[110] !== author || $[111] !== bindGesture || $[112] !== callToAction || $[113] !== current || $[114] !== hasArticle || $[115] !== hasAuthorName || $[116] !== hasCta || $[117] !== hasTitle || $[118] !== height || $[119] !== intl || $[120] !== isPlaceholder || $[121] !== isPreview || $[122] !== mediaShouldLoad || $[123] !== springStyle || $[124] !== title || $[125] !== toggleCard || $[126] !== viewerBottomHeight || $[127] !== webviewOpened || $[128] !== width || $[129] !== withCardBounce) {
+    t67 = !isPlaceholder && hasArticle ? /*#__PURE__*/jsxs(animated.div, {
+      className: styles.card,
+      style: {
+        height,
+        width,
+        transform: !isPreview ? springStyle.y.to(_temp2) : "translateY(80%)"
+      },
+      children: [/*#__PURE__*/jsx("button", {
+        type: "button",
+        onClick: toggleCard,
+        className: styles.dragHandle,
+        tabIndex: !current ? -1 : 0,
+        "aria-label": intl.formatMessage({
+          id: "IoMJgw",
+          defaultMessage: "Toggle article"
+        }),
+        "aria-pressed": webviewOpened,
+        ...(current ? bindGesture() : null)
+      }), /*#__PURE__*/jsxs("div", {
+        className: classNames([styles.cardInner, {
+          [styles.pulse]: withCardBounce
+        }]),
+        children: [hasCta ? /*#__PURE__*/jsxs("div", {
+          className: styles.callToAction,
+          children: [/*#__PURE__*/jsx(Arrow, {
+            strokeWidth: 1,
+            className: styles.arrow
+          }), /*#__PURE__*/jsx(Text, {
+            className: styles.ctaText,
+            ...callToAction
+          })]
+        }) : null, /*#__PURE__*/jsx("div", {
+          className: styles.articlePreview,
+          ref: articlePreviewRef,
+          children: /*#__PURE__*/jsxs("div", {
+            className: styles.articlePreviewInner,
             style: {
-              height: height,
-              width: width,
-              transform: !isPreview ? springStyle.y.to(function (value) {
-                return "translateY(".concat(value, "%");
-              }) : "translateY(".concat(100 - minimumVisibility, "%)")
+              paddingBottom: current && !isPreview ? Math.max(viewerBottomHeight, 20) : null
             },
-            children: [/*#__PURE__*/jsx("button", _objectSpread({
-              type: "button",
-              onClick: toggleCard,
-              className: styles.dragHandle,
-              tabIndex: !current ? -1 : 0,
-              "aria-label": intl.formatMessage({
-                id: "IoMJgw",
-                defaultMessage: [{
-                  "type": 0,
-                  "value": "Toggle article"
-                }]
-              }),
-              "aria-pressed": webviewOpened
-            }, current ? bindGesture() : null)), /*#__PURE__*/jsxs("div", {
-              className: classNames([styles.cardInner, _defineProperty({}, styles.pulse, withCardBounce)]),
-              children: [hasCta ? /*#__PURE__*/jsxs("div", {
-                className: styles.callToAction,
-                children: [/*#__PURE__*/jsx(Arrow, {
-                  strokeWidth: 1,
-                  className: styles.arrow
-                }), /*#__PURE__*/jsx(Text, _objectSpread({
-                  className: styles.ctaText
-                }, callToAction))]
-              }) : null, /*#__PURE__*/jsx("div", {
-                className: styles.articlePreview,
-                ref: articlePreviewRef,
-                children: /*#__PURE__*/jsxs("div", {
-                  className: styles.articlePreviewInner,
-                  style: {
-                    paddingBottom: current && !isPreview ? Math.max(viewerBottomHeight, 20) : null
-                  },
-                  children: [hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
-                    className: classNames([styles.articleTitle])
-                  }, title)) : null, hasAuthorName ? /*#__PURE__*/jsx(UrbaniaAuthor, {
-                    isSmall: true,
-                    withoutBackground: true,
-                    author: author,
-                    shouldLoad: mediaShouldLoad,
-                    className: styles.author
-                  }) : null]
-                })
-              })]
-            })]
-          }) : null
-        })
+            children: [hasTitle ? /*#__PURE__*/jsx(Heading, {
+              className: classNames([styles.articleTitle]),
+              ...title
+            }) : null, hasAuthorName ? /*#__PURE__*/jsx(UrbaniaAuthor, {
+              isSmall: true,
+              withoutBackground: true,
+              author: author,
+              shouldLoad: mediaShouldLoad,
+              className: styles.author
+            }) : null]
+          })
+        })]
       })]
-    })]
-  });
+    }) : null;
+    $[109] = articlePreviewRef;
+    $[110] = author;
+    $[111] = bindGesture;
+    $[112] = callToAction;
+    $[113] = current;
+    $[114] = hasArticle;
+    $[115] = hasAuthorName;
+    $[116] = hasCta;
+    $[117] = hasTitle;
+    $[118] = height;
+    $[119] = intl;
+    $[120] = isPlaceholder;
+    $[121] = isPreview;
+    $[122] = mediaShouldLoad;
+    $[123] = springStyle;
+    $[124] = title;
+    $[125] = toggleCard;
+    $[126] = viewerBottomHeight;
+    $[127] = webviewOpened;
+    $[128] = width;
+    $[129] = withCardBounce;
+    $[130] = t67;
+  } else {
+    t67 = $[130];
+  }
+  let t68;
+  if ($[131] !== t66 || $[132] !== t67) {
+    t68 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholderProps: t64,
+      emptyLabel: t65,
+      emptyClassName: styles.empty,
+      isEmpty: t66,
+      children: t67
+    });
+    $[131] = t66;
+    $[132] = t67;
+    $[133] = t68;
+  } else {
+    t68 = $[133];
+  }
+  let t69;
+  if ($[134] !== t63 || $[135] !== t68) {
+    t69 = /*#__PURE__*/jsx(Container, {
+      className: t63,
+      children: t68
+    });
+    $[134] = t63;
+    $[135] = t68;
+    $[136] = t69;
+  } else {
+    t69 = $[136];
+  }
+  let t70;
+  if ($[137] !== height || $[138] !== t56 || $[139] !== t62 || $[140] !== t69 || $[141] !== width) {
+    t70 = /*#__PURE__*/jsxs(Container, {
+      className: styles.content,
+      width: width,
+      height: height,
+      children: [t56, t62, t69]
+    });
+    $[137] = height;
+    $[138] = t56;
+    $[139] = t62;
+    $[140] = t69;
+    $[141] = width;
+    $[142] = t70;
+  } else {
+    t70 = $[142];
+  }
+  let t71;
+  if ($[143] !== t51 || $[144] !== t52 || $[145] !== t55 || $[146] !== t70) {
+    t71 = /*#__PURE__*/jsxs("div", {
+      className: t51,
+      "data-screen-ready": t52,
+      children: [t55, t70]
+    });
+    $[143] = t51;
+    $[144] = t52;
+    $[145] = t55;
+    $[146] = t70;
+    $[147] = t71;
+  } else {
+    t71 = $[147];
+  }
+  return t71;
 }
+function _temp2(value) {
+  return `translateY(${value}%`;
+}
+function _temp() {}
 function UrbaniaCardLoader(props) {
-  var _ref = props || {},
-    _ref$cardCallToAction = _ref.cardCallToAction,
-    cardCallToAction = _ref$cardCallToAction === void 0 ? {} : _ref$cardCallToAction;
-  return /*#__PURE__*/jsx(UrbaniaLoader, _objectSpread({
-    component: UrbaniaArticleCard,
-    callToAction: cardCallToAction
-  }, props));
+  const $ = c(7);
+  let t0;
+  if ($[0] !== props) {
+    t0 = props || {};
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const {
+    cardCallToAction: t1
+  } = t0;
+  let t2;
+  if ($[2] !== t1) {
+    t2 = t1 === undefined ? {} : t1;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const cardCallToAction = t2;
+  let t3;
+  if ($[4] !== cardCallToAction || $[5] !== props) {
+    t3 = /*#__PURE__*/jsx(UrbaniaLoader, {
+      component: UrbaniaArticleCard,
+      callToAction: cardCallToAction,
+      ...props
+    });
+    $[4] = cardCallToAction;
+    $[5] = props;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 }
 var definitionCard = {
@@ -1146,19 +2386,13 @@ var definitionCard = {
   group: {
     label: defineMessage({
       id: "oPjl8f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Urbania"
-      }]
+      defaultMessage: "Urbania"
     }),
     order: 10
   },
   title: defineMessage({
     id: "nJgzwC",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Urbania article"
-    }]
+    defaultMessage: "Urbania article"
   }),
   component: UrbaniaCardLoader,
   fields: [{
@@ -1166,30 +2400,21 @@ var definitionCard = {
     type: 'url',
     label: defineMessage({
       id: "2pO2Cj",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Url"
-      }]
+      defaultMessage: "Url"
     })
   }, {
     name: 'title',
     type: 'heading-element',
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'author',
     type: 'author-element',
     label: defineMessage({
       id: "73hxYw",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Author"
-      }]
+      defaultMessage: "Author"
     })
   }, {
     name: 'text',
@@ -1201,20 +2426,14 @@ var definitionCard = {
     },
     label: defineMessage({
       id: "4E2gbX",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
+      defaultMessage: "Text"
     })
   }, {
     name: 'background',
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'cardCallToAction',
@@ -1226,20 +2445,14 @@ var definitionCard = {
     },
     label: defineMessage({
       id: "eBFxNl",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Call to Action"
-      }]
+      defaultMessage: "Call to Action"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {