@micromag/screen-urbania-recommendation 0.3.541 → 0.3.547

package/es/index.js

@@ -547,7 +547,6 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
 };
 UrbaniaRecommendation.propTypes = propTypes;
 UrbaniaRecommendation.defaultProps = defaultProps;
-var UrbaniaRecommendation$1 = UrbaniaRecommendation;
 
 var definition = [{
   id: 'urbania-recommendation',
@@ -570,7 +569,7 @@ var definition = [{
       "value": "Urbania recommendation"
     }]
   }),
-  component: UrbaniaRecommendation$1,
+  component: UrbaniaRecommendation,
   layouts: ['top', 'bottom'],
   fields: [{
     name: 'layout',
@@ -713,4 +712,4 @@ var definition = [{
   }]
 }];
 
-export { UrbaniaRecommendation$1 as UrbaniaRecommendation, definition as default };
+export { UrbaniaRecommendation, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-recommendation",
-    "version": "0.3.541",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,12 +30,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -61,18 +60,18 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-button": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-heading": "^0.3.541",
-        "@micromag/element-layout": "^0.3.541",
-        "@micromag/element-scroll": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/element-visual": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-background": "^0.3.547",
+        "@micromag/element-button": "^0.3.547",
+        "@micromag/element-container": "^0.3.547",
+        "@micromag/element-footer": "^0.3.547",
+        "@micromag/element-header": "^0.3.547",
+        "@micromag/element-heading": "^0.3.547",
+        "@micromag/element-layout": "^0.3.547",
+        "@micromag/element-scroll": "^0.3.547",
+        "@micromag/element-text": "^0.3.547",
+        "@micromag/element-visual": "^0.3.547",
+        "@micromag/transforms": "^0.3.547",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -83,5 +82,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,721 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var Background = require('@micromag/element-background');
-var Button = require('@micromag/element-button');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Heading = require('@micromag/element-heading');
-var Layout = require('@micromag/element-layout');
-var Scroll = require('@micromag/element-scroll');
-var Text = require('@micromag/element-text');
-var Visual = require('@micromag/element-visual');
-
-var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
-
-var propTypes = {
-  layout: PropTypes.string,
-  category: core.PropTypes.headingElement,
-  visual: PropTypes.shape({
-    image: core.PropTypes.visualElement
-  }),
-  title: core.PropTypes.headingElement,
-  date: core.PropTypes.textElement,
-  location: core.PropTypes.textElement,
-  description: core.PropTypes.textElement,
-  sponsor: core.PropTypes.textElement,
-  spacing: PropTypes.number,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  background: core.PropTypes.backgroundElement,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: null,
-  category: null,
-  visual: null,
-  title: null,
-  date: null,
-  location: null,
-  description: null,
-  sponsor: null,
-  spacing: 20,
-  header: null,
-  footer: null,
-  background: null,
-  current: true,
-  active: true,
-  className: null
-};
-var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
-  var layout = _ref.layout,
-    category = _ref.category,
-    visual = _ref.visual,
-    title = _ref.title,
-    date = _ref.date,
-    location = _ref.location,
-    description = _ref.description,
-    sponsor = _ref.sponsor,
-    spacing = _ref.spacing,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    current = _ref.current,
-    active = _ref.active,
-    className = _ref.className;
-  var intl = reactIntl.useIntl();
-  var trackScreenEvent = hooks.useTrackScreenEvent();
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    playing = _usePlaybackContext.playing,
-    setPlaying = _usePlaybackContext.setPlaying,
-    muted = _usePlaybackContext.muted,
-    setMuted = _usePlaybackContext.setMuted,
-    setControls = _usePlaybackContext.setControls,
-    showControls = _usePlaybackContext.showControls,
-    hideControls = _usePlaybackContext.hideControls;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var _useViewerInteraction = contexts.useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic;
-  var animateBackground = current && !isPlaceholder && !isStatic && !isPreview && !isEdit;
-  var _useState = React.useState(animateBackground),
-    _useState2 = _slicedToArray(_useState, 2),
-    backgroundAnimationStarted = _useState2[0],
-    setBackgroundAnimationStarted = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    didAnimate = _useState4[0],
-    setDidAnimate = _useState4[1];
-  var _ref2 = visual || {},
-    _ref2$image = _ref2.image,
-    image = _ref2$image === void 0 ? null : _ref2$image; // note: image can be a video
-  var _ref3 = image || {},
-    _ref3$type = _ref3.type,
-    type = _ref3$type === void 0 ? null : _ref3$type,
-    _ref3$metadata = _ref3.metadata,
-    videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
-  var _ref4 = videoMetadata || {},
-    _ref4$width = _ref4.width,
-    videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
-    _ref4$height = _ref4.height,
-    videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
-  var hasVisual = image !== null;
-  var isVideo = type === 'video';
-  var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
-  var hasCategory = utils.isTextFilled(category);
-  var hasTitle = utils.isTextFilled(title);
-  var hasDate = utils.isTextFilled(date);
-  var hasLocation = utils.isTextFilled(location);
-  var hasDescription = utils.isTextFilled(description);
-  var hasSponsor = utils.isTextFilled(sponsor);
-  var hasTextCard = hasCategory || hasTitle || hasDate || hasLocation || hasDescription || hasSponsor;
-  var backgroundPlaying = current && (isView || isEdit);
-  var videoPlaying = current && (isView || isEdit) && playing;
-  var mediaShouldLoad = current || active;
-  var scrollingDisabled = !isView && !isEdit || !current;
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    scrolledBottom = _useState6[0],
-    setScrolledBottom = _useState6[1];
-  var _useResizeObserver = hooks.useResizeObserver(),
-    textContainerRef = _useResizeObserver.ref,
-    _useResizeObserver$en = _useResizeObserver.entry.contentRect,
-    textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
-  var _ref5 = textContainerRect || {},
-    _ref5$width = _ref5.width,
-    textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
-    _ref5$height = _ref5.height,
-    textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    visualModalTransitioning = _useState8[0],
-    setVisualModalTransitioning = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    visualModalOpened = _useState10[0],
-    setVisualModalOpened = _useState10[1];
-  var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
-  var _ref6 = background || {},
-    _ref6$text = _ref6.text,
-    backgroundText = _ref6$text === void 0 ? null : _ref6$text;
-  var _ref7 = backgroundText || {},
-    _ref7$body = _ref7.body,
-    backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
-    backgroundTextStyle = _ref7.textStyle;
-  var finalBackgroundText = React.useMemo(function () {
-    function distributeTextEqually(text) {
-      var words = text !== null ? text.split(' ') : [];
-      var numRows = 4;
-      if (words.length < numRows / 2) {
-        return Array(numRows).fill(text);
-      }
-      var halfNumWords = Math.ceil(words.length / 2);
-      var firstHalf = words.slice(0, halfNumWords).join(' ');
-      var secondHalf = words.slice(halfNumWords).join(' ');
-      return [firstHalf, secondHalf, firstHalf, secondHalf];
-    }
-    var textArray = distributeTextEqually(backgroundTextBody);
-
-    // @TODO: move container div here to avoid double map
-    var textElements = (textArray || []).map(function (line) {
-      return /*#__PURE__*/React.createElement("span", null, line);
-    });
-    return textElements;
-  }, [backgroundTextBody]);
-
-  // intro animation
-  React.useEffect(function () {
-    var id = null;
-    if (backgroundAnimationStarted) {
-      id = setTimeout(function () {
-        setBackgroundAnimationStarted(false);
-        setDidAnimate(true);
-      }, 1600);
-    }
-    return function () {
-      clearTimeout(id);
-    };
-  }, [backgroundAnimationStarted, animateBackground, setDidAnimate, setBackgroundAnimationStarted]);
-  React.useEffect(function () {
-    if (isView && !isStatic && current) {
-      setBackgroundAnimationStarted(true);
-    } else {
-      setBackgroundAnimationStarted(false);
-    }
-  }, [isView, current, setBackgroundAnimationStarted]);
-
-  // scroll events
-  var onScrolledBottom = React.useCallback(function (_ref8) {
-    var initial = _ref8.initial;
-    if (initial) {
-      trackScreenEvent('scroll', 'Screen');
-    }
-    setScrolledBottom(true);
-  }, [trackScreenEvent]);
-  var onScrolledNotBottom = React.useCallback(function () {
-    setScrolledBottom(false);
-  }, [setScrolledBottom]);
-
-  // modal
-  React.useEffect(function () {
-    var id = null;
-    if (visualModalTransitioning) {
-      id = setTimeout(function () {
-        setVisualModalTransitioning(false);
-        setVisualModalOpened(true);
-      }, 400);
-    }
-    if (!current) {
-      setVisualModalOpened(false);
-    }
-    return function () {
-      clearTimeout(id);
-    };
-  }, [visualModalTransitioning, setVisualModalTransitioning, current]);
-  var onClickVisual = React.useCallback(function () {
-    if (!visualModalOpened) {
-      setVisualModalTransitioning(true);
-    }
-    if (muted && isVideo) {
-      setMuted(false);
-    }
-  }, [setVisualModalOpened]);
-  var onCloseModal = React.useCallback(function () {
-    if (visualModalTransitioning) {
-      setVisualModalTransitioning(false);
-    }
-    setVisualModalOpened(false);
-  }, [setVisualModalOpened]);
-  React.useEffect(function () {
-    if (visualModalOpened) {
-      disableInteraction();
-    } else {
-      enableInteraction();
-    }
-  }, [current, visualModalOpened]);
-  React.useEffect(function () {
-    var keyup = function keyup(e) {
-      if (e.key === 'Escape') {
-        if (visualModalOpened) {
-          onCloseModal();
-        }
-      }
-    };
-    document.addEventListener('keyup', keyup);
-    return function () {
-      document.removeEventListener('keyup', keyup);
-    };
-  }, [visualModalOpened, onCloseModal]);
-
-  // Modal video
-
-  React.useEffect(function () {
-    if (current && !backgroundAnimationStarted) {
-      setPlaying(true);
-    }
-  }, [current, backgroundAnimationStarted]);
-  React.useEffect(function () {
-    if (!current) {
-      return function () {};
-    }
-    if (visualModalOpened && isVideo) {
-      setControls(true);
-    } else {
-      setControls(false);
-    }
-    return function () {
-      if (visualModalOpened) {
-        setControls(false);
-      }
-    };
-  }, [current, setControls, visualModalOpened, isVideo]);
-  var viewerContainer = contexts.useViewerContainer();
-  var _useActivityDetector = hooks.useActivityDetector({
-      element: viewerContainer,
-      disabled: !isView,
-      timeout: 2000
-    }),
-    activityDetected = _useActivityDetector.detected;
-  var toggleControlsVisibility = React.useCallback(function () {
-    if (activityDetected && isVideo && visualModalOpened) {
-      showControls();
-    } else {
-      hideControls();
-    }
-  }, [activityDetected, showControls, isVideo, hideControls]);
-  hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    width: width,
-    height: height,
-    disabled: backgroundAnimationStarted || scrollingDisabled,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    verticalAlign: "middle",
-    withShadow: !visualModalOpened,
-    withArrow: !visualModalOpened
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    width: width
-    // height={height}
-    ,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2,
-      minHeight: height // probably not the best
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    key: "header",
-    style: {
-      paddingBottom: spacing
-    },
-    className: classNames([styles.headerContainer])
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-cta-top"
-  }) : null, visualModalOpened ? /*#__PURE__*/React.createElement(Button, {
-    className: styles.close,
-    onClick: onCloseModal
-  }, /*#__PURE__*/React.createElement(components.Close, {
-    className: styles.closeIcon
-  })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
-    className: classNames([styles.textCard, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.visualBottom, layout === 'bottom'), styles.appear, backgroundAnimationStarted), styles.modalOpened, visualModalTransitioning || visualModalOpened), styles.hidden, !current && isView && !isPreview)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
-  }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "visual",
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderImage, {
-      className: styles.visualPlaceholder
-    }),
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "JzSBzL",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Visual"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyVisual]),
-    isEmpty: !hasVisual
-  }, hasVisual ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
-    style: visualModalTransitioning || visualModalOpened ? {
-      width: width,
-      height: height
-    } : {
-      width: textContainerWidth,
-      height: 'auto'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
-    onClick: onClickVisual,
-    disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
-    focusable: current && !isPreview && !visualModalOpened,
-    "aria-label": intl.formatMessage({
-      id: "XHO5Ua",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Expand visual"
-      }]
-    }),
-    "aria-pressed": visualModalOpened,
-    style: {
-      transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
-    }
-  }, isVideo ? /*#__PURE__*/React.createElement(Visual, {
-    media: image,
-    mediaRef: mediaRef,
-    width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
-    ,
-    height: visualModalTransitioning || visualModalOpened ? height : 250,
-    resolution: resolution,
-    objectFit: {
-      fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
-    },
-    shouldLoad: mediaShouldLoad,
-    muted: muted || !visualModalOpened,
-    withoutVideo: isPreview,
-    playing: videoPlaying
-  }) : /*#__PURE__*/React.createElement(Visual, {
-    media: image,
-    width: visualModalOpened ? width : textContainerWidth,
-    resolution: resolution,
-    active: active,
-    shouldLoad: mediaShouldLoad
-  }), visualModalClosed ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.iconContainer, _defineProperty({}, styles.visualBottom, layout === 'bottom')])
-  }, isVideo ? /*#__PURE__*/React.createElement(components.MuteIcon, {
-    color: "#000",
-    className: styles.icon
-  }) : /*#__PURE__*/React.createElement(components.FullscreenIcon, {
-    color: "#000",
-    className: styles.icon
-  })) : null)) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "sponsor",
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderText, {
-      className: styles.sponsorPlaceholder
-    })
-  }, hasSponsor ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: classNames([styles.sponsor, _defineProperty({}, styles.hasVisual, hasVisual)])
-  }, sponsor)) : null)), /*#__PURE__*/React.createElement("div", {
-    ref: textContainerRef,
-    className: styles.text
-  }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "category",
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderTitle, {
-      className: styles.categoryPlaceholder
-    }),
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "I5+AHN",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Category"
-      }]
-    }),
-    emptyClassName: styles.emptyCategory,
-    isEmpty: !hasCategory
-  }, hasCategory ? /*#__PURE__*/React.createElement("div", {
-    className: styles.categoryContainer,
-    style: {
-      width: textContainerHeight
-    }
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.category
-  }, category))) : null), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.textContent, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
-  }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "2c1WFV",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: styles.emptyText,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement("div", {
-    className: styles.titleContainer
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.title
-  }, title))) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "date",
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderText, {
-      className: styles.datePlaceholder
-    })
-  }, hasDate ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.date
-  }, date)) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "location",
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderText, {
-      className: styles.locationPlaceholder
-    })
-  }, hasLocation ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.location
-  }, location)) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "description",
-    placeholder: /*#__PURE__*/React.createElement(components.PlaceholderText, {
-      className: styles.descriptionPlaceholder
-    }),
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "EQdIAR",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    }),
-    emptyClassName: styles.emptyText,
-    isEmpty: !hasDescription
-  }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.description
-  }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-cta-bottom"
-  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    key: "footer",
-    className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom && !visualModalOpened)]),
-    style: {
-      paddingTop: spacing,
-      paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
-      paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying && !visualModalOpened,
-    muted: muted || visualModalOpened,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }), backgroundText !== null && finalBackgroundText.length > 0 ? /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.backgroundTextContainer
-  }, (finalBackgroundText || []).map(function (line, i) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: "reco-background-text-".concat(i + 1),
-      className: classNames([styles.backgroundText], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.hidden, !current && isView && !isPreview), styles.didAnimate, didAnimate), styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0)),
-      style: _objectSpread({
-        animationDelay: "".concat(i * 100, "ms")
-      }, utils.getStyleFromText(backgroundTextStyle))
-    }, line);
-  })) : null) : null);
-};
-UrbaniaRecommendation.propTypes = propTypes;
-UrbaniaRecommendation.defaultProps = defaultProps;
-var UrbaniaRecommendation$1 = UrbaniaRecommendation;
-
-var definition = [{
-  id: 'urbania-recommendation',
-  type: 'screen',
-  namespaces: ['urbania', 'bayard'],
-  group: {
-    label: reactIntl.defineMessage({
-      id: "oPjl8f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Urbania"
-      }]
-    }),
-    order: 10
-  },
-  title: reactIntl.defineMessage({
-    id: "sUP5BO",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Urbania recommendation"
-    }]
-  }),
-  component: UrbaniaRecommendation$1,
-  layouts: ['top', 'bottom'],
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'sponsor',
-    type: 'text-element',
-    label: reactIntl.defineMessage({
-      id: "WY14Zu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Sponsor"
-      }]
-    })
-  }, {
-    name: 'visual',
-    type: 'fields',
-    isList: true,
-    label: reactIntl.defineMessage({
-      id: "HwqzVR",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Visual"
-      }]
-    }),
-    fields: [{
-      name: 'image',
-      type: 'visual',
-      label: reactIntl.defineMessage({
-        id: "xT/onn",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Image"
-        }]
-      })
-    }]
-  }, {
-    name: 'category',
-    type: 'heading-element',
-    label: reactIntl.defineMessage({
-      id: "4grcMU",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Category"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'date',
-    type: 'text-element',
-    label: reactIntl.defineMessage({
-      id: "yEG9zh",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Date"
-      }]
-    })
-  }, {
-    name: 'location',
-    type: 'text-element',
-    label: reactIntl.defineMessage({
-      id: "zLxBdl",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Location"
-      }]
-    })
-  }, {
-    name: 'description',
-    type: 'text-element',
-    label: reactIntl.defineMessage({
-      id: "Y7bs1v",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background-recommendation',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}];
-
-exports.UrbaniaRecommendation = UrbaniaRecommendation$1;
-exports.default = definition;