pageflow 16.0.0 → 16.2.0

data/entry_types/scrolled/package/frontend/{EditableInlineText.module-14c7b097.js → EditableInlineText.module-6ee0e024.js}

@@ -1,12 +1,15 @@
 import regeneratorRuntime from 'regenerator-runtime';
-import { events, browser, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings, consent } from 'pageflow/frontend';
-import React, { useReducer, useState, useLayoutEffect, useEffect, useRef, createContext, useContext, useMemo, useCallback } from 'react';
-import { _ as _objectWithoutProperties, u as useI18n, a as _objectSpread2, b as _defineProperty, c as _slicedToArray, d as useLocale, e as useLegalInfo, f as useTheme, g as useEntryMetadata, h as useNestedFiles, i as useFile, j as _toConsumableArray, k as useSectionContentElements, l as useAdditionalSeedData, m as useSectionsWithChapter, n as useBrowserFeature, P as PhonePlatformContext, B as BrowserFeaturesProvider, E as EntryStateProvider, L as LocaleProvider, o as useEntryStateDispatch, p as useSection, q as useChapter } from './PhonePlatformContext-f6093cc6.js';
-import I18n from 'i18n-js';
+import { events, browser, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings, features, consent } from 'pageflow/frontend';
+import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useReducer, useCallback, useLayoutEffect } from 'react';
+import { _ as _slicedToArray, a as _objectSpread2, b as _defineProperty, u as useI18n, c as useEntryMetadata, d as useNestedFiles, e as _objectWithoutProperties, f as useWidget, g as useTheme, h as useFileWithInlineRights, i as useFile, j as useSectionContentElements, k as useAdditionalSeedData, l as useSectionsWithChapter, m as useContentElementConsentVendor, n as _toConsumableArray, E as EntryStateProvider, L as LocaleProvider, o as useChapter, p as useEntryStateDispatch, q as useSection } from './i18n-71c39823.js';
 import classNames from 'classnames';
+import { u as useDelayedBoolean, a as useContentElementEditorState } from './useContentElementEditorState-245f1986.js';
 import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _createSuper } from './createSuper-d0f30da3.js';
 import BackboneEvents from 'backbone-events-standalone';
+import I18n from 'i18n-js';
+import stripTags from 'striptags';
 import Measure from 'react-measure';
+import { u as useBrowserFeature, P as PhonePlatformContext, B as BrowserFeaturesProvider } from './PhonePlatformContext-b28d991a.js';
 
 var regenerator = regeneratorRuntime;
 
@@ -46,241 +49,6 @@ function _asyncToGenerator(fn) {
   };
 }
 
-var styles = {"toggle":"Toggle-module_toggle__1fb_N"};
-
-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 ToggleOnIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "60 170 90 157"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M150 297a50 50 0 0050-50 50 50 0 00-50-50H50a50 50 0 00-50 50 50 50 0 0050 50z"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "-150",
-    cy: "-247",
-    fill: "currentColor",
-    r: "40",
-    transform: "scale(-1)"
-  }), /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeWidth: "6",
-    d: "M87 227l-37 37-16-18",
-    fill: "none"
-  }));
-});
-
-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 ToggleOffIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "60 170 90 157"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M50 197a50 50 0 00-50 50 50 50 0 0050 50h100a50 50 0 0050-50 50 50 0 00-50-50H50z"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "50",
-    cy: "247",
-    fill: "currentColor",
-    r: "40"
-  }), /*#__PURE__*/React.createElement("path", {
-    stroke: "currentColor",
-    strokeWidth: "6",
-    d: "M110.103 271.897l49.795-49.794m-.001 49.794l-49.794-49.795",
-    fill: "none"
-  }));
-});
-
-function Toggle(_ref) {
-  var id = _ref.id,
-      checked = _ref.checked,
-      onChange = _ref.onChange;
-  var Icon = checked ? ToggleOnIcon : ToggleOffIcon;
-  return /*#__PURE__*/React.createElement("button", {
-    id: id,
-    className: styles.toggle,
-    role: "checkbox",
-    "aria-checked": checked ? 'true' : 'false',
-    onClick: onChange
-  }, /*#__PURE__*/React.createElement(Icon, {
-    width: 50,
-    height: 35
-  }));
-}
-
-function _extends$2() {
-  _extends$2 = 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$2.apply(this, arguments);
-}
-var information = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-65 -65 449 449"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
-  }));
-});
-
-var styles$1 = {"bar":"Bar-module_bar__kk5uX","text":"Bar-module_text__3EwGu","button":"Bar-module_button__3Dg6p","acceptAllButton":"Bar-module_acceptAllButton__Ij5lh Bar-module_button__3Dg6p","saveButton":"Bar-module_saveButton__km-gH Bar-module_button__3Dg6p","configureButton":"Bar-module_configureButton__2mQQz Bar-module_button__3Dg6p","vendorsBox":"Bar-module_vendorsBox__1Uyex","vendorList":"Bar-module_vendorList__11m8q","vendor":"Bar-module_vendor__2ogmn","expandVendor":"Bar-module_expandVendor__1gfA3","decisionButtons":"Bar-module_decisionButtons__2JzYP"};
-
-function reducer(state, vendorName) {
-  return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, vendorName, !state[vendorName]));
-}
-
-function VendorsBox(_ref) {
-  var vendors = _ref.vendors,
-      save = _ref.save,
-      _ref$defaultExpanded = _ref.defaultExpanded,
-      defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded;
-
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  var _useReducer = useReducer(reducer, vendors.reduce(function (result, vendor) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, vendor.name, vendor.state === 'accepted'));
-  }, {})),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      vendorStates = _useReducer2[0],
-      dispatch = _useReducer2[1];
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.vendorsBox
-  }, /*#__PURE__*/React.createElement("h3", null, t('pageflow_scrolled.public.consent_settings')), /*#__PURE__*/React.createElement("div", {
-    className: styles$1.vendorList
-  }, renderVendors({
-    vendors: vendors,
-    vendorStates: vendorStates,
-    t: t,
-    defaultExpanded: defaultExpanded,
-    onToggle: dispatch
-  })), /*#__PURE__*/React.createElement("button", {
-    className: styles$1.saveButton,
-    onClick: function onClick() {
-      return save(vendorStates);
-    }
-  }, t('pageflow_scrolled.public.consent_save')));
-}
-
-function renderVendors(_ref2) {
-  var vendors = _ref2.vendors,
-      vendorStates = _ref2.vendorStates,
-      t = _ref2.t,
-      defaultExpanded = _ref2.defaultExpanded,
-      onToggle = _ref2.onToggle;
-
-  if (!vendors.length) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "consent_vendor_list-blank"
-    }, t('pageflow_scrolled.public.consent_no_vendors'));
-  }
-
-  return vendors.map(function (vendor) {
-    return /*#__PURE__*/React.createElement(Vendor, {
-      key: vendor.name,
-      vendor: vendor,
-      state: vendorStates[vendor.name],
-      t: t,
-      defaultExpanded: defaultExpanded,
-      onToggle: onToggle
-    });
-  });
-}
-
-function Vendor(_ref3) {
-  var vendor = _ref3.vendor,
-      state = _ref3.state,
-      onToggle = _ref3.onToggle,
-      t = _ref3.t,
-      defaultExpanded = _ref3.defaultExpanded;
-
-  var _useState = useState(defaultExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
-  var id = "consent-vendor-".concat(vendor.name);
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.vendor
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: id
-  }, vendor.displayName), /*#__PURE__*/React.createElement(Toggle, {
-    id: id,
-    checked: state,
-    onChange: function onChange() {
-      return onToggle(vendor.name);
-    }
-  }), /*#__PURE__*/React.createElement("button", {
-    className: styles$1.expandVendor,
-    title: t('pageflow_scrolled.public.consent_expand_vendor'),
-    onClick: function onClick() {
-      return setExpanded(!expanded);
-    }
-  }, /*#__PURE__*/React.createElement(information, {
-    width: 30,
-    height: 34
-  })), expanded && /*#__PURE__*/React.createElement("p", {
-    dangerouslySetInnerHTML: {
-      __html: vendor.description
-    }
-  }));
-}
-
-var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 function useOnScreen(ref) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       rootMargin = _ref.rootMargin,
@@ -361,7 +129,7 @@ function createIntersectionObserver(callback, options, skipIframeFix) {
   }
 }
 
-var styles$2 = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isActiveProbe":"useScrollPositionLifecycle-module_isActiveProbe__3VKB5"};
+var styles = {"wrapper":"useScrollPositionLifecycle-module_wrapper__1a6Kr","isActiveProbe":"useScrollPositionLifecycle-module_isActiveProbe__3VKB5"};
 
 var StaticPreviewContext = createContext(false);
 function StaticPreview(_ref) {
@@ -385,7 +153,8 @@ function useIsStaticPreview() {
 function createScrollPositionLifecycleProvider(Context) {
   return function ScrollPositionLifecycleProvider(_ref2) {
     var children = _ref2.children,
-        onActivate = _ref2.onActivate;
+        onActivate = _ref2.onActivate,
+        entersWithFadeTransition = _ref2.entersWithFadeTransition;
     var ref = useRef();
     var isActiveProbeRef = useRef();
     var isStaticPreview = useContext(StaticPreviewContext);
@@ -394,12 +163,39 @@ function createScrollPositionLifecycleProvider(Context) {
     });
     var shouldPrepare = useOnScreen(ref, {
       rootMargin: '25% 0px 25% 0px'
+    }) && !isStaticPreview; // Sections that enter with fade transition only become visible
+    // once they reach the center of the viewport. We want to reflect
+    // that in `isVisible`/`onVisible` to prevent background videos
+    // from starting too soon. Since fade section might still exit
+    // with a scroll transition, we want to keep `isVisible` true
+    // until the section has completely left the viewport. We do not
+    // care about when exactly a background video pauses.
+    //
+    // Note that with fade transitions sections actually stay visible
+    // a bit longer while they are still fading out. This is handled
+    // by `isVisibleWithDelay` below.
+
+    var shouldBeVisible = useOnScreen(ref, {
+      rootMargin: entersWithFadeTransition ? '0px 0px -50% 0px' : undefined
     }) && !isStaticPreview;
-    var isVisible = useOnScreen(ref) && !isStaticPreview;
-    var isActive = useOnScreen(isActiveProbeRef, {
+    var shouldBeActive = useOnScreen(isActiveProbeRef, {
       rootMargin: '-50% 0px -50% 0px',
       onIntersecting: onActivate
-    }) && !isStaticPreview;
+    }) && !isStaticPreview; // useDelayedBoolean causes an extra render once the delay has
+    // elapsed. When entersWithFadeTransition is false,
+    // isVisibleWithDelay is never used, though. Since hooks can not
+    // be wrapped in conditionals, we ensure that the value passed to
+    // useDelayedBoolean is always false if entersWithFadeTransition
+    // is false. This prevents the extra render.
+
+    var isVisibleWithDelay = useDelayedBoolean(shouldBeVisible && entersWithFadeTransition, {
+      fromTrueToFalse: 1000
+    });
+    var isVisible = entersWithFadeTransition ? isVisibleWithDelay : shouldBeVisible; // We want to make sure that `onActivate` is never called before
+    // `onVisible`, no matter in which order the intersection
+    // observers above fire.
+
+    var isActive = isVisible && shouldBeActive;
     var value = useMemo(function () {
       return {
         shouldLoad: shouldLoad,
@@ -410,10 +206,10 @@ function createScrollPositionLifecycleProvider(Context) {
     }, [shouldLoad, shouldPrepare, isVisible, isActive]);
     return /*#__PURE__*/React.createElement("div", {
       ref: ref,
-      className: classNames(styles$2.wrapper)
+      className: classNames(styles.wrapper)
     }, /*#__PURE__*/React.createElement("div", {
       ref: isActiveProbeRef,
-      className: styles$2.isActiveProbe
+      className: styles.isActiveProbe
     }), /*#__PURE__*/React.createElement(Context.Provider, {
       value: value
     }, children));
@@ -457,718 +253,274 @@ function createScrollPositionLifecycleHook(Context) {
   };
 }
 
-var ContentElementEditorStateContext = createContext({
-  isSelected: false,
-  isEditable: false,
-  setTransientState: function setTransientState() {}
-});
-/**
- * Use inside a content element component to determine whether the
- * component is being rendered inside the editor iframe, and whether
- * the content element is currently selected. This can be used to
- * implement simple inline editing capabilities like displaying extra
- * information when the content element is selected.
- *
- * @example
- * const {isEditable, isSelected} = useContentElementEditorState();
- */
+var SectionLifecycleContext = createContext();
+var SectionLifecycleProvider = createScrollPositionLifecycleProvider(SectionLifecycleContext);
+var useSectionLifecycle = createScrollPositionLifecycleHook(SectionLifecycleContext);
 
-function useContentElementEditorState() {
-  return useContext(ContentElementEditorStateContext);
-}
+var Atmo = /*#__PURE__*/function () {
+  function Atmo(_ref) {
+    var _this = this;
 
-var ConsentContext = createContext();
-function ConsentProvider(_ref) {
-  var consent = _ref.consent,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement(ConsentContext.Provider, {
-    value: consent
-  }, children);
-}
-function useConsentRequested() {
-  var consent = useContext(ConsentContext);
+    var atmoSourceId = _ref.atmoSourceId,
+        multiPlayer = _ref.multiPlayer,
+        backgroundMedia = _ref.backgroundMedia;
 
-  var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      request = _useState2[0],
-      setRequest = _useState2[1];
+    _classCallCheck(this, Atmo);
 
-  useIsomorphicLayoutEffect(function () {
-    var unmounted = false;
+    this.multiPlayer = multiPlayer;
+    this.atmoSourceId = atmoSourceId;
+    this.backgroundMedia = backgroundMedia;
+    this.backgroundMedia.on('change:muted', function () {
+      _this.update();
+    });
+    documentHiddenState(function (hiddenState) {
+      if (hiddenState === 'hidden') {
+        _this.multiPlayer.fadeOutIfPlaying();
+      } else {
+        _this.update();
+      }
+    });
+    this.listenTo(this.multiPlayer, 'playfailed', function () {
+      backgroundMedia.mute(true);
+    });
+  }
 
-    _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
-      var _yield$consent$reques, vendors, _acceptAll, _denyAll, _save;
+  _createClass(Atmo, [{
+    key: "disable",
+    value: function disable() {
+      this.disabled = true;
+      this.multiPlayer.fadeOutAndPause();
+      events.trigger('atmo:disabled');
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.disabled = false;
+      this.update();
+      events.trigger('atmo:enabled');
+    }
+  }, {
+    key: "pause",
+    value: function pause() {
+      if (browser.has('volume control support')) {
+        return this.multiPlayer.fadeOutAndPause();
+      } else {
+        this.multiPlayer.pause();
+      }
+    }
+  }, {
+    key: "turnDown",
+    value: function turnDown() {
+      if (browser.has('volume control support')) {
+        return this.multiPlayer.changeVolumeFactor(0.2);
+      } else {
+        this.multiPlayer.pause();
+      }
+    }
+  }, {
+    key: "resume",
+    value: function resume() {
+      if (this.multiPlayer.paused()) {
+        if (this.disabled || this.backgroundMedia.muted) {
+          return Promise.resolve();
+        } else {
+          return this.multiPlayer.resumeAndFadeIn();
+        }
+      } else {
+        return this.multiPlayer.changeVolumeFactor(1);
+      }
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      if (!this.disabled) {
+        if (this.backgroundMedia.muted) {
+          this.multiPlayer.fadeOutAndPause();
+        } else {
+          this.multiPlayer.fadeTo(this.atmoSourceId);
+        }
+      }
+    }
+  }, {
+    key: "createMediaPlayerHooks",
+    value: function createMediaPlayerHooks(atmoDuringPlayback) {
+      var atmo = this;
+      return {
+        before: function before() {
+          if (atmoDuringPlayback === 'mute') {
+            atmo.pause();
+          } else if (atmoDuringPlayback === 'turnDown') {
+            atmo.turnDown();
+          }
+        },
+        after: function after() {
+          atmo.resume();
+        }
+      };
+    }
+  }]);
 
-      return regenerator.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return consent.requested();
-
-            case 2:
-              _yield$consent$reques = _context.sent;
-              vendors = _yield$consent$reques.vendors;
-              _acceptAll = _yield$consent$reques.acceptAll;
-              _denyAll = _yield$consent$reques.denyAll;
-              _save = _yield$consent$reques.save;
-
-              if (!unmounted) {
-                setRequest({
-                  vendors: vendors,
-                  acceptAll: function acceptAll() {
-                    _acceptAll();
-
-                    setRequest({});
-                  },
-                  denyAll: function denyAll() {
-                    _denyAll();
-
-                    setRequest({});
-                  },
-                  save: function save(decisions) {
-                    _save(decisions);
-
-                    setRequest({});
-                  }
-                });
-              }
+  return Atmo;
+}();
+Object.assign(Atmo.prototype, BackboneEvents);
 
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }))();
+function getContextValue(updateAtmo, createMediaPlayerHooks) {
+  var empty = function empty() {};
 
-    return function () {
-      return unmounted = true;
-    };
-  }, [consent]);
-  return request;
+  return {
+    updateAtmo: updateAtmo || empty,
+    createMediaPlayerHooks: createMediaPlayerHooks || empty
+  };
 }
-function useConsentGiven(vendorName) {
-  var consent = useContext(ConsentContext);
 
-  var _useContentElementEdi = useContentElementEditorState(),
-      isEditable = _useContentElementEdi.isEditable;
-
-  var isStaticPreview = useIsStaticPreview();
-
-  var _useState3 = useState(isEditable || isStaticPreview),
-      _useState4 = _slicedToArray(_useState3, 2),
-      consentGiven = _useState4[0],
-      setConsentGiven = _useState4[1];
+var AtmoContext = createContext(getContextValue());
+function AtmoProvider(_ref) {
+  var children = _ref.children;
+  var atmoConfig = useRef({});
+  useEffect(function () {
+    var currentAtmo = atmoConfig.current;
+    currentAtmo.pool = PlayerSourceIDMap(media, {
+      playerOptions: {
+        tagName: 'audio',
+        loop: true
+      }
+    });
+    currentAtmo.multiPlayer = new MultiPlayer(currentAtmo.pool, {
+      fadeDuration: 500,
+      crossFade: true,
+      playFromBeginning: false,
+      rewindOnChange: true
+    });
+    currentAtmo.atmo = new Atmo({
+      multiPlayer: currentAtmo.multiPlayer,
+      backgroundMedia: media
+    });
+  }, []);
 
-  useIsomorphicLayoutEffect(function () {
-    var unmounted = false;
+  var updateAtmo = function updateAtmo(_ref2) {
+    var audioFilePermaId = _ref2.audioFilePermaId,
+        sources = _ref2.sources;
+    var currentAtmo = atmoConfig.current;
 
-    _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
-      var result;
-      return regenerator.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!(!vendorName || isEditable || isStaticPreview)) {
-                _context2.next = 2;
-                break;
-              }
+    if (currentAtmo.atmo) {
+      currentAtmo.pool.mapSources(audioFilePermaId, sources);
+      currentAtmo.atmo.atmoSourceId = audioFilePermaId;
+      currentAtmo.atmo.update();
+    }
+  };
 
-              return _context2.abrupt("return");
+  var createMediaPlayerHooks = function createMediaPlayerHooks(options) {
+    if (atmoConfig.current.atmo) {
+      return atmoConfig.current.atmo.createMediaPlayerHooks(options);
+    }
+  };
 
-            case 2:
-              _context2.next = 4;
-              return consent.requireAccepted(vendorName);
+  var contextValue = useMemo(function () {
+    return getContextValue(updateAtmo, createMediaPlayerHooks);
+  }, []);
+  return /*#__PURE__*/React.createElement(AtmoContext.Provider, {
+    value: contextValue
+  }, children);
+}
+function useAtmo() {
+  return useContext(AtmoContext);
+}
 
-            case 4:
-              result = _context2.sent;
+function PlayerContainer(_ref) {
+  var filePermaId = _ref.filePermaId,
+      sources = _ref.sources,
+      textTrackSources = _ref.textTrackSources,
+      type = _ref.type,
+      playsInline = _ref.playsInline,
+      loop = _ref.loop,
+      controls = _ref.controls,
+      altText = _ref.altText,
+      mediaEventsContextData = _ref.mediaEventsContextData,
+      atmoDuringPlayback = _ref.atmoDuringPlayback,
+      onSetup = _ref.onSetup,
+      onDispose = _ref.onDispose;
+  var playerWrapperRef = useRef(null);
+  var atmo = useAtmo();
+  useEffect(function () {
+    var playerWrapper = playerWrapperRef.current;
 
-              if (!unmounted && result === 'fulfilled') {
-                setConsentGiven(true);
-              }
+    if (sources) {
+      var player = media.getPlayer(sources, {
+        textTrackSources: textTrackSources,
+        filePermaId: filePermaId,
+        tagName: type,
+        playsInline: playsInline,
+        loop: loop,
+        controls: controls,
+        hooks: atmoDuringPlayback ? atmo.createMediaPlayerHooks(atmoDuringPlayback) : {},
+        //create hooks only for inline media players
+        mediaEventsContextData: mediaEventsContextData,
+        altText: altText,
+        onRelease: function onRelease() {
+          playerWrapper.removeChild(player.el());
+          player = null;
 
-            case 6:
-            case "end":
-              return _context2.stop();
+          if (onDispose) {
+            onDispose();
           }
         }
-      }, _callee2);
-    }))();
-
-    return function () {
-      return unmounted = true;
-    };
-  }, [consent, vendorName]);
-  var giveConsent = useCallback(function () {
-    return consent.accept(vendorName);
-  }, [consent, vendorName]);
-  return [consentGiven, giveConsent];
-}
+      });
+      playerWrapper.appendChild(player.el());
 
-function _extends$3() {
-  _extends$3 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+      if (onSetup) {
+        onSetup(player);
+      }
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
+      return function () {
+        // onRelease might already have been called by the pool when
+        // it needed to re-use a player.
+        if (player) {
+          media.releasePlayer(player);
         }
-      }
+      };
     }
-
-    return target;
-  };
-
-  return _extends$3.apply(this, arguments);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: playerWrapperRef
+  });
 }
-var GearIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "-3 -3 30 30"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0014 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"
-  }));
-});
-
-function Bar(_ref) {
-  var _ref$defaultExpanded = _ref.defaultExpanded,
-      defaultExpanded = _ref$defaultExpanded === void 0 ? false : _ref$defaultExpanded;
 
-  var _useConsentRequested = useConsentRequested(),
-      vendors = _useConsentRequested.vendors,
-      acceptAll = _useConsentRequested.acceptAll,
-      denyAll = _useConsentRequested.denyAll,
-      save = _useConsentRequested.save;
+PlayerContainer.defaultProps = {
+  textTrackSources: []
+}; // This function assumes that that the parameters are arrays of
+// objects containing only skalar values. It is not a full deep
+// equality check, but  suffices for the use case.
 
-  var _useState = useState(defaultExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
+function deepEqual(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  }
 
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
+  for (var i = 0; i < a.length; i++) {
+    var aItem = a[i];
+    var bItem = b[i];
 
-  var locale = useLocale();
-  var privacyLinkUrl = useLegalInfo().privacy.url;
+    if (Object.keys(aItem).length !== Object.keys(bItem).length) {
+      return false;
+    }
 
-  if (vendors) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$1.bar
-    }, renderText({
-      privacyLinkUrl: privacyLinkUrl,
-      t: t,
-      locale: locale,
-      vendors: vendors
-    }), !expanded && /*#__PURE__*/React.createElement("button", {
-      className: styles$1.configureButton,
-      onClick: function onClick() {
-        return setExpanded(true);
+    for (var key in aItem) {
+      if (aItem[key] !== bItem[key]) {
+        return false;
       }
-    }, /*#__PURE__*/React.createElement(GearIcon, {
-      width: 15,
-      height: 15
-    }), t('pageflow_scrolled.public.consent_configure')), expanded && /*#__PURE__*/React.createElement(VendorsBox, {
-      vendors: vendors,
-      save: save,
-      t: t,
-      defaultExpanded: defaultExpanded
-    }), /*#__PURE__*/React.createElement("div", {
-      className: styles$1.decisionButtons
-    }, /*#__PURE__*/React.createElement("button", {
-      className: styles$1.button,
-      onClick: denyAll
-    }, t('pageflow_scrolled.public.consent_deny_all')), /*#__PURE__*/React.createElement("button", {
-      className: styles$1.acceptAllButton,
-      onClick: acceptAll
-    }, t('pageflow_scrolled.public.consent_accept_all'))));
+    }
   }
 
-  return null;
+  return true;
 }
 
-function renderText(_ref2) {
-  var privacyLinkUrl = _ref2.privacyLinkUrl,
-      t = _ref2.t,
-      locale = _ref2.locale,
-      vendors = _ref2.vendors;
-  var vendorNames = vendors.map(function (vendor) {
-    return vendor.name;
-  }).join(',');
-  var text = t('pageflow_scrolled.public.consent_prompt_html', {
-    privacyLinkUrl: "".concat(privacyLinkUrl, "?lang=").concat(locale, "&vendors=").concat(vendorNames, "#consent")
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$1.text,
-    dangerouslySetInnerHTML: {
-      __html: text
-    }
-  });
+function areEqual(prevProps, nextProps) {
+  return prevProps.type === nextProps.type && prevProps.playsInline === nextProps.playsInline && prevProps.loop === nextProps.loop && prevProps.controls === nextProps.controls && prevProps.altText === nextProps.altText && prevProps.atmoDuringPlayback === nextProps.atmoDuringPlayback && deepEqual(prevProps.sources, nextProps.sources) && deepEqual(prevProps.textTrackSources, nextProps.textTrackSources);
 }
 
-var styles$3 = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
+var PlayerContainer$1 = React.memo(PlayerContainer, areEqual);
 
-function _extends$4() {
-  _extends$4 = 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$4.apply(this, arguments);
-}
-var OptInIcon = (function (_ref) {
-  var _ref$styles = _ref.styles,
-      props = _objectWithoutProperties(_ref, ["styles"]);
-
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 131 95"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M32.01.01C46.678-.01 61.345.009 76.014.002 83.007.007 90-.009 96.99.011c.015 9.157.014 18.316 0 27.474-1.357.073-2.706.259-4.048.478-.01-7.986 0-15.975-.004-23.961-18.958-.003-37.917-.003-56.875 0l-.001 28.916c.01 2.37-.022 4.742.016 7.113 6.173-.025 12.348-.006 18.52-.011 5.804.01 11.609-.022 17.41.013-1 1.28-2.001 2.56-2.844 3.948-12.372.024-24.748-.011-37.12.019-.06-.365-.03-.735-.034-1.1V17.497c.007-5.83-.024-11.659.001-17.486zm17.617 8.004a5.999 5.999 0 014.359 1.49c1.273 1.116 2.048 2.8 2.013 4.498.042 1.806-.845 3.59-2.263 4.702-1.271 1.013-2.975 1.483-4.583 1.228a5.88 5.88 0 01-3.479-1.785c-1.44-1.459-2.013-3.695-1.475-5.67.6-2.448 2.905-4.346 5.428-4.463zm22.106 7.758c.181-.258.332-.54.547-.772 2.325 3.868 4.683 7.717 7.02 11.578.891 1.503 1.85 2.973 2.7 4.5a35.062 35.062 0 00-5.646 3.779c-.154.162-.387.14-.592.143-10.585-.014-21.174.014-31.762-.015.088-.228.308-.367.47-.542 3.79-3.745 7.58-7.484 11.365-11.232.098-.085.217-.265.366-.15 2.65 1.308 5.3 2.62 7.951 3.928 2.545-3.73 5.052-7.48 7.581-11.217zM0 21.042c.256-.058.517-.039.775-.039 9.175.007 18.349-.007 27.523.007l.064.076c.017 1.308-.012 2.618.015 3.927-5.416.038-10.834.001-16.252.018-.01 7.981-.013 15.962.002 23.944 11.917.013 23.834.013 35.752 0 .022-.674-.002-1.35.012-2.023 4.034.01 8.07.01 12.105 0 .002 11.349.01 22.698-.003 34.048-12.082-.025-24.163-.003-36.244-.01-7.911.007-15.823-.015-23.734.01-.02-19.988.01-39.975-.015-59.959zm3.435 4.043c-.904.236-1.577 1.152-1.482 2.086.079.997.994 1.837 1.999 1.82 1.367.002 2.736.015 4.105-.007 1.04-.036 1.928-.995 1.878-2.03-.003-.996-.867-1.896-1.868-1.925-1.294-.01-2.585.002-3.878-.005-.252.004-.51-.013-.754.061zm-.219 8.067c-.815.317-1.373 1.203-1.256 2.076.1.938.94 1.724 1.89 1.756 1.25.016 2.5-.002 3.752.008.439.008.9-.025 1.288-.246.73-.39 1.173-1.257 1.019-2.075-.136-.889-.95-1.62-1.852-1.645-1.328-.007-2.653.002-3.98-.004-.29-.005-.589.016-.86.13zm.219 7.923c-.762.2-1.372.884-1.471 1.665-.128.844.384 1.718 1.158 2.064.403.192.859.19 1.295.181 1.217-.008 2.434.011 3.651-.008 1.032-.047 1.92-.998 1.868-2.034-.007-.994-.87-1.891-1.87-1.922-1.293-.011-2.584.002-3.877-.006-.252-.001-.51-.008-.754.06zm-.01 8.003c-1.018.249-1.706 1.392-1.413 2.403.21.868 1.057 1.512 1.95 1.497 1.364-.003 2.728.01 4.09-.006 1.02-.034 1.906-.958 1.883-1.975.026-1.017-.858-1.958-1.88-1.981-1.252-.011-2.503.002-3.754-.003-.292-.004-.591-.018-.877.065zm48.107 0c-1.117.272-1.79 1.607-1.323 2.66a2.027 2.027 0 001.86 1.238c1.326.003 2.652.003 3.977 0 1.056.025 2.032-.916 1.996-1.978.045-1.022-.86-1.96-1.88-1.984-1.252-.008-2.503.003-3.754-.002-.293 0-.591-.017-.876.066zM12.13 53.016c-.015 7.981-.012 15.961-.001 23.943 11.917.003 23.836.003 35.753 0 .011-7.982.014-15.962-.001-23.943a14203.52 14203.52 0 00-35.75 0zm-8.694 4.05c-.797.208-1.422.943-1.482 1.764-.112 1.07.805 2.103 1.883 2.137 1.371.014 2.743.003 4.113.006 1.035.01 1.977-.89 1.986-1.928.054-1.033-.83-2.003-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289 0-.584-.014-.867.064zm48.108.003c-.951.235-1.623 1.244-1.456 2.208.123.947 1.016 1.71 1.972 1.696h3.997c1.031.013 1.994-.886 1.984-1.928.071-1.036-.829-2.011-1.866-2.037-1.254-.01-2.51.003-3.764-.005-.29 0-.586-.014-.867.066zM3.425 65.066c-.955.242-1.634 1.262-1.45 2.234.14.9.957 1.638 1.874 1.662 1.364.011 2.727 0 4.09.006 1.06.022 2.023-.925 1.997-1.984.027-1.02-.86-1.952-1.882-1.98-1.211-.012-2.426.002-3.637-.004-.332-.001-.669-.021-.992.066zm48.107.003c-.927.231-1.584 1.195-1.456 2.14.093.935.935 1.723 1.879 1.752 1.365.011 2.73 0 4.093.006 1.055.016 2.043-.917 1.994-1.984.045-1.023-.86-1.958-1.88-1.981-1.252-.011-2.502.002-3.753-.003-.294-.003-.592-.012-.877.07zM3.435 73.057c-.797.204-1.422.94-1.482 1.76-.111 1.07.802 2.112 1.883 2.138 1.371.013 2.743.002 4.113.005 1.035.017 1.977-.891 1.986-1.928.054-1.033-.835-1.997-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289.001-.584-.01-.867.067zm48.108 0c-.887.22-1.543 1.118-1.476 2.029.035.974.892 1.837 1.874 1.869 1.37.013 2.742.002 4.114.005 1.033.017 1.993-.883 1.985-1.925.071-1.039-.833-2.006-1.868-2.04-1.254-.01-2.509.003-3.763-.005-.289.001-.585-.01-.866.067zM96.83 31.045c6.813-.36 13.73 1.456 19.431 5.154a32.396 32.396 0 019.482 9.342 31.527 31.527 0 015.043 13.773c.625 5.36-.123 10.88-2.225 15.867-1.766 4.254-4.499 8.108-7.91 11.243a32.605 32.605 0 01-11.584 6.844 33.066 33.066 0 01-15.656 1.337 32.59 32.59 0 01-13.329-5.235c-5.2-3.514-9.323-8.551-11.692-14.307a31.532 31.532 0 01-2.327-14.038 31.433 31.433 0 013.839-13.243 32.232 32.232 0 018.329-9.799c5.259-4.156 11.865-6.62 18.6-6.938zm15.6 12.011c-8.543.979-17.086 1.933-25.627 2.92-.013 8.152.006 16.308-.008 24.462-2.325-.848-5.015-.792-7.24.318-1.33.665-2.493 1.763-2.997 3.169-.503 1.356-.289 2.934.528 4.128.752 1.154 1.947 1.978 3.235 2.465 1.48.569 3.115.675 4.68.452 1.888-.295 3.742-1.222 4.862-2.784.67-.936.965-2.102.894-3.237-.014-7.054.008-14.105-.01-21.158 1.976-.282 3.965-.458 5.946-.7 4.944-.56 9.885-1.124 14.827-1.682V67.42c-1.677-.563-3.506-.755-5.247-.362-1.764.38-3.483 1.32-4.479 2.84a4.618 4.618 0 00-.637 3.729c.32 1.196 1.12 2.243 2.139 2.959 1.533 1.101 3.474 1.576 5.355 1.489 2.036-.083 4.111-.843 5.498-2.353a5.078 5.078 0 001.329-3.83c-.007-6.755-.002-13.51-.005-20.265.058-2.962-.002-5.924-.002-8.884-1.018.053-2.03.212-3.04.313z"
-  }));
-});
-
-/**
- * Render opt in prompt instead of children if third party consent
- * cookie has been configured in theme options and user has not given
- * consent for passed provider.
- *
- * @param {Object} props
- * @param {string} props.providerName -
- *   Only render children if user has given consent for this provider.
- * @param {React.ReactElement} props.children -
- *   Children to conditionally render.
- * @param {function} [props.wrapper] -
- *   Function that receives children to allow wrapping opt-in prompt
- *   in custom elements.
- * @param {boolean} [props.icon=true] -
- *   Allow hiding the icon in the opt-in prompt.
- *
- * @name ThirdPartyOptIn
- */
-
-function OptIn(_ref) {
-  var children = _ref.children,
-      providerName = _ref.providerName,
-      wrapper = _ref.wrapper,
-      icon = _ref.icon;
-
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  var cookieMessage = t("pageflow_scrolled.public.third_party_consent.opt_in_prompt.".concat(providerName));
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      consentedHere = _useState2[0],
-      setConsentedHere = _useState2[1];
-
-  var _useConsentGiven = useConsentGiven(providerName),
-      _useConsentGiven2 = _slicedToArray(_useConsentGiven, 2),
-      consentGiven = _useConsentGiven2[0],
-      giveConsent = _useConsentGiven2[1];
-
-  if (consentGiven || !providerName) {
-    return typeof children === 'function' ? children({
-      consentedHere: consentedHere
-    }) : children;
-  }
-
-  function accept() {
-    giveConsent(providerName);
-    setConsentedHere(true);
-  }
-
-  return wrapper( /*#__PURE__*/React.createElement("div", {
-    className: styles$3.optIn
-  }, icon && /*#__PURE__*/React.createElement("div", {
-    className: styles$3.optInIcon
-  }, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.optInMessage
-  }, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-    className: styles$3.optInButton,
-    onClick: accept
-  }, t('pageflow_scrolled.public.third_party_consent.confirm')))));
-}
-OptIn.defaultProps = {
-  icon: true,
-  wrapper: function wrapper(children) {
-    return children;
-  }
-};
-
-var styles$4 = {"optOut":"OptOutInfo-module_optOut__2Q3d5","tooltip":"OptOutInfo-module_tooltip__2bpU0","icon":"OptOutInfo-module_icon__1kL6Q utils-module_unstyledButton__3rgne","full":"OptOutInfo-module_full__s_Ono"};
-
-/**
- * Display info tooltip with a link to opt out of third party
- * embeds. Opt out url needs to be configured in theme options.
- *
- * @param {Object} props
- * @param {string} props.providerName -
- *   Only display if user has given consent for this provider.
- * @param {string} props.contentElementPosition -
- *   Position setting of parent content element. Used to correctly place
- *   tooltip when content element uses full width.
- * @param {boolean} [hide] -
- *   Temporarily hide the tooltip, e.g. while the embed is playing
- *
- * @name ThirdPartyOptOutInfo
- */
-
-function OptOutInfo(_ref) {
-  var _theme$options$thirdP;
-
-  var providerName = _ref.providerName,
-      hide = _ref.hide,
-      contentElementPosition = _ref.contentElementPosition;
-
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  var theme = useTheme();
-  var optOutUrl = (_theme$options$thirdP = theme.options.thirdPartyConsent) === null || _theme$options$thirdP === void 0 ? void 0 : _theme$options$thirdP.optOutUrl;
-
-  var _useConsentGiven = useConsentGiven(providerName),
-      _useConsentGiven2 = _slicedToArray(_useConsentGiven, 1),
-      consentGiven = _useConsentGiven2[0];
-
-  if (!optOutUrl || !consentGiven) {
-    return null;
-  }
-
-  var linkText = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt_link');
-  var linkHtml = "<a href=\"".concat(optOutUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(linkText, "</a>");
-  var html = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt', {
-    link: linkHtml
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$4.optOut, styles$4[contentElementPosition]),
-    style: hide ? {
-      opacity: 0,
-      visibility: 'hidden'
-    } : undefined
-  }, /*#__PURE__*/React.createElement("button", {
-    className: styles$4.icon
-  }, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$4.tooltip
-  }, /*#__PURE__*/React.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: html
-    }
-  })));
-}
-
-function registerVendors(_ref) {
-  var contentElementTypes = _ref.contentElementTypes,
-      seed = _ref.seed,
-      consent = _ref.consent,
-      cookieName = _ref.cookieName;
-  var options = seed.config.theme.options.thirdPartyConsent;
-  var locale = seed.collections.entries[0].locale;
-  cookieName = cookieName || (options === null || options === void 0 ? void 0 : options.cookieName);
-  contentElementTypes.consentVendors({
-    contentElements: seed.collections.contentElements,
-    t: function t(key, options) {
-      return I18n.t(key, _objectSpread2(_objectSpread2({}, options), {}, {
-        locale: locale
-      }));
-    }
-  }).forEach(function (vendor) {
-    var _options$cookieProvid;
-
-    consent.registerVendor(vendor.name, {
-      displayName: vendor.displayName,
-      description: vendor.description,
-      paradigm: cookieName ? vendor.paradigm || 'opt-in' : 'skip',
-      cookieName: cookieName,
-      cookieKey: options === null || options === void 0 ? void 0 : (_options$cookieProvid = options.cookieProviderNameMapping) === null || _options$cookieProvid === void 0 ? void 0 : _options$cookieProvid[vendor.name],
-      cookieDomain: options === null || options === void 0 ? void 0 : options.cookieDomain
-    });
-  });
-  consent.closeVendorRegistration();
-}
-
-var SectionLifecycleContext = createContext();
-var SectionLifecycleProvider = createScrollPositionLifecycleProvider(SectionLifecycleContext);
-var useSectionLifecycle = createScrollPositionLifecycleHook(SectionLifecycleContext);
-
-var Atmo = /*#__PURE__*/function () {
-  function Atmo(_ref) {
-    var _this = this;
-
-    var atmoSourceId = _ref.atmoSourceId,
-        multiPlayer = _ref.multiPlayer,
-        backgroundMedia = _ref.backgroundMedia;
-
-    _classCallCheck(this, Atmo);
-
-    this.multiPlayer = multiPlayer;
-    this.atmoSourceId = atmoSourceId;
-    this.backgroundMedia = backgroundMedia;
-    this.backgroundMedia.on('change:muted', function () {
-      _this.update();
-    });
-    documentHiddenState(function (hiddenState) {
-      if (hiddenState === 'hidden') {
-        _this.multiPlayer.fadeOutIfPlaying();
-      } else {
-        _this.update();
-      }
-    });
-    this.listenTo(this.multiPlayer, 'playfailed', function () {
-      backgroundMedia.mute(true);
-    });
-  }
-
-  _createClass(Atmo, [{
-    key: "disable",
-    value: function disable() {
-      this.disabled = true;
-      this.multiPlayer.fadeOutAndPause();
-      events.trigger('atmo:disabled');
-    }
-  }, {
-    key: "enable",
-    value: function enable() {
-      this.disabled = false;
-      this.update();
-      events.trigger('atmo:enabled');
-    }
-  }, {
-    key: "pause",
-    value: function pause() {
-      if (browser.has('volume control support')) {
-        return this.multiPlayer.fadeOutAndPause();
-      } else {
-        this.multiPlayer.pause();
-      }
-    }
-  }, {
-    key: "turnDown",
-    value: function turnDown() {
-      if (browser.has('volume control support')) {
-        return this.multiPlayer.changeVolumeFactor(0.2);
-      } else {
-        this.multiPlayer.pause();
-      }
-    }
-  }, {
-    key: "resume",
-    value: function resume() {
-      if (this.multiPlayer.paused()) {
-        if (this.disabled || this.backgroundMedia.muted) {
-          return Promise.resolve();
-        } else {
-          return this.multiPlayer.resumeAndFadeIn();
-        }
-      } else {
-        return this.multiPlayer.changeVolumeFactor(1);
-      }
-    }
-  }, {
-    key: "update",
-    value: function update() {
-      if (!this.disabled) {
-        if (this.backgroundMedia.muted) {
-          this.multiPlayer.fadeOutAndPause();
-        } else {
-          this.multiPlayer.fadeTo(this.atmoSourceId);
-        }
-      }
-    }
-  }, {
-    key: "createMediaPlayerHooks",
-    value: function createMediaPlayerHooks(atmoDuringPlayback) {
-      var atmo = this;
-      return {
-        before: function before() {
-          if (atmoDuringPlayback === 'mute') {
-            atmo.pause();
-          } else if (atmoDuringPlayback === 'turnDown') {
-            atmo.turnDown();
-          }
-        },
-        after: function after() {
-          atmo.resume();
-        }
-      };
-    }
-  }]);
-
-  return Atmo;
-}();
-Object.assign(Atmo.prototype, BackboneEvents);
-
-function getContextValue(updateAtmo, createMediaPlayerHooks) {
-  var empty = function empty() {};
-
-  return {
-    updateAtmo: updateAtmo || empty,
-    createMediaPlayerHooks: createMediaPlayerHooks || empty
-  };
-}
-
-var AtmoContext = createContext(getContextValue());
-function AtmoProvider(_ref) {
-  var children = _ref.children;
-  var atmoConfig = useRef({});
-  useEffect(function () {
-    var currentAtmo = atmoConfig.current;
-    currentAtmo.pool = PlayerSourceIDMap(media, {
-      playerOptions: {
-        tagName: 'audio',
-        loop: true
-      }
-    });
-    currentAtmo.multiPlayer = new MultiPlayer(currentAtmo.pool, {
-      fadeDuration: 500,
-      crossFade: true,
-      playFromBeginning: false,
-      rewindOnChange: true
-    });
-    currentAtmo.atmo = new Atmo({
-      multiPlayer: currentAtmo.multiPlayer,
-      backgroundMedia: media
-    });
-  }, []);
-
-  var updateAtmo = function updateAtmo(_ref2) {
-    var audioFilePermaId = _ref2.audioFilePermaId,
-        sources = _ref2.sources;
-    var currentAtmo = atmoConfig.current;
-
-    if (currentAtmo.atmo) {
-      currentAtmo.pool.mapSources(audioFilePermaId, sources);
-      currentAtmo.atmo.atmoSourceId = audioFilePermaId;
-      currentAtmo.atmo.update();
-    }
-  };
-
-  var createMediaPlayerHooks = function createMediaPlayerHooks(options) {
-    if (atmoConfig.current.atmo) {
-      return atmoConfig.current.atmo.createMediaPlayerHooks(options);
-    }
-  };
-
-  var contextValue = useMemo(function () {
-    return getContextValue(updateAtmo, createMediaPlayerHooks);
-  }, []);
-  return /*#__PURE__*/React.createElement(AtmoContext.Provider, {
-    value: contextValue
-  }, children);
-}
-function useAtmo() {
-  return useContext(AtmoContext);
-}
-
-function PlayerContainer(_ref) {
-  var filePermaId = _ref.filePermaId,
-      sources = _ref.sources,
-      textTrackSources = _ref.textTrackSources,
-      type = _ref.type,
-      playsInline = _ref.playsInline,
-      loop = _ref.loop,
-      controls = _ref.controls,
-      altText = _ref.altText,
-      mediaEventsContextData = _ref.mediaEventsContextData,
-      atmoDuringPlayback = _ref.atmoDuringPlayback,
-      onSetup = _ref.onSetup,
-      onDispose = _ref.onDispose;
-  var playerWrapperRef = useRef(null);
-  var atmo = useAtmo();
-  useEffect(function () {
-    var playerWrapper = playerWrapperRef.current;
-
-    if (sources) {
-      var player = media.getPlayer(sources, {
-        textTrackSources: textTrackSources,
-        filePermaId: filePermaId,
-        tagName: type,
-        playsInline: playsInline,
-        loop: loop,
-        controls: controls,
-        hooks: atmoDuringPlayback ? atmo.createMediaPlayerHooks(atmoDuringPlayback) : {},
-        //create hooks only for inline media players
-        mediaEventsContextData: mediaEventsContextData,
-        altText: altText,
-        onRelease: function onRelease() {
-          playerWrapper.removeChild(player.el());
-          player = null;
-
-          if (onDispose) {
-            onDispose();
-          }
-        }
-      });
-      playerWrapper.appendChild(player.el());
-
-      if (onSetup) {
-        onSetup(player);
-      }
-
-      return function () {
-        // onRelease might already have been called by the pool when
-        // it needed to re-use a player.
-        if (player) {
-          media.releasePlayer(player);
-        }
-      };
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    ref: playerWrapperRef
-  });
-}
-
-PlayerContainer.defaultProps = {
-  textTrackSources: []
-}; // This function assumes that that the parameters are arrays of
-// objects containing only skalar values. It is not a full deep
-// equality check, but  suffices for the use case.
-
-function deepEqual(a, b) {
-  if (a.length !== b.length) {
-    return false;
-  }
-
-  for (var i = 0; i < a.length; i++) {
-    var aItem = a[i];
-    var bItem = b[i];
-
-    if (Object.keys(aItem).length !== Object.keys(bItem).length) {
-      return false;
-    }
-
-    for (var key in aItem) {
-      if (aItem[key] !== bItem[key]) {
-        return false;
-      }
-    }
-  }
-
-  return true;
-}
-
-function areEqual(prevProps, nextProps) {
-  return prevProps.type === nextProps.type && prevProps.playsInline === nextProps.playsInline && prevProps.loop === nextProps.loop && prevProps.controls === nextProps.controls && prevProps.altText === nextProps.altText && prevProps.atmoDuringPlayback === nextProps.atmoDuringPlayback && deepEqual(prevProps.sources, nextProps.sources) && deepEqual(prevProps.textTrackSources, nextProps.textTrackSources);
-}
-
-var PlayerContainer$1 = React.memo(PlayerContainer, areEqual);
-
-var ScrollToSectionContext = React.createContext(function () {});
+var ScrollToSectionContext = React.createContext(function () {});
 
 function watchPlayer (player, actions) {
   player.on('loadedmetadata', function () {
@@ -1353,7 +705,7 @@ function getTextTrackSources(textTrackFiles, textTracksDisabled) {
 
 var textTrackStyles = {"inset":"textTracks-module_inset__K7DIL"};
 
-var styles$5 = {"wrapper":"MediaPlayer-module_wrapper__1cSGR","cover":"MediaPlayer-module_cover__2wGez"};
+var styles$1 = {"wrapper":"MediaPlayer-module_wrapper__1cSGR","cover":"MediaPlayer-module_cover__2wGez"};
 
 var PLAY = 'MEDIA_PLAY';
 var PLAYING = 'MEDIA_PLAYING';
@@ -1814,6 +1166,10 @@ function playerStateReducer(state, action) {
       });
 
     case USER_INTERACTION:
+      if (!state.userIdle) {
+        return state;
+      }
+
       return _objectSpread2(_objectSpread2({}, state), {}, {
         userIdle: false
       });
@@ -1861,7 +1217,7 @@ function MediaPlayer(props) {
   var isStaticPreview = useIsStaticPreview();
   var load = props.load === 'auto' && isStaticPreview ? 'poster' : props.load;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$5.wrapper, styles$5[props.fit], _defineProperty({}, textTrackStyles.inset, props.textTracksInset))
+    className: classNames(styles$1.wrapper, styles$1[props.fit], _defineProperty({}, textTrackStyles.inset, props.textTracksInset))
   }, load === 'auto' && /*#__PURE__*/React.createElement(PreparedMediaPlayer, props), load !== 'none' && /*#__PURE__*/React.createElement(Poster, {
     imageUrl: props.posterImageUrl,
     objectPosition: props.objectPosition,
@@ -2100,6 +1456,8 @@ function addDisplayLabel(textTrackFile, t) {
   });
 }
 
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 function usePrevious(value) {
   var ref = useRef();
   useEffect(function () {
@@ -2205,7 +1563,7 @@ function AudioStructuredData(_ref) {
   });
 }
 
-var styles$6 = {"spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
+var styles$2 = {"spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
 
 /**
  * Render audio file in MediaPlayer.
@@ -2230,7 +1588,7 @@ function AudioPlayer(_ref) {
 
   if (audioFile && audioFile.isReady) {
     return /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles$6.spaceForTextTracks, _defineProperty({}, styles$6.spaceForTextTracksActive, !posterImageFile && textTracks.files.length))
+      className: classNames(styles$2.spaceForTextTracks, _defineProperty({}, styles$2.spaceForTextTracksActive, !posterImageFile && textTracks.files.length))
     }, /*#__PURE__*/React.createElement(MediaPlayer, Object.assign({
       type: 'audio',
       textTracks: textTracks,
@@ -2276,11 +1634,8 @@ function processSources(audioFile) {
   return sources;
 }
 
-function SectionAtmo(props) {
-  var audioFile = useFile({
-    collectionName: 'audioFiles',
-    permaId: props.audioFilePermaId
-  });
+function SectionAtmo(_ref) {
+  var audioFile = _ref.audioFile;
   var lastAudioFile = usePrevious(audioFile);
   var atmo = useAtmo();
   var processAtmo = useCallback(function () {
@@ -2293,10 +1648,10 @@ function SectionAtmo(props) {
     if (atmo) {
       atmo.updateAtmo({
         sources: sources,
-        audioFilePermaId: props.audioFilePermaId
+        audioFilePermaId: audioFile === null || audioFile === void 0 ? void 0 : audioFile.permaId
       });
     }
-  }, [atmo, audioFile, props.audioFilePermaId]);
+  }, [atmo, audioFile]);
   useSectionLifecycle({
     onActivate: function onActivate() {
       processAtmo();
@@ -2310,7 +1665,7 @@ function SectionAtmo(props) {
   return null;
 }
 
-var styles$7 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
+var styles$3 = {"Foreground":"Foreground-module_Foreground__13ODU","fullFadeHeight":"Foreground-module_fullFadeHeight__2p9dx","fullHeight":"Foreground-module_fullHeight__1vMXb","paddingBottom":"Foreground-module_paddingBottom__3OtY4"};
 
 var ForcePaddingContext = createContext(false);
 function Foreground(props) {
@@ -2324,7 +1679,19 @@ function Foreground(props) {
 }
 
 function className(props, forcePadding) {
-  return classNames(styles$7.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$7.paddingBottom, props.paddingBottom || forcePadding), styles$7["".concat(props.heightMode, "Height")]);
+  return classNames(styles$3.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$3.paddingBottom, props.paddingBottom || forcePadding), styles$3["".concat(props.heightMode, "Height")]);
+}
+
+function isBlank(html) {
+  return !!stripTags(html).match(/^\s*$/);
+}
+function presence(html) {
+  return isBlank(html) ? null : html;
+}
+function isBlankEditableTextValue(value) {
+  var _value$0$children$;
+
+  return !value || value.length === 0 || value.length === 1 && value[0].children.length <= 1 && !((_value$0$children$ = value[0].children[0]) === null || _value$0$children$ === void 0 ? void 0 : _value$0$children$.text);
 }
 
 /**
@@ -2464,6 +1831,117 @@ var api = {
   widgetTypes: new WidgetTypeRegistry()
 };
 
+function Widget(_ref) {
+  var role = _ref.role,
+      props = _ref.props,
+      children = _ref.children;
+  var widget = useWidget({
+    role: role
+  });
+
+  if (!widget) {
+    return null;
+  }
+
+  var Component = api.widgetTypes.getComponent(widget.typeName);
+  return /*#__PURE__*/React.createElement(Component, Object.assign({
+    configuration: widget.configuration
+  }, props, {
+    children: children
+  }));
+}
+
+var styles$4 = {"list":"InlineFileRights-module_list__2OuO5"};
+
+function InlineFileRights(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$context = _ref.context,
+      context = _ref$context === void 0 ? 'standAlone' : _ref$context,
+      playerControlsTransparent = _ref.playerControlsTransparent,
+      playerControlsStandAlone = _ref.playerControlsStandAlone;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var filteredItems = items.filter(function (item) {
+    return item.file && item.file.inlineRights && !isBlank(item.file.rights);
+  });
+
+  if (!filteredItems.length) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Widget, {
+    role: "inlineFileRights",
+    props: {
+      context: context,
+      playerControlsTransparent: playerControlsTransparent,
+      playerControlsStandAlone: playerControlsStandAlone
+    }
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles$4.list
+  }, filteredItems.map(function (_ref2) {
+    var label = _ref2.label,
+        file = _ref2.file;
+    return /*#__PURE__*/React.createElement("li", {
+      key: "".concat(label, "-").concat(file.id)
+    }, label && /*#__PURE__*/React.createElement("span", null, t(label, {
+      scope: 'pageflow_scrolled.public.inline_file_rights_labels'
+    }), ": "), renderRights(file), renderLicense(file));
+  })));
+}
+
+function renderRights(file) {
+  if (isBlank(file.configuration.source_url)) {
+    return file.rights;
+  } else {
+    return /*#__PURE__*/React.createElement("a", {
+      href: file.configuration.source_url,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, file.rights);
+  }
+}
+
+function renderLicense(file) {
+  if (!file.license) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, ' ', "(", /*#__PURE__*/React.createElement("a", {
+    href: file.license.url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, file.license.name), ")");
+}
+
+var styles$5 = {"fade-duration":"0.5s","wrapper":"SectionInlineFileRights-module_wrapper__1l6rr","fade":"SectionInlineFileRights-module_fade__1Snfk","inactive":"SectionInlineFileRights-module_inactive__1VpQh"};
+
+function SectionInlineFileRights(_ref) {
+  var _section$nextSection, _section$nextSection$, _classNames;
+
+  var section = _ref.section,
+      state = _ref.state,
+      backdrop = _ref.backdrop,
+      atmoAudioFile = _ref.atmoAudioFile;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$5.wrapper, (_classNames = {}, _defineProperty(_classNames, styles$5.fade, (_section$nextSection = section.nextSection) === null || _section$nextSection === void 0 ? void 0 : (_section$nextSection$ = _section$nextSection.transition) === null || _section$nextSection$ === void 0 ? void 0 : _section$nextSection$.startsWith('fade')), _defineProperty(_classNames, styles$5.inactive, state !== 'active'), _classNames))
+  }, /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "section",
+    items: [{
+      label: 'image',
+      file: backdrop.image
+    }, {
+      label: 'video',
+      file: backdrop.video
+    }, {
+      label: 'atmo',
+      file: atmoAudioFile
+    }]
+  }));
+}
+
 // For reasons that are beyond me, Storybook's Webpack build fails
 // with a "JavaScript heap out of memory" error if this import
 // expression lives in inlineEditing/index.js directly. I originally
@@ -2472,7 +1950,7 @@ var api = {
 // file with an empty one, but found out that extracting the import
 // to a separate file apparently is enough.
 function importComponents() {
-  return import('./components-b3160dd7.js');
+  return import('./components-24363f97.js');
 }
 
 var components = {};
@@ -2509,12 +1987,14 @@ function withInlineEditingAlternative(name, Component) {
 var ContentElementAttributesContext = createContext({});
 function ContentElementAttributesProvider(_ref) {
   var id = _ref.id,
+      width = _ref.width,
       children = _ref.children;
   var attributes = useMemo(function () {
     return {
-      contentElementId: id
+      contentElementId: id,
+      width: width
     };
-  }, [id]);
+  }, [id, width]);
   return /*#__PURE__*/React.createElement(ContentElementAttributesContext.Provider, {
     value: attributes
   }, children);
@@ -2575,22 +2055,35 @@ function useContentElementLifecycle(options) {
   return result;
 }
 
-var styles$8 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
+var widths = {
+  xxs: -3,
+  xs: -2,
+  sm: -1,
+  md: 0,
+  lg: 1,
+  xl: 2,
+  full: 3
+};
+function widthName(width) {
+  return Object.keys(widths)[(width || 0) + 3];
+}
+
+var styles$6 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
 
 function ContentElementMargin(_ref) {
-  var position = _ref.position,
+  var width = _ref.width,
       children = _ref.children;
 
-  if (position === 'full') {
+  if (width === widths.full) {
     return children;
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$8.wrapper
+    className: styles$6.wrapper
   }, children);
 }
 
-var styles$9 = {"missing":"ContentElement-module_missing__2_1j9"};
+var styles$7 = {"missing":"ContentElement-module_missing__2_1j9"};
 
 var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ContentElementErrorBoundary, _React$Component);
@@ -2614,7 +2107,7 @@ var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       if (this.state.hasError) {
         return /*#__PURE__*/React.createElement("div", {
-          className: styles$9.missing
+          className: styles$7.missing
         }, "Error rendering element of type \"", this.props.type, "\"");
       }
 
@@ -2637,21 +2130,24 @@ var ContentElement = withInlineEditingDecorator('ContentElementDecorator', funct
 
   if (Component) {
     return /*#__PURE__*/React.createElement(ContentElementAttributesProvider, {
-      id: props.id
+      id: props.id,
+      width: props.width
     }, /*#__PURE__*/React.createElement(ContentElementLifecycleProvider, {
       type: props.type
     }, /*#__PURE__*/React.createElement(ContentElementMargin, {
-      position: props.itemProps.position
+      width: props.width
     }, /*#__PURE__*/React.createElement(ContentElementErrorBoundary, {
       type: props.type
     }, /*#__PURE__*/React.createElement(Component, {
       sectionProps: props.sectionProps,
+      customMargin: props.customMargin,
       configuration: props.itemProps,
+      contentElementWidth: props.width,
       contentElementId: props.id
     })))));
   } else {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$9.missing
+      className: styles$7.missing
     }, "Element of unknown type \"", props.type, "\"");
   }
 });
@@ -2659,22 +2155,45 @@ ContentElement.defaultProps = {
   itemProps: {}
 };
 
+var styles$8 = {"wrapper":"ContentElementScrollSpace-module_wrapper__2ZBwZ","inner":"ContentElementScrollSpace-module_inner__1FBgh"};
+
+function ContentElementScrollSpace(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$8.wrapper
+  }, /*#__PURE__*/React.createElement(Measure, {
+    bounds: true
+  }, function (_ref2) {
+    var measureRef = _ref2.measureRef,
+        contentRect = _ref2.contentRect;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: measureRef,
+      className: styles$8.inner,
+      style: {
+        '--height': contentRect.bounds.height / 2
+      }
+    }, children);
+  }));
+}
+
 function ContentElements(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.items.map(function (item, index) {
-    return props.children(item, /*#__PURE__*/React.createElement(MemoizedContentElement, {
+    return props.children(item, renderScrollSpace(item, /*#__PURE__*/React.createElement(MemoizedContentElement, {
       key: item.id,
       id: item.id,
       permaId: item.permaId,
       type: item.type,
       first: index === 0,
       position: item.position,
+      width: item.width,
       itemProps: item.props,
+      customMargin: props.customMargin,
       sectionProps: props.sectionProps
-    }), index);
+    })), index);
   }));
 }
 var MemoizedContentElement = React.memo(ContentElement, function (prevProps, nextProps) {
-  return prevProps.id === nextProps.id && prevProps.permaId === nextProps.permaId && prevProps.type === nextProps.type && prevProps.position === nextProps.position && prevProps.itemProps === nextProps.itemProps && prevProps.sectionProps === nextProps.sectionProps;
+  return prevProps.id === nextProps.id && prevProps.permaId === nextProps.permaId && prevProps.type === nextProps.type && prevProps.position === nextProps.position && prevProps.width === nextProps.width && prevProps.itemProps === nextProps.itemProps && prevProps.customMargin === nextProps.customMargin && prevProps.sectionProps === nextProps.sectionProps;
 });
 ContentElements.defaultProps = {
   children: function children(item, child) {
@@ -2682,123 +2201,178 @@ ContentElements.defaultProps = {
   }
 };
 
+function renderScrollSpace(item, children) {
+  if (!item.standAlone) {
+    return children;
+  }
+
+  return /*#__PURE__*/React.createElement(ContentElementScrollSpace, {
+    key: item.id,
+    children: children
+  });
+}
+
 function useMediaQuery(query) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    active: true
+  },
+      active = _ref.active;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       doesMatch = _useState2[0],
-      onSetDoesMatch = _useState2[1];
+      setDoesMatch = _useState2[1];
 
   useEffect(function () {
-    var onUpdateMatch = function onUpdateMatch(_ref) {
-      var matches = _ref.matches;
-      onSetDoesMatch(matches);
+    if (!active) {
+      return;
+    }
+
+    var onUpdateMatch = function onUpdateMatch(_ref2) {
+      var matches = _ref2.matches;
+      setDoesMatch(matches);
     };
 
     var matcher = window.matchMedia(query);
-    var isModern = ('addEventListener' in matcher);
-
-    if (isModern) {
-      matcher.addEventListener('change', onUpdateMatch);
-    } else {
-      matcher.addListener(onUpdateMatch);
-    }
-
+    matcher.addEventListener('change', onUpdateMatch);
     onUpdateMatch(matcher);
     return function () {
-      if (isModern) {
-        matcher.removeEventListener('change', onUpdateMatch);
-      } else {
-        matcher.removeListener(onUpdateMatch);
-      }
+      matcher.removeEventListener('change', onUpdateMatch);
     };
-  }, [query, onSetDoesMatch]);
-  return doesMatch;
-}
-
-function useNarrowViewport() {
-  var _theme$options$proper, _theme$options$proper2;
-
-  var theme = useTheme();
-  var maxWidth = ((_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : (_theme$options$proper2 = _theme$options$proper.root) === null || _theme$options$proper2 === void 0 ? void 0 : _theme$options$proper2.narrowViewportBreakpoint) || '950px';
-  return useMediaQuery("(max-width: ".concat(maxWidth, ")"));
+  }, [query, setDoesMatch, active]);
+  return active && doesMatch;
 }
 
-var styles$a = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","sticky":"TwoColumn-module_sticky__4LCDO","inline":"TwoColumn-module_inline__1fPfM","wide":"TwoColumn-module_wide__xdF_t","right":"TwoColumn-module_right__Fr52a","narrowViewport":"TwoColumn-module_narrowViewport__1x_NY","wideViewport":"TwoColumn-module_wideViewport___c_Zz"};
-
-function availablePositions(narrow) {
-  if (narrow) {
-    return ['inline', 'wide', 'full'];
-  } else {
-    return ['inline', 'sticky', 'wide', 'full'];
-  }
-}
+var styles$9 = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","box":"TwoColumn-module_box__1Nils","inline":"TwoColumn-module_inline__1fPfM","width-lg":"TwoColumn-module_width-lg__2MD35","width-xl":"TwoColumn-module_width-xl__3Bxet","width-full":"TwoColumn-module_width-full__1QWYO","restrict-xxs":"TwoColumn-module_restrict-xxs__6il-H","restrict-xs":"TwoColumn-module_restrict-xs__AOezq","restrict-sm":"TwoColumn-module_restrict-sm__2rKty","customMargin":"TwoColumn-module_customMargin__o0uxH","right":"TwoColumn-module_right__Fr52a","sticky":"TwoColumn-module_sticky__4LCDO"};
 
 function TwoColumn(props) {
-  var narrow = useNarrowViewport();
+  var shouldInline = useShouldInlineSticky();
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$a.root, styles$a[props.align], narrow ? styles$a.narrowViewport : styles$a.wideViewport)
+    className: classNames(styles$9.root, styles$9[props.align])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$a.group),
+    className: classNames(styles$9.group),
     key: props.align
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inline,
+    className: classNames(styles$9.box, styles$9.inline),
     ref: props.contentAreaRef
-  })), renderItems(props, narrow), renderPlaceholder(props.placeholder));
+  })), renderItems(props, shouldInline), renderPlaceholder(props.placeholder));
 }
 TwoColumn.defaultProps = {
   align: 'left'
 };
 
-function renderItems(props, narrow) {
-  return groupItemsByPosition(props.items, availablePositions(narrow)).map(function (group, index) {
-    return /*#__PURE__*/React.createElement("div", {
+function useShouldInlineSticky() {
+  var _theme$options$proper, _shouldInline;
+
+  var theme = useTheme();
+  var root = ((_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : _theme$options$proper.root) || {};
+  var shouldInline = (_shouldInline = {}, _defineProperty(_shouldInline, widths.md, useMediaQuery("(max-width: ".concat(root.twoColumnStickyBreakpoint || '950px', ")"))), _defineProperty(_shouldInline, widths.lg, useMediaQuery("(max-width: ".concat(root.twoColumnStickyLgBreakpoint || '1200px', ")"))), _defineProperty(_shouldInline, widths.xl, useMediaQuery("(max-width: ".concat(root.twoColumnStickyXlBreakpoint || '1400px', ")"))), _shouldInline);
+  return function (width) {
+    return width <= widths.md ? shouldInline[widths.md] : shouldInline[width];
+  };
+} // Used in tests to render markers around groups
+
+
+TwoColumn.GroupComponent = 'div';
+
+function renderItems(props, shouldInline) {
+  return groupItemsByPosition(props.items, shouldInline).map(function (group, index) {
+    return /*#__PURE__*/React.createElement(TwoColumn.GroupComponent, {
       key: index,
-      className: classNames(styles$a.group, styles$a["group-".concat(group.position)])
-    }, renderItemGroup(props, group, 'sticky'), renderItemGroup(props, group, 'inline'), renderItemGroup(props, group, 'wide'), renderItemGroup(props, group, 'full'));
+      className: classNames(styles$9.group, styles$9["group-".concat(widthName(group.width))])
+    }, group.boxes.map(function (box, index) {
+      return renderItemGroup(props, box, index);
+    }));
   });
 }
 
-function renderItemGroup(props, group, position) {
-  if (group[position].length) {
+function renderItemGroup(props, box, key) {
+  if (box.items.length) {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$a[position]
-    }, props.children( /*#__PURE__*/React.createElement(ContentElements, {
+      key: key,
+      className: classNames(styles$9.box, styles$9[box.position], styles$9["width-".concat(widthName(box.width))], _defineProperty({}, styles$9.customMargin, box.customMargin))
+    }, props.children( /*#__PURE__*/React.createElement(RestrictWidth, {
+      width: box.width
+    }, /*#__PURE__*/React.createElement(ContentElements, {
       sectionProps: props.sectionProps,
-      items: group[position]
-    }), {
-      position: position,
-      openStart: position === 'inline' && group.openStart,
-      openEnd: position === 'inline' && group.openEnd
+      customMargin: box.customMargin,
+      items: box.items
+    })), {
+      position: box.position,
+      width: box.width,
+      customMargin: box.customMargin,
+      openStart: box.openStart,
+      openEnd: box.openEnd
     }));
   }
 }
 
-function groupItemsByPosition(items, availablePositions) {
+function RestrictWidth(_ref) {
+  var width = _ref.width,
+      children = _ref.children;
+
+  if (width >= 0) {
+    return children;
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$9["restrict-".concat(widthName(width))]
+    }, children);
+  }
+}
+
+function groupItemsByPosition(items, shouldInline) {
   var groups = [];
-  var currentGroup;
-  items.reduce(function (previousItemPosition, item, index) {
-    var position = availablePositions.indexOf(item.position) >= 0 ? item.position : 'inline';
+  var lastInlineBox = null;
+  var currentGroup, currentBox;
+  items.reduce(function (previousPosition, item, index) {
+    var _ref2 = api.contentElementTypes.getOptions(item.type) || {},
+        elementSupportsCustomMargin = _ref2.customMargin;
+
+    var width = item.width || 0;
+    var position = item.position === 'sticky' && !shouldInline(width) ? 'sticky' : 'inline';
+    var customMargin = !!elementSupportsCustomMargin && width < widths.full;
+
+    if (item.position === 'sticky' && position === 'inline' && width > widths.md) {
+      width -= 1;
+    }
+
+    if (!currentGroup || previousPosition !== position || position === 'sticky' && currentBox.customMargin !== customMargin || currentBox.width !== width) {
+      currentBox = null;
+
+      if (!(previousPosition === 'sticky' && position === 'inline' && width <= widths.md)) {
+        currentGroup = {
+          width: width,
+          boxes: []
+        };
+        groups.push(currentGroup);
+      }
+    }
 
-    if (!previousItemPosition || previousItemPosition !== position && !(previousItemPosition === 'sticky' && position === 'inline')) {
-      currentGroup = {
+    if (!currentBox || currentBox.customMargin !== customMargin) {
+      currentBox = {
+        customMargin: customMargin,
         position: position,
-        sticky: [],
-        inline: [],
-        wide: [],
-        full: []
+        width: width,
+        items: []
       };
-      groups = [].concat(_toConsumableArray(groups), [currentGroup]);
+
+      if (lastInlineBox && position === 'inline' && width <= widths.md && !customMargin) {
+        lastInlineBox.openEnd = true;
+        currentBox.openStart = true;
+      }
+
+      if (position === 'inline' && width <= widths.md && !customMargin) {
+        lastInlineBox = currentBox;
+      } else if (position === 'inline' && width > widths.md || customMargin && position !== 'sticky') {
+        lastInlineBox = null;
+      }
+
+      currentGroup.boxes.push(currentBox);
     }
 
-    currentGroup[position].push(item);
+    currentBox.items.push(item);
     return position;
   }, null);
-  groups.forEach(function (group, index) {
-    var previous = groups[index - 1];
-    var next = groups[index + 1];
-    group.openStart = previous && !(previous.full.length || previous.wide.length);
-    group.openEnd = next && next.inline.length > 0;
-  });
   return groups;
 }
 
@@ -2808,60 +2382,132 @@ function renderPlaceholder(placeholder) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$a.group)
+    className: classNames(styles$9.group)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inline
+    className: classNames(styles$9.box, styles$9.inline)
   }, placeholder));
 }
 
-var styles$b = {"outer":"Center-module_outer__3Rr0H","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-wide":"Center-module_item-wide__2shH7","item-full":"Center-module_item-full__1cEuv","clear":"Center-module_clear__jJEap","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt"};
+var styles$a = {"outer":"Center-module_outer__3Rr0H","customMargin":"Center-module_customMargin__1es3t","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-inline-lg":"Center-module_item-inline-lg__DGjXl","item-inline-xl":"Center-module_item-inline-xl__2McfB","item-inline-full":"Center-module_item-inline-full__l-6kG","clear":"Center-module_clear__jJEap","inner-xxs":"Center-module_inner-xxs__1oroz","inner-xs":"Center-module_inner-xs__3FRT8","inner-sm":"Center-module_inner-sm__-oQ0E","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt","sideBySide":"Center-module_sideBySide__-YsP0","inner-md":"Center-module_inner-md__3dLC3","inner-lg":"Center-module_inner-lg__2GQbs","inner-xl":"Center-module_inner-xl__3dOME"};
 
+var floatedPositions = ['left', 'right'];
 function Center(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.root)
+    className: classNames(styles$a.root)
   }, /*#__PURE__*/React.createElement("div", {
     ref: props.contentAreaRef
-  }), /*#__PURE__*/React.createElement(ContentElements, {
-    sectionProps: props.sectionProps,
-    items: props.items
-  }, function (item, child, index) {
-    return /*#__PURE__*/React.createElement("div", {
+  }), props.items.map(function (item, index) {
+    var customMargin = hasCustomMargin(item);
+    var position = item.position;
+    var width = widthName(getWidth(item));
+    return /*#__PURE__*/React.createElement(ContentElements, {
       key: item.id,
-      className: outerClassName(item)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles$b.item, styles$b["item-".concat(item.position)])
-    }, props.children( /*#__PURE__*/React.createElement("div", {
-      className: styles$b["inner-".concat(item.position)]
-    }, child), boxProps(props.items, item, index))));
+      sectionProps: props.sectionProps,
+      items: [item],
+      customMargin: customMargin
+    }, function (item, child) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: item.id,
+        className: outerClassName(props.items, index)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles$a.item, styles$a["item-".concat(position, "-").concat(width)])
+      }, props.children( /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles$a["inner-".concat(item.position)], styles$a["inner-".concat(width)], _defineProperty({}, styles$a["sideBySide"], sideBySideFloat(props.items, index)))
+      }, child), boxProps(props.items, item, index))));
+    });
   }), renderPlaceholder$1(props.placeholder));
 }
 
-function outerClassName(item) {
-  var _api$contentElementTy = api.contentElementTypes.getOptions(item.type),
-      supportsWrappingAroundFloats = _api$contentElementTy.supportsWrappingAroundFloats;
-
-  return classNames(styles$b.outer, styles$b["outer-".concat(item.position)], _defineProperty({}, styles$b.clear, !supportsWrappingAroundFloats));
+function outerClassName(items, index) {
+  var item = items[index];
+  return classNames(styles$a.outer, styles$a["outer-".concat(widthName(getWidth(item)))], _defineProperty({}, styles$a.customMargin, hasCustomMargin(item)), _defineProperty({}, styles$a.clear, clearItem(items, index)));
 }
 
 function boxProps(items, item, index) {
   var previous = items[index - 1];
   var next = items[index + 1];
+  var customMargin = hasCustomMargin(item);
+  var width = getWidth(item);
   return {
     position: item.position,
-    openStart: previous && item.position !== 'full' && previous.position !== 'full' && item.position !== 'wide' && previous.position !== 'wide',
-    openEnd: next && item.position !== 'full' && next.position !== 'full' && item.position !== 'wide' && next.position !== 'wide'
+    width: width,
+    customMargin: customMargin,
+    selfClear: selfClear(items, index),
+    openStart: previous && !customMargin && !hasCustomMargin(previous) && !isWideOrFull(item) && !isWideOrFull(previous),
+    openEnd: next && !customMargin && !hasCustomMargin(next) && !isWideOrFull(item) && !isWideOrFull(next)
   };
 }
 
+function isWideOrFull(item) {
+  return item.position === 'inline' && getWidth(item) > widths.md;
+}
+
+function selfClear(items, index) {
+  var item = items[index];
+  var next = items[index + 1];
+
+  if (supportsWrappingAroundFloats(item) || isFloated(item) && (!next || clearItem(items, index + 1))) {
+    return 'both';
+  } else if (isFloated(item)) {
+    return item.position === 'left' ? 'right' : 'left';
+  }
+
+  return 'none';
+}
+
+function clearItem(items, index) {
+  return supportsWrappingAroundFloats(items[index]) ? followsSideBySideElements(items, index) : !isFloatedFollowingOppositeFloated(items, index);
+}
+
+function followsSideBySideElements(items, index) {
+  return index > 1 && (items[index - 1].position === 'left' && items[index - 2].position === 'right' || items[index - 1].position === 'right' && items[index - 2].position === 'left');
+}
+
+function sideBySideFloat(items, index) {
+  return isFloatedFollowingOppositeFloated(items, index) || isFloatedFollowedByOppositeFloated(items, index);
+}
+
+function isFloatedFollowingOppositeFloated(items, index) {
+  return index > 0 && isFloated(items[index]) && isFloated(items[index - 1]) && items[index].position !== items[index - 1].position;
+}
+
+function isFloatedFollowedByOppositeFloated(items, index) {
+  return index < items.length - 1 && isFloated(items[index]) && isFloated(items[index + 1]) && items[index].position !== items[index + 1].position;
+}
+
+function isFloated(item) {
+  return floatedPositions.includes(item.position);
+}
+
+function supportsWrappingAroundFloats(item) {
+  var _api$contentElementTy = api.contentElementTypes.getOptions(item.type),
+      supportsWrappingAroundFloats = _api$contentElementTy.supportsWrappingAroundFloats;
+
+  return supportsWrappingAroundFloats;
+}
+
+function hasCustomMargin(item) {
+  var position = item.position;
+
+  var _ref = api.contentElementTypes.getOptions(item.type) || {},
+      elementSupportsCustomMargin = _ref.customMargin;
+
+  return !!(elementSupportsCustomMargin && position === 'inline' && getWidth(item) < widths.full);
+}
+
+function getWidth(item) {
+  return item.width || widths.md;
+}
+
 function renderPlaceholder$1(placeholder) {
   if (!placeholder) {
     return null;
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.outer)
+    className: classNames(styles$a.outer)
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.item)
+    className: classNames(styles$a.item)
   }, placeholder));
 }
 
@@ -2894,6 +2540,44 @@ function useScrollTarget(ref, isScrollTarget) {
   }, [ref, isScrollTarget]);
 }
 
+var SectionViewTimelineContext = React.createContext();
+function SectionViewTimelineProvider(_ref) {
+  var _backdrop$effects;
+
+  var backdrop = _ref.backdrop,
+      children = _ref.children;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      timeline = _useState2[0],
+      setTimeline = _useState2[1];
+
+  var ref = useRef();
+  var isNeeded = backdrop === null || backdrop === void 0 ? void 0 : (_backdrop$effects = backdrop.effects) === null || _backdrop$effects === void 0 ? void 0 : _backdrop$effects.some(function (effect) {
+    return effect.name === 'scrollParallax';
+  });
+  useEffect(function () {
+    if (!isNeeded || !window.ViewTimeline) {
+      return;
+    }
+
+    setTimeline(new window.ViewTimeline({
+      subject: ref.current
+    }));
+    return function () {
+      return setTimeline(null);
+    };
+  }, [isNeeded]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(SectionViewTimelineContext.Provider, {
+    value: timeline
+  }, children));
+}
+function useSectionViewTimeline() {
+  return useContext(SectionViewTimelineContext);
+}
+
 var DarkBackgroundContext = createContext(true);
 function BackgroundColorProvider(_ref) {
   var dark = _ref.dark,
@@ -2988,7 +2672,7 @@ function useDimension() {
   return [componentSize, measuredRef];
 }
 
-var styles$c = {"root":"Fullscreen-module_root__1N3CI"};
+var styles$b = {"root":"Fullscreen-module_root__1N3CI"};
 
 var DimensionContext = React.createContext({});
 function useFullscreenDimensions() {
@@ -3014,18 +2698,18 @@ var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: styles$c.root,
+    className: styles$b.root,
     style: {
       height: height
     }
   }, props.children);
 });
 
-var styles$d = {"FillColor":"FillColor-module_FillColor__S1uEG"};
+var styles$c = {"FillColor":"FillColor-module_FillColor__S1uEG"};
 
 function FillColor(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$d.FillColor,
+    className: styles$c.FillColor,
     style: {
       backgroundColor: props.color
     }
@@ -3187,7 +2871,12 @@ function sources(videoFile) {
     }
   }
 
-  if (quality === 'auto') {
+  if (features.isEnabled('force_fullhd_video_quality')) {
+    return [{
+      type: 'video/mp4',
+      src: videoFile.urls.fullhd || videoFile.urls.high
+    }];
+  } else if (quality === 'auto') {
     var result = [{
       type: 'application/x-mpegURL',
       src: videoFile.urls['hls-playlist']
@@ -3196,7 +2885,7 @@ function sources(videoFile) {
       src: videoFile.urls.high
     }];
 
-    if (videoFile.urls['dash-playlist']) {
+    if (videoFile.urls['dash-playlist'] && !features.isEnabled('hls_instead_of_dash')) {
       result = [{
         type: 'application/dash+xml',
         src: videoFile.urls['dash-playlist']
@@ -3290,7 +2979,7 @@ VideoPlayer.defaultProps = {
   controls: true
 };
 
-var styles$e = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
+var styles$d = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
 
 var MotifAreaVisibilityContext = React.createContext(false);
 function MotifAreaVisibilityProvider(_ref) {
@@ -3327,7 +3016,7 @@ var MotifArea = function MotifArea(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     ref: setElementRef,
-    className: classNames(styles$e.root, _defineProperty({}, styles$e.visible, visible)),
+    className: classNames(styles$d.root, _defineProperty({}, styles$d.visible, visible)),
     style: position,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave
@@ -3346,18 +3035,72 @@ function getPosition(props) {
   };
 }
 
-var styles$f = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","noCompositionLayer":"Backdrop-module_noCompositionLayer__33IlH","defaultBackground":"Backdrop-module_defaultBackground__1YQQL","effects":"Backdrop-module_effects__lCEXd"};
+var styles$e = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","noCompositionLayer":"Backdrop-module_noCompositionLayer__33IlH","defaultBackground":"Backdrop-module_defaultBackground__1YQQL","effects":"Backdrop-module_effects__lCEXd"};
 
 function Effects(_ref) {
   var file = _ref.file,
       children = _ref.children;
+  var ref = useRef();
+  var sectionViewTimeline = useSectionViewTimeline();
+  var isStaticPreview = useIsStaticPreview();
+
+  var _useSectionLifecycle = useSectionLifecycle(),
+      isVisible = _useSectionLifecycle.isVisible;
+
+  var scrollParallaxValue = getEffectValue(file, 'scrollParallax');
+  var autoZoomValue = getEffectValue(file, 'autoZoom');
+  useIsomorphicLayoutEffect(function () {
+    if (scrollParallaxValue && !isStaticPreview && sectionViewTimeline) {
+      var max = 20 * scrollParallaxValue / 100;
+      var scale = 100 + 2 * max;
+      var animation = ref.current.animate({
+        transform: ["scale(".concat(scale, "%) translateY(").concat(max, "%)"), "scale(".concat(scale, "%) translateY(").concat(-max, "%)")]
+      }, {
+        fill: 'forwards',
+        timeline: sectionViewTimeline,
+        rangeStart: 'cover 0%',
+        rangeEnd: 'cover 100%'
+      });
+      return function () {
+        return animation.cancel();
+      };
+    }
+  }, [sectionViewTimeline, scrollParallaxValue, isStaticPreview]);
+  var x = (file === null || file === void 0 ? void 0 : file.motifArea) ? 50 - (file.motifArea.left + file.motifArea.width / 2) : 0;
+  var y = (file === null || file === void 0 ? void 0 : file.motifArea) ? 50 - (file.motifArea.top + file.motifArea.height / 2) : 0;
+  useIsomorphicLayoutEffect(function () {
+    if (autoZoomValue && isVisible) {
+      var animation = ref.current.animate({
+        transform: ["translate(".concat(-x, "%, ").concat(-y, "%) scale(1) translate(").concat(x, "%, ").concat(y, "%)"), "translate(".concat(-x, "%, ").concat(-y, "%) scale(1.2) translate(").concat(x, "%, ").concat(y, "%)")]
+      }, {
+        iterations: 1,
+        fill: 'forwards',
+        duration: 1000 * (autoZoomValue / 100) + 40000 * (1 - autoZoomValue / 100),
+        composite: 'add',
+        easing: 'ease'
+      });
+      return function () {
+        return animation.cancel();
+      };
+    }
+  }, [autoZoomValue, isVisible, x, y]);
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$f.effects,
+    ref: ref,
+    className: styles$e.effects,
     style: {
       filter: getFilter((file === null || file === void 0 ? void 0 : file.effects) || [])
     }
   }, children);
 }
+
+function getEffectValue(file, name) {
+  var _find;
+
+  return (_find = ((file === null || file === void 0 ? void 0 : file.effects) || []).find(function (effect) {
+    return effect.name === name;
+  })) === null || _find === void 0 ? void 0 : _find.value;
+}
+
 function getFilter(effects) {
   return effects.map(function (effect) {
     if (effect.name === 'blur') {
@@ -3365,10 +3108,10 @@ function getFilter(effects) {
     } else if (['brightness', 'contrast', 'saturate'].includes(effect.name)) {
       var value = Math.round(effect.value < 0 ? 100 + effect.value * 0.6 : 100 + effect.value);
       return "".concat(effect.name, "(").concat(value, "%)");
-    } else {
+    } else if (['grayscale', 'sepia'].includes(effect.name)) {
       return "".concat(effect.name, "(").concat(effect.value, "%)");
     }
-  }).join(' ');
+  }).filter(Boolean).join(' ');
 }
 
 function BackgroundVideo(_ref) {
@@ -3434,16 +3177,7 @@ function BackgroundVideo(_ref) {
   }));
 }
 
-/**
- * Returns boolean indicating whether viewport orientation is currently
- * portrait.
- */
-
-function usePortraitOrientation() {
-  return useMediaQuery('(orientation: portrait)');
-}
-
-var styles$g = {"root":"Image-module_root__1ef3j"};
+var styles$f = {"fill":"Image-module_fill__1D1wH"};
 
 function ImageStructuredData(_ref) {
   var file = _ref.file;
@@ -3477,6 +3211,7 @@ function ImageStructuredData(_ref) {
  * @param {boolean} [props.load] - Whether to load the image. Can be used for lazy loading.
  * @param {boolean} [props.structuredData] - Whether to render a JSON+LD script tag.
  * @param {boolean} [props.preferSvg] - Use original if image is SVG.
+ * @param {boolean} [props.fill=true] - Position absolute and fill parent.
  */
 
 function Image(_ref) {
@@ -3494,7 +3229,7 @@ function renderImageTag(props, imageFile) {
   var cropPositionX = imageFile.cropPosition ? imageFile.cropPosition.x : 50;
   var cropPositionY = imageFile.cropPosition ? imageFile.cropPosition.y : 50;
   return /*#__PURE__*/React.createElement("img", {
-    className: classNames(styles$g.root),
+    className: classNames(_defineProperty({}, styles$f.fill, props.fill)),
     src: imageUrl(imageFile, props),
     alt: imageFile.configuration.alt ? imageFile.configuration.alt : '',
     style: {
@@ -3524,7 +3259,8 @@ function renderStructuredData(props, file) {
 
 Image.defaultProps = {
   load: true,
-  variant: 'large'
+  variant: 'large',
+  fill: true
 };
 
 function BackgroundImage(_ref) {
@@ -3540,114 +3276,48 @@ function BackgroundImage(_ref) {
   }, /*#__PURE__*/React.createElement(Image, {
     imageFile: image,
     load: shouldLoad,
-    structuredData: true,
-    preferSvg: true
-  })), /*#__PURE__*/React.createElement(MotifArea, {
-    key: image === null || image === void 0 ? void 0 : image.permaId,
-    onUpdate: onMotifAreaUpdate,
-    file: image,
-    containerWidth: containerDimension.width,
-    containerHeight: containerDimension.height
-  }));
-}
-
-function OrientationAwareBackgroundImage(_ref) {
-  var image = _ref.image,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      imageMobile = _ref.imageMobile,
-      containerDimension = _ref.containerDimension;
-  var mobile = usePortraitOrientation();
-
-  if (mobile) {
-    return /*#__PURE__*/React.createElement(BackgroundImage, {
-      image: imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(BackgroundImage, {
-      image: image,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  }
+    structuredData: true,
+    preferSvg: true
+  })), /*#__PURE__*/React.createElement(MotifArea, {
+    key: image === null || image === void 0 ? void 0 : image.permaId,
+    onUpdate: onMotifAreaUpdate,
+    file: image,
+    containerWidth: containerDimension.width,
+    containerHeight: containerDimension.height
+  }));
 }
 
 function BackgroundAsset(props) {
-  var video = useBackgroundFile({
-    file: useFile({
-      collectionName: 'videoFiles',
-      permaId: props.video
-    }),
-    motifArea: props.videoMotifArea,
-    containerDimension: props.containerDimension,
-    effects: props.effects
-  });
-  var image = useBackgroundFile({
-    file: useFile({
-      collectionName: 'imageFiles',
-      permaId: props.image
-    }),
-    motifArea: props.imageMotifArea,
-    containerDimension: props.containerDimension,
-    effects: props.effects
-  });
-  var imageMobile = useBackgroundFile({
-    file: useFile({
-      collectionName: 'imageFiles',
-      permaId: props.imageMobile
-    }),
-    motifArea: props.imageMobileMotifArea,
-    containerDimension: props.containerDimension,
-    effects: props.effectsMobile
+  var backgroundFile = useBackgroundFile({
+    file: props.backdrop.video || props.backdrop.image,
+    motifArea: props.backdrop.motifArea,
+    effects: props.backdrop.effects,
+    containerDimension: props.containerDimension
   });
 
-  if (video) {
+  if (props.backdrop.video) {
     return /*#__PURE__*/React.createElement(Fullscreen, {
       ref: props.setContainerRef
     }, /*#__PURE__*/React.createElement(BackgroundVideo, {
-      video: video,
+      video: backgroundFile,
       onMotifAreaUpdate: props.onMotifAreaUpdate,
       containerDimension: props.containerDimension
     }));
-  } else if (props.color || props.image && props.image.toString().startsWith('#')) {
+  } else if (props.backdrop.color) {
     return /*#__PURE__*/React.createElement(FillColor, {
-      color: props.color || props.image
+      color: props.backdrop.color
     });
   } else {
     return /*#__PURE__*/React.createElement(Fullscreen, {
       ref: props.setContainerRef
-    }, renderBackgroundImage({
-      image: image,
-      imageMobile: imageMobile,
+    }, /*#__PURE__*/React.createElement(BackgroundImage, {
+      image: backgroundFile,
       onMotifAreaUpdate: props.onMotifAreaUpdate,
       containerDimension: props.containerDimension
     }));
   }
 }
 
-function renderBackgroundImage(_ref) {
-  var image = _ref.image,
-      imageMobile = _ref.imageMobile,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      containerDimension = _ref.containerDimension;
-
-  if (image && imageMobile) {
-    return /*#__PURE__*/React.createElement(OrientationAwareBackgroundImage, {
-      image: image,
-      imageMobile: imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(BackgroundImage, {
-      image: image || imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  }
-}
-
 function Backdrop(props) {
   var _useDimension = useDimension(),
       _useDimension2 = _slicedToArray(_useDimension, 2),
@@ -3658,11 +3328,11 @@ function Backdrop(props) {
       shouldLoad = _useSectionLifecycle.shouldLoad;
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$f.Backdrop, _defineProperty({}, styles$f.noCompositionLayer, !shouldLoad && !props.eagerLoad), props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
+    className: classNames(styles$e.Backdrop, _defineProperty({}, styles$e.noCompositionLayer, !shouldLoad && !props.eagerLoad), props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
   }, /*#__PURE__*/React.createElement("div", {
     className: props.transitionStyles.backdropInner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$f.defaultBackground, props.transitionStyles.backdropInner2)
+    className: classNames(styles$e.defaultBackground, props.transitionStyles.backdropInner2)
   }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset, Object.assign({}, props, {
     containerDimension: containerDimension,
     setContainerRef: setContainerRef
@@ -3906,29 +3576,91 @@ function getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect)
   return isContentPadded ? motifAreaOverlap / motifAreaRect.height : 0;
 }
 
-function useBackdrop() {}
+/**
+ * Returns boolean indicating whether viewport orientation is currently
+ * portrait.
+ */
+
+function usePortraitOrientation(options) {
+  return useMediaQuery('(orientation: portrait)', options);
+}
+
+function useBackdrop(section) {
+  var _section$backdrop, _section$backdrop2;
+
+  var videoBackdrop = useFileBackdrop({
+    section: section,
+    collectionName: 'videoFiles',
+    propertyName: 'video'
+  });
+  var imageBackdrop = useFileBackdrop({
+    section: section,
+    collectionName: 'imageFiles',
+    propertyName: 'image'
+  });
+
+  if (((_section$backdrop = section.backdrop) === null || _section$backdrop === void 0 ? void 0 : _section$backdrop.color) || ((_section$backdrop2 = section.backdrop) === null || _section$backdrop2 === void 0 ? void 0 : _section$backdrop2.image) && section.backdrop.image.toString().startsWith('#')) {
+    return {
+      color: section.backdrop.color || section.backdrop.image
+    };
+  } else {
+    return videoBackdrop || imageBackdrop || {};
+  }
+}
+
+function useFileBackdrop(_ref) {
+  var section = _ref.section,
+      collectionName = _ref.collectionName,
+      propertyName = _ref.propertyName;
+  var file = useFileWithInlineRights({
+    configuration: section.backdrop || {},
+    collectionName: collectionName,
+    propertyName: propertyName
+  });
+  var mobileFile = useFileWithInlineRights({
+    configuration: section.backdrop || {},
+    collectionName: collectionName,
+    propertyName: "".concat(propertyName, "Mobile")
+  });
+  var mobile = usePortraitOrientation({
+    active: file && mobileFile
+  });
+
+  if (mobileFile && (mobile || !file)) {
+    var _ref2;
+
+    return _ref2 = {}, _defineProperty(_ref2, propertyName, mobileFile), _defineProperty(_ref2, "motifArea", section.backdrop["".concat(propertyName, "MobileMotifArea")]), _defineProperty(_ref2, "effects", section.backdropEffectsMobile), _ref2;
+  } else if (file) {
+    var _ref3;
+
+    return _ref3 = {}, _defineProperty(_ref3, propertyName, file), _defineProperty(_ref3, "motifArea", section.backdrop["".concat(propertyName, "MotifArea")]), _defineProperty(_ref3, "effects", section.backdropEffects), _ref3;
+  } else {
+    return null;
+  }
+}
+
 function useBackdropSectionCustomProperties() {}
 function useBackdropSectionClassNames() {}
 
 var v1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  useBackdrop: useBackdrop,
   useBackdropSectionCustomProperties: useBackdropSectionCustomProperties,
   useBackdropSectionClassNames: useBackdropSectionClassNames,
   Backdrop: Backdrop,
-  useMotifAreaState: useMotifAreaState
+  useMotifAreaState: useMotifAreaState,
+  useBackdrop: useBackdrop
 });
 
-var styles$h = {"wrapper":"Positioner-module_wrapper__3iFSg"};
+var styles$g = {"wrapper":"Positioner-module_wrapper__3iFSg"};
 
 function Positioner(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$h.wrapper
+    className: styles$g.wrapper
   }, children);
 }
 
-var styles$i = {"root":"Picture-module_root__1BCCg"};
+var styles$h = {"root":"Picture-module_root__1BCCg"};
 
 function Picture(_ref) {
   var imageFile = _ref.imageFile,
@@ -3966,7 +3698,7 @@ function renderTag(_ref2) {
     }),
     media: "(orientation: portrait)"
   }), /*#__PURE__*/React.createElement("img", {
-    className: classNames(styles$i.root),
+    className: classNames(styles$h.root),
     src: imageUrl$1({
       imageFile: imageFile,
       variant: variant,
@@ -4010,18 +3742,18 @@ var MotifArea$1 = function MotifArea(props) {
   var visible = useContext(MotifAreaVisibilityContext);
   return /*#__PURE__*/React.createElement("div", {
     ref: props.onUpdate,
-    className: classNames(styles$e.root, v2Styles.root, _defineProperty({}, styles$e.visible, visible))
+    className: classNames(styles$d.root, v2Styles.root, _defineProperty({}, styles$d.visible, visible))
   });
 };
 
-var styles$j = {"effects":"Effects-module_effects__MDZRR"};
+var styles$i = {"effects":"Effects-module_effects__MDZRR"};
 
 function Effects$1(_ref) {
   var file = _ref.file,
       mobileFile = _ref.mobileFile,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$j.effects,
+    className: styles$i.effects,
     style: {
       '--filter': getFilter$1((file === null || file === void 0 ? void 0 : file.effects) || []),
       '--mobile-filter': getFilter$1((mobileFile === null || mobileFile === void 0 ? void 0 : mobileFile.effects) || [])
@@ -4157,11 +3889,11 @@ BackgroundAsset$1.defaultProps = {
 
 function Backdrop$1(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$f.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
+    className: classNames(styles$e.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
   }, /*#__PURE__*/React.createElement("div", {
     className: props.transitionStyles.backdropInner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$f.defaultBackground, props.transitionStyles.backdropInner2)
+    className: classNames(styles$e.defaultBackground, props.transitionStyles.backdropInner2)
   }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset$1, props)))));
 }
 Backdrop$1.defaultProps = {
@@ -4354,7 +4086,7 @@ function motifAreaCustomProperties(motifArea, prefix) {
   return motifArea ? (_ref = {}, _defineProperty(_ref, "--".concat(prefix, "motif-t"), motifArea.top), _defineProperty(_ref, "--".concat(prefix, "motif-l"), motifArea.left), _defineProperty(_ref, "--".concat(prefix, "motif-w"), motifArea.width), _defineProperty(_ref, "--".concat(prefix, "motif-h"), motifArea.height), _ref) : {};
 }
 
-var styles$k = {"section":"Section-module_section__7UvMm","orientation":"Section-module_orientation__3-m2N","exposeMotifArea":"Section-module_exposeMotifArea__2rsq_","layout-left":"Section-module_layout-left__2IqOD","layout-right":"Section-module_layout-right__3al0b"};
+var styles$j = {"section":"Section-module_section__7UvMm","orientation":"Section-module_orientation__3-m2N","exposeMotifArea":"Section-module_exposeMotifArea__2rsq_","layout-left":"Section-module_layout-left__2IqOD","layout-right":"Section-module_layout-right__3al0b"};
 
 function useBackdropSectionClassNames$1(backdrop) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -4363,7 +4095,7 @@ function useBackdropSectionClassNames$1(backdrop) {
       empty = _ref.empty;
 
   var fullscreenDimensions = useFullscreenDimensions();
-  return [styles$k.section, !fullscreenDimensions.height && styles$k.orientation, styles$k["layout-".concat(layout || 'left')], exposeMotifArea && !empty && styles$k.exposeMotifArea, useAspectRatioClassName(backdrop.file, fullscreenDimensions), useAspectRatioClassName(backdrop.mobileFile, fullscreenDimensions, {
+  return [styles$j.section, !fullscreenDimensions.height && styles$j.orientation, styles$j["layout-".concat(layout || 'left')], exposeMotifArea && !empty && styles$j.exposeMotifArea, useAspectRatioClassName(backdrop.file, fullscreenDimensions), useAspectRatioClassName(backdrop.mobileFile, fullscreenDimensions, {
     mobile: true
   })].filter(Boolean);
 }
@@ -4425,605 +4157,986 @@ function ensureAspectRatioStyleTag(aspectRatio, className, orientation) {
   }
 }
 
-function getAspectRatioCSS(aspectRatio, className, orientation) {
-  if (className === 'minAspectRatio') {
-    return getAspectRatioRule('minAspectRatio');
-  } else {
-    return "\n      @media ".concat(orientation, "(min-aspect-ratio: ").concat(aspectRatio, "/1000) {\n        ").concat(getAspectRatioRule(className), "\n      }\n    ");
-  }
-}
+function getAspectRatioCSS(aspectRatio, className, orientation) {
+  if (className === 'minAspectRatio') {
+    return getAspectRatioRule('minAspectRatio');
+  } else {
+    return "\n      @media ".concat(orientation, "(min-aspect-ratio: ").concat(aspectRatio, "/1000) {\n        ").concat(getAspectRatioRule(className), "\n      }\n    ");
+  }
+}
+
+function getAspectRatioRule(className) {
+  // WARNING: This CSS snippet needs to be kept in sync with the
+  // corresponding snippet in GeneratedMediaQueriesHelper
+  return "\n    section.".concat(className, " {\n      --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform);\n      --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width);\n      --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height);\n\n      --motif-placeholder-width: var(--motif-placeholder-min-ar-width);\n\n      --motif-display-top: var(--motif-display-min-ar-top);\n      --motif-display-bottom: var(--motif-display-min-ar-bottom);\n      --motif-display-height: var(--motif-display-min-ar-height);\n    }\n  ");
+}
+
+
+
+var v2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Backdrop: Backdrop$1,
+  useMotifAreaState: useMotifAreaState$1,
+  useBackdrop: useBackdrop$1,
+  useBackdropSectionCustomProperties: useBackdropSectionCustomProperties$1,
+  useBackdropSectionClassNames: useBackdropSectionClassNames$1
+});
+
+var styles$k = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","Section":"Section-module_Section__Yo58b","first":"Section-module_first__1vLBH","narrow":"Section-module_narrow__3Dawu","invert":"Section-module_invert__3_p7F"};
+
+var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
+
+var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9"};
+
+var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6"};
+
+var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
+
+var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground":"fadeInConceal-module_foreground__3giM9","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
+
+var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f"};
+
+var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground":"fadeInFadeOutBg-module_foreground__24f_M","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc"};
+
+var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH"};
+
+var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU utils-module_clip__34eot","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
+
+var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF utils-module_clip__34eot","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
+
+var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF utils-module_clip__34eot","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
+
+var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd utils-module_clip__34eot","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
+
+var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
+
+var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-"};
+
+var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau"};
+
+var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
+
+var styles$l = {
+  fadeInBgConceal: fadeInBgConceal,
+  fadeInBgFadeOut: fadeInBgFadeOut,
+  fadeInBgFadeOutBg: fadeInBgFadeOutBg,
+  fadeInBgScrollOut: fadeInBgScrollOut,
+  fadeInConceal: fadeInConceal,
+  fadeInFadeOut: fadeInFadeOut,
+  fadeInFadeOutBg: fadeInFadeOutBg,
+  fadeInScrollOut: fadeInScrollOut,
+  revealConceal: revealConceal,
+  revealFadeOut: revealFadeOut,
+  revealFadeOutBg: revealFadeOutBg,
+  revealScrollOut: revealScrollOut,
+  scrollInConceal: scrollInConceal,
+  scrollInFadeOut: scrollInFadeOut,
+  scrollInFadeOutBg: scrollInFadeOutBg,
+  scrollInScrollOut: scrollInScrollOut
+};
+var enterTransitions = {
+  fade: 'fadeIn',
+  fadeBg: 'fadeInBg',
+  scroll: 'scrollIn',
+  scrollOver: 'scrollIn',
+  reveal: 'reveal',
+  beforeAfter: 'reveal'
+};
+var exitTransitions = {
+  fade: 'fadeOut',
+  fadeBg: 'fadeOutBg',
+  scroll: 'scrollOut',
+  scrollOver: 'conceal',
+  reveal: 'scrollOut',
+  beforeAfter: 'conceal'
+};
+function getTransitionNames() {
+  return Object.keys(exitTransitions);
+}
+function getAvailableTransitionNames(section, previousSection) {
+  if (!section.fullHeight || !previousSection.fullHeight) {
+    return getTransitionNames().filter(function (name) {
+      return !name.startsWith('fade');
+    });
+  }
+
+  return getTransitionNames();
+}
+function getTransitionStyles(section, previousSection, nextSection) {
+  var name = getTransitionStylesName(section, previousSection, nextSection);
+
+  if (!styles$l[name]) {
+    throw new Error("Unknown transition ".concat(name));
+  }
+
+  return styles$l[name];
+}
+function getEnterAndExitTransitions(section, previousSection, nextSection) {
+  return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
+}
+function getTransitionStylesName(section, previousSection, nextSection) {
+  var _getEnterAndExitTrans = getEnterAndExitTransitions(section, previousSection, nextSection),
+      _getEnterAndExitTrans2 = _slicedToArray(_getEnterAndExitTrans, 2),
+      enter = _getEnterAndExitTrans2[0],
+      exit = _getEnterAndExitTrans2[1];
+
+  return "".concat(enter).concat(capitalize(exit));
+}
+
+function getTransitionName(previousSection, section) {
+  if (!section || !previousSection) {
+    return 'scroll';
+  }
+
+  if ((!section.fullHeight || !previousSection.fullHeight) && section.transition.startsWith('fade')) {
+    return 'scroll';
+  }
+
+  return section.transition;
+}
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function NoOpShadow(props) {
+  return /*#__PURE__*/React.createElement("div", null, props.children);
+}
+
+var styles$m = {"static":"GradientShadow-module_static__rXNpZ","dynamic":"GradientShadow-module_dynamic__2v2JU","align-right":"GradientShadow-module_align-right__3iXZs","dark":"GradientShadow-module_dark__1YuV5","align-left":"GradientShadow-module_align-left__3qcNM","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","light":"GradientShadow-module_light__Vn92v","shadow":"GradientShadow-module_shadow__2UiDH"};
+
+function GradientShadow(props) {
+  // Hide static shadow if motif area intersects with content area.
+  var staticShadowOpacity = props.motifAreaState.isContentPadded ? 0 : props.staticShadowOpacity; // If motif area intersects with content area horizontally, fade in
+  // shadow soon as the content has been scrolled far enough to start
+  // intersecting with the motif area vertically.
+
+  var opacityFactor = // Make shadow reach full opacity when content has been scrolled
+  // up half way across the motif area.
+  roundToFirstDecimalPlace(Math.min(1, props.motifAreaState.intersectionRatioY * 2));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$m["align-".concat(props.align)], props.inverted ? styles$m.light : styles$m.dark)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$m.dynamic,
+    style: {
+      opacity: props.dynamicShadowOpacity * opacityFactor
+    }
+  }, /*#__PURE__*/React.createElement(Fullscreen, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles$m["static"],
+    style: {
+      opacity: staticShadowOpacity
+    }
+  }, /*#__PURE__*/React.createElement(Fullscreen, null)), props.children);
+}
+GradientShadow.defaultProps = {
+  opacity: 0.7,
+  align: 'left'
+};
+
+function roundToFirstDecimalPlace(value) {
+  return Math.round(value * 10) / 10;
+}
+
+var styles$n = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
+
+function InvisibleBoxWrapper(_ref) {
+  var _classNames;
+
+  var position = _ref.position,
+      width = _ref.width,
+      openStart = _ref.openStart,
+      openEnd = _ref.openEnd,
+      children = _ref.children;
+  var full = width === widths.full;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames((_classNames = {}, _defineProperty(_classNames, styles$n.start, !openStart && !full), _defineProperty(_classNames, styles$n.end, !openEnd && !full), _classNames))
+  }, children);
+}
+
+var styles$o = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","gradient":"GradientBox-module_gradient__31tJ-","long":"GradientBox-module_long__10s6v","root":"GradientBox-module_root__8Xn9W","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6"};
+
+function GradientBox(props) {
+  var _classNames;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$o.root, (_classNames = {}, _defineProperty(_classNames, styles$o.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$o["long"], props.coverInvisibleNextSection), _classNames)),
+    style: {
+      paddingTop: props.motifAreaState.paddingTop
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$o.wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$o.shadow, props.inverted ? styles$o.shadowLight : styles$o.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
+    style: {
+      top: props.motifAreaState.paddingTop,
+      opacity: props.staticShadowOpacity
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$o.content
+  }, props.children)));
+}
+
+var styles$p = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
 
-function getAspectRatioRule(className) {
-  // WARNING: This CSS snippet needs to be kept in sync with the
-  // corresponding snippet in GeneratedMediaQueriesHelper
-  return "\n    section.".concat(className, " {\n      --backdrop-positioner-transform: var(--backdrop-positioner-min-ar-transform);\n      --backdrop-positioner-width: var(--backdrop-positioner-min-ar-width);\n      --backdrop-positioner-height: var(--backdrop-positioner-min-ar-height);\n\n      --motif-placeholder-width: var(--motif-placeholder-min-ar-width);\n\n      --motif-display-top: var(--motif-display-min-ar-top);\n      --motif-display-bottom: var(--motif-display-min-ar-bottom);\n      --motif-display-height: var(--motif-display-min-ar-height);\n    }\n  ");
+function CardBox(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$p.wrapper,
+    style: {
+      paddingTop: props.motifAreaState.paddingTop
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$p.content
+  }, props.children));
 }
 
+var styles$q = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","card":"CardBoxWrapper-module_card__hvRUa scope-cardsAppearance","selfClear-left":"CardBoxWrapper-module_selfClear-left__2Dd26","selfClear-right":"CardBoxWrapper-module_selfClear-right__9kgvN","selfClear-both":"CardBoxWrapper-module_selfClear-both__2hwB7","cardStart":"CardBoxWrapper-module_cardStart__2NywG","cardEnd":"CardBoxWrapper-module_cardEnd__x4Ye6","cardBgWhite":"CardBoxWrapper-module_cardBgWhite__xXhg7","cardBgBlack":"CardBoxWrapper-module_cardBgBlack__Ahp3s"};
 
+function CardBoxWrapper(props) {
+  if (outsideBox(props)) {
+    return props.children;
+  }
 
-var v2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Backdrop: Backdrop$1,
-  useMotifAreaState: useMotifAreaState$1,
-  useBackdrop: useBackdrop$1,
-  useBackdropSectionCustomProperties: useBackdropSectionCustomProperties$1,
-  useBackdropSectionClassNames: useBackdropSectionClassNames$1
-});
-
-var styles$l = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","Section":"Section-module_Section__Yo58b","first":"Section-module_first__1vLBH","narrow":"Section-module_narrow__3Dawu","invert":"Section-module_invert__3_p7F"};
-
-var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
-
-var fadeInBgFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOut-module_backdrop__r0YXp","backdropInner":"fadeInBgFadeOut-module_backdropInner__IQp87","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9"};
+  return /*#__PURE__*/React.createElement("div", {
+    className: className$1(props)
+  }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
+    invert: true
+  }, props.children));
+}
 
-var fadeInBgFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInBgFadeOutBg-module_backdrop__15ocl","backdropInner":"fadeInBgFadeOutBg-module_backdropInner__sAnz6","boxShadow":"fadeInBgFadeOutBg-module_boxShadow__xUKyj","boxShadow-above":"fadeInBgFadeOutBg-module_boxShadow-above__2bY0E","backdrop-below":"fadeInBgFadeOutBg-module_backdrop-below__1rDT6"};
+function outsideBox(props) {
+  return props.position === 'sticky' || props.position === 'inline' && props.width > widths.md || props.customMargin;
+}
 
-var fadeInBgScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInBgScrollOut-module_backdrop__1bSsb","backdropInner":"fadeInBgScrollOut-module_backdropInner__3JZBG","backdropInner2":"fadeInBgScrollOut-module_backdropInner2__q-00L","foreground":"fadeInBgScrollOut-module_foreground__1ODH9","backdrop-below":"fadeInBgScrollOut-module_backdrop-below__2Dbkr"};
+function className$1(props) {
+  return classNames(styles$q.card, props.inverted ? styles$q.cardBgBlack : styles$q.cardBgWhite, styles$q["selfClear-".concat(props.selfClear)], _defineProperty({}, styles$q.cardStart, !props.openStart), _defineProperty({}, styles$q.cardEnd, !props.openEnd));
+}
 
-var fadeInConceal = {"fade-duration":"0.5s","backdrop":"fadeInConceal-module_backdrop__1zaRO","backdropInner":"fadeInConceal-module_backdropInner__1AIvq","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground":"fadeInConceal-module_foreground__3giM9","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
+var components$1 = {
+  shadow: {
+    Shadow: GradientShadow,
+    Box: GradientBox,
+    BoxWrapper: InvisibleBoxWrapper
+  },
+  transparent: {
+    Shadow: NoOpShadow,
+    Box: CardBox,
+    BoxWrapper: InvisibleBoxWrapper
+  },
+  cards: {
+    Shadow: NoOpShadow,
+    Box: CardBox,
+    BoxWrapper: CardBoxWrapper
+  }
+};
+function getAppearanceComponents(appearance) {
+  return components$1[appearance || 'shadow'];
+}
 
-var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","foreground-below":"fadeInFadeOut-module_foreground-below__3mE6f"};
+var Section = withInlineEditingDecorator('SectionDecorator', function Section(_ref) {
+  var _section$transition;
 
-var fadeInFadeOutBg = {"fade-duration":"0.5s","backdrop":"fadeInFadeOutBg-module_backdrop__2-IF3","backdropInner":"fadeInFadeOutBg-module_backdropInner__3r_bo","boxShadow":"fadeInFadeOutBg-module_boxShadow__3x7Ki","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","foreground":"fadeInFadeOutBg-module_foreground__24f_M","foreground-below":"fadeInFadeOutBg-module_foreground-below__3pTRc"};
+  var section = _ref.section,
+      contentElements = _ref.contentElements,
+      state = _ref.state,
+      isScrollTarget = _ref.isScrollTarget,
+      onActivate = _ref.onActivate,
+      domIdPrefix = _ref.domIdPrefix;
 
-var fadeInScrollOut = {"fade-duration":"0.5s","backdrop":"fadeInScrollOut-module_backdrop__2FhBb","backdropInner":"fadeInScrollOut-module_backdropInner__1OfNZ","backdropInner2":"fadeInScrollOut-module_backdropInner2__5bNPT","foreground":"fadeInScrollOut-module_foreground__3h0EX","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH"};
+  var _ref2 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
+      useBackdrop = _ref2.useBackdrop,
+      useBackdropSectionClassNames = _ref2.useBackdropSectionClassNames,
+      useBackdropSectionCustomProperties = _ref2.useBackdropSectionCustomProperties;
 
-var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU utils-module_clip__34eot","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
+  var backdrop = useBackdrop(section);
+  var ref = useRef();
+  useScrollTarget(ref, isScrollTarget);
+  var transitionStyles = getTransitionStyles(section, section.previousSection, section.nextSection);
+  var backdropSectionClassNames = useBackdropSectionClassNames(backdrop, {
+    layout: section.layout,
+    exposeMotifArea: section.exposeMotifArea,
+    empty: !contentElements.length
+  });
+  var atmoAudioFile = useFileWithInlineRights({
+    configuration: section,
+    collectionName: 'audioFiles',
+    propertyName: 'atmoAudioFileId'
+  });
+  return /*#__PURE__*/React.createElement("section", {
+    id: "".concat(domIdPrefix, "-").concat(section.permaId),
+    ref: ref,
+    className: classNames(styles$k.Section, transitionStyles.section, backdropSectionClassNames, _defineProperty({}, styles$k.first, section.sectionIndex === 0), _defineProperty({}, styles$k.narrow, section.width === 'narrow'), _defineProperty({}, styles$k.invert, section.invert)),
+    style: useBackdropSectionCustomProperties(backdrop)
+  }, /*#__PURE__*/React.createElement(SectionLifecycleProvider, {
+    onActivate: onActivate,
+    entersWithFadeTransition: (_section$transition = section.transition) === null || _section$transition === void 0 ? void 0 : _section$transition.startsWith('fade')
+  }, /*#__PURE__*/React.createElement(SectionViewTimelineProvider, {
+    backdrop: backdrop
+  }, /*#__PURE__*/React.createElement(SectionAtmo, {
+    audioFile: atmoAudioFile
+  }), /*#__PURE__*/React.createElement(SectionContents, {
+    section: section,
+    backdrop: backdrop,
+    contentElements: contentElements,
+    state: state,
+    transitionStyles: transitionStyles
+  }), /*#__PURE__*/React.createElement(SectionInlineFileRights, {
+    section: section,
+    backdrop: backdrop,
+    atmoAudioFile: atmoAudioFile,
+    state: state
+  }))));
+});
+Section.defaultProps = {
+  domIdPrefix: 'section'
+};
 
-var revealFadeOut = {"fade-duration":"0.5s","backdrop":"revealFadeOut-module_backdrop___Q1QF utils-module_clip__34eot","backdropInner":"revealFadeOut-module_backdropInner__17qRn","foreground":"revealFadeOut-module_foreground__1GzBs","foreground-above":"revealFadeOut-module_foreground-above__3GxOf"};
+function SectionContents(_ref3) {
+  var section = _ref3.section,
+      backdrop = _ref3.backdrop,
+      contentElements = _ref3.contentElements,
+      state = _ref3.state,
+      transitionStyles = _ref3.transitionStyles;
 
-var revealFadeOutBg = {"fade-duration":"0.5s","backdrop":"revealFadeOutBg-module_backdrop__30OCF utils-module_clip__34eot","backdropInner":"revealFadeOutBg-module_backdropInner__3v3tM","boxShadow":"revealFadeOutBg-module_boxShadow__1NZRz","boxShadow-above":"revealFadeOutBg-module_boxShadow-above__2r4ov"};
+  var _ref4 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
+      Backdrop = _ref4.Backdrop,
+      useMotifAreaState = _ref4.useMotifAreaState;
 
-var revealScrollOut = {"backdrop":"revealScrollOut-module_backdrop__2yOXd utils-module_clip__34eot","backdropInner":"revealScrollOut-module_backdropInner__211p3","backdropInner2":"revealScrollOut-module_backdropInner2__v6WqM","foreground":"revealScrollOut-module_foreground__3z-hw"};
+  var _useSectionLifecycle = useSectionLifecycle(),
+      shouldPrepare = _useSectionLifecycle.shouldPrepare;
 
-var scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
+  var sectionProperties = useMemo(function () {
+    return {
+      layout: section.layout,
+      invert: section.invert,
+      sectionIndex: section.sectionIndex
+    };
+  }, [section.layout, section.invert, section.sectionIndex]);
+  var transitions = getEnterAndExitTransitions(section, section.previousSection, section.nextSection);
 
-var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-"};
+  var _transitions = _slicedToArray(transitions, 2),
+      exitTransition = _transitions[1];
 
-var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau"};
+  var _useMotifAreaState = useMotifAreaState({
+    updateOnScrollAndResize: shouldPrepare,
+    exposeMotifArea: section.exposeMotifArea,
+    transitions: transitions,
+    empty: !contentElements.length,
+    sectionTransition: section.transition,
+    fullHeight: section.fullHeight
+  }),
+      _useMotifAreaState2 = _slicedToArray(_useMotifAreaState, 3),
+      motifAreaState = _useMotifAreaState2[0],
+      setMotifAreaRef = _useMotifAreaState2[1],
+      setContentAreaRef = _useMotifAreaState2[2];
 
-var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
+  var _getAppearanceCompone = getAppearanceComponents(section.appearance),
+      Shadow = _getAppearanceCompone.Shadow,
+      Box = _getAppearanceCompone.Box,
+      BoxWrapper = _getAppearanceCompone.BoxWrapper;
 
-var styles$m = {
-  fadeInBgConceal: fadeInBgConceal,
-  fadeInBgFadeOut: fadeInBgFadeOut,
-  fadeInBgFadeOutBg: fadeInBgFadeOutBg,
-  fadeInBgScrollOut: fadeInBgScrollOut,
-  fadeInConceal: fadeInConceal,
-  fadeInFadeOut: fadeInFadeOut,
-  fadeInFadeOutBg: fadeInFadeOutBg,
-  fadeInScrollOut: fadeInScrollOut,
-  revealConceal: revealConceal,
-  revealFadeOut: revealFadeOut,
-  revealFadeOutBg: revealFadeOutBg,
-  revealScrollOut: revealScrollOut,
-  scrollInConceal: scrollInConceal,
-  scrollInFadeOut: scrollInFadeOut,
-  scrollInFadeOutBg: scrollInFadeOutBg,
-  scrollInScrollOut: scrollInScrollOut
-};
-var enterTransitions = {
-  fade: 'fadeIn',
-  fadeBg: 'fadeInBg',
-  scroll: 'scrollIn',
-  scrollOver: 'scrollIn',
-  reveal: 'reveal',
-  beforeAfter: 'reveal'
-};
-var exitTransitions = {
-  fade: 'fadeOut',
-  fadeBg: 'fadeOutBg',
-  scroll: 'scrollOut',
-  scrollOver: 'conceal',
-  reveal: 'scrollOut',
-  beforeAfter: 'conceal'
-};
-function getTransitionNames() {
-  return Object.keys(exitTransitions);
+  var staticShadowOpacity = percentToFraction(section.staticShadowOpacity, {
+    defaultValue: 0.7
+  });
+  var dynamicShadowOpacity = percentToFraction(section.dynamicShadowOpacity, {
+    defaultValue: 0.7
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Backdrop, {
+    backdrop: backdrop,
+    eagerLoad: section.sectionIndex === 0,
+    onMotifAreaUpdate: setMotifAreaRef,
+    state: state,
+    transitionStyles: transitionStyles
+  }, function (children) {
+    return /*#__PURE__*/React.createElement(Shadow, {
+      align: section.layout,
+      inverted: section.invert,
+      motifAreaState: motifAreaState,
+      staticShadowOpacity: staticShadowOpacity,
+      dynamicShadowOpacity: dynamicShadowOpacity
+    }, children);
+  }), /*#__PURE__*/React.createElement(Foreground, {
+    transitionStyles: transitionStyles,
+    state: state,
+    minHeight: motifAreaState.minHeight,
+    paddingBottom: !endsWithFullWidthElement(contentElements),
+    heightMode: heightMode(section)
+  }, /*#__PURE__*/React.createElement(Box, {
+    inverted: section.invert,
+    coverInvisibleNextSection: exitTransition.startsWith('fade'),
+    transitionStyles: transitionStyles,
+    state: state,
+    motifAreaState: motifAreaState,
+    staticShadowOpacity: staticShadowOpacity
+  }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
+    dark: !section.invert
+  }, /*#__PURE__*/React.createElement(Layout, {
+    sectionId: section.id,
+    items: contentElements,
+    appearance: section.appearance,
+    contentAreaRef: setContentAreaRef,
+    sectionProps: sectionProperties
+  }, function (children, boxProps) {
+    return /*#__PURE__*/React.createElement(BoxWrapper, Object.assign({}, boxProps, {
+      inverted: section.invert
+    }), children);
+  })))));
 }
-function getAvailableTransitionNames(section, previousSection) {
-  if (!section.fullHeight || !previousSection.fullHeight) {
-    return getTransitionNames().filter(function (name) {
-      return !name.startsWith('fade');
-    });
-  }
 
-  return getTransitionNames();
+function ConnectedSection(props) {
+  var contentElements = useSectionContentElements({
+    sectionId: props.section.id,
+    layout: props.section.layout
+  });
+  return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
+    contentElements: contentElements
+  }));
 }
-function getTransitionStyles(section, previousSection, nextSection) {
-  var name = getTransitionStylesName(section, previousSection, nextSection);
 
-  if (!styles$m[name]) {
-    throw new Error("Unknown transition ".concat(name));
+function heightMode(section) {
+  if (section.fullHeight) {
+    if (section.transition.startsWith('fade') && section.previousSection || section.nextSection && section.nextSection.transition.startsWith('fade')) {
+      return 'fullFade';
+    } else {
+      return 'full';
+    }
   }
 
-  return styles$m[name];
+  return 'dynamic';
 }
-function getEnterAndExitTransitions(section, previousSection, nextSection) {
-  return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
+
+function endsWithFullWidthElement(elements) {
+  var lastElement = elements[elements.length - 1];
+  return lastElement && lastElement.position === 'inline' && lastElement.width === widths.full;
 }
-function getTransitionStylesName(section, previousSection, nextSection) {
-  var _getEnterAndExitTrans = getEnterAndExitTransitions(section, previousSection, nextSection),
-      _getEnterAndExitTrans2 = _slicedToArray(_getEnterAndExitTrans, 2),
-      enter = _getEnterAndExitTrans2[0],
-      exit = _getEnterAndExitTrans2[1];
 
-  return "".concat(enter).concat(capitalize(exit));
+function percentToFraction(value, _ref5) {
+  var defaultValue = _ref5.defaultValue;
+  return typeof value !== 'undefined' ? value / 100 : defaultValue;
 }
 
-function getTransitionName(previousSection, section) {
-  if (!section || !previousSection) {
-    return 'scroll';
-  }
+var CurrentChapterContext = React.createContext();
+var CurrentSectionIndexStateContext = React.createContext();
+function CurrentSectionProvider(_ref) {
+  var children = _ref.children;
 
-  if ((!section.fullHeight || !previousSection.fullHeight) && section.transition.startsWith('fade')) {
-    return 'scroll';
-  }
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentSectionIndex = _useState2[0],
+      setCurrentSectionIndex = _useState2[1];
 
-  return section.transition;
+  var currentSectionIndexState = useMemo(function () {
+    return [currentSectionIndex, setCurrentSectionIndex];
+  }, [currentSectionIndex, setCurrentSectionIndex]);
+  var sections = useSectionsWithChapter();
+  var currentSection = sections[currentSectionIndex];
+  return /*#__PURE__*/React.createElement(CurrentChapterContext.Provider, {
+    value: currentSection === null || currentSection === void 0 ? void 0 : currentSection.chapter
+  }, /*#__PURE__*/React.createElement(CurrentSectionIndexStateContext.Provider, {
+    value: currentSectionIndexState
+  }, children));
 }
+/**
+ * Returns chapter containing the current scroll position.
+ *
+ * @example
+ *
+ * const chapter = useCurrentChapter();
+ * chapter // =>
+ *  {
+ *    id: 3,
+ *    permaId: 5,
+ *    title: 'Chapter 1',
+ *    summary: 'An introductory chapter',
+ *    chapterSlug: 'chapter-1'
+ *  }
+ */
 
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+function useCurrentChapter() {
+  return useContext(CurrentChapterContext);
+}
+function useCurrentSectionIndexState() {
+  return useContext(CurrentSectionIndexStateContext);
 }
 
-function NoOpShadow(props) {
-  return /*#__PURE__*/React.createElement("div", null, props.children);
+function usePostMessageListener(receiveData) {
+  useEffect(function () {
+    if (window.parent !== window) {
+      window.addEventListener('message', receive);
+    }
+
+    return function () {
+      return window.removeEventListener('message', receive);
+    };
+
+    function receive(message) {
+      if (window.location.href.indexOf(message.origin) === 0) {
+        receiveData(message.data);
+      }
+    }
+  }, [receiveData]);
 }
 
-var styles$n = {"static":"GradientShadow-module_static__rXNpZ","dynamic":"GradientShadow-module_dynamic__2v2JU","align-right":"GradientShadow-module_align-right__3iXZs","dark":"GradientShadow-module_dark__1YuV5","align-left":"GradientShadow-module_align-left__3qcNM","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","light":"GradientShadow-module_light__Vn92v","shadow":"GradientShadow-module_shadow__2UiDH"};
+var contentStyles = {"Content":"Content-module_Content__m7urk"};
 
-function GradientShadow(props) {
-  // Hide static shadow if motif area intersects with content area.
-  var staticShadowOpacity = props.motifAreaState.isContentPadded ? 0 : props.staticShadowOpacity; // If motif area intersects with content area horizontally, fade in
-  // shadow soon as the content has been scrolled far enough to start
-  // intersecting with the motif area vertically.
+var styles$r = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
 
-  var opacityFactor = // Make shadow reach full opacity when content has been scrolled
-  // up half way across the motif area.
-  roundToFirstDecimalPlace(Math.min(1, props.motifAreaState.intersectionRatioY * 2));
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$n["align-".concat(props.align)], props.inverted ? styles$n.light : styles$n.dark)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$n.dynamic,
-    style: {
-      opacity: props.dynamicShadowOpacity * opacityFactor
+var FocusVisibleContext = createContext();
+function useFocusOutlineVisible() {
+  return useContext(FocusVisibleContext);
+}
+function FocusOutlineProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  useEffect(function () {
+    document.body.addEventListener('keydown', enable);
+    document.body.addEventListener('mousedown', disable);
+    disable();
+    return function () {
+      document.body.removeEventListener('keydown', enable);
+      document.body.removeEventListener('mousedown', disable);
+    };
+
+    function enable() {
+      document.body.classList.remove(styles$r.focusOutlineDisabled);
+      setValue(true);
     }
-  }, /*#__PURE__*/React.createElement(Fullscreen, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$n["static"],
-    style: {
-      opacity: staticShadowOpacity
+
+    function disable() {
+      document.body.classList.add(styles$r.focusOutlineDisabled);
+      setValue(false);
     }
-  }, /*#__PURE__*/React.createElement(Fullscreen, null)), props.children);
+  }, []);
+  return /*#__PURE__*/React.createElement(FocusVisibleContext.Provider, {
+    value: value
+  }, children);
 }
-GradientShadow.defaultProps = {
-  opacity: 0.7,
-  align: 'left'
-};
 
-function roundToFirstDecimalPlace(value) {
-  return Math.round(value * 10) / 10;
-}
+var PhonePlatformProvider = withInlineEditingAlternative('PhonePlatformProvider', function PhonePlatformProvider(_ref) {
+  var children = _ref.children;
+  var isPhonePlatform = useBrowserFeature('phone platform');
+  return /*#__PURE__*/React.createElement(PhonePlatformContext.Provider, {
+    value: isPhonePlatform
+  }, children);
+});
 
-var styles$o = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
+var AudioFocusContext = createContext();
+function AudioFocusProvider(_ref) {
+  var children = _ref.children;
 
-function InvisibleBoxWrapper(_ref) {
-  var _classNames;
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentKey = _useState2[0],
+      setCurrentKey = _useState2[1];
 
-  var position = _ref.position,
-      openStart = _ref.openStart,
-      openEnd = _ref.openEnd,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames = {}, _defineProperty(_classNames, styles$o.start, !openStart && position !== 'full'), _defineProperty(_classNames, styles$o.end, !openEnd && position !== 'full'), _classNames))
+  var value = useMemo(function () {
+    return [currentKey, setCurrentKey];
+  }, [currentKey, setCurrentKey]);
+  return /*#__PURE__*/React.createElement(AudioFocusContext.Provider, {
+    value: value
   }, children);
 }
+/**
+ * Prevent parallel playback of multiple media elements.
+ *
+ * @param {Object} options
+ * @param {number} options.key - Unique id used to identify the element.
+ * @param {boolean} options.request - Set to true to request audio focus.
+ * @param {Function} options.onLost -
+ *   Callback that will be invoked if another element requests audio
+ *   focus, thereby preempting your hold of audio focus. The callback
+ *   should pause the element.
+ */
 
-var styles$p = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","gradient":"GradientBox-module_gradient__31tJ-","long":"GradientBox-module_long__10s6v","root":"GradientBox-module_root__8Xn9W","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6"};
+function useAudioFocus(_ref2) {
+  var key = _ref2.key,
+      request = _ref2.request,
+      onLost = _ref2.onLost;
+  var wasRequested = usePrevious(request);
 
-function GradientBox(props) {
-  var _classNames;
+  var _useContext = useContext(AudioFocusContext),
+      _useContext2 = _slicedToArray(_useContext, 2),
+      currentKey = _useContext2[0],
+      setCurrentKey = _useContext2[1];
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$p.root, (_classNames = {}, _defineProperty(_classNames, styles$p.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$p["long"], props.coverInvisibleNextSection), _classNames)),
-    style: {
-      paddingTop: props.motifAreaState.paddingTop
+  var previousKey = usePrevious(currentKey);
+  useEffect(function () {
+    if (request && !wasRequested) {
+      setCurrentKey(key);
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$p.wrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$p.shadow, props.inverted ? styles$p.shadowLight : styles$p.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
-    style: {
-      top: props.motifAreaState.paddingTop,
-      opacity: props.staticShadowOpacity
+  }, [request, wasRequested, setCurrentKey, key]);
+  useEffect(function () {
+    if (previousKey === key && currentKey !== key) {
+      onLost();
     }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$p.content
-  }, props.children)));
+  }, [currentKey, previousKey, key, onLost]);
 }
 
-var styles$q = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
-
-function CardBox(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$q.wrapper,
-    style: {
-      paddingTop: props.motifAreaState.paddingTop
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$q.content
-  }, props.children));
+var ConsentContext = createContext();
+function ConsentProvider(_ref) {
+  var consent = _ref.consent,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(ConsentContext.Provider, {
+    value: consent
+  }, children);
 }
+function useConsentRequested() {
+  var consent = useContext(ConsentContext);
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      request = _useState2[0],
+      setRequest = _useState2[1];
 
-var styles$r = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","card":"CardBoxWrapper-module_card__hvRUa","cardStart":"CardBoxWrapper-module_cardStart__2NywG","cardEnd":"CardBoxWrapper-module_cardEnd__x4Ye6","cardBgWhite":"CardBoxWrapper-module_cardBgWhite__xXhg7","cardBgBlack":"CardBoxWrapper-module_cardBgBlack__Ahp3s"};
+  useIsomorphicLayoutEffect(function () {
+    var unmounted = false;
 
-var positionOutsideBox = ['sticky', 'wide', 'full'];
-function CardBoxWrapper(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: className$1(props)
-  }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
-    invert: !positionOutsideBox.includes(props.position)
-  }, props.children));
-}
+    _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+      var _yield$consent$reques, vendors, _acceptAll, _denyAll, _save;
 
-function className$1(props) {
-  if (positionOutsideBox.includes(props.position)) {
-    return undefined;
-  }
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return consent.requested();
+
+            case 2:
+              _yield$consent$reques = _context.sent;
+              vendors = _yield$consent$reques.vendors;
+              _acceptAll = _yield$consent$reques.acceptAll;
+              _denyAll = _yield$consent$reques.denyAll;
+              _save = _yield$consent$reques.save;
+
+              if (!unmounted) {
+                setRequest({
+                  vendors: vendors,
+                  acceptAll: function acceptAll() {
+                    _acceptAll();
 
-  return classNames(styles$r.card, props.inverted ? styles$r.cardBgBlack : styles$r.cardBgWhite, _defineProperty({}, styles$r.cardStart, !props.openStart), _defineProperty({}, styles$r.cardEnd, !props.openEnd));
-}
+                    setRequest({});
+                  },
+                  denyAll: function denyAll() {
+                    _denyAll();
 
-var components$1 = {
-  shadow: {
-    Shadow: GradientShadow,
-    Box: GradientBox,
-    BoxWrapper: InvisibleBoxWrapper
-  },
-  transparent: {
-    Shadow: NoOpShadow,
-    Box: CardBox,
-    BoxWrapper: InvisibleBoxWrapper
-  },
-  cards: {
-    Shadow: NoOpShadow,
-    Box: CardBox,
-    BoxWrapper: CardBoxWrapper
-  }
-};
-function getAppearanceComponents(appearance) {
-  return components$1[appearance || 'shadow'];
-}
+                    setRequest({});
+                  },
+                  save: function save(decisions) {
+                    _save(decisions);
 
-var Section = withInlineEditingDecorator('SectionDecorator', function Section(_ref) {
-  var section = _ref.section,
-      contentElements = _ref.contentElements,
-      state = _ref.state,
-      isScrollTarget = _ref.isScrollTarget,
-      onActivate = _ref.onActivate,
-      domIdPrefix = _ref.domIdPrefix;
+                    setRequest({});
+                  }
+                });
+              }
 
-  var _ref2 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
-      useBackdrop = _ref2.useBackdrop,
-      useBackdropSectionClassNames = _ref2.useBackdropSectionClassNames,
-      useBackdropSectionCustomProperties = _ref2.useBackdropSectionCustomProperties;
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
 
-  var backdrop = useBackdrop(section);
-  var ref = useRef();
-  useScrollTarget(ref, isScrollTarget);
-  var transitionStyles = getTransitionStyles(section, section.previousSection, section.nextSection);
-  var backdropSectionClassNames = useBackdropSectionClassNames(backdrop, {
-    layout: section.layout,
-    exposeMotifArea: section.exposeMotifArea,
-    empty: !contentElements.length
-  });
-  return /*#__PURE__*/React.createElement("section", {
-    id: "".concat(domIdPrefix, "-").concat(section.permaId),
-    ref: ref,
-    className: classNames(styles$l.Section, transitionStyles.section, backdropSectionClassNames, _defineProperty({}, styles$l.first, section.sectionIndex === 0), _defineProperty({}, styles$l.narrow, section.width === 'narrow'), _defineProperty({}, styles$l.invert, section.invert)),
-    style: useBackdropSectionCustomProperties(backdrop)
-  }, /*#__PURE__*/React.createElement(SectionLifecycleProvider, {
-    onActivate: onActivate,
-    isLast: !section.nextSection
-  }, /*#__PURE__*/React.createElement(SectionAtmo, {
-    audioFilePermaId: section.atmoAudioFileId
-  }), /*#__PURE__*/React.createElement(SectionContents, {
-    section: section,
-    backdrop: backdrop,
-    contentElements: contentElements,
-    state: state,
-    transitionStyles: transitionStyles
-  })));
-});
-Section.defaultProps = {
-  domIdPrefix: 'section'
-};
+    return function () {
+      return unmounted = true;
+    };
+  }, [consent]);
+  return request;
+}
+function useConsentGiven(vendorName) {
+  var consent = useContext(ConsentContext);
 
-function SectionContents(_ref3) {
-  var section = _ref3.section,
-      backdrop = _ref3.backdrop,
-      contentElements = _ref3.contentElements,
-      state = _ref3.state,
-      transitionStyles = _ref3.transitionStyles;
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable;
 
-  var _ref4 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
-      Backdrop = _ref4.Backdrop,
-      useMotifAreaState = _ref4.useMotifAreaState;
+  var isStaticPreview = useIsStaticPreview();
 
-  var _useSectionLifecycle = useSectionLifecycle(),
-      shouldPrepare = _useSectionLifecycle.shouldPrepare;
+  var _useState3 = useState(isEditable || isStaticPreview),
+      _useState4 = _slicedToArray(_useState3, 2),
+      consentGiven = _useState4[0],
+      setConsentGiven = _useState4[1];
 
-  var sectionProperties = useMemo(function () {
-    return {
-      layout: section.layout,
-      invert: section.invert,
-      sectionIndex: section.sectionIndex
-    };
-  }, [section.layout, section.invert, section.sectionIndex]);
-  var transitions = getEnterAndExitTransitions(section, section.previousSection, section.nextSection);
+  useIsomorphicLayoutEffect(function () {
+    var unmounted = false;
 
-  var _transitions = _slicedToArray(transitions, 2),
-      exitTransition = _transitions[1];
+    _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2() {
+      var result;
+      return regenerator.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!(!vendorName || isEditable || isStaticPreview)) {
+                _context2.next = 2;
+                break;
+              }
 
-  var _useMotifAreaState = useMotifAreaState({
-    updateOnScrollAndResize: shouldPrepare,
-    exposeMotifArea: section.exposeMotifArea,
-    transitions: transitions,
-    empty: !contentElements.length,
-    sectionTransition: section.transition,
-    fullHeight: section.fullHeight
-  }),
-      _useMotifAreaState2 = _slicedToArray(_useMotifAreaState, 3),
-      motifAreaState = _useMotifAreaState2[0],
-      setMotifAreaRef = _useMotifAreaState2[1],
-      setContentAreaRef = _useMotifAreaState2[2];
+              return _context2.abrupt("return");
 
-  var _getAppearanceCompone = getAppearanceComponents(section.appearance),
-      Shadow = _getAppearanceCompone.Shadow,
-      Box = _getAppearanceCompone.Box,
-      BoxWrapper = _getAppearanceCompone.BoxWrapper;
+            case 2:
+              _context2.next = 4;
+              return consent.requireAccepted(vendorName);
 
-  var staticShadowOpacity = percentToFraction(section.staticShadowOpacity, {
-    defaultValue: 0.7
-  });
-  var dynamicShadowOpacity = percentToFraction(section.dynamicShadowOpacity, {
-    defaultValue: 0.7
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Backdrop, Object.assign({}, section.backdrop, {
-    effects: section.backdropEffects,
-    effectsMobile: section.backdropEffectsMobile,
-    backdrop: backdrop,
-    eagerLoad: section.sectionIndex === 0,
-    onMotifAreaUpdate: setMotifAreaRef,
-    state: state,
-    transitionStyles: transitionStyles
-  }), function (children) {
-    return /*#__PURE__*/React.createElement(Shadow, {
-      align: section.layout,
-      inverted: section.invert,
-      motifAreaState: motifAreaState,
-      staticShadowOpacity: staticShadowOpacity,
-      dynamicShadowOpacity: dynamicShadowOpacity
-    }, children);
-  }), /*#__PURE__*/React.createElement(Foreground, {
-    transitionStyles: transitionStyles,
-    state: state,
-    minHeight: motifAreaState.minHeight,
-    paddingBottom: !endsWithFullWidthElement(contentElements),
-    heightMode: heightMode(section)
-  }, /*#__PURE__*/React.createElement(Box, {
-    inverted: section.invert,
-    coverInvisibleNextSection: exitTransition.startsWith('fade'),
-    transitionStyles: transitionStyles,
-    state: state,
-    motifAreaState: motifAreaState,
-    staticShadowOpacity: staticShadowOpacity
-  }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
-    dark: !section.invert
-  }, /*#__PURE__*/React.createElement(Layout, {
-    sectionId: section.id,
-    items: contentElements,
-    appearance: section.appearance,
-    contentAreaRef: setContentAreaRef,
-    sectionProps: sectionProperties
-  }, function (children, boxProps) {
-    return /*#__PURE__*/React.createElement(BoxWrapper, Object.assign({}, boxProps, {
-      inverted: section.invert
-    }), children);
-  })))));
-}
+            case 4:
+              result = _context2.sent;
 
-function ConnectedSection(props) {
-  var contentElements = useSectionContentElements({
-    sectionId: props.section.id
-  });
-  return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
-    contentElements: contentElements
-  }));
-}
+              if (!unmounted && result === 'fulfilled') {
+                setConsentGiven(true);
+              }
 
-function heightMode(section) {
-  if (section.fullHeight) {
-    if (section.transition.startsWith('fade') && section.previousSection || section.nextSection && section.nextSection.transition.startsWith('fade')) {
-      return 'fullFade';
-    } else {
-      return 'full';
-    }
-  }
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
 
-  return 'dynamic';
+    return function () {
+      return unmounted = true;
+    };
+  }, [consent, vendorName]);
+  var giveConsent = useCallback(function () {
+    return consent.accept(vendorName);
+  }, [consent, vendorName]);
+  return [consentGiven, giveConsent];
 }
 
-function endsWithFullWidthElement(elements) {
-  var lastElement = elements[elements.length - 1];
-  return lastElement && lastElement.position === 'full';
-}
+var styles$s = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
 
-function percentToFraction(value, _ref5) {
-  var defaultValue = _ref5.defaultValue;
-  return typeof value !== 'undefined' ? value / 100 : defaultValue;
-}
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var CurrentChapterContext = React.createContext();
-var CurrentSectionIndexStateContext = React.createContext();
-function CurrentSectionProvider(_ref) {
-  var children = _ref.children;
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
 
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentSectionIndex = _useState2[0],
-      setCurrentSectionIndex = _useState2[1];
+    return target;
+  };
 
-  var currentSectionIndexState = useMemo(function () {
-    return [currentSectionIndex, setCurrentSectionIndex];
-  }, [currentSectionIndex, setCurrentSectionIndex]);
-  var sections = useSectionsWithChapter();
-  var currentSection = sections[currentSectionIndex];
-  return /*#__PURE__*/React.createElement(CurrentChapterContext.Provider, {
-    value: currentSection === null || currentSection === void 0 ? void 0 : currentSection.chapter
-  }, /*#__PURE__*/React.createElement(CurrentSectionIndexStateContext.Provider, {
-    value: currentSectionIndexState
-  }, children));
+  return _extends.apply(this, arguments);
 }
+var OptInIcon = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
+
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 131 95"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M32.01.01C46.678-.01 61.345.009 76.014.002 83.007.007 90-.009 96.99.011c.015 9.157.014 18.316 0 27.474-1.357.073-2.706.259-4.048.478-.01-7.986 0-15.975-.004-23.961-18.958-.003-37.917-.003-56.875 0l-.001 28.916c.01 2.37-.022 4.742.016 7.113 6.173-.025 12.348-.006 18.52-.011 5.804.01 11.609-.022 17.41.013-1 1.28-2.001 2.56-2.844 3.948-12.372.024-24.748-.011-37.12.019-.06-.365-.03-.735-.034-1.1V17.497c.007-5.83-.024-11.659.001-17.486zm17.617 8.004a5.999 5.999 0 014.359 1.49c1.273 1.116 2.048 2.8 2.013 4.498.042 1.806-.845 3.59-2.263 4.702-1.271 1.013-2.975 1.483-4.583 1.228a5.88 5.88 0 01-3.479-1.785c-1.44-1.459-2.013-3.695-1.475-5.67.6-2.448 2.905-4.346 5.428-4.463zm22.106 7.758c.181-.258.332-.54.547-.772 2.325 3.868 4.683 7.717 7.02 11.578.891 1.503 1.85 2.973 2.7 4.5a35.062 35.062 0 00-5.646 3.779c-.154.162-.387.14-.592.143-10.585-.014-21.174.014-31.762-.015.088-.228.308-.367.47-.542 3.79-3.745 7.58-7.484 11.365-11.232.098-.085.217-.265.366-.15 2.65 1.308 5.3 2.62 7.951 3.928 2.545-3.73 5.052-7.48 7.581-11.217zM0 21.042c.256-.058.517-.039.775-.039 9.175.007 18.349-.007 27.523.007l.064.076c.017 1.308-.012 2.618.015 3.927-5.416.038-10.834.001-16.252.018-.01 7.981-.013 15.962.002 23.944 11.917.013 23.834.013 35.752 0 .022-.674-.002-1.35.012-2.023 4.034.01 8.07.01 12.105 0 .002 11.349.01 22.698-.003 34.048-12.082-.025-24.163-.003-36.244-.01-7.911.007-15.823-.015-23.734.01-.02-19.988.01-39.975-.015-59.959zm3.435 4.043c-.904.236-1.577 1.152-1.482 2.086.079.997.994 1.837 1.999 1.82 1.367.002 2.736.015 4.105-.007 1.04-.036 1.928-.995 1.878-2.03-.003-.996-.867-1.896-1.868-1.925-1.294-.01-2.585.002-3.878-.005-.252.004-.51-.013-.754.061zm-.219 8.067c-.815.317-1.373 1.203-1.256 2.076.1.938.94 1.724 1.89 1.756 1.25.016 2.5-.002 3.752.008.439.008.9-.025 1.288-.246.73-.39 1.173-1.257 1.019-2.075-.136-.889-.95-1.62-1.852-1.645-1.328-.007-2.653.002-3.98-.004-.29-.005-.589.016-.86.13zm.219 7.923c-.762.2-1.372.884-1.471 1.665-.128.844.384 1.718 1.158 2.064.403.192.859.19 1.295.181 1.217-.008 2.434.011 3.651-.008 1.032-.047 1.92-.998 1.868-2.034-.007-.994-.87-1.891-1.87-1.922-1.293-.011-2.584.002-3.877-.006-.252-.001-.51-.008-.754.06zm-.01 8.003c-1.018.249-1.706 1.392-1.413 2.403.21.868 1.057 1.512 1.95 1.497 1.364-.003 2.728.01 4.09-.006 1.02-.034 1.906-.958 1.883-1.975.026-1.017-.858-1.958-1.88-1.981-1.252-.011-2.503.002-3.754-.003-.292-.004-.591-.018-.877.065zm48.107 0c-1.117.272-1.79 1.607-1.323 2.66a2.027 2.027 0 001.86 1.238c1.326.003 2.652.003 3.977 0 1.056.025 2.032-.916 1.996-1.978.045-1.022-.86-1.96-1.88-1.984-1.252-.008-2.503.003-3.754-.002-.293 0-.591-.017-.876.066zM12.13 53.016c-.015 7.981-.012 15.961-.001 23.943 11.917.003 23.836.003 35.753 0 .011-7.982.014-15.962-.001-23.943a14203.52 14203.52 0 00-35.75 0zm-8.694 4.05c-.797.208-1.422.943-1.482 1.764-.112 1.07.805 2.103 1.883 2.137 1.371.014 2.743.003 4.113.006 1.035.01 1.977-.89 1.986-1.928.054-1.033-.83-2.003-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289 0-.584-.014-.867.064zm48.108.003c-.951.235-1.623 1.244-1.456 2.208.123.947 1.016 1.71 1.972 1.696h3.997c1.031.013 1.994-.886 1.984-1.928.071-1.036-.829-2.011-1.866-2.037-1.254-.01-2.51.003-3.764-.005-.29 0-.586-.014-.867.066zM3.425 65.066c-.955.242-1.634 1.262-1.45 2.234.14.9.957 1.638 1.874 1.662 1.364.011 2.727 0 4.09.006 1.06.022 2.023-.925 1.997-1.984.027-1.02-.86-1.952-1.882-1.98-1.211-.012-2.426.002-3.637-.004-.332-.001-.669-.021-.992.066zm48.107.003c-.927.231-1.584 1.195-1.456 2.14.093.935.935 1.723 1.879 1.752 1.365.011 2.73 0 4.093.006 1.055.016 2.043-.917 1.994-1.984.045-1.023-.86-1.958-1.88-1.981-1.252-.011-2.502.002-3.753-.003-.294-.003-.592-.012-.877.07zM3.435 73.057c-.797.204-1.422.94-1.482 1.76-.111 1.07.802 2.112 1.883 2.138 1.371.013 2.743.002 4.113.005 1.035.017 1.977-.891 1.986-1.928.054-1.033-.835-1.997-1.87-2.037-1.254-.01-2.508.003-3.763-.005-.289.001-.584-.01-.867.067zm48.108 0c-.887.22-1.543 1.118-1.476 2.029.035.974.892 1.837 1.874 1.869 1.37.013 2.742.002 4.114.005 1.033.017 1.993-.883 1.985-1.925.071-1.039-.833-2.006-1.868-2.04-1.254-.01-2.509.003-3.763-.005-.289.001-.585-.01-.866.067zM96.83 31.045c6.813-.36 13.73 1.456 19.431 5.154a32.396 32.396 0 019.482 9.342 31.527 31.527 0 015.043 13.773c.625 5.36-.123 10.88-2.225 15.867-1.766 4.254-4.499 8.108-7.91 11.243a32.605 32.605 0 01-11.584 6.844 33.066 33.066 0 01-15.656 1.337 32.59 32.59 0 01-13.329-5.235c-5.2-3.514-9.323-8.551-11.692-14.307a31.532 31.532 0 01-2.327-14.038 31.433 31.433 0 013.839-13.243 32.232 32.232 0 018.329-9.799c5.259-4.156 11.865-6.62 18.6-6.938zm15.6 12.011c-8.543.979-17.086 1.933-25.627 2.92-.013 8.152.006 16.308-.008 24.462-2.325-.848-5.015-.792-7.24.318-1.33.665-2.493 1.763-2.997 3.169-.503 1.356-.289 2.934.528 4.128.752 1.154 1.947 1.978 3.235 2.465 1.48.569 3.115.675 4.68.452 1.888-.295 3.742-1.222 4.862-2.784.67-.936.965-2.102.894-3.237-.014-7.054.008-14.105-.01-21.158 1.976-.282 3.965-.458 5.946-.7 4.944-.56 9.885-1.124 14.827-1.682V67.42c-1.677-.563-3.506-.755-5.247-.362-1.764.38-3.483 1.32-4.479 2.84a4.618 4.618 0 00-.637 3.729c.32 1.196 1.12 2.243 2.139 2.959 1.533 1.101 3.474 1.576 5.355 1.489 2.036-.083 4.111-.843 5.498-2.353a5.078 5.078 0 001.329-3.83c-.007-6.755-.002-13.51-.005-20.265.058-2.962-.002-5.924-.002-8.884-1.018.053-2.03.212-3.04.313z"
+  }));
+});
+
 /**
- * Returns chapter containing the current scroll position.
+ * Render opt in prompt instead of children if third party consent
+ * cookie has been configured in theme options and user has not given
+ * consent for passed provider.
  *
- * @example
+ * @param {Object} props
+ * @param {string} props.providerName -
+ *   Only render children if user has given consent for this provider.
+ * @param {React.ReactElement} props.children -
+ *   Children to conditionally render.
+ * @param {function} [props.wrapper] -
+ *   Function that receives children to allow wrapping opt-in prompt
+ *   in custom elements.
+ * @param {boolean} [props.icon=true] -
+ *   Allow hiding the icon in the opt-in prompt.
  *
- * const chapter = useCurrentChapter();
- * chapter // =>
- *  {
- *    id: 3,
- *    permaId: 5,
- *    title: 'Chapter 1',
- *    summary: 'An introductory chapter',
- *    chapterSlug: 'chapter-1'
- *  }
+ * @name ThirdPartyOptIn
  */
 
-function useCurrentChapter() {
-  return useContext(CurrentChapterContext);
-}
-function useCurrentSectionIndexState() {
-  return useContext(CurrentSectionIndexStateContext);
-}
+function OptIn(_ref) {
+  var children = _ref.children,
+      providerName = _ref.providerName,
+      wrapper = _ref.wrapper,
+      icon = _ref.icon;
 
-function usePostMessageListener(receiveData) {
-  useEffect(function () {
-    if (window.parent !== window) {
-      window.addEventListener('message', receive);
-    }
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
 
-    return function () {
-      return window.removeEventListener('message', receive);
-    };
+  var _useContentElementAtt = useContentElementAttributes(),
+      contentElementId = _useContentElementAtt.contentElementId;
 
-    function receive(message) {
-      if (window.location.href.indexOf(message.origin) === 0) {
-        receiveData(message.data);
-      }
-    }
-  }, [receiveData]);
-}
+  var contentElementConsentVendor = useContentElementConsentVendor({
+    contentElementId: contentElementId
+  });
+  providerName = providerName || (contentElementConsentVendor === null || contentElementConsentVendor === void 0 ? void 0 : contentElementConsentVendor.name);
+  var cookieMessage = (contentElementConsentVendor === null || contentElementConsentVendor === void 0 ? void 0 : contentElementConsentVendor.optInPrompt) || t("pageflow_scrolled.public.third_party_consent.opt_in_prompt.".concat(providerName));
 
-var contentStyles = {"Content":"Content-module_Content__m7urk"};
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      consentedHere = _useState2[0],
+      setConsentedHere = _useState2[1];
 
-var styles$s = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
+  var _useConsentGiven = useConsentGiven(providerName),
+      _useConsentGiven2 = _slicedToArray(_useConsentGiven, 2),
+      consentGiven = _useConsentGiven2[0],
+      giveConsent = _useConsentGiven2[1];
 
-var FocusVisibleContext = createContext();
-function useFocusOutlineVisible() {
-  return useContext(FocusVisibleContext);
+  if (consentGiven || !providerName) {
+    return typeof children === 'function' ? children({
+      consentedHere: consentedHere
+    }) : children;
+  }
+
+  function accept() {
+    giveConsent(providerName);
+    setConsentedHere(true);
+  }
+
+  return wrapper( /*#__PURE__*/React.createElement("div", {
+    className: styles$s.optIn
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: styles$s.optInIcon
+  }, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles$s.optInMessage
+  }, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    className: styles$s.optInButton,
+    onClick: accept
+  }, t('pageflow_scrolled.public.third_party_consent.confirm')))));
 }
-function FocusOutlineProvider(_ref) {
-  var children = _ref.children;
+OptIn.defaultProps = {
+  icon: true,
+  wrapper: function wrapper(children) {
+    return children;
+  }
+};
 
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+var styles$t = {"optOut":"OptOutInfo-module_optOut__2Q3d5","tooltip":"OptOutInfo-module_tooltip__2bpU0","icon":"OptOutInfo-module_icon__1kL6Q utils-module_unstyledButton__3rgne","full":"OptOutInfo-module_full__s_Ono"};
 
-  useEffect(function () {
-    document.body.addEventListener('keydown', enable);
-    document.body.addEventListener('mousedown', disable);
-    disable();
-    return function () {
-      document.body.removeEventListener('keydown', enable);
-      document.body.removeEventListener('mousedown', disable);
-    };
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-    function enable() {
-      document.body.classList.remove(styles$s.focusOutlineDisabled);
-      setValue(true);
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
 
-    function disable() {
-      document.body.classList.add(styles$s.focusOutlineDisabled);
-      setValue(false);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement(FocusVisibleContext.Provider, {
-    value: value
-  }, children);
+    return target;
+  };
+
+  return _extends$1.apply(this, arguments);
 }
+var information = (function (_ref) {
+  var _ref$styles = _ref.styles,
+      props = _objectWithoutProperties(_ref, ["styles"]);
 
-var PhonePlatformProvider = withInlineEditingAlternative('PhonePlatformProvider', function PhonePlatformProvider(_ref) {
-  var children = _ref.children;
-  var isPhonePlatform = useBrowserFeature('phone platform');
-  return /*#__PURE__*/React.createElement(PhonePlatformContext.Provider, {
-    value: isPhonePlatform
-  }, children);
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "-65 -65 449 449"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M165 0C74.019 0 0 74.02 0 165.001 0 255.982 74.019 330 165 330s165-74.018 165-164.999S255.981 0 165 0zm0 300c-74.44 0-135-60.56-135-134.999S90.56 30 165 30s135 60.562 135 135.001C300 239.44 239.439 300 165 300z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M164.998 70c-11.026 0-19.996 8.976-19.996 20.009 0 11.023 8.97 19.991 19.996 19.991 11.026 0 19.996-8.968 19.996-19.991 0-11.033-8.97-20.009-19.996-20.009zm.002 70c-8.284 0-15 6.716-15 15v90c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15v-90c0-8.284-6.716-15-15-15z"
+  }));
 });
 
-var AudioFocusContext = createContext();
-function AudioFocusProvider(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentKey = _useState2[0],
-      setCurrentKey = _useState2[1];
-
-  var value = useMemo(function () {
-    return [currentKey, setCurrentKey];
-  }, [currentKey, setCurrentKey]);
-  return /*#__PURE__*/React.createElement(AudioFocusContext.Provider, {
-    value: value
-  }, children);
-}
 /**
- * Prevent parallel playback of multiple media elements.
+ * Display info tooltip with a link to opt out of third party
+ * embeds. Opt out url needs to be configured in theme options.
  *
- * @param {Object} options
- * @param {number} options.key - Unique id used to identify the element.
- * @param {boolean} options.request - Set to true to request audio focus.
- * @param {Function} options.onLost -
- *   Callback that will be invoked if another element requests audio
- *   focus, thereby preempting your hold of audio focus. The callback
- *   should pause the element.
+ * @param {Object} props
+ * @param {string} props.providerName -
+ *   Only display if user has given consent for this provider.
+ * @param {boolean} [hide] -
+ *   Temporarily hide the tooltip, e.g. while the embed is playing
+ *
+ * @name ThirdPartyOptOutInfo
  */
 
-function useAudioFocus(_ref2) {
-  var key = _ref2.key,
-      request = _ref2.request,
-      onLost = _ref2.onLost;
-  var wasRequested = usePrevious(request);
+function OptOutInfo(_ref) {
+  var _theme$options$thirdP;
 
-  var _useContext = useContext(AudioFocusContext),
-      _useContext2 = _slicedToArray(_useContext, 2),
-      currentKey = _useContext2[0],
-      setCurrentKey = _useContext2[1];
+  var providerName = _ref.providerName,
+      hide = _ref.hide;
 
-  var previousKey = usePrevious(currentKey);
-  useEffect(function () {
-    if (request && !wasRequested) {
-      setCurrentKey(key);
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var theme = useTheme();
+  var optOutUrl = (_theme$options$thirdP = theme.options.thirdPartyConsent) === null || _theme$options$thirdP === void 0 ? void 0 : _theme$options$thirdP.optOutUrl;
+
+  var _useContentElementAtt = useContentElementAttributes(),
+      width = _useContentElementAtt.width,
+      contentElementId = _useContentElementAtt.contentElementId;
+
+  var contentElementConsentVendor = useContentElementConsentVendor({
+    contentElementId: contentElementId
+  });
+  providerName = providerName || (contentElementConsentVendor === null || contentElementConsentVendor === void 0 ? void 0 : contentElementConsentVendor.name);
+
+  var _useConsentGiven = useConsentGiven(providerName),
+      _useConsentGiven2 = _slicedToArray(_useConsentGiven, 1),
+      consentGiven = _useConsentGiven2[0];
+
+  if (!optOutUrl || !consentGiven) {
+    return null;
+  }
+
+  var linkText = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt_link');
+  var linkHtml = "<a href=\"".concat(optOutUrl, "\" target=\"_blank\" rel=\"noopener noreferrer\">").concat(linkText, "</a>");
+  var html = t('pageflow_scrolled.public.third_party_consent.opt_out.prompt', {
+    link: linkHtml
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$t.optOut, _defineProperty({}, styles$t.full, width === widths.full)),
+    style: hide ? {
+      opacity: 0,
+      visibility: 'hidden'
+    } : undefined
+  }, /*#__PURE__*/React.createElement("button", {
+    className: styles$t.icon
+  }, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles$t.tooltip
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: html
     }
-  }, [request, wasRequested, setCurrentKey, key]);
-  useEffect(function () {
-    if (previousKey === key && currentKey !== key) {
-      onLost();
+  })));
+}
+
+function registerVendors(_ref) {
+  var contentElementTypes = _ref.contentElementTypes,
+      seed = _ref.seed,
+      consent = _ref.consent,
+      cookieName = _ref.cookieName;
+  var options = seed.config.theme.options.thirdPartyConsent;
+  var locale = seed.collections.entries[0].locale;
+  cookieName = cookieName || (options === null || options === void 0 ? void 0 : options.cookieName);
+  [].concat(_toConsumableArray(seed.config.consentVendors), _toConsumableArray(contentElementTypes.consentVendors({
+    contentElements: seed.collections.contentElements,
+    t: function t(key, options) {
+      return I18n.t(key, _objectSpread2(_objectSpread2({}, options), {}, {
+        locale: locale
+      }));
     }
-  }, [currentKey, previousKey, key, onLost]);
+  }))).forEach(function (vendor) {
+    var _options$cookieProvid;
+
+    consent.registerVendor(vendor.name, {
+      displayName: vendor.displayName,
+      description: vendor.description,
+      paradigm: cookieName ? vendor.paradigm || 'opt-in' : 'skip',
+      cookieName: cookieName,
+      cookieKey: options === null || options === void 0 ? void 0 : (_options$cookieProvid = options.cookieProviderNameMapping) === null || _options$cookieProvid === void 0 ? void 0 : _options$cookieProvid[vendor.name],
+      cookieDomain: options === null || options === void 0 ? void 0 : options.cookieDomain
+    });
+  });
+  consent.closeVendorRegistration();
 }
 
 function RootProviders(_ref) {
@@ -5038,15 +5151,36 @@ function RootProviders(_ref) {
   }, children)))))))));
 }
 
-var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"40px","text-2l":"50px","text-xl":"66px","text-2xl":"88px","text-3xl":"110px","heading-lg":"Text-module_heading-lg__FKxzu typography-headingLg typography-heading","heading-md":"Text-module_heading-md__1q5Ss typography-headingMd typography-heading","heading-sm":"Text-module_heading-sm__2awaz typography-headingSm typography-heading","heading-xs":"Text-module_heading-xs__21nHy typography-headingXs typography-heading","body":"Text-module_body__4oWD- typography-body","caption":"Text-module_caption__3_6Au typography-caption","question":"Text-module_question__ByVAq typography-question"};
+function camelize(snakeCase) {
+  return snakeCase.replace(/[_-][a-z]/g, function (match) {
+    return match[1].toUpperCase();
+  });
+}
+
+/**
+ * Resolve a palette color to a CSS custom property.
+ *
+ * @example
+ * <div style={{backgroundColor: paletteColor(configuration.backgroundColor)}}>
+ */
+function paletteColor(value) {
+  return !value || value[0] === '#' ? value : "var(--theme-palette-color-".concat(value, ")");
+}
+
+var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"40px","text-2l":"50px","text-xl":"66px","text-2xl":"88px","text-3xl":"110px","text-4xl":"200px","text-5xl":"350px","heading-lg":"Text-module_heading-lg__FKxzu typography-headingLg typography-heading","heading-md":"Text-module_heading-md__1q5Ss typography-headingMd typography-heading","heading-sm":"Text-module_heading-sm__2awaz typography-headingSm typography-heading","heading-xs":"Text-module_heading-xs__21nHy typography-headingXs typography-heading","headingTagline-lg":"Text-module_headingTagline-lg__1O2TQ typography-headingTagline","headingTagline-md":"Text-module_headingTagline-md__2hrVS typography-headingTagline","headingTagline-sm":"Text-module_headingTagline-sm__1Fw2J typography-headingTagline","headingSubtitle-lg":"Text-module_headingSubtitle-lg__15kj0 typography-headingSubtitle","headingSubtitle-md":"Text-module_headingSubtitle-md__2_qtz typography-headingSubtitle","headingSubtitle-sm":"Text-module_headingSubtitle-sm__MOc_6 typography-headingSubtitle","body":"Text-module_body__4oWD- typography-body","caption":"Text-module_caption__3_6Au typography-caption","question":"Text-module_question__ByVAq typography-question","quoteText-lg":"Text-module_quoteText-lg__3ZnZi typography-quoteText","quoteText-md":"Text-module_quoteText-md__2eooO typography-quoteText","quoteText-sm":"Text-module_quoteText-sm__5nKex typography-quoteText","quoteText-xs":"Text-module_quoteText-xs__2p5on typography-quoteText","quoteAttribution":"Text-module_quoteAttribution__VBqLw typography-quoteAttribution","counterNumber-lg":"Text-module_counterNumber-lg__2myJg typography-counterNumber","counterNumber-md":"Text-module_counterNumber-md__1NC3q typography-counterNumber","counterNumber-sm":"Text-module_counterNumber-sm__2SwHQ typography-counterNumber","counterNumber-xs":"Text-module_counterNumber-xs__1D-YR typography-counterNumber","counterDescription":"Text-module_counterDescription__34NjQ typography-counterDescription"};
 
 /**
  * Render some text using the default typography scale.
  *
  * @param {Object} props
  * @param {string} props.scaleCategory -
- *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
- *   `'heading-xs'`, `'body'`, `'caption'`, `'question'`.
+ *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,`'heading-xs'`,
+ *   `'headingTagline-lg'`, `'headingTagline-md'`, `'headingTagline-sm'`,
+ *   `'headingSubtitle-lg'`, `'headingSubtitle-md'`, `'headingSubtitle-sm'`,
+ *   `'body'`, `'caption'`, `'question'`,
+ *   `'quoteText-lg'`, `'quoteText-md'`, `'quoteText-sm'`, `'quoteText-xs'`, `'quoteAttribution'`,
+ *   `'counterNumber-lg'`, `'counterNumber-md'`, `'counterNumber-sm'`,
+ *   `'counterNumber-xs'`, `'counterDescription`'.
  * @param {string} [props.inline] - Render a span instread of a div.
  * @param {string} props.children - Nodes to render with specified typography.
  */
@@ -5060,123 +5194,27 @@ function Text(_ref) {
   }, children);
 }
 
-var styles$t = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
-
-function StandaloneSectionThumbnail(_ref) {
-  var seed = _ref.seed,
-      props = _objectWithoutProperties(_ref, ["seed"]);
-
-  return /*#__PURE__*/React.createElement(RootProviders, {
-    seed: seed
-  }, /*#__PURE__*/React.createElement(SectionThumbnail, props));
-}
-function SectionThumbnail(_ref2) {
-  var sectionPermaId = _ref2.sectionPermaId,
-      subscribe = _ref2.subscribe,
-      scale = _ref2.scale;
-  var dispatch = useEntryStateDispatch();
-  useEffect(function () {
-    if (subscribe) {
-      return subscribe(dispatch);
-    }
-  }, [subscribe, dispatch]);
-  var section = useSection({
-    sectionPermaId: sectionPermaId
-  });
-  var scaleFactor = scale ? 5 : 1;
-
-  if (section) {
-    return /*#__PURE__*/React.createElement(StaticPreview, null, /*#__PURE__*/React.createElement(Measure, {
-      client: true
-    }, function (_ref3) {
-      var measureRef = _ref3.measureRef,
-          contentRect = _ref3.contentRect;
-      return /*#__PURE__*/React.createElement(FullscreenDimensionProvider, clientDimensions(contentRect, scaleFactor), /*#__PURE__*/React.createElement("div", {
-        ref: measureRef,
-        className: styles$t.crop,
-        inert: ""
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(_defineProperty({}, styles$t.scale, scale))
-      }, /*#__PURE__*/React.createElement("div", {
-        className: contentStyles.Content,
-        style: viewportUnitCustomProperties(clientDimensions(contentRect, scaleFactor))
-      }, /*#__PURE__*/React.createElement(ConnectedSection, {
-        state: "active",
-        domIdPrefix: "section-preview",
-        section: _objectSpread2(_objectSpread2({}, section), {}, {
-          transition: 'preview'
-        })
-      })))));
-    }));
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$t.root
-    }, "Not found.");
-  }
-}
-SectionThumbnail.defaultProps = {
-  scale: true,
-  subscribe: function subscribe() {}
-};
-
-function clientDimensions(contentRect, scaleFactor) {
-  return {
-    width: contentRect.client.width && Math.ceil(contentRect.client.width * scaleFactor),
-    height: contentRect.client.height && Math.ceil(contentRect.client.height * scaleFactor)
-  };
-}
-
-function viewportUnitCustomProperties(_ref4) {
-  var width = _ref4.width,
-      height = _ref4.height;
-  return {
-    '--vw': width && "".concat(width / 100, "px"),
-    '--vh': height && "".concat(height / 100, "px")
-  };
-}
-
-var ContentElementConfigurationUpdateContext = React.createContext(function () {});
-function useContentElementConfigurationUpdate() {
-  return useContext(ContentElementConfigurationUpdateContext);
-}
-
-var ContentElementEditorCommandEmitterContext = createContext({
-  on: function on() {},
-  off: function off() {}
-});
-function useContentElementEditorCommandSubscription(callback) {
-  var _useContentElementAtt = useContentElementAttributes(),
-      contentElementId = _useContentElementAtt.contentElementId;
-
-  var emitter = useContext(ContentElementEditorCommandEmitterContext);
-  useEffect(function () {
-    emitter.on("command:".concat(contentElementId), callback);
-    return function () {
-      return emitter.off("command:".concat(contentElementId), callback);
-    };
-  }, [emitter, callback, contentElementId]);
-}
-
-function camelize(snakeCase) {
-  return snakeCase.replace(/-[a-z]/g, function (match) {
-    return match[1].toUpperCase();
-  });
-}
-
-var styles$u = {"root":"EditableText-module_root__2v1tU"};
+var styles$u = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"EditableText-module_root__2v1tU","light":"EditableText-module_light__2c29h","dark":"EditableText-module_dark__2ym90"};
 
+var defaultValue = [{
+  type: 'paragraph',
+  children: [{
+    text: ''
+  }]
+}];
 var EditableText = withInlineEditingAlternative('EditableText', function EditableText(_ref) {
   var value = _ref.value,
-      className = _ref.className;
+      className = _ref.className,
+      _ref$scaleCategory = _ref.scaleCategory,
+      scaleCategory = _ref$scaleCategory === void 0 ? 'body' : _ref$scaleCategory;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(styles$u.root, className)
   }, /*#__PURE__*/React.createElement(Text, {
-    scaleCategory: "body"
-  }, render(value)));
+    scaleCategory: scaleCategory
+  }, render(value || defaultValue)));
 });
 
-function render() {
-  var children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+function render(children) {
   return children.map(function (element, index) {
     if (element.type) {
       return renderElement({
@@ -5192,7 +5230,7 @@ function render() {
           key: index
         },
         leaf: element,
-        children: element.text.trim() === '' ? "\uFEFF" : element.text
+        children: children.length === 1 && element.text.trim() === '' ? "\uFEFF" : element.text
       });
     }
   });
@@ -5203,30 +5241,42 @@ function renderElement(_ref2) {
       children = _ref2.children,
       element = _ref2.element;
   var variantClassName = element.variant && ['typography-textBlock', camelize(element.type), element.variant].join('-');
+  var styles = element.color && {
+    color: paletteColor(element.color)
+  };
 
   switch (element.type) {
     case 'block-quote':
       return /*#__PURE__*/React.createElement("blockquote", Object.assign({}, attributes, {
-        className: variantClassName
+        className: variantClassName,
+        style: styles
       }), children);
 
     case 'bulleted-list':
       return /*#__PURE__*/React.createElement("ul", Object.assign({}, attributes, {
-        className: variantClassName
+        className: variantClassName,
+        style: styles
       }), children);
 
     case 'numbered-list':
       return /*#__PURE__*/React.createElement("ol", Object.assign({}, attributes, {
-        className: variantClassName
+        className: variantClassName,
+        style: styles
       }), children);
 
     case 'list-item':
       return /*#__PURE__*/React.createElement("li", attributes, children);
 
     case 'heading':
-      return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
-        className: classNames(variantClassName, textStyles['heading-xs'])
-      }), children);
+      var key = attributes.key,
+          otherAttributes = _objectWithoutProperties(attributes, ["key"]);
+
+      return /*#__PURE__*/React.createElement(Heading, {
+        key: key,
+        attributes: otherAttributes,
+        variantClassName: variantClassName,
+        styles: styles
+      }, children);
 
     case 'link':
       return renderLink({
@@ -5237,17 +5287,30 @@ function renderElement(_ref2) {
 
     default:
       return /*#__PURE__*/React.createElement("p", Object.assign({}, attributes, {
-        className: variantClassName
+        className: variantClassName,
+        style: styles
       }), children);
   }
 }
 
-function renderLink(_ref3) {
-  var _element$href, _element$href2;
-
+function Heading(_ref3) {
   var attributes = _ref3.attributes,
-      children = _ref3.children,
-      element = _ref3.element;
+      variantClassName = _ref3.variantClassName,
+      inlineStyles = _ref3.styles,
+      children = _ref3.children;
+  var darkBackground = useDarkBackground();
+  return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
+    className: classNames(variantClassName, darkBackground ? styles$u.light : styles$u.dark, 'scope-headings', textStyles['heading-xs']),
+    style: inlineStyles
+  }), children);
+}
+
+function renderLink(_ref4) {
+  var _element$href, _element$href2, _element$href3;
+
+  var attributes = _ref4.attributes,
+      children = _ref4.children,
+      element = _ref4.element;
 
   if (element === null || element === void 0 ? void 0 : (_element$href = element.href) === null || _element$href === void 0 ? void 0 : _element$href.chapter) {
     var key = attributes.key,
@@ -5262,6 +5325,17 @@ function renderLink(_ref3) {
     return /*#__PURE__*/React.createElement("a", Object.assign({}, attributes, {
       href: "#section-".concat(element.href.section)
     }), children);
+  }
+
+  if (element === null || element === void 0 ? void 0 : (_element$href3 = element.href) === null || _element$href3 === void 0 ? void 0 : _element$href3.file) {
+    var _key = attributes.key,
+        _otherAttributes = _objectWithoutProperties(attributes, ["key"]);
+
+    return /*#__PURE__*/React.createElement(FileLink, {
+      key: _key,
+      attributes: _otherAttributes,
+      fileOptions: element.href.file
+    }, children);
   } else {
     var targetAttributes = element.openInNewTab ? {
       target: '_blank',
@@ -5273,10 +5347,10 @@ function renderLink(_ref3) {
   }
 }
 
-function ChapterLink(_ref4) {
-  var attributes = _ref4.attributes,
-      children = _ref4.children,
-      chapterPermaId = _ref4.chapterPermaId;
+function ChapterLink(_ref5) {
+  var attributes = _ref5.attributes,
+      children = _ref5.children,
+      chapterPermaId = _ref5.chapterPermaId;
   var chapter = useChapter({
     permaId: chapterPermaId
   });
@@ -5285,10 +5359,22 @@ function ChapterLink(_ref4) {
   }), children);
 }
 
-function renderLeaf(_ref5) {
-  var attributes = _ref5.attributes,
-      children = _ref5.children,
-      leaf = _ref5.leaf;
+function FileLink(_ref6) {
+  var attributes = _ref6.attributes,
+      children = _ref6.children,
+      fileOptions = _ref6.fileOptions;
+  var file = useFile(fileOptions);
+  return /*#__PURE__*/React.createElement("a", Object.assign({}, attributes, {
+    target: "_blank",
+    rel: "noopener noreferrer",
+    href: (file === null || file === void 0 ? void 0 : file.urls.original) || '#'
+  }), children);
+}
+
+function renderLeaf(_ref7) {
+  var attributes = _ref7.attributes,
+      children = _ref7.children,
+      leaf = _ref7.leaf;
 
   if (leaf.bold) {
     children = /*#__PURE__*/React.createElement("strong", null, children);
@@ -5309,6 +5395,103 @@ function renderLeaf(_ref5) {
   return /*#__PURE__*/React.createElement("span", attributes, children);
 }
 
+var ContentElementConfigurationUpdateContext = React.createContext(function () {});
+function useContentElementConfigurationUpdate() {
+  return useContext(ContentElementConfigurationUpdateContext);
+}
+
+var styles$v = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
+
+function StandaloneSectionThumbnail(_ref) {
+  var seed = _ref.seed,
+      props = _objectWithoutProperties(_ref, ["seed"]);
+
+  return /*#__PURE__*/React.createElement(RootProviders, {
+    seed: seed
+  }, /*#__PURE__*/React.createElement(SectionThumbnail, props));
+}
+function SectionThumbnail(_ref2) {
+  var sectionPermaId = _ref2.sectionPermaId,
+      subscribe = _ref2.subscribe,
+      scale = _ref2.scale;
+  var dispatch = useEntryStateDispatch();
+  useEffect(function () {
+    if (subscribe) {
+      return subscribe(dispatch);
+    }
+  }, [subscribe, dispatch]);
+  var section = useSection({
+    sectionPermaId: sectionPermaId
+  });
+  var scaleFactor = scale ? 5 : 1;
+
+  if (section) {
+    return /*#__PURE__*/React.createElement(StaticPreview, null, /*#__PURE__*/React.createElement(Measure, {
+      client: true
+    }, function (_ref3) {
+      var measureRef = _ref3.measureRef,
+          contentRect = _ref3.contentRect;
+      return /*#__PURE__*/React.createElement(FullscreenDimensionProvider, clientDimensions(contentRect, scaleFactor), /*#__PURE__*/React.createElement("div", {
+        ref: measureRef,
+        className: styles$v.crop,
+        inert: ""
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(_defineProperty({}, styles$v.scale, scale))
+      }, /*#__PURE__*/React.createElement("div", {
+        className: contentStyles.Content,
+        style: viewportUnitCustomProperties(clientDimensions(contentRect, scaleFactor))
+      }, /*#__PURE__*/React.createElement(ConnectedSection, {
+        state: "active",
+        domIdPrefix: "section-preview",
+        section: _objectSpread2(_objectSpread2({}, section), {}, {
+          transition: 'preview'
+        })
+      })))));
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styles$v.root
+    }, "Not found.");
+  }
+}
+SectionThumbnail.defaultProps = {
+  scale: true,
+  subscribe: function subscribe() {}
+};
+
+function clientDimensions(contentRect, scaleFactor) {
+  return {
+    width: contentRect.client.width && Math.ceil(contentRect.client.width * scaleFactor),
+    height: contentRect.client.height && Math.ceil(contentRect.client.height * scaleFactor)
+  };
+}
+
+function viewportUnitCustomProperties(_ref4) {
+  var width = _ref4.width,
+      height = _ref4.height;
+  return {
+    '--vw': width && "".concat(width / 100, "px"),
+    '--vh': height && "".concat(height / 100, "px")
+  };
+}
+
+var ContentElementEditorCommandEmitterContext = createContext({
+  on: function on() {},
+  off: function off() {}
+});
+function useContentElementEditorCommandSubscription(callback) {
+  var _useContentElementAtt = useContentElementAttributes(),
+      contentElementId = _useContentElementAtt.contentElementId;
+
+  var emitter = useContext(ContentElementEditorCommandEmitterContext);
+  useEffect(function () {
+    emitter.on("command:".concat(contentElementId), callback);
+    return function () {
+      return emitter.off("command:".concat(contentElementId), callback);
+    };
+  }, [emitter, callback, contentElementId]);
+}
+
 var frontendStyles = {"root":"EditableInlineText-module_root__3eA-J","hyphens-manual":"EditableInlineText-module_hyphens-manual__3Lj4H","hyphens-none":"EditableInlineText-module_hyphens-none__1UvNH"};
 
-export { processSources as $, AtmoProvider as A, Bar as B, ConnectedSection as C, useContentElementLifecycle as D, EventContextDataProvider as E, useCurrentChapter as F, useIsStaticPreview as G, useOnUnmuteMedia as H, usePortraitOrientation as I, EditableText as J, PhonePlatformProvider as K, OptOutInfo as L, getTransitionNames as M, getAvailableTransitionNames as N, OptIn as O, PlayerEventContextDataProvider as P, Image as Q, RootProviders as R, ScrollToSectionContext as S, Text as T, MediaPlayer as U, getInitialPlayerState as V, playerStateReducer as W, usePlayerState as X, VideoPlayer as Y, AudioPlayer as Z, _asyncToGenerator as _, useCurrentSectionIndexState as a, Atmo as a0, AtmoContext as a1, useAtmo as a2, useOnScreen as a3, StandaloneSectionThumbnail as a4, SectionThumbnail as a5, ContentElementEditorCommandEmitterContext as a6, MotifAreaVisibilityProvider as a7, ForcePaddingContext as a8, ContentElementConfigurationUpdateContext as a9, ContentElementEditorStateContext as aa, LayoutWithoutInlineEditing as ab, renderElement as ac, renderLeaf as ad, usePostMessageListener as b, contentStyles as c, api as d, regenerator as e, useDarkBackground as f, getEventObject as g, useTextTracks as h, useMediaMuted as i, useFocusOutlineVisible as j, useVideoQualitySetting as k, useIsomorphicLayoutEffect as l, withInlineEditingAlternative as m, frontendStyles as n, useFullscreenDimensions as o, information as p, camelize as q, registerVendors as r, styles$p as s, loadInlineEditingComponents as t, usePrevious as u, useAudioFocus as v, withInlineEditingDecorator as w, useContentElementConfigurationUpdate as x, useContentElementEditorCommandSubscription as y, useContentElementEditorState as z };
+export { Image as $, AtmoProvider as A, registerVendors as B, ConnectedSection as C, api as D, EventContextDataProvider as E, loadInlineEditingComponents as F, useAudioFocus as G, useContentElementEditorCommandSubscription as H, InlineFileRights as I, useContentElementLifecycle as J, useCurrentChapter as K, useIsStaticPreview as L, useOnUnmuteMedia as M, usePortraitOrientation as N, PhonePlatformProvider as O, PlayerEventContextDataProvider as P, OptIn as Q, RootProviders as R, ScrollToSectionContext as S, OptOutInfo as T, useConsentRequested as U, getTransitionNames as V, Widget as W, getAvailableTransitionNames as X, paletteColor as Y, widthName as Z, _asyncToGenerator as _, useCurrentSectionIndexState as a, Text as a0, MediaPlayer as a1, getInitialPlayerState as a2, playerStateReducer as a3, usePlayerState as a4, VideoPlayer as a5, AudioPlayer as a6, processSources as a7, Atmo as a8, AtmoContext as a9, useAtmo as aa, useOnScreen as ab, StandaloneSectionThumbnail as ac, SectionThumbnail as ad, ContentElementEditorCommandEmitterContext as ae, MotifAreaVisibilityProvider as af, ForcePaddingContext as ag, ContentElementConfigurationUpdateContext as ah, LayoutWithoutInlineEditing as ai, renderElement as aj, renderLeaf as ak, usePostMessageListener as b, contentStyles as c, regenerator as d, withInlineEditingAlternative as e, useDarkBackground as f, getEventObject as g, EditableText as h, isBlankEditableTextValue as i, useContentElementConfigurationUpdate as j, useContentElementAttributes as k, widths as l, useTextTracks as m, useMediaMuted as n, useFocusOutlineVisible as o, useVideoQualitySetting as p, useIsomorphicLayoutEffect as q, frontendStyles as r, useFullscreenDimensions as s, information as t, usePrevious as u, camelize as v, withInlineEditingDecorator as w, isBlank as x, presence as y, styles$o as z };