pageflow 15.2.0 → 15.5.0

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

@@ -0,0 +1,1169 @@
+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) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","center":"Heading-module_center__38lDY","first":"Heading-module_first__1PMJX"};
+
+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 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
+        });
+      }
+    })))
+  );
+}
+
+frontend.contentElementTypes.register('heading', {
+  component: Heading
+});
+
+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 _objectSpread2(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;
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+  var _e = undefined;
+
+  try {
+    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  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.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+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"};
+
+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 isActive = _ref.isActive,
+      load = _ref.load,
+      position = _ref.position,
+      before_id = _ref.before_id,
+      before_label = _ref.before_label,
+      after_id = _ref.after_id,
+      after_label = _ref.after_label,
+      initial_slider_position = _ref.initial_slider_position,
+      slider = _ref.slider,
+      slider_color = _ref.slider_color,
+      slider_handle = _ref.slider_handle;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      wiggle = _useState2[0],
+      setWiggle = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      moved = _useState4[0],
+      setMoved = _useState4[1];
+
+  useEffect(function () {
+    // 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
+  });
+  var afterImage = useFile({
+    collectionName: 'imageFiles',
+    permaId: after_id
+  });
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected;
+
+  var beforeImageUrl = beforeImage && beforeImage.urls.large;
+  var beforeImageAlt = beforeImage && beforeImage.configuration.alt;
+  var afterImageUrl = afterImage && afterImage.urls.large;
+  var afterImageAlt = afterImage && afterImage.configuration.alt;
+  var initialSliderPos = initial_slider_position / 100;
+  var opts = {}; // Transform slider-related props into the format that
+  // react-compare-image needs
+
+  if (!slider) {
+    opts = _objectSpread2(_objectSpread2({}, opts), {}, {
+      sliderLineWidth: 0,
+      handle:
+      /*#__PURE__*/
+      React.createElement(React.Fragment, null)
+    });
+  }
+
+  if (slider) {
+    if (!slider_handle) {
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
+        handle:
+        /*#__PURE__*/
+        React.createElement(React.Fragment, null)
+      });
+    }
+
+    if (slider_color) {
+      opts = _objectSpread2(_objectSpread2({}, opts), {}, {
+        sliderLineColor: slider_color
+      });
+    }
+  }
+
+  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;
+    }
+
+    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(_ref3) {
+  var parentSelected = _ref3.parentSelected,
+      position = _ref3.position;
+  var indicatorWidth = '2px';
+  var indicatorStyles = {
+    left: "calc(".concat(position, "% - ").concat(indicatorWidth, "/2)"),
+    width: "".concat(indicatorWidth),
+    height: '100%',
+    borderLeft: '1px solid black',
+    borderRight: '1px solid black'
+  }; // In case this element is selected, and its initial slider position
+  // is not in the middle, we show InitialSliderPositionIndicator
+
+  return parentSelected && position !== 50 ?
+  /*#__PURE__*/
+  React.createElement("div", {
+    className: styles$1.sliderStart,
+    style: indicatorStyles
+  }) : '';
+}
+
+function InlineBeforeAfter(props) {
+  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,
+  lifecycle: true
+});
+
+function InlineImage(_ref) {
+  var configuration = _ref.configuration;
+
+  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,
+  lifecycle: true
+});
+
+function InlineVideo(_ref) {
+  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);
+    }
+  }),
+      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,
+  lifecycle: true
+});
+
+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
+  });
+
+  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 && !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);
+    }
+  });
+
+  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 styles$3 = {"text":"TextBlock-module_text__21Hk4"};
+
+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,
+  customSelectionRect: true,
+  supportsWrappingAroundFloats: true
+});
+
+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 contentElementId = _ref.contentElementId,
+      configuration = _ref.configuration;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  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 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,
+  lifecycle: true
+});
+
+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 _classNames2;
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      hideTooltip = _useState2[0],
+      setHideTooltip = _useState2[1];
+
+  var layout = props.sectionProps.layout;
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable,
+      isSelected = _useContentElementEdi.isSelected;
+
+  var thumbnailImageFile = useFile({
+    collectionName: 'imageFiles',
+    permaId: props.thumbnail
+  });
+
+  var onClick = function onClick(event) {
+    if (isEditable) {
+      if (!props.open_in_new_tab || !isSelected) {
+        event.preventDefault();
+      }
+
+      if (!props.open_in_new_tab && isSelected) {
+        setHideTooltip(false);
+      }
+    }
+  };
+
+  var onMouseLeave = function onMouseLeave() {
+    setHideTooltip(true);
+  };
+
+  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')))
+      );
+    }
+  }
+
+  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 styles$6 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo"};
+
+function ExternalLinkList(props) {
+  var linkList = props.configuration.links || [];
+
+  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,
+  lifecycle: true
+});
+
+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 _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) {
+    srcURL = configuration.url.replace(/http(s|):/, '');
+  }
+
+  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,
+  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
+});