pageflow 16.0.0 → 16.1.0

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

@@ -1,11 +1,13 @@
 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 useFile, g as useTheme, h as useSectionContentElements, i as useAdditionalSeedData, j as useSectionsWithChapter, k as useContentElementConsentVendor, l as _toConsumableArray, E as EntryStateProvider, L as LocaleProvider, m as useChapter, n as useEntryStateDispatch, o as useSection } from './i18n-ddd92820.js';
 import classNames from 'classnames';
+import { u as useDelayedBoolean, a as useContentElementEditorState } from './useContentElementEditorState-63045393.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 { u as useBrowserFeature, P as PhonePlatformContext, B as BrowserFeaturesProvider } from './PhonePlatformContext-10a1d600.js';
 import Measure from 'react-measure';
 
 var regenerator = regeneratorRuntime;
@@ -46,241 +48,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 +128,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 +152,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 +162,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 +205,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 +252,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 +704,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 +1165,10 @@ function playerStateReducer(state, action) {
       });
 
     case USER_INTERACTION:
+      if (!state.userIdle) {
+        return state;
+      }
+
       return _objectSpread2(_objectSpread2({}, state), {}, {
         userIdle: false
       });
@@ -1861,7 +1216,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 +1455,8 @@ function addDisplayLabel(textTrackFile, t) {
   });
 }
 
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 function usePrevious(value) {
   var ref = useRef();
   useEffect(function () {
@@ -2205,7 +1562,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 +1587,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,
@@ -2310,7 +1667,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 +1681,7 @@ 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")]);
 }
 
 /**
@@ -2472,7 +1829,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-4a09bfa3.js');
 }
 
 var components = {};
@@ -2509,12 +1866,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 +1934,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$4 = {"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$4.wrapper
   }, children);
 }
 
-var styles$9 = {"missing":"ContentElement-module_missing__2_1j9"};
+var styles$5 = {"missing":"ContentElement-module_missing__2_1j9"};
 
 var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ContentElementErrorBoundary, _React$Component);
@@ -2614,7 +1986,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$5.missing
         }, "Error rendering element of type \"", this.props.type, "\"");
       }
 
@@ -2637,21 +2009,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$5.missing
     }, "Element of unknown type \"", props.type, "\"");
   }
 });
@@ -2668,13 +2043,15 @@ function ContentElements(props) {
       type: item.type,
       first: index === 0,
       position: item.position,
+      width: item.width,
       itemProps: item.props,
+      customMargin: props.customMargin,
       sectionProps: props.sectionProps
     }), 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) {
@@ -2715,90 +2092,136 @@ function useMediaQuery(query) {
   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, ")"));
-}
-
-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$6 = {"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$6.root, styles$6[props.align])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$a.group),
+    className: classNames(styles$6.group),
     key: props.align
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inline,
+    className: classNames(styles$6.box, styles$6.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$6.group, styles$6["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$6.box, styles$6[box.position], styles$6["width-".concat(widthName(box.width))], _defineProperty({}, styles$6.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$6["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;
 }
 
@@ -2807,50 +2230,122 @@ function renderPlaceholder(placeholder) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$a.group)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.inline
-  }, placeholder));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$6.group)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$6.box, styles$6.inline)
+  }, placeholder));
+}
+
+var styles$7 = {"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$7.root)
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: props.contentAreaRef
+  }), 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,
+      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$7.item, styles$7["item-".concat(position, "-").concat(width)])
+      }, props.children( /*#__PURE__*/React.createElement("div", {
+        className: classNames(styles$7["inner-".concat(item.position)], styles$7["inner-".concat(width)], _defineProperty({}, styles$7["sideBySide"], sideBySideFloat(props.items, index)))
+      }, child), boxProps(props.items, item, index))));
+    });
+  }), renderPlaceholder$1(props.placeholder));
+}
+
+function outerClassName(items, index) {
+  var item = items[index];
+  return classNames(styles$7.outer, styles$7["outer-".concat(widthName(getWidth(item)))], _defineProperty({}, styles$7.customMargin, hasCustomMargin(item)), _defineProperty({}, styles$7.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,
+    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;
 }
 
-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"};
+function isFloatedFollowedByOppositeFloated(items, index) {
+  return index < items.length - 1 && isFloated(items[index]) && isFloated(items[index + 1]) && items[index].position !== items[index + 1].position;
+}
 
-function Center(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.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", {
-      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))));
-  }), renderPlaceholder$1(props.placeholder));
+function isFloated(item) {
+  return floatedPositions.includes(item.position);
 }
 
-function outerClassName(item) {
+function supportsWrappingAroundFloats(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));
+  return supportsWrappingAroundFloats;
 }
 
-function boxProps(items, item, index) {
-  var previous = items[index - 1];
-  var next = items[index + 1];
-  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'
-  };
+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) {
@@ -2859,9 +2354,9 @@ function renderPlaceholder$1(placeholder) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.outer)
+    className: classNames(styles$7.outer)
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.item)
+    className: classNames(styles$7.item)
   }, placeholder));
 }
 
@@ -2988,7 +2483,7 @@ function useDimension() {
   return [componentSize, measuredRef];
 }
 
-var styles$c = {"root":"Fullscreen-module_root__1N3CI"};
+var styles$8 = {"root":"Fullscreen-module_root__1N3CI"};
 
 var DimensionContext = React.createContext({});
 function useFullscreenDimensions() {
@@ -3014,18 +2509,18 @@ var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: styles$c.root,
+    className: styles$8.root,
     style: {
       height: height
     }
   }, props.children);
 });
 
-var styles$d = {"FillColor":"FillColor-module_FillColor__S1uEG"};
+var styles$9 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
 
 function FillColor(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$d.FillColor,
+    className: styles$9.FillColor,
     style: {
       backgroundColor: props.color
     }
@@ -3187,7 +2682,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 +2696,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 +2790,7 @@ VideoPlayer.defaultProps = {
   controls: true
 };
 
-var styles$e = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
+var styles$a = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
 
 var MotifAreaVisibilityContext = React.createContext(false);
 function MotifAreaVisibilityProvider(_ref) {
@@ -3327,7 +2827,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$a.root, _defineProperty({}, styles$a.visible, visible)),
     style: position,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave
@@ -3346,13 +2846,13 @@ 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$b = {"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;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$f.effects,
+    className: styles$b.effects,
     style: {
       filter: getFilter((file === null || file === void 0 ? void 0 : file.effects) || [])
     }
@@ -3443,7 +2943,7 @@ function usePortraitOrientation() {
   return useMediaQuery('(orientation: portrait)');
 }
 
-var styles$g = {"root":"Image-module_root__1ef3j"};
+var styles$c = {"fill":"Image-module_fill__1D1wH"};
 
 function ImageStructuredData(_ref) {
   var file = _ref.file;
@@ -3477,6 +2977,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 +2995,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$c.fill, props.fill)),
     src: imageUrl(imageFile, props),
     alt: imageFile.configuration.alt ? imageFile.configuration.alt : '',
     style: {
@@ -3524,7 +3025,8 @@ function renderStructuredData(props, file) {
 
 Image.defaultProps = {
   load: true,
-  variant: 'large'
+  variant: 'large',
+  fill: true
 };
 
 function BackgroundImage(_ref) {
@@ -3573,6 +3075,28 @@ function OrientationAwareBackgroundImage(_ref) {
   }
 }
 
+function OrientationAwareBackgroundVideo(_ref) {
+  var video = _ref.video,
+      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
+      videoMobile = _ref.videoMobile,
+      containerDimension = _ref.containerDimension;
+  var mobile = usePortraitOrientation();
+
+  if (mobile) {
+    return /*#__PURE__*/React.createElement(BackgroundVideo, {
+      video: videoMobile,
+      onMotifAreaUpdate: onMotifAreaUpdate,
+      containerDimension: containerDimension
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(BackgroundVideo, {
+      video: video,
+      onMotifAreaUpdate: onMotifAreaUpdate,
+      containerDimension: containerDimension
+    });
+  }
+}
+
 function BackgroundAsset(props) {
   var video = useBackgroundFile({
     file: useFile({
@@ -3583,6 +3107,15 @@ function BackgroundAsset(props) {
     containerDimension: props.containerDimension,
     effects: props.effects
   });
+  var videoMobile = useBackgroundFile({
+    file: useFile({
+      collectionName: 'videoFiles',
+      permaId: props.videoMobile
+    }),
+    motifArea: props.videoMobileMotifArea,
+    containerDimension: props.containerDimension,
+    effects: props.effectsMobile
+  });
   var image = useBackgroundFile({
     file: useFile({
       collectionName: 'imageFiles',
@@ -3602,11 +3135,12 @@ function BackgroundAsset(props) {
     effects: props.effectsMobile
   });
 
-  if (video) {
+  if (video || videoMobile) {
     return /*#__PURE__*/React.createElement(Fullscreen, {
       ref: props.setContainerRef
-    }, /*#__PURE__*/React.createElement(BackgroundVideo, {
+    }, renderBackgroundVideo({
       video: video,
+      videoMobile: videoMobile,
       onMotifAreaUpdate: props.onMotifAreaUpdate,
       containerDimension: props.containerDimension
     }));
@@ -3626,12 +3160,34 @@ function BackgroundAsset(props) {
   }
 }
 
-function renderBackgroundImage(_ref) {
-  var image = _ref.image,
-      imageMobile = _ref.imageMobile,
+function renderBackgroundVideo(_ref) {
+  var video = _ref.video,
+      videoMobile = _ref.videoMobile,
       onMotifAreaUpdate = _ref.onMotifAreaUpdate,
       containerDimension = _ref.containerDimension;
 
+  if (video && videoMobile) {
+    return /*#__PURE__*/React.createElement(OrientationAwareBackgroundVideo, {
+      video: video,
+      videoMobile: videoMobile,
+      onMotifAreaUpdate: onMotifAreaUpdate,
+      containerDimension: containerDimension
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(BackgroundVideo, {
+      video: video || videoMobile,
+      onMotifAreaUpdate: onMotifAreaUpdate,
+      containerDimension: containerDimension
+    });
+  }
+}
+
+function renderBackgroundImage(_ref2) {
+  var image = _ref2.image,
+      imageMobile = _ref2.imageMobile,
+      onMotifAreaUpdate = _ref2.onMotifAreaUpdate,
+      containerDimension = _ref2.containerDimension;
+
   if (image && imageMobile) {
     return /*#__PURE__*/React.createElement(OrientationAwareBackgroundImage, {
       image: image,
@@ -3658,11 +3214,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$b.Backdrop, _defineProperty({}, styles$b.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$b.defaultBackground, props.transitionStyles.backdropInner2)
   }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset, Object.assign({}, props, {
     containerDimension: containerDimension,
     setContainerRef: setContainerRef
@@ -3919,16 +3475,16 @@ var v1 = /*#__PURE__*/Object.freeze({
   useMotifAreaState: useMotifAreaState
 });
 
-var styles$h = {"wrapper":"Positioner-module_wrapper__3iFSg"};
+var styles$d = {"wrapper":"Positioner-module_wrapper__3iFSg"};
 
 function Positioner(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$h.wrapper
+    className: styles$d.wrapper
   }, children);
 }
 
-var styles$i = {"root":"Picture-module_root__1BCCg"};
+var styles$e = {"root":"Picture-module_root__1BCCg"};
 
 function Picture(_ref) {
   var imageFile = _ref.imageFile,
@@ -3966,7 +3522,7 @@ function renderTag(_ref2) {
     }),
     media: "(orientation: portrait)"
   }), /*#__PURE__*/React.createElement("img", {
-    className: classNames(styles$i.root),
+    className: classNames(styles$e.root),
     src: imageUrl$1({
       imageFile: imageFile,
       variant: variant,
@@ -4010,18 +3566,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$a.root, v2Styles.root, _defineProperty({}, styles$a.visible, visible))
   });
 };
 
-var styles$j = {"effects":"Effects-module_effects__MDZRR"};
+var styles$f = {"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$f.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 +3713,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$b.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$b.defaultBackground, props.transitionStyles.backdropInner2)
   }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset$1, props)))));
 }
 Backdrop$1.defaultProps = {
@@ -4354,7 +3910,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$g = {"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 +3919,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$g.section, !fullscreenDimensions.height && styles$g.orientation, styles$g["layout-".concat(layout || 'left')], exposeMotifArea && !empty && styles$g.exposeMotifArea, useAspectRatioClassName(backdrop.file, fullscreenDimensions), useAspectRatioClassName(backdrop.mobileFile, fullscreenDimensions, {
     mobile: true
   })].filter(Boolean);
 }
@@ -4433,597 +3989,968 @@ function getAspectRatioCSS(aspectRatio, className, orientation) {
   }
 }
 
-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 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$h = {"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$i = {
+  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$i[name]) {
+    throw new Error("Unknown transition ".concat(name));
+  }
+
+  return styles$i[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$j = {"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$j["align-".concat(props.align)], props.inverted ? styles$j.light : styles$j.dark)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$j.dynamic,
+    style: {
+      opacity: props.dynamicShadowOpacity * opacityFactor
+    }
+  }, /*#__PURE__*/React.createElement(Fullscreen, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles$j["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$k = {"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$k.start, !openStart && !full), _defineProperty(_classNames, styles$k.end, !openEnd && !full), _classNames))
+  }, children);
+}
+
+var styles$l = {"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$l.root, (_classNames = {}, _defineProperty(_classNames, styles$l.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$l["long"], props.coverInvisibleNextSection), _classNames)),
+    style: {
+      paddingTop: props.motifAreaState.paddingTop
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$l.wrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$l.shadow, props.inverted ? styles$l.shadowLight : styles$l.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
+    style: {
+      top: props.motifAreaState.paddingTop,
+      opacity: props.staticShadowOpacity
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$l.content
+  }, props.children)));
+}
+
+var styles$m = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
+
+function CardBox(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$m.wrapper,
+    style: {
+      paddingTop: props.motifAreaState.paddingTop
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$m.content
+  }, props.children));
 }
 
+var styles$n = {"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
-});
+  return /*#__PURE__*/React.createElement("div", {
+    className: className$1(props)
+  }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
+    invert: true
+  }, props.children));
+}
 
-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"};
+function outsideBox(props) {
+  return props.position === 'sticky' || props.position === 'inline' && props.width > widths.md || props.customMargin;
+}
 
-var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
+function className$1(props) {
+  return classNames(styles$n.card, props.inverted ? styles$n.cardBgBlack : styles$n.cardBgWhite, styles$n["selfClear-".concat(props.selfClear)], _defineProperty({}, styles$n.cardStart, !props.openStart), _defineProperty({}, styles$n.cardEnd, !props.openEnd));
+}
 
-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 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 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 Section = withInlineEditingDecorator('SectionDecorator', function Section(_ref) {
+  var _section$transition;
 
-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 section = _ref.section,
+      contentElements = _ref.contentElements,
+      state = _ref.state,
+      isScrollTarget = _ref.isScrollTarget,
+      onActivate = _ref.onActivate,
+      domIdPrefix = _ref.domIdPrefix;
 
-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 _ref2 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
+      useBackdrop = _ref2.useBackdrop,
+      useBackdropSectionClassNames = _ref2.useBackdropSectionClassNames,
+      useBackdropSectionCustomProperties = _ref2.useBackdropSectionCustomProperties;
 
-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 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$h.Section, transitionStyles.section, backdropSectionClassNames, _defineProperty({}, styles$h.first, section.sectionIndex === 0), _defineProperty({}, styles$h.narrow, section.width === 'narrow'), _defineProperty({}, styles$h.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(SectionAtmo, {
+    audioFilePermaId: section.atmoAudioFileId
+  }), /*#__PURE__*/React.createElement(SectionContents, {
+    section: section,
+    backdrop: backdrop,
+    contentElements: contentElements,
+    state: state,
+    transitionStyles: transitionStyles
+  })));
+});
+Section.defaultProps = {
+  domIdPrefix: 'section'
+};
 
-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"};
+function SectionContents(_ref3) {
+  var section = _ref3.section,
+      backdrop = _ref3.backdrop,
+      contentElements = _ref3.contentElements,
+      state = _ref3.state,
+      transitionStyles = _ref3.transitionStyles;
 
-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 _ref4 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
+      Backdrop = _ref4.Backdrop,
+      useMotifAreaState = _ref4.useMotifAreaState;
 
-var revealConceal = {"backdrop":"revealConceal-module_backdrop__dLUhU utils-module_clip__34eot","backdropInner":"revealConceal-module_backdropInner__2k1Z-"};
+  var _useSectionLifecycle = useSectionLifecycle(),
+      shouldPrepare = _useSectionLifecycle.shouldPrepare;
 
-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 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 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 _transitions = _slicedToArray(transitions, 2),
+      exitTransition = _transitions[1];
 
-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 _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 scrollInConceal = {"backdrop":"scrollInConceal-module_backdrop__2OJJC"};
+  var _getAppearanceCompone = getAppearanceComponents(section.appearance),
+      Shadow = _getAppearanceCompone.Shadow,
+      Box = _getAppearanceCompone.Box,
+      BoxWrapper = _getAppearanceCompone.BoxWrapper;
 
-var scrollInFadeOut = {"fade-duration":"0.5s","backdrop":"scrollInFadeOut-module_backdrop__1vXJd","foreground":"scrollInFadeOut-module_foreground__3Ikxb","foreground-above":"scrollInFadeOut-module_foreground-above__6ipm-"};
+  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);
+  })))));
+}
 
-var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-module_backdrop__zw95c","boxShadow":"scrollInFadeOutBg-module_boxShadow__3UxCQ","boxShadow-above":"scrollInFadeOutBg-module_boxShadow-above__3kfau"};
+function ConnectedSection(props) {
+  var contentElements = useSectionContentElements({
+    sectionId: props.section.id,
+    layout: props.section.layout
+  });
+  return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
+    contentElements: contentElements
+  }));
+}
 
-var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
+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';
+    }
+  }
 
-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);
+  return 'dynamic';
+}
+
+function endsWithFullWidthElement(elements) {
+  var lastElement = elements[elements.length - 1];
+  return lastElement && lastElement.position === 'inline' && lastElement.width === widths.full;
 }
-function getAvailableTransitionNames(section, previousSection) {
-  if (!section.fullHeight || !previousSection.fullHeight) {
-    return getTransitionNames().filter(function (name) {
-      return !name.startsWith('fade');
-    });
-  }
 
-  return getTransitionNames();
+function percentToFraction(value, _ref5) {
+  var defaultValue = _ref5.defaultValue;
+  return typeof value !== 'undefined' ? value / 100 : defaultValue;
 }
-function getTransitionStyles(section, previousSection, nextSection) {
-  var name = getTransitionStylesName(section, previousSection, nextSection);
 
-  if (!styles$m[name]) {
-    throw new Error("Unknown transition ".concat(name));
-  }
+var CurrentChapterContext = React.createContext();
+var CurrentSectionIndexStateContext = React.createContext();
+function CurrentSectionProvider(_ref) {
+  var children = _ref.children;
 
-  return styles$m[name];
-}
-function getEnterAndExitTransitions(section, previousSection, nextSection) {
-  return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentSectionIndex = _useState2[0],
+      setCurrentSectionIndex = _useState2[1];
+
+  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));
 }
-function getTransitionStylesName(section, previousSection, nextSection) {
-  var _getEnterAndExitTrans = getEnterAndExitTransitions(section, previousSection, nextSection),
-      _getEnterAndExitTrans2 = _slicedToArray(_getEnterAndExitTrans, 2),
-      enter = _getEnterAndExitTrans2[0],
-      exit = _getEnterAndExitTrans2[1];
+/**
+ * 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'
+ *  }
+ */
 
-  return "".concat(enter).concat(capitalize(exit));
+function useCurrentChapter() {
+  return useContext(CurrentChapterContext);
+}
+function useCurrentSectionIndexState() {
+  return useContext(CurrentSectionIndexStateContext);
 }
 
-function getTransitionName(previousSection, section) {
-  if (!section || !previousSection) {
-    return 'scroll';
-  }
+function usePostMessageListener(receiveData) {
+  useEffect(function () {
+    if (window.parent !== window) {
+      window.addEventListener('message', receive);
+    }
 
-  if ((!section.fullHeight || !previousSection.fullHeight) && section.transition.startsWith('fade')) {
-    return 'scroll';
-  }
+    return function () {
+      return window.removeEventListener('message', receive);
+    };
 
-  return section.transition;
+    function receive(message) {
+      if (window.location.href.indexOf(message.origin) === 0) {
+        receiveData(message.data);
+      }
+    }
+  }, [receiveData]);
 }
 
-function capitalize(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
+var contentStyles = {"Content":"Content-module_Content__m7urk"};
 
-function NoOpShadow(props) {
-  return /*#__PURE__*/React.createElement("div", null, props.children);
+var styles$o = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
+
+var FocusVisibleContext = createContext();
+function useFocusOutlineVisible() {
+  return useContext(FocusVisibleContext);
 }
+function FocusOutlineProvider(_ref) {
+  var children = _ref.children;
 
-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 _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
 
-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.
+  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);
+    };
 
-  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
+    function enable() {
+      document.body.classList.remove(styles$o.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$o.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 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"};
-
-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));
-}
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      request = _useState2[0],
+      setRequest = _useState2[1];
 
-function className$1(props) {
-  if (positionOutsideBox.includes(props.position)) {
-    return undefined;
-  }
+  useIsomorphicLayoutEffect(function () {
+    var unmounted = false;
 
-  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));
-}
+    _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+      var _yield$consent$reques, vendors, _acceptAll, _denyAll, _save;
 
-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'];
-}
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return consent.requested();
 
-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;
+            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;
 
-  var _ref2 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
-      useBackdrop = _ref2.useBackdrop,
-      useBackdropSectionClassNames = _ref2.useBackdropSectionClassNames,
-      useBackdropSectionCustomProperties = _ref2.useBackdropSectionCustomProperties;
+              if (!unmounted) {
+                setRequest({
+                  vendors: vendors,
+                  acceptAll: function acceptAll() {
+                    _acceptAll();
 
-  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'
-};
+                    setRequest({});
+                  },
+                  denyAll: function denyAll() {
+                    _denyAll();
 
-function SectionContents(_ref3) {
-  var section = _ref3.section,
-      backdrop = _ref3.backdrop,
-      contentElements = _ref3.contentElements,
-      state = _ref3.state,
-      transitionStyles = _ref3.transitionStyles;
+                    setRequest({});
+                  },
+                  save: function save(decisions) {
+                    _save(decisions);
 
-  var _ref4 = useAdditionalSeedData('frontendVersion') === 2 ? v2 : v1,
-      Backdrop = _ref4.Backdrop,
-      useMotifAreaState = _ref4.useMotifAreaState;
+                    setRequest({});
+                  }
+                });
+              }
 
-  var _useSectionLifecycle = useSectionLifecycle(),
-      shouldPrepare = _useSectionLifecycle.shouldPrepare;
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
 
-  var sectionProperties = useMemo(function () {
-    return {
-      layout: section.layout,
-      invert: section.invert,
-      sectionIndex: section.sectionIndex
+    return function () {
+      return unmounted = true;
     };
-  }, [section.layout, section.invert, section.sectionIndex]);
-  var transitions = getEnterAndExitTransitions(section, section.previousSection, section.nextSection);
+  }, [consent]);
+  return request;
+}
+function useConsentGiven(vendorName) {
+  var consent = useContext(ConsentContext);
 
-  var _transitions = _slicedToArray(transitions, 2),
-      exitTransition = _transitions[1];
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable;
 
-  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 isStaticPreview = useIsStaticPreview();
 
-  var _getAppearanceCompone = getAppearanceComponents(section.appearance),
-      Shadow = _getAppearanceCompone.Shadow,
-      Box = _getAppearanceCompone.Box,
-      BoxWrapper = _getAppearanceCompone.BoxWrapper;
+  var _useState3 = useState(isEditable || isStaticPreview),
+      _useState4 = _slicedToArray(_useState3, 2),
+      consentGiven = _useState4[0],
+      setConsentGiven = _useState4[1];
 
-  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);
-  })))));
-}
+  useIsomorphicLayoutEffect(function () {
+    var unmounted = false;
 
-function ConnectedSection(props) {
-  var contentElements = useSectionContentElements({
-    sectionId: props.section.id
-  });
-  return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
-    contentElements: contentElements
-  }));
-}
+    _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;
+              }
 
-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 _context2.abrupt("return");
 
-  return 'dynamic';
-}
+            case 2:
+              _context2.next = 4;
+              return consent.requireAccepted(vendorName);
 
-function endsWithFullWidthElement(elements) {
-  var lastElement = elements[elements.length - 1];
-  return lastElement && lastElement.position === 'full';
-}
+            case 4:
+              result = _context2.sent;
 
-function percentToFraction(value, _ref5) {
-  var defaultValue = _ref5.defaultValue;
-  return typeof value !== 'undefined' ? value / 100 : defaultValue;
+              if (!unmounted && result === 'fulfilled') {
+                setConsentGiven(true);
+              }
+
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+
+    return function () {
+      return unmounted = true;
+    };
+  }, [consent, vendorName]);
+  var giveConsent = useCallback(function () {
+    return consent.accept(vendorName);
+  }, [consent, vendorName]);
+  return [consentGiven, giveConsent];
 }
 
-var CurrentChapterContext = React.createContext();
-var CurrentSectionIndexStateContext = React.createContext();
-function CurrentSectionProvider(_ref) {
-  var children = _ref.children;
+var styles$p = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
 
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentSectionIndex = _useState2[0],
-      setCurrentSectionIndex = _useState2[1];
+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;
+  };
 
-  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$p.optIn
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    className: styles$p.optInIcon
+  }, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles$p.optInMessage
+  }, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    className: styles$p.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$q = {"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$q.optOut, _defineProperty({}, styles$q.full, width === widths.full)),
+    style: hide ? {
+      opacity: 0,
+      visibility: 'hidden'
+    } : undefined
+  }, /*#__PURE__*/React.createElement("button", {
+    className: styles$q.icon
+  }, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
+    className: styles$q.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,7 +4965,23 @@ 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","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.
@@ -5046,7 +4989,10 @@ var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"
  * @param {Object} props
  * @param {string} props.scaleCategory -
  *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
- *   `'heading-xs'`, `'body'`, `'caption'`, `'question'`.
+ *   `'heading-xs'`, `'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 +5006,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$r = {"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)
+    className: classNames(styles$r.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 +5042,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 +5053,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 +5099,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$r.light : styles$r.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 +5137,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 +5159,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 +5171,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 +5207,103 @@ function renderLeaf(_ref5) {
   return /*#__PURE__*/React.createElement("span", attributes, children);
 }
 
+var ContentElementConfigurationUpdateContext = React.createContext(function () {});
+function useContentElementConfigurationUpdate() {
+  return useContext(ContentElementConfigurationUpdateContext);
+}
+
+var styles$s = {"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$s.crop,
+        inert: ""
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classNames(_defineProperty({}, styles$s.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$s.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 { usePlayerState as $, AtmoProvider as A, useAudioFocus as B, ConnectedSection as C, useContentElementEditorCommandSubscription as D, EventContextDataProvider as E, useContentElementLifecycle as F, useCurrentChapter as G, useIsStaticPreview as H, useOnUnmuteMedia as I, usePortraitOrientation as J, PhonePlatformProvider as K, OptOutInfo as L, useConsentRequested as M, getTransitionNames as N, OptIn as O, PlayerEventContextDataProvider as P, getAvailableTransitionNames as Q, RootProviders as R, ScrollToSectionContext as S, paletteColor as T, widthName as U, Image as V, Text as W, MediaPlayer as X, getInitialPlayerState as Y, playerStateReducer as Z, _asyncToGenerator as _, useCurrentSectionIndexState as a, VideoPlayer as a0, AudioPlayer as a1, processSources as a2, Atmo as a3, AtmoContext as a4, useAtmo as a5, useOnScreen as a6, StandaloneSectionThumbnail as a7, SectionThumbnail as a8, ContentElementEditorCommandEmitterContext as a9, MotifAreaVisibilityProvider as aa, ForcePaddingContext as ab, ContentElementConfigurationUpdateContext as ac, LayoutWithoutInlineEditing as ad, renderElement as ae, renderLeaf as af, usePostMessageListener as b, contentStyles as c, api as d, regenerator as e, withInlineEditingAlternative as f, getEventObject as g, useDarkBackground as h, EditableText 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, styles$l as x, registerVendors as y, loadInlineEditingComponents as z };