pageflow 15.2.2 → 15.6.1

data/entry_types/scrolled/package/contentElements-frontend.css

@@ -0,0 +1 @@
+.Heading-module_root__33TFw{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;margin-top:.2em;margin-bottom:0;padding-top:.3em}@media (min-width:951px){.Heading-module_right__1TJKF{text-align:right}}.Heading-module_center__38lDY{text-align:center}@media (orientation:landscape){.Heading-module_first__1PMJX{padding-top:25%}}.BeforeAfter-module_sliderStart__2C5cN{background-color:#fff;position:absolute;z-index:1}.BeforeAfter-module_container__2Lm06{height:100%;--frame1pos:-8;--frame2pos:16;--frame3pos:-32;--frame4pos:32;--frame1px:calc(var(--frame1pos)*1px);--frame2px:calc(var(--frame2pos)*1px);--frame3px:calc(var(--frame3pos)*1px);--frame4px:calc(var(--frame4pos)*1px)}.BeforeAfter-module_container__2Lm06>div{height:100%!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe>div>div:nth-child(3){-webkit-animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97);animation:BeforeAfter-module_SliderLeftRightShake__2mcn5 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2){-webkit-animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97);animation:BeforeAfter-module_BeforeImageLeftRightShake__38m9V 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div{transition:opacity .1s ease-out .3s!important}.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:first-child{-webkit-animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97);animation:BeforeAfter-module_AfterImageLeftRightShake__3WMf1 1.5s cubic-bezier(.36,.07,.19,.97)}.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div{transition:opacity .1s ease-out .3s!important}@-webkit-keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V{0%,to{clip:rect(auto,var(--initial-rect-width),auto,auto)}10%,90%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame1px)),auto,auto)}20%,80%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame2px)),auto,auto)}30%,50%,70%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame3px)),auto,auto)}40%,60%{clip:rect(auto,calc(var(--initial-rect-width) + var(--frame4px)),auto,auto)}}@-webkit-keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1{0%,to{clip:rect(auto,auto,auto,var(--initial-rect-width))}10%,90%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame1px)))}20%,80%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame2px)))}30%,50%,70%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame3px)))}40%,60%{clip:rect(auto,auto,auto,calc(var(--initial-rect-width) + var(--frame4px)))}}@-webkit-keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5{0%,to{margin-left:0}10%,90%{margin-left:var(--frame1px)}20%,80%{margin-left:var(--frame2px)}30%,50%,70%{margin-left:var(--frame3px)}40%,60%{margin-left:var(--frame4px)}}.SoundDisclaimer-module_soundDisclaimer__31hWh{display:grid;border:1px solid;border-radius:4px;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SoundDisclaimer-module_unmute__1V4Ab,.SoundDisclaimer-module_unmuted__22CJ5{grid-column:1;grid-row:1;display:flex;align-items:center;transition-property:opacity,visibility;transition-duration:.09s;transition-timing-function:ease-out;opacity:0;visibility:hidden;padding:0 15px}.SoundDisclaimer-module_unmute__1V4Ab{position:relative;border:0;background-color:transparent;font:inherit;color:currentColor;text-align:initial;width:100%;z-index:1;cursor:pointer}.SoundDisclaimer-module_active__11_kc{opacity:1;visibility:visible;transition-delay:.09s;transition-duration:.21s;transition-timing-function:ease-in}.SoundDisclaimer-module_soundDisclaimer__31hWh svg{flex:0 0 25px;fill:currentColor;margin-right:15px}.TextBlock-module_text__21Hk4 h2,.TextBlock-module_text__21Hk4 li,.TextBlock-module_text__21Hk4 p{margin:1em 0 0}.TextBlock-module_text__21Hk4 h2{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word}.TextBlock-module_text__21Hk4 a{color:currentColor;word-wrap:break-word}.TextBlock-module_text__21Hk4 ol,.TextBlock-module_text__21Hk4 ul{margin:0;padding-left:20px;clear:both}.TextBlock-module_text__21Hk4 blockquote{padding:.5em 1em .5em 2em;margin:1em 0 0 .5em;position:relative;overflow:hidden}.TextBlock-module_text__21Hk4 blockquote:before{content:"\201C";font-size:3em;font-weight:700;color:#aaa;position:absolute;top:0;left:0;line-height:1em}.VideoEmbed-module_VideoEmbed__3BUjc{background-color:#000;color:#fff}.VideoEmbed-module_embedPlayer__54NKG{position:absolute;top:0;left:0;bottom:0;right:0}.ExternalLink-module_hidden__3jer0{display:none}.ExternalLink-module_link_item__Blypv{width:45%;vertical-align:top;margin:2% auto;background-color:#fff;color:#000;text-decoration:none;transition:transform .3s}.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN{background-color:#222;color:#fff}.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:29%}.ExternalLink-module_link_item__Blypv:hover{transform:scale(1.05)}.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0{text-decoration:underline}.ExternalLink-module_link_thumbnail__2_BHq{width:auto;background-repeat:no-repeat;background-size:cover;padding-top:56.25%;position:relative}.ExternalLink-module_link_details__lRhKU{margin:20px}.ExternalLink-module_link_details__lRhKU>.ExternalLink-module_link_title__FZJ-0{font-size:1.2em;font-weight:700;margin-bottom:20px}.ExternalLink-module_link_details__lRhKU>p{width:100%;white-space:normal;line-height:1.3em}.ExternalLink-module_tooltip__18MpC{position:absolute;left:50%;top:80px;width:180px;padding:5px;margin-left:-95px;background-color:#444;color:#fff;border:1px solid #fff;opacity:.9;font-size:13px;text-align:center;white-space:normal}.ExternalLink-module_tooltip__18MpC>span{display:block;color:#fff;text-decoration:underline}@media only screen and (max-width:600px){.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:45%}}@media only screen and (max-width:350px){.ExternalLink-module_link_item__Blypv,.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ{width:85%}}.ExternalLinkList-module_ext_links_container__16IIo{display:flex;flex-wrap:wrap;border-collapse:separate;border-spacing:10px;min-height:240px;width:auto;height:auto;pointer-events:auto;position:relative;transition:opacity .5s;transition-timing-function:cubic-bezier(.1,.57,.1,1);transition-duration:0ms}.DataWrapperChart-module_container__2eZ15{min-height:200px;padding:20px 5%}.DataWrapperChart-module_container__2eZ15>iframe{width:100%;height:100%;position:relative;top:0;border:0}

data/entry_types/scrolled/package/contentElements-frontend.js

@@ -1,7 +1,9 @@
-import { Text, frontend, useFile, useEditorSelection, useOnScreen, Image, InlineCaption, Video, useMediaSettings, useI18n } from 'pageflow-scrolled/frontend';
-import React, { useRef, useState, useEffect } from 'react';
+import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, ViewportDependentPillarBoxes, useContentElementLifecycle, Figure, Image, usePlayerState, useAudioFocus, MediaInteractionTracking, VideoPlayerControls, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useDarkBackground, textColorForBackgroundColor, Panorama } from 'pageflow-scrolled/frontend';
+import React, { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import ReactCompareImage from 'react-compare-image';
+import Measure from 'react-measure';
+import { media } from 'pageflow/frontend';
 import ReactPlayer from 'react-player';
 
 function _defineProperty(obj, key, value) {
@@ -19,60 +21,89 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
+var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","center":"Heading-module_center__38lDY","first":"Heading-module_first__1PMJX"};
 
-  if (!css || typeof document === 'undefined') { return; }
+function Heading(_ref) {
+  var configuration = _ref.configuration,
+      sectionProps = _ref.sectionProps;
+  var level = configuration.level || sectionProps.sectionIndex;
+  var firstSectionInEntry = level === 0;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
 
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
+  var legacyValue = configuration.children;
+  return (
+    /*#__PURE__*/
+    React.createElement("h1", {
+      className: classNames(styles.root, _defineProperty({}, styles.first, firstSectionInEntry), _defineProperty({}, styles[sectionProps.layout], configuration.position === 'wide'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
+    },
+    /*#__PURE__*/
+    React.createElement(Text, {
+      scaleCategory: firstSectionInEntry ? 'h1' : 'h2',
+      inline: true
+    },
+    /*#__PURE__*/
+    React.createElement(EditableInlineText, {
+      value: configuration.value,
+      defaultValue: legacyValue,
+      placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
+      onChange: function onChange(value) {
+        return updateConfiguration({
+          value: value
+        });
+      }
+    })))
+  );
+}
 
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
+frontend.contentElementTypes.register('heading', {
+  component: Heading
+});
 
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
   }
+
+  return keys;
 }
 
-var css = ".Heading-module_root__33TFw {\n  margin-top: 0.2em;\n  margin-bottom: 0.5em;\n  padding-top: 0.3em;\n}\n\n@media (orientation: landscape) {\n  .Heading-module_first__1PMJX {\n    padding-top: 25%;\n  }\n}\n";
-var styles = {"root":"Heading-module_root__33TFw","first":"Heading-module_first__1PMJX"};
-styleInject(css);
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
 
-function Heading(_ref) {
-  var configuration = _ref.configuration;
-  return React.createElement("h1", {
-    className: classNames(styles.root, _defineProperty({}, styles.first, configuration.first))
-  }, React.createElement(Text, {
-    scaleCategory: configuration.first ? 'h1' : 'h2',
-    inline: true
-  }, configuration.children));
-}
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
 
-frontend.contentElementTypes.register('heading', {
-  component: Heading
-});
+  return target;
+}
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
-    return;
-  }
-
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
   var _arr = [];
   var _n = true;
   var _d = false;
@@ -98,25 +129,45 @@ function _iterableToArrayLimit(arr, i) {
   return _arr;
 }
 
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
 function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
 function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var css$1 = ".BeforeAfter-module_sliderStart__2C5cN {\n  background-color: white;\n  position: absolute;\n  z-index: 1;\n}\n\n.BeforeAfter-module_container__2Lm06 {\n  /* slider default position: 50%, spacing around labels in\n   react-compare-image: 5% each side, so default label max width\n   should be 40%. This is only a fallback. We should receive widths\n   from BeforeAfter.js */\n  --default-label-max-width: 40%;\n  /* label padding in react-compare-image is set to 20px left and right,\n   so we need to subtract the sum from max width */\n  --label-padding: 40px;\n  --wiggle-animation: 1.5s cubic-bezier(.36,.07,.19,.97) both;\n  --frame1pos: -8;\n  --frame2pos: 16;\n  --frame3pos: -32;\n  --frame4pos: 32;\n  --frame1px: calc(var(--frame1pos) * 1px);\n  --frame2px: calc(var(--frame2pos) * 1px);\n  --frame3px: calc(var(--frame3pos) * 1px);\n  --frame4px: calc(var(--frame4pos) * 1px);\n  --frame1percent: calc(var(--frame1pos) * 2.5%);\n  --frame2percent: calc(var(--frame2pos) * 2.5%);\n  --frame3percent: calc(var(--frame3pos) * 2.5%);\n  --frame4percent: calc(var(--frame4pos) * 2.5%);\n  /* in addition to the above variables, we receive --initial-rect-width\n   from BeforeAfter.js, which has no sensible default value */\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   slider */\n.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div div:nth-child(3) {\n  animation: BeforeAfter-module_SliderLeftRightShake__2mcn5 var(--wiggle-animation);\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   before image */\n.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(2) {\n  animation: BeforeAfter-module_BeforeImageLeftRightShake__38m9V var(--wiggle-animation);\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   before label */\n.BeforeAfter-module_container__2Lm06 div div:nth-child(4) div {\n  max-width: calc(var(--before-label-max-width, var(--default-label-max-width)) -\n                  var(--label-padding));\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   after image */\n.BeforeAfter-module_container__2Lm06.BeforeAfter-module_wiggle__3nVSe div img:nth-child(1) {\n  animation: BeforeAfter-module_AfterImageLeftRightShake__3WMf1 var(--wiggle-animation);\n}\n\n/* With react-compare-image 2.0.4 (commit 7410d14), this selects the\n   after label */\n.BeforeAfter-module_container__2Lm06 div div:nth-child(5) div {\n  max-width: calc(var(--after-label-max-width, var(--default-label-max-width)) -\n                  var(--label-padding));\n}\n\n@keyframes BeforeAfter-module_BeforeImageLeftRightShake__38m9V {\n  10%, 90% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame1px)), auto, auto);\n  }\n\n  20%, 80% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame2px)), auto, auto);\n  }\n\n  30%, 50%, 70% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame3px)), auto, auto);\n  }\n\n  40%, 60% {\n    clip: rect(auto, calc(var(--initial-rect-width) + var(--frame4px)), auto, auto);\n  }\n}\n\n@keyframes BeforeAfter-module_AfterImageLeftRightShake__3WMf1 {\n  10%, 90% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame1px)));\n  }\n\n  20%, 80% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame2px)));\n  }\n\n  30%, 50%, 70% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame3px)));\n  }\n\n  40%, 60% {\n    clip: rect(auto, auto, auto, calc(var(--initial-rect-width) + var(--frame4px)));\n  }\n}\n\n@keyframes BeforeAfter-module_SliderLeftRightShake__2mcn5 {\n  10%, 90% {\n    transform: translate3d(var(--frame1percent), 0, 0);\n  }\n\n  20%, 80% {\n    transform: translate3d(var(--frame2percent), 0, 0);\n  }\n\n  30%, 50%, 70% {\n    transform: translate3d(var(--frame3percent), 0, 0);\n  }\n\n  40%, 60% {\n    transform: translate3d(var(--frame4percent), 0, 0);\n  }\n}\n";
 var styles$1 = {"sliderStart":"BeforeAfter-module_sliderStart__2C5cN","container":"BeforeAfter-module_container__2Lm06","wiggle":"BeforeAfter-module_wiggle__3nVSe","SliderLeftRightShake":"BeforeAfter-module_SliderLeftRightShake__2mcn5","BeforeImageLeftRightShake":"BeforeAfter-module_BeforeImageLeftRightShake__38m9V","AfterImageLeftRightShake":"BeforeAfter-module_AfterImageLeftRightShake__3WMf1"};
-styleInject(css$1);
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var placeholderForBeforeImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiMzZDVhODAiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
+var placeholderForAfterImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiM5OGMxZDkiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
+var placeholderFile = {
+  width: 640,
+  height: 403
+};
 function BeforeAfter(_ref) {
-  var _cx;
-
-  var state = _ref.state,
+  var isActive = _ref.isActive,
+      load = _ref.load,
+      position = _ref.position,
       before_id = _ref.before_id,
       before_label = _ref.before_label,
       after_id = _ref.after_id,
@@ -124,34 +175,25 @@ function BeforeAfter(_ref) {
       initial_slider_position = _ref.initial_slider_position,
       slider = _ref.slider,
       slider_color = _ref.slider_color,
-      slider_handle = _ref.slider_handle,
-      contentElementId = _ref.contentElementId;
-  var beforeAfterRef = useRef();
-  var current = beforeAfterRef.current;
+      slider_handle = _ref.slider_handle;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      wiggled = _useState2[0],
-      setWiggled = _useState2[1];
+      wiggle = _useState2[0],
+      setWiggle = _useState2[1];
 
   var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      wiggle = _useState4[0],
-      setWiggle = _useState4[1];
+      moved = _useState4[0],
+      setMoved = _useState4[1];
 
   useEffect(function () {
-    var node = current;
-
-    if (node) {
-      // Only wiggle once per element, when it is active for the first
-      // time
-      var shouldWiggle = !wiggled && state === 'active';
-      setWiggle(shouldWiggle); // If wiggle was just set, mark this element as one that already
-      // wiggled
-
-      !wiggled && setWiggled(shouldWiggle);
-    }
-  }, [state, current]);
+    // Only wiggle once per element, when it is active for the first
+    // time
+    setWiggle(function (wiggle) {
+      return wiggle || isActive;
+    });
+  }, [isActive]);
   var beforeImage = useFile({
     collectionName: 'imageFiles',
     permaId: before_id
@@ -161,11 +203,8 @@ function BeforeAfter(_ref) {
     permaId: after_id
   });
 
-  var _useEditorSelection = useEditorSelection({
-    id: contentElementId,
-    type: 'contentElement'
-  }),
-      isSelected = _useEditorSelection.isSelected;
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected;
 
   var beforeImageUrl = beforeImage && beforeImage.urls.large;
   var beforeImageAlt = beforeImage && beforeImage.configuration.alt;
@@ -176,64 +215,88 @@ function BeforeAfter(_ref) {
   // react-compare-image needs
 
   if (!slider) {
-    opts = _objectSpread({}, opts, {
+    opts = _objectSpread2(_objectSpread2({}, opts), {}, {
       sliderLineWidth: 0,
-      handle: React.createElement(React.Fragment, null)
+      handle:
+      /*#__PURE__*/
+      React.createElement(React.Fragment, null)
     });
   }
 
   if (slider) {
     if (!slider_handle) {
-      opts = _objectSpread({}, opts, {
-        handle: React.createElement(React.Fragment, null)
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
+        handle:
+        /*#__PURE__*/
+        React.createElement(React.Fragment, null)
       });
     }
 
     if (slider_color) {
-      opts = _objectSpread({}, opts, {
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
         sliderLineColor: slider_color
       });
     }
   }
 
-  if (current) {
-    // Size labels according to initial slider position. Unit is %,
-    // left and right spacing is 5%, so we subtract 10. 90 = 100 - 10.
-    var beforeLabelWidth = initial_slider_position - 10;
-    var afterLabelWidth = 90 - initial_slider_position; // Compute initial slider coordinate and pass it as a CSS
-    // variable, so that before/after images can wiggle together with
-    // the slider
-
-    var containerWidth = current.getBoundingClientRect().width;
-    var initialRectWidth = initialSliderPos * containerWidth;
-    current.style.setProperty('--before-label-max-width', beforeLabelWidth + '%');
-    current.style.setProperty('--after-label-max-width', afterLabelWidth + '%');
-    current.style.setProperty('--initial-rect-width', initialRectWidth + 'px');
-  }
-
-  return React.createElement("div", {
-    ref: beforeAfterRef,
-    className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle), _cx), styles$1.container)
-  }, React.createElement(InitialSliderPositionIndicator, {
-    parentSelected: isSelected,
-    position: initial_slider_position
-  }), React.createElement(ReactCompareImage, Object.assign({
-    leftImage: beforeImageUrl,
-    rightImage: afterImageUrl,
-    leftImageLabel: before_label,
-    rightImageLabel: after_label,
-    leftImageAlt: beforeImageAlt,
-    rightImageAlt: afterImageAlt,
-    sliderPositionPercentage: initialSliderPos,
-    onSliderPositionChange: function onSliderPositionChange() {
-      return setWiggle(false);
+  return (
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      file: beforeImage || afterImage || placeholderFile,
+      position: position
+    },
+    /*#__PURE__*/
+    React.createElement(Measure, {
+      bounds: true
+    }, function (_ref2) {
+      var _cx;
+
+      var measureRef = _ref2.measureRef,
+          contentRect = _ref2.contentRect;
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          ref: measureRef,
+          style: {
+            '--initial-rect-width': contentRect.bounds.width * initialSliderPos + 'px'
+          },
+          className: classNames((_cx = {}, _defineProperty(_cx, styles$1.selected, isSelected), _defineProperty(_cx, styles$1.wiggle, wiggle && !moved), _cx), styles$1.container)
+        },
+        /*#__PURE__*/
+        React.createElement(InitialSliderPositionIndicator, {
+          parentSelected: isSelected,
+          position: initial_slider_position
+        }), renderCompareImage())
+      );
+    }))
+  );
+
+  function renderCompareImage() {
+    if (!load) {
+      return null;
     }
-  }, opts)));
+
+    return (
+      /*#__PURE__*/
+      React.createElement(ReactCompareImage, Object.assign({
+        leftImage: beforeImage ? beforeImageUrl : placeholderForBeforeImage,
+        rightImage: afterImage ? afterImageUrl : placeholderForAfterImage,
+        leftImageLabel: before_label,
+        rightImageLabel: after_label,
+        leftImageAlt: beforeImageAlt,
+        rightImageAlt: afterImageAlt,
+        sliderPositionPercentage: initialSliderPos,
+        onSliderPositionChange: function onSliderPositionChange() {
+          return setMoved(true);
+        }
+      }, opts))
+    );
+  }
 }
 
-function InitialSliderPositionIndicator(_ref2) {
-  var parentSelected = _ref2.parentSelected,
-      position = _ref2.position;
+function InitialSliderPositionIndicator(_ref3) {
+  var parentSelected = _ref3.parentSelected,
+      position = _ref3.position;
   var indicatorWidth = '2px';
   var indicatorStyles = {
     left: "calc(".concat(position, "% - ").concat(indicatorWidth, "/2)"),
@@ -244,207 +307,611 @@ function InitialSliderPositionIndicator(_ref2) {
   }; // In case this element is selected, and its initial slider position
   // is not in the middle, we show InitialSliderPositionIndicator
 
-  return parentSelected && position !== 50 ? React.createElement("div", {
+  return parentSelected && position !== 50 ?
+  /*#__PURE__*/
+  React.createElement("div", {
     className: styles$1.sliderStart,
     style: indicatorStyles
   }) : '';
 }
 
-var css$2 = ".InlineBeforeAfter-module_root__1f5oG {\n  position: relative;\n  margin: 0 auto;\n}\n";
-var styles$2 = {"root":"InlineBeforeAfter-module_root__1f5oG"};
-styleInject(css$2);
-
 function InlineBeforeAfter(props) {
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
-  return React.createElement("div", {
-    ref: ref,
-    className: styles$2.root
-  }, React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
-    state: onScreen ? 'active' : 'inactive',
-    contentElementId: props.contentElementId
-  })));
+  var _useContentElementLif = useContentElementLifecycle(),
+      isActive = _useContentElementLif.isActive,
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  return (
+    /*#__PURE__*/
+    React.createElement(BeforeAfter, Object.assign({}, props.configuration, {
+      load: shouldLoad,
+      isActive: isActive
+    }))
+  );
 }
 
 frontend.contentElementTypes.register('inlineBeforeAfter', {
-  component: InlineBeforeAfter
+  component: InlineBeforeAfter,
+  lifecycle: true
 });
 
-var css$3 = ".InlineImage-module_root__3edeH {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_container__30JBC {\n  position: relative;\n  margin-top: 1em;\n}\n\n.InlineImage-module_spacer__2yTJT {\n  padding-top: 75%;\n}\n\n.InlineImage-module_inner__3WcPa {\n  border: solid 2px #fff;\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
-var styles$3 = {"root":"InlineImage-module_root__3edeH","container":"InlineImage-module_container__30JBC","spacer":"InlineImage-module_spacer__2yTJT","inner":"InlineImage-module_inner__3WcPa"};
-styleInject(css$3);
-
 function InlineImage(_ref) {
   var configuration = _ref.configuration;
-  return React.createElement("div", {
-    className: classNames(styles$3.root)
-  }, React.createElement("div", {
-    className: styles$3.container
-  }, React.createElement("div", {
-    className: styles$3.spacer
-  }, React.createElement("div", {
-    className: styles$3.inner
-  }, React.createElement(Image, configuration)))), React.createElement(InlineCaption, {
-    text: configuration.caption
-  }));
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var imageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.id
+  });
+  return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      file: imageFile,
+      aspectRatio: imageFile ? undefined : 0.75,
+      position: configuration.position,
+      opaque: !!configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(Image, {
+      imageFile: imageFile,
+      load: shouldLoad,
+      structuredData: true,
+      variant: configuration.position === 'full' ? 'large' : 'medium'
+    })))
+  );
 }
 
 frontend.contentElementTypes.register('inlineImage', {
-  component: InlineImage
+  component: InlineImage,
+  lifecycle: true
 });
 
-var css$4 = ".InlineVideo-module_root__26uiY {\n  position: relative;\n  max-height: 98vh;\n}\n\n.InlineVideo-module_inner__3n7y4 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n\n/* Timeline in native video controls is hidden in Storybook to prevent\n   Percy from detecting different loading progress as visual\n   change. See .storybook/preview-head.html file. */\n";
-var styles$4 = {"root":"InlineVideo-module_root__26uiY","inner":"InlineVideo-module_inner__3n7y4"};
-styleInject(css$4);
-
 function InlineVideo(_ref) {
-  var configuration = _ref.configuration;
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '-50% 0px -50% 0px');
-  return React.createElement("div", {
-    ref: ref,
-    className: classNames(styles$4.root)
-  }, React.createElement("div", {
-    style: {
-      paddingTop: configuration.wideFormat ? '41.15%' : '56.25%'
+  var contentElementId = _ref.contentElementId,
+      sectionProps = _ref.sectionProps,
+      configuration = _ref.configuration;
+  var videoFile = useFile({
+    collectionName: 'videoFiles',
+    permaId: configuration.id
+  });
+  var posterImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.posterId
+  });
+
+  var _usePlayerState = usePlayerState(),
+      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
+      playerState = _usePlayerState2[0],
+      playerActions = _usePlayerState2[1];
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var _useContentElementLif = useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (configuration.autoplay) {
+        playerActions.play();
+      }
+    },
+    onDeactivate: function onDeactivate() {
+      playerActions.fadeOutAndPause(400);
     }
-  }, React.createElement("div", {
-    className: styles$4.inner
-  }, React.createElement(Video, Object.assign({}, configuration, {
-    state: onScreen ? 'active' : 'inactive',
-    interactive: true
-  })))));
+  }),
+      shouldLoad = _useContentElementLif.shouldLoad,
+      shouldPrepare = _useContentElementLif.shouldPrepare;
+
+  useAudioFocus({
+    key: contentElementId,
+    request: playerState.shouldPlay,
+    onLost: function onLost() {
+      playerActions.fadeOutAndPause(400);
+    }
+  });
+
+  var onPlayerClick = function onPlayerClick() {
+    if (isEditable && !isSelected) {
+      return;
+    }
+
+    if (!playerState.shouldPlay || media.muted) {
+      playerActions.playBlessed();
+    } else {
+      playerActions.pause();
+    }
+  };
+
+  return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(MediaInteractionTracking, {
+      playerState: playerState,
+      playerActions: playerActions
+    },
+    /*#__PURE__*/
+    React.createElement(VideoPlayerControls, {
+      videoFile: videoFile,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      playerState: playerState,
+      playerActions: playerActions,
+      configuration: configuration,
+      sectionProps: sectionProps,
+      onPlayerClick: onPlayerClick
+    },
+    /*#__PURE__*/
+    React.createElement(VideoPlayer, {
+      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
+      position: configuration.position,
+      controls: configuration.controls,
+      playerState: playerState,
+      playerActions: playerActions,
+      videoFile: videoFile,
+      posterImageFile: posterImageFile,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      quality: 'high',
+      playsInline: true,
+      atmoDuringPlayback: configuration.atmoDuringPlayback
+    }))))
+  );
 }
 
 frontend.contentElementTypes.register('inlineVideo', {
-  component: InlineVideo
+  component: InlineVideo,
+  lifecycle: true
 });
 
-var css$5 = ".SoundDisclaimer-module_soundDisclaimer__31hWh {\n  text-align: center;\n  border: 1px solid white;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: inherit;\n}\n\n.SoundDisclaimer-module_soundDisclaimer__31hWh:hover {\n  background: rgba(255, 255, 255, 0.25);\n}";
-var styles$5 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh"};
-styleInject(css$5);
+function InlineAudio(_ref) {
+  var contentElementId = _ref.contentElementId,
+      sectionProps = _ref.sectionProps,
+      configuration = _ref.configuration;
+  var audioFile = useFile({
+    collectionName: 'audioFiles',
+    permaId: configuration.id
+  });
+  var posterImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.posterId
+  });
 
-function SoundDisclaimer() {
-  var mediaSettings = useMediaSettings();
+  var _usePlayerState = usePlayerState(),
+      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
+      playerState = _usePlayerState2[0],
+      playerActions = _usePlayerState2[1];
 
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
 
-  return React.createElement("div", {
-    className: classNames(styles$5.soundDisclaimer),
-    onClick: function onClick() {
-      return mediaSettings.setMuted(false);
+  var _useContentElementLif = useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (configuration.autoplay && !media.muted) {
+        playerActions.play();
+      }
+    },
+    onDeactivate: function onDeactivate() {
+      playerActions.fadeOutAndPause(400);
+    }
+  }),
+      shouldLoad = _useContentElementLif.shouldLoad,
+      shouldPrepare = _useContentElementLif.shouldPrepare;
+
+  useAudioFocus({
+    key: contentElementId,
+    request: playerState.shouldPlay,
+    onLost: function onLost() {
+      playerActions.fadeOutAndPause(400);
     }
-  }, React.createElement("p", {
-    dangerouslySetInnerHTML: {
-      __html: t('pageflow_scrolled.public.sound_disclaimer.help_text')
+  });
+
+  var onPlayerClick = function onPlayerClick() {
+    if (isEditable && !isSelected) {
+      return;
+    }
+
+    if (playerState.shouldPlay) {
+      playerActions.pause();
+    } else {
+      playerActions.playBlessed();
+    }
+  };
+
+  return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(AudioPlayerControls, {
+      audioFile: audioFile,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      playerState: playerState,
+      playerActions: playerActions,
+      standAlone: !posterImageFile,
+      configuration: configuration,
+      sectionProps: sectionProps,
+      onPlayerClick: onPlayerClick
+    },
+    /*#__PURE__*/
+    React.createElement(AudioPlayer, {
+      load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
+      position: configuration.position,
+      controls: configuration.controls,
+      playerState: playerState,
+      playerActions: playerActions,
+      audioFile: audioFile,
+      posterImageFile: posterImageFile,
+      defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
+      quality: 'high',
+      playsInline: true,
+      atmoDuringPlayback: configuration.atmoDuringPlayback
+    })))
+  );
+}
+
+frontend.contentElementTypes.register('inlineAudio', {
+  component: InlineAudio,
+  lifecycle: true
+});
+
+var styles$2 = {"soundDisclaimer":"SoundDisclaimer-module_soundDisclaimer__31hWh","unmute":"SoundDisclaimer-module_unmute__1V4Ab","unmuted":"SoundDisclaimer-module_unmuted__22CJ5","active":"SoundDisclaimer-module_active__11_kc"};
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
     }
+  }
+
+  return target;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+var MutedIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends({
+    "aria-hidden": "true",
+    "data-prefix": "fas",
+    "data-icon": "volume-mute",
+    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, props), React.createElement("path", {
+    d: "M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zM461.64 256l45.64-45.64c6.3-6.3 6.3-16.52 0-22.82l-22.82-22.82c-6.3-6.3-16.52-6.3-22.82 0L416 210.36l-45.64-45.64c-6.3-6.3-16.52-6.3-22.82 0l-22.82 22.82c-6.3 6.3-6.3 16.52 0 22.82L370.36 256l-45.63 45.63c-6.3 6.3-6.3 16.52 0 22.82l22.82 22.82c6.3 6.3 16.52 6.3 22.82 0L416 301.64l45.64 45.64c6.3 6.3 16.52 6.3 22.82 0l22.82-22.82c6.3-6.3 6.3-16.52 0-22.82L461.64 256z"
   }));
+});
+
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
+}
+var UnmutedIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      styles = _ref$styles === void 0 ? {} : _ref$styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return React.createElement("svg", _extends$1({
+    "aria-hidden": "true",
+    "data-prefix": "fas",
+    "data-icon": "volume-mute",
+    className: (styles["svg-inline--fa"] || "svg-inline--fa") + " " + (styles["fa-volume-mute"] || "fa-volume-mute") + " " + (styles["fa-w-16"] || "fa-w-16"),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 512 512"
+  }, props), React.createElement("path", {
+    d: "M232.36 64.01a24.007 24.007 0 00-1.176.002c-5.703.15-11.464 2.348-16.155 7.039L126.061 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-14.293-11.514-23.733-23.64-24.01zm149.5 31.994c-8.107-.16-16.098 3.814-20.75 11.217-7.09 11.28-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256c0-63.53-32.06-121.94-85.77-156.24a23.808 23.808 0 00-12.37-3.756zm-55.032 80.174c-8.51-.046-16.795 4.42-21.209 12.402-6.39 11.61-2.159 26.2 9.451 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88 0-31.88-17.54-61.32-45.78-76.86a23.987 23.987 0 00-11.402-2.952z"
+  }));
+});
+
+function SoundDisclaimer() {
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var muted = useMediaMuted();
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$2.soundDisclaimer),
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
+      }
+    },
+    /*#__PURE__*/
+    React.createElement("button", {
+      className: classNames(styles$2.unmute, _defineProperty({}, styles$2.active, muted)),
+      onClick: function onClick() {
+        return media.mute(false);
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(MutedIcon, null),
+    /*#__PURE__*/
+    React.createElement("p", {
+      dangerouslySetInnerHTML: {
+        __html: t('pageflow_scrolled.public.sound_disclaimer.help_muted')
+      }
+    })),
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: classNames(styles$2.unmuted, _defineProperty({}, styles$2.active, !muted))
+    },
+    /*#__PURE__*/
+    React.createElement(UnmutedIcon, null),
+    /*#__PURE__*/
+    React.createElement("p", {
+      dangerouslySetInnerHTML: {
+        __html: t('pageflow_scrolled.public.sound_disclaimer.help_unmuted')
+      }
+    })))
+  );
 }
 
 frontend.contentElementTypes.register('soundDisclaimer', {
   component: SoundDisclaimer
 });
 
-var css$6 = ".TextBlock-module_text__21Hk4 {\n  padding: 0;\n  margin: 1em 0;\n  text-shadow: none;\n}\n\n.TextBlock-module_dummy__2KicI {\n  opacity: 0.7;\n}\n\n.TextBlock-module_text__21Hk4 a {\n  color: #fff;\n  word-wrap: break-word;\n}\n\n.TextBlock-module_text__21Hk4 ol,\n.TextBlock-module_text__21Hk4 ul {\n  padding-left: 20px;\n}\n";
-var styles$6 = {"text":"TextBlock-module_text__21Hk4","dummy":"TextBlock-module_dummy__2KicI"};
-styleInject(css$6);
+var styles$3 = {"text":"TextBlock-module_text__21Hk4"};
 
-function TextBlock(_ref) {
-  var configuration = _ref.configuration;
-  return React.createElement(Text, {
-    scaleCategory: "body"
-  }, React.createElement("div", {
-    className: classNames(styles$6.text, _defineProperty({}, styles$6.dummy, configuration.dummy)),
-    dangerouslySetInnerHTML: {
-      __html: configuration.children
-    }
-  }));
+function TextBlock(props) {
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$3.text
+    },
+    /*#__PURE__*/
+    React.createElement(EditableText, {
+      value: props.configuration.value,
+      contentElementId: props.contentElementId,
+      placeholder: t('pageflow_scrolled.inline_editing.type_text'),
+      onChange: function onChange(value) {
+        return updateConfiguration({
+          value: value
+        });
+      }
+    }))
+  );
 }
 
 frontend.contentElementTypes.register('textBlock', {
-  component: TextBlock
+  component: TextBlock,
+  customSelectionRect: true,
+  supportsWrappingAroundFloats: true
 });
 
-var css$7 = ".VideoEmbed-module_VideoEmbed__3BUjc {\n  margin-bottom: 15px;\n}\n\n.VideoEmbed-module_embedWrapper__1kG8A {\n  overflow:hidden;\n  position:relative;\n  background: black;\n  padding-top: 56.25%;\n}\n\n.VideoEmbed-module_wide__1IwOr {\n  padding-top: 56.25%;\n}\n\n.VideoEmbed-module_narrow__2jLxH {\n  padding-top: 75%;\n}\n\n.VideoEmbed-module_square__2ljo8 {\n  padding-top: 100%;\n}\n\n.VideoEmbed-module_portrait__1ttPj {\n  padding-top: 177.77%;\n}\n\n.VideoEmbed-module_embedPlayer__54NKG {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n";
-var styles$7 = {"VideoEmbed":"VideoEmbed-module_VideoEmbed__3BUjc","embedWrapper":"VideoEmbed-module_embedWrapper__1kG8A","wide":"VideoEmbed-module_wide__1IwOr","narrow":"VideoEmbed-module_narrow__2jLxH","square":"VideoEmbed-module_square__2ljo8","portrait":"VideoEmbed-module_portrait__1ttPj","embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
-styleInject(css$7);
+var styles$4 = {"VideoEmbed":"VideoEmbed-module_VideoEmbed__3BUjc","embedPlayer":"VideoEmbed-module_embedPlayer__54NKG"};
 
+var aspectRatios = {
+  wide: 0.5625,
+  narrow: 0.75,
+  square: 1,
+  portrait: 1.7777
+};
 function VideoEmbed(_ref) {
-  var configuration = _ref.configuration;
+  var contentElementId = _ref.contentElementId,
+      configuration = _ref.configuration;
 
-  // base64-encoded configuration
-  // => make component re-render on configuration changes
-  function keyFromConfiguration(config) {
-    return btoa(JSON.stringify(config));
-  }
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
 
-  return React.createElement("div", {
-    className: styles$7.VideoEmbed
-  }, React.createElement("div", {
-    className: classNames(styles$7.embedWrapper, styles$7[configuration.aspectRatio])
-  }, React.createElement(ReactPlayer, {
-    className: styles$7.embedPlayer,
-    key: keyFromConfiguration(configuration),
-    url: configuration.videoSource,
-    playing: true,
-    light: true,
-    width: "100%",
-    height: "100%",
-    controls: !configuration.hideControls,
-    config: {
-      youtube: {
-        playerVars: {
-          showinfo: !configuration.hideInfo
-        }
-      },
-      vimeo: {
-        playerOptions: {
-          byline: !configuration.hideInfo
-        }
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var _useState = useState('unplayed'),
+      _useState2 = _slicedToArray(_useState, 2),
+      playerState = _useState2[0],
+      setPlayerState = _useState2[1];
+
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$4.VideoEmbed,
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
       }
+    },
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      aspectRatio: aspectRatios[configuration.aspectRatio || 'wide'],
+      position: configuration.position,
+      opaque: !!configuration.caption
+    }, shouldLoad &&
+    /*#__PURE__*/
+    React.createElement(PreparedPlayer, {
+      playerState: playerState,
+      setPlayerState: setPlayerState,
+      contentElementId: contentElementId,
+      configuration: configuration
+    })),
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptOutInfo, {
+      providerName: "video",
+      hide: playerState === 'playing',
+      contentElementPosition: configuration.position
+    })))
+  );
+}
+
+function PreparedPlayer(_ref2) {
+  var contentElementId = _ref2.contentElementId,
+      configuration = _ref2.configuration,
+      playerState = _ref2.playerState,
+      setPlayerState = _ref2.setPlayerState;
+  useAudioFocus({
+    key: contentElementId,
+    request: playerState === 'playing',
+    onLost: function onLost() {
+      setPlayerState('paused');
     }
-  })), React.createElement(InlineCaption, {
-    text: configuration.caption
-  }));
+  }); // React player does not re-create player when controls or config
+  // prop changes. Ensure key changes to force React to re-mount
+  // component.
+
+  function keyFromConfiguration(config) {
+    return [config.hideControls, config.hideInfo].join('');
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptIn, {
+      providerName: "video"
+    }, function (_ref3) {
+      var consentedHere = _ref3.consentedHere;
+      return (
+        /*#__PURE__*/
+        React.createElement(ReactPlayer, {
+          className: styles$4.embedPlayer,
+          key: keyFromConfiguration(configuration),
+          url: configuration.videoSource,
+          playing: playerState !== 'paused',
+          onPlay: function onPlay() {
+            return setPlayerState('playing');
+          },
+          onPause: function onPause() {
+            return setPlayerState('paused');
+          },
+          onEnded: function onEnded() {
+            return setPlayerState('paused');
+          },
+          light: !consentedHere && playerState === 'unplayed',
+          width: "100%",
+          height: "100%",
+          controls: !configuration.hideControls,
+          config: {
+            youtube: {
+              playerVars: {
+                showinfo: !configuration.hideInfo
+              }
+            },
+            vimeo: {
+              playerOptions: {
+                byline: !configuration.hideInfo
+              }
+            }
+          }
+        })
+      );
+    })
+  );
 }
 
 frontend.contentElementTypes.register('videoEmbed', {
-  component: VideoEmbed
+  component: VideoEmbed,
+  lifecycle: true
 });
 
-var css$8 = "\n.ExternalLink-module_hidden__3jer0 {\n  display: none;\n}\n\n.ExternalLink-module_link_item__Blypv {\n  width: 45%;\n  max-width: 45%;\n  vertical-align: top;\n  margin: 2% auto;\n  background-color: #fff; \n  color: rgba(20,20,20,0.8);\n  text-decoration: none;\n  transition: 0.3s;\n}\n\n\n.ExternalLink-module_link_item__Blypv.ExternalLink-module_invert__1zrgN {\n  background-color: rgba(20,20,20,0.8);;\n  color: #fff;\n}\n\n.ExternalLink-module_link_item__Blypv.ExternalLink-module_layout_center__3NRpQ {\n  width: 29%;\n  max-width: 29%;\n  \n}\n\n.ExternalLink-module_link_item__Blypv:hover {\n  background-color: #141414;\n  color: #fff;\n  -webkit-transform: scale(1.05);\n  -moz-transform: scale(1.05);\n  -ms-transform: scale(1.05);\n  -o-transform: scale(1.05);\n  transform: scale(1.05);\n}\n\n.ExternalLink-module_link_item__Blypv:hover .ExternalLink-module_link_title__FZJ-0 {\n  text-decoration: underline;\n}\n\n.ExternalLink-module_link_thumbnail__2_BHq {\n  width: auto;\n  background-repeat: no-repeat;\n  background-size: cover;\n  padding-top: 56.25%;\n  position: relative;\n\n}\n\n.ExternalLink-module_link_details__lRhKU {\n  margin: 20px;\n}\n\n.ExternalLink-module_link_details__lRhKU > .ExternalLink-module_link_title__FZJ-0 {\n  font-size: 1.2em;\n  font-weight: bold;\n  margin-bottom: 20px;\n}\n\n.ExternalLink-module_link_details__lRhKU > .ExternalLink-module_link_desc__3fSe1 {\n\n}\n\n.ExternalLink-module_link_details__lRhKU > p {\n  width: 100%;\n  white-space: normal;\n  line-height: 1.3em;\n}\n\n.ExternalLink-module_tooltip__18MpC {\n  position: absolute;\n  left: 50%;\n  top: 80px;\n  width: 180px;\n  padding: 5px;\n  margin-left: -95px;\n  background-color: #444;\n  color: #fff;\n  border: solid 1px #fff;\n  opacity: 0.9;\n  font-size: 13px;\n  text-align: center;\n  white-space: normal;\n}\n\n.ExternalLink-module_tooltip__18MpC > span {\n  display: block;\n  color: #fff;\n  text-decoration: underline;\n}";
-var styles$8 = {"hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","invert":"ExternalLink-module_invert__1zrgN","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","link_desc":"ExternalLink-module_link_desc__3fSe1","tooltip":"ExternalLink-module_tooltip__18MpC"};
-styleInject(css$8);
+var styles$5 = {"hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","invert":"ExternalLink-module_invert__1zrgN","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","link_desc":"ExternalLink-module_link_desc__3fSe1","tooltip":"ExternalLink-module_tooltip__18MpC"};
 
 function ExternalLink(props) {
-  var _classNames;
+  var _classNames2;
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       hideTooltip = _useState2[0],
       setHideTooltip = _useState2[1];
 
-  var _props$sectionProps = props.sectionProps,
-      layout = _props$sectionProps.layout,
-      invert = _props$sectionProps.invert;
+  var layout = props.sectionProps.layout;
 
-  var _useI18n = useI18n(),
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
       t = _useI18n.t;
 
-  var isInEditor = function isInEditor() {
-    return window.frameElement != undefined && window.location.pathname.includes('/editor/entries/');
-  };
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
 
-  var onTooltipClick = function onTooltipClick() {
-    window.open(props.url, '_blank');
-    setHideTooltip(true);
-  };
+  var thumbnailImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: props.thumbnail
+  });
 
   var onClick = function onClick(event) {
-    if (props.open_in_new_tab == false && isInEditor()) {
-      setHideTooltip(false);
-      event.preventDefault();
+    if (isEditable) {
+      if (!props.open_in_new_tab || !isSelected) {
+        event.preventDefault();
+      }
+
+      if (!props.open_in_new_tab && isSelected) {
+        setHideTooltip(false);
+      }
     }
   };
 
@@ -452,82 +919,251 @@ function ExternalLink(props) {
     setHideTooltip(true);
   };
 
-  return React.createElement("a", {
-    className: classNames(styles$8.link_item, (_classNames = {}, _defineProperty(_classNames, styles$8.invert, invert), _defineProperty(_classNames, styles$8.layout_center, layout == 'center'), _classNames)),
-    href: props.url || '',
-    onClick: onClick,
-    onMouseLeave: onMouseLeave,
-    target: props.open_in_new_tab == '1' ? '_blank' : '_self'
-  }, React.createElement("div", {
-    className: styles$8.link_thumbnail
-  }, React.createElement(Image, {
-    id: props.thumbnail
-  })), React.createElement("div", {
-    className: styles$8.link_details
-  }, React.createElement("p", {
-    className: styles$8.link_title
-  }, props.title), React.createElement("p", {
-    className: styles$8.link_desc,
-    dangerouslySetInnerHTML: {
-      __html: props.description
+  function renderNewTabTooltip() {
+    if (isEditable) {
+      var onTooltipClick = function onTooltipClick() {
+        window.open(props.url, '_blank');
+        setHideTooltip(true);
+      };
+
+      return (
+        /*#__PURE__*/
+        React.createElement("div", {
+          className: classNames(_defineProperty({}, styles$5.hidden, hideTooltip), styles$5.tooltip),
+          onClick: onTooltipClick
+        }, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab_message'),
+        /*#__PURE__*/
+        React.createElement("span", null, t('pageflow_scrolled.inline_editing.external_links.open_in_new_tab')))
+      );
     }
-  })), React.createElement("div", {
-    className: classNames(_defineProperty({}, styles$8.hidden, hideTooltip), styles$8.tooltip),
-    onClick: onTooltipClick
-  }, t('pageflow_scrolled.public.external_link.open_in_new_tab_message'), React.createElement("span", {
-    target: "_blank"
-  }, t('pageflow_scrolled.public.external_link.open_in_new_tab'))));
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("a", {
+      className: classNames(styles$5.link_item, (_classNames2 = {}, _defineProperty(_classNames2, styles$5.invert, props.invert), _defineProperty(_classNames2, styles$5.layout_center, layout === 'center'), _classNames2)),
+      href: props.url || 'about:blank',
+      onClick: onClick,
+      onMouseLeave: onMouseLeave,
+      target: props.open_in_new_tab ? '_blank' : '_self',
+      rel: props.open_in_new_tab ? 'noopen noreferrer' : undefined
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$5.link_thumbnail
+    },
+    /*#__PURE__*/
+    React.createElement(Image, {
+      imageFile: thumbnailImageFile,
+      load: props.loadImages,
+      variant: "linkThumbnailLarge"
+    })),
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$5.link_details
+    },
+    /*#__PURE__*/
+    React.createElement("p", {
+      className: styles$5.link_title
+    }, props.title),
+    /*#__PURE__*/
+    React.createElement("p", {
+      className: styles$5.link_desc
+    }, props.description)), renderNewTabTooltip())
+  );
 }
 
-var css$9 = ".ExternalLinkList-module_ext_links_container__16IIo{\n  display: flex;\n  flex-wrap: wrap;\n  border-collapse: separate;\n  border-spacing: 10px;\n  min-height: 240px;\n  width: auto;\n  height: auto;\n  pointer-events: all;\n  position: relative;\n  -webkit-transition: opacity 0.5s;\n  -moz-transition: opacity 0.5s;\n  transition: opacity 0.5s;\n  transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);\n  transition-duration: 0ms;\n}\n";
-var styles$9 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};
-styleInject(css$9);
+var styles$6 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};
 
 function ExternalLinkList(props) {
   var linkList = props.configuration.links || [];
-  return React.createElement("div", {
-    className: styles$9.ext_links_container
-  }, linkList.map(function (link, index) {
-    return React.createElement(ExternalLink, Object.assign({}, link, {
-      key: link.id,
-      sectionProps: props.sectionProps
-    }));
-  }));
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var darkBackground = useDarkBackground();
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$6.ext_links_container
+    }, linkList.map(function (link, index) {
+      return (
+        /*#__PURE__*/
+        React.createElement(ExternalLink, Object.assign({}, link, {
+          key: link.id,
+          invert: !darkBackground,
+          sectionProps: props.sectionProps,
+          loadImages: shouldLoad
+        }))
+      );
+    }))
+  );
 }
 
 frontend.contentElementTypes.register('externalLinkList', {
-  component: ExternalLinkList
+  component: ExternalLinkList,
+  lifecycle: true
 });
 
-var css$a = ".DataWrapperChart-module_container__2eZ15 {\n  min-height: 200px;\n  height: 400px;\n}\n\n.DataWrapperChart-module_container__2eZ15 > iframe {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  top: 0;\n}";
-var styles$a = {"container":"DataWrapperChart-module_container__2eZ15"};
-styleInject(css$a);
+function useIframeHeight(url) {
+  var _useState = useState('400px'),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  useEffect(function () {
+    window.addEventListener('message', receive);
+
+    function receive(event) {
+      if (typeof event.data['datawrapper-height'] !== 'undefined') {
+        for (var chartId in event.data['datawrapper-height']) {
+          if ((url === null || url === void 0 ? void 0 : url.indexOf(chartId)) > -1) {
+            setHeight(event.data['datawrapper-height'][chartId] + 'px');
+          }
+        }
+      }
+    }
+
+    return function () {
+      return window.removeEventListener('message', receive);
+    };
+  }, [url]);
+  return height;
+}
+
+var styles$7 = {"container":"DataWrapperChart-module_container__2eZ15"};
 
 function DataWrapperChart(_ref) {
   var configuration = _ref.configuration;
-  var ref = useRef();
-  var onScreen = useOnScreen(ref, '25% 0px 25% 0px'); // remove url protocol, so that it is selected by the browser itself
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var height = useIframeHeight(configuration.url); // remove url protocol, so that it is selected by the browser itself
 
   var srcURL = '';
 
-  if (configuration.url && onScreen) {
+  if (configuration.url) {
     srcURL = configuration.url.replace(/http(s|):/, '');
   }
 
-  return React.createElement("div", {
-    ref: ref,
-    className: styles$a.container
-  }, React.createElement("iframe", {
-    src: srcURL,
-    scrolling: "auto",
-    frameBorder: "0",
-    align: "aus",
-    allowFullScreen: true,
-    mozallowfullscreen: "true",
-    webkitallowfullscreen: "true"
-  }));
+  var backgroundColor = configuration.backgroundColor || '#323d4d';
+  return (
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement("div", {
+      className: styles$7.container,
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined,
+        backgroundColor: backgroundColor,
+        color: textColorForBackgroundColor(backgroundColor),
+        height: height
+      },
+      "data-percy": "hide"
+    },
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptIn, {
+      providerName: "datawrapper"
+    }, shouldLoad && renderIframe(srcURL, configuration.title || t('pageflow_scrolled.public.chart.default_title')),
+    /*#__PURE__*/
+    React.createElement(ThirdPartyOptOutInfo, {
+      providerName: "datawrapper",
+      contentElementPosition: configuration.position
+    }))))
+  );
+}
+
+function renderIframe(url, title) {
+  if (!url) {
+    return null;
+  }
+
+  return (
+    /*#__PURE__*/
+    React.createElement("iframe", {
+      src: url,
+      title: title,
+      scrolling: "no",
+      allowFullScreen: true,
+      mozallowfullscreen: "true",
+      webkitallowfullscreen: "true"
+    })
+  );
 }
 
 frontend.contentElementTypes.register('dataWrapperChart', {
-  component: DataWrapperChart
+  component: DataWrapperChart,
+  lifecycle: true
+});
+
+function VrImage(_ref) {
+  var configuration = _ref.configuration;
+
+  var _useContentElementLif = useContentElementLifecycle({
+    onActivate: function onActivate() {
+      if (viewerRef.current) {
+        viewerRef.current.lookAt({
+          yaw: viewerRef.current.getYaw() + 20
+        }, 1000);
+      }
+    }
+  }),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var viewerRef = useRef();
+  var imageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: configuration.image
+  });
+  return (
+    /*#__PURE__*/
+    React.createElement("div", {
+      style: {
+        pointerEvents: isEditable && !isSelected ? 'none' : undefined
+      }
+    },
+    /*#__PURE__*/
+    React.createElement(Figure, {
+      caption: configuration.caption
+    },
+    /*#__PURE__*/
+    React.createElement(ViewportDependentPillarBoxes, {
+      aspectRatio: configuration.position === 'full' ? 0.5 : 0.75,
+      position: configuration.position,
+      opaque: !!configuration.caption
+    }, renderLazyPanorama(configuration, imageFile, shouldLoad, viewerRef))))
+  );
+}
+
+function renderLazyPanorama(configuration, imageFile, shouldLoad, viewerRef) {
+  if (shouldLoad && imageFile && imageFile.isReady) {
+    return (
+      /*#__PURE__*/
+      React.createElement(Panorama, {
+        imageFile: imageFile,
+        initialYaw: configuration.initialYaw,
+        initialPitch: configuration.initialPitch,
+        viewerRef: viewerRef
+      })
+    );
+  }
+}
+
+frontend.contentElementTypes.register('vrImage', {
+  component: VrImage,
+  lifecycle: true
 });