pageflow 15.7.1 → 15.8.0

data/entry_types/scrolled/package/frontend/index.js

@@ -1,4 +1,6 @@
-import regeneratorRuntime from 'regenerator-runtime';
+import 'regenerator-runtime';
+import { E as EventContextDataProvider, C as ConnectedSection, u as usePrevious, g as getEventObject, w as withInlineEditingDecorator, a as useCurrentSectionIndexState, b as usePostMessageListener, c as contentStyles, A as AtmoProvider, S as ScrollToSectionContext, d as api, B as Bar, _ as _asyncToGenerator, e as _regeneratorRuntime, f as useDarkBackground, T as Text, h as useTextTracks, i as useMediaMuted, j as useFocusOutlineVisible, k as useVideoQualitySetting, l as useIsomorphicLayoutEffect, m as withInlineEditingAlternative, n as frontendStyles, o as useFullscreenDimensions, p as information, q as camelize, s as styles$a, R as RootProviders, r as registerVendors, t as loadInlineEditingComponents } from './EditableInlineText.module-c6672f27.js';
+export { a0 as Atmo, a1 as AtmoContext, A as AtmoProvider, Z as AudioPlayer, J as EditableText, Q as Image, U as MediaPlayer, K as PhonePlatformProvider, P as PlayerEventContextDataProvider, R as RootProviders, a5 as SectionThumbnail, a4 as StandaloneSectionThumbnail, T as Text, O as ThirdPartyOptIn, L as ThirdPartyOptOutInfo, Y as VideoPlayer, d as frontend, N as getAvailableTransitionNames, V as getInitialPlayerState, M as getTransitionNames, W as playerStateReducer, $ as processSources, r as registerConsentVendors, a2 as useAtmo, v as useAudioFocus, x as useContentElementConfigurationUpdate, y as useContentElementEditorCommandSubscription, z as useContentElementEditorState, D as useContentElementLifecycle, F as useCurrentChapter, f as useDarkBackground, G as useIsStaticPreview, i as useMediaMuted, a3 as useOnScreen, H as useOnUnmuteMedia, X as usePlayerState, I as usePortraitOrientation } from './EditableInlineText.module-c6672f27.js';
 import 'core-js/modules/es.symbol';
 import 'core-js/modules/es.symbol.description';
 import 'core-js/modules/es.symbol.async-iterator';
@@ -71,3397 +73,47 @@ import 'core-js/modules/esnext.symbol.observable';
 import 'core-js/modules/esnext.symbol.pattern-match';
 import 'core-js/modules/web.dom-collections.iterator';
 import 'regenerator-runtime/runtime.js';
-import { browser, events, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings, consent, features } from 'pageflow/frontend';
-import React, { useReducer, useState, useLayoutEffect, useEffect, createContext, useContext, useCallback, useRef, useMemo, Suspense } from 'react';
+import { browser, events, consent, features } from 'pageflow/frontend';
+import React, { useRef, useState, useEffect, useCallback, Suspense, useContext } from 'react';
 import ReactDOM from 'react-dom';
-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 useSectionContentElements, k as useSectionsWithChapter, l as useEntryStructure, m as useWidget, P as PhonePlatformContext, E as EntryStateProvider, L as LocaleProvider, n as getFileUrlTemplateHost, o as _toConsumableArray, p as useAvailableQualities, q as useEntryStateDispatch, r as useSection, s as setupI18n } from './PhonePlatformContext-9fb97827.js';
-export { L as LocaleProvider, s as setupI18n, t as useAdditionalSeedData, v as useChapters, w as useCredits, q as useEntryStateDispatch, i as useFile, x as useFileRights, u as useI18n, e as useLegalInfo, d as useLocale, y as useShareProviders, z as useShareUrl, f as useTheme } from './PhonePlatformContext-9fb97827.js';
-import I18n from 'i18n-js';
+import { c as _slicedToArray, m as useSectionsWithChapter, r as useEntryStructure, s as useWidget, t as getFileUrlTemplateHost, b as _defineProperty, a as _objectSpread2, _ as _objectWithoutProperties, u as useI18n, f as useTheme, j as _toConsumableArray, v as useAvailableQualities, w as setupI18n } from './PhonePlatformContext-22e65f92.js';
+export { L as LocaleProvider, w as setupI18n, l as useAdditionalSeedData, x as useChapters, y as useCredits, o as useEntryStateDispatch, i as useFile, z as useFileRights, u as useI18n, e as useLegalInfo, d as useLocale, A as useShareProviders, C as useShareUrl, f as useTheme } from './PhonePlatformContext-22e65f92.js';
+import 'i18n-js';
 import 'use-context-selector';
 import 'reselect';
 import 'slugify';
 import classNames from 'classnames';
-import { u as useContentElementEditorState, a as useIsStaticPreview, c as createScrollPositionLifecycleProvider, b as createScrollPositionLifecycleHook, M as MotifArea, d as useMediaQuery, w as withInlineEditingDecorator, F as Foreground, L as Layout, e as usePostMessageListener, f as api, g as withInlineEditingAlternative, T as Text, S as StaticPreview, h as frontendStyles, l as loadInlineEditingComponents } from './EditableInlineText.module-b9923660.js';
-export { E as EditableText, T as Text, f as frontend, i as useContentElementConfigurationUpdate, j as useContentElementEditorCommandSubscription, u as useContentElementEditorState, k as useContentElementLifecycle, a as useIsStaticPreview, m as useOnScreen } from './EditableInlineText.module-b9923660.js';
-import { _ as _createClass, a as _classCallCheck } from './createSuper-d0f30da3.js';
-import BackboneEvents from 'backbone-events-standalone';
-import { u as useBrowserFeature, B as BrowserFeaturesProvider } from './usePhonePlatform-2857c22b.js';
-export { a as usePhonePlatform } from './usePhonePlatform-2857c22b.js';
+import './createSuper-d0f30da3.js';
+import 'backbone-events-standalone';
 import Measure from 'react-measure';
 import { DraggableCore } from 'react-draggable';
+import { A as ArrowRightIcon } from './arrowRight-7e3d9dd5.js';
+export { u as usePhonePlatform } from './arrowRight-7e3d9dd5.js';
 import invert from 'invert-color';
 import stripTags from 'striptags';
 
-var regenerator = regeneratorRuntime;
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
-
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
-}
-
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-
-      _next(undefined);
-    });
-  };
-}
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-// Make sure Webpack loads chunks via asset host.
-// Free variable assignment will be rewritten during Webpack compilation.
-// See https://v4.webpack.js.org/guides/public-path/#on-the-fly
-// PageflowScrolled::WebpackPublicPathHelper generates js snippet
-// that defines the global. For Storybook, we set it to an empty default.
-// eslint-disable-next-line no-undef
-__webpack_public_path__ = commonjsGlobal.__webpack_public_path__ || '';
-
-// iframes. Use polyfill instead.
-
-if (browser.agent.matchesSafari() && window.parent !== window) {
-  delete window.IntersectionObserver;
-}
-
-require('intersection-observer'); // Make sure we're in a Browser-like environment before importing polyfills
-// This prevents `fetch()` from being imported in a Node test environment
-
-
-if (typeof window !== 'undefined') {
-  require('whatwg-fetch');
-}
-
-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;
-
-var ConsentContext = createContext();
-function ConsentProvider(_ref) {
-  var consent = _ref.consent,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement(ConsentContext.Provider, {
-    value: consent
-  }, children);
-}
-function useConsentRequested() {
-  var consent = useContext(ConsentContext);
-
-  var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      request = _useState2[0],
-      setRequest = _useState2[1];
-
-  useIsomorphicLayoutEffect(function () {
-    var unmounted = false;
-
-    _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
-      var _yield$consent$reques, vendors, _acceptAll, _denyAll, _save;
-
-      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({});
-                  }
-                });
-              }
-
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }))();
-
-    return function () {
-      return unmounted = true;
-    };
-  }, [consent]);
-  return request;
-}
-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];
-
-  useIsomorphicLayoutEffect(function () {
-    var unmounted = false;
-
-    _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;
-              }
-
-              return _context2.abrupt("return");
-
-            case 2:
-              _context2.next = 4;
-              return consent.requireAccepted(vendorName);
-
-            case 4:
-              result = _context2.sent;
-
-              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];
-}
-
-function _extends$3() {
-  _extends$3 = 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$3.apply(this, arguments);
-}
-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;
-
-  var _useState = useState(defaultExpanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  var locale = useLocale();
-  var privacyLinkUrl = useLegalInfo().privacy.url;
-
-  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);
-      }
-    }, /*#__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;
-}
-
-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
-    }
-  });
-}
-
-var styles$2 = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
-
-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.
- *
- * @name ThirdPartyOptIn
- */
-
-function OptIn(_ref) {
-  var children = _ref.children,
-      providerName = _ref.providerName;
-
-  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 /*#__PURE__*/React.createElement("div", {
-    className: styles$2.optIn
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.optInIcon
-  }, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.optInMessage
-  }, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-    className: styles$2.optInButton,
-    onClick: accept
-  }, t('pageflow_scrolled.public.third_party_consent.confirm'))));
-}
-
-var styles$3 = {"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$3.optOut, styles$3[contentElementPosition]),
-    style: hide ? {
-      opacity: 0,
-      visibility: 'hidden'
-    } : undefined
-  }, /*#__PURE__*/React.createElement("button", {
-    className: styles$3.icon
-  }, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.tooltip
-  }, /*#__PURE__*/React.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: html
-    }
-  })));
-}
-
-function registerVendors(_ref) {
-  var contentElementTypes = _ref.contentElementTypes,
-      seed = _ref.seed,
-      consent = _ref.consent;
-  var options = seed.config.theme.options.thirdPartyConsent;
-  var locale = seed.collections.entries[0].locale;
-  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: (options === null || options === void 0 ? void 0 : options.cookieName) ? vendor.paradigm || 'opt-in' : 'skip',
-      cookieName: options === null || options === void 0 ? void 0 : options.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 () {});
-
-function watchPlayer (player, actions) {
-  player.on('loadedmetadata', function () {
-    return actions.metaDataLoaded(player.currentTime(), player.duration());
-  });
-  player.on('loadeddata', function () {
-    return actions.dataLoaded();
-  });
-  player.on('progress', function () {
-    return actions.progress(player.bufferedEnd());
-  });
-  player.on('play', actions.playing);
-  player.on('playfailed', actions.playFailed);
-  player.on('pause', actions.paused);
-  player.on('waiting', actions.waiting);
-  player.on('seeking', actions.seeking);
-  player.on('seeked', actions.seeked);
-  player.on('bufferunderrun', actions.bufferUnderrun);
-  player.on('bufferunderruncontinue', actions.bufferUnderrunContinue);
-  player.on('timeupdate', function () {
-    return actions.timeUpdate(player.currentTime(), player.duration());
-  });
-  player.on('ended', actions.ended);
-  player.one('loadedmetadata', function () {
-    return actions.saveMediaElementId(player.getMediaElement().id);
-  });
-}
-function unwatchPlayer(player, actions) {
-  player.off('loadedmetadata');
-  player.off('loadeddata');
-  player.off('progress');
-  player.off('play', actions.playing);
-  player.off('playfailed', actions.playFailed);
-  player.off('pause', actions.paused);
-  player.off('waiting', actions.waiting);
-  player.off('seeking', actions.seeking);
-  player.off('seeked', actions.seeked);
-  player.off('bufferunderrun', actions.bufferUnderrun);
-  player.off('bufferunderruncontinue', actions.bufferUnderrunContinue);
-  player.off('timeupdate');
-  player.off('canplay');
-  player.off('ended', actions.ended);
-  actions.discardMediaElementId();
-}
-
-function applyPlayerState(player, playerState, playerActions) {
-  player.one('loadedmetadata', function () {
-    return player.currentTime(playerState.currentTime);
-  });
-  player.changeVolumeFactor(playerState.volumeFactor, 0);
-
-  if (playerState.shouldPrebuffer) {
-    player.prebuffer().then(playerActions.prebuffered);
-  }
-
-  if (playerState.shouldPlay) {
-    player.play();
-  }
-
-  player.on('canplay', function () {
-    if (playerState.shouldPlay && player.paused()) {
-      player.play();
-    }
-  });
-}
-
-function updatePlayerState(player, prevPlayerState, playerState, playerActions) {
-  if (!prevPlayerState.shouldPrebuffer && playerState.shouldPrebuffer) {
-    player.prebuffer().then(function () {
-      return setTimeout(playerActions.prebuffered, 0);
-    });
-  }
-
-  if (!prevPlayerState.shouldPlay && playerState.shouldPlay) {
-    if (playerState.fadeDuration) {
-      player.playAndFadeIn(playerState.fadeDuration);
-    } else {
-      player.playOrPlayOnLoad();
-    }
-  } else if (prevPlayerState.shouldPlay && !playerState.shouldPlay && playerState.isPlaying) {
-    if (playerState.fadeDuration && !player.muted()) {
-      player.fadeOutAndPause(playerState.fadeDuration);
-    } else {
-      player.pause();
-    }
-  }
-
-  if (playerState.shouldSeekTo !== undefined && prevPlayerState.shouldSeekTo !== playerState.shouldSeekTo) {
-    player.currentTime(playerState.shouldSeekTo);
-  }
-
-  if (prevPlayerState.volumeFactor !== playerState.volumeFactor) {
-    player.changeVolumeFactor(playerState.volumeFactor, playerState.volumeFactorFadeDuration);
-  }
-}
-
-function updateObjectPosition(player, x, y) {
-  player.getMediaElement().style.objectPosition = typeof x !== 'undefined' && typeof y !== 'undefined' ? "".concat(x, "% ").concat(y, "%") : '';
-}
-
-function getEventObject(section) {
-  var page = {
-    configuration: {
-      title: section ? section.chapter.title + ', Section ' + section.sectionIndex : null
-    },
-    index: section ? section.sectionIndex : -1
-  };
-  return page;
-}
-var EventContext = createContext(getEventObject());
-function EventContextDataProvider(_ref) {
-  var section = _ref.section,
-      children = _ref.children;
-  var contextValue = useMemo(function () {
-    return {
-      page: getEventObject(section)
-    };
-  }, [section]);
-  return /*#__PURE__*/React.createElement(EventContext.Provider, {
-    value: contextValue
-  }, children);
-}
-function useEventContextData() {
-  return useContext(EventContext);
-}
-
-function updateTextTracksMode(player, activeTextTrackFileId) {
-  [].slice.call(player.textTracks()).forEach(function (textTrack) {
-    if (textTrack.id === "text_track_file_".concat(activeTextTrackFileId)) {
-      textTrack.mode = 'showing';
-    } else {
-      textTrack.mode = 'disabled';
-    }
-  });
-}
-function getTextTrackSources(textTrackFiles, textTracksDisabled) {
-  if (textTracksDisabled) {
-    return [];
-  }
-
-  return textTrackFiles.filter(function (textTrackFile) {
-    return textTrackFile.isReady;
-  }).map(function (textTrackFile) {
-    return {
-      id: "text_track_file_".concat(textTrackFile.id),
-      kind: textTrackFile.configuration.kind,
-      label: textTrackFile.displayLabel,
-      srclang: textTrackFile.configuration.srclang,
-      src: textTrackFile.urls.vtt
-    };
-  });
-}
-
-var textTrackStyles = {"inset":"textTracks-module_inset__K7DIL"};
-
-var styles$4 = {"wrapper":"MediaPlayer-module_wrapper__1cSGR","cover":"MediaPlayer-module_cover__2wGez"};
-
-var PLAY = 'MEDIA_PLAY';
-var PLAYING = 'MEDIA_PLAYING';
-var PLAY_FAILED = 'MEDIA_PLAY_FAILED';
-var PAUSE = 'MEDIA_PAUSE';
-var PAUSED = 'MEDIA_PAUSED';
-var PLAY_AND_FADE_IN = 'MEDIA_PLAY_AND_FADE_IN';
-var FADE_OUT_AND_PAUSE = 'MEDIA_FADE_OUT_AND_PAUSE';
-var CHANGE_VOLUME_FACTOR = 'CHANGE_VOLUME_FACTOR';
-var META_DATA_LOADED = 'MEDIA_META_DATA_LOADED';
-var DATA_LOADED = 'MEDIA_DATA_LOADED';
-var PROGRESS = 'MEDIA_PROGRESS';
-var TIME_UPDATE = 'MEDIA_TIME_UPDATE';
-var ENDED = 'MEDIA_ENDED';
-var SCRUB_TO = 'MEDIA_SCRUB_TO';
-var SEEK_TO = 'MEDIA_SEEK_TO';
-var SEEKING = 'MEDIA_SEEKING';
-var SEEKED = 'MEDIA_SEEKED';
-var WAITING = 'MEDIA_WAITING';
-var PREBUFFER = 'MEDIA_PREBUFFER';
-var PREBUFFERED = 'MEDIA_PREBUFFERED';
-var BUFFER_UNDERRUN = 'MEDIA_BUFFER_UNDERRUN';
-var BUFFER_UNDERRUN_CONTINUE = 'MEDIA_BUFFER_UNDERRUN_CONTINUE';
-var MOUSE_ENTERED = 'MEDIA_MOUSE_ENTERED';
-var MOUSE_LEFT = 'MEDIA_MOUSE_LEFT';
-var MOUSE_ENTERED_CONTROLS = 'MEDIA_MOUSE_ENTERED_CONTROLS';
-var MOUSE_LEFT_CONTROLS = 'MEDIA_MOUSE_LEFT_CONTROLS';
-var FOCUS_ENTERED_CONTROLS = 'MEDIA_FOCUS_ENTERED_CONTROLS';
-var FOCUS_LEFT_CONTROLS = 'MEDIA_FOCUS_LEFT_CONTROLS';
-var USER_INTERACTION = 'MEDIA_USER_INTERACTION';
-var USER_IDLE = 'MEDIA_USER_IDLE';
-var SAVE_MEDIA_ELEMENT_ID = 'MEDIA_SAVE_MEDIA_ELEMENT_ID';
-var DISCARD_MEDIA_ELEMENT_ID = 'MEDIA_DISCARD_MEDIA_ELEMENT_ID';
-function createActions(dispatch) {
-  return {
-    playBlessed: function playBlessed() {
-      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          via = _ref.via;
-
-      media.mute(false);
-      dispatch({
-        type: PLAY,
-        payload: {
-          via: via
-        }
-      });
-    },
-    play: function play() {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          via = _ref2.via;
-
-      dispatch({
-        type: PLAY,
-        payload: {
-          via: via
-        }
-      });
-    },
-    playing: function playing() {
-      dispatch({
-        type: PLAYING
-      });
-    },
-    playFailed: function playFailed() {
-      dispatch({
-        type: PLAY_FAILED
-      });
-    },
-    pause: function pause() {
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          via = _ref3.via;
-
-      dispatch({
-        type: PAUSE,
-        payload: {
-          via: via
-        }
-      });
-    },
-    paused: function paused() {
-      dispatch({
-        type: PAUSED
-      });
-    },
-    playAndFadeIn: function playAndFadeIn(fadeDuration) {
-      var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          via = _ref4.via;
-
-      dispatch({
-        type: PLAY_AND_FADE_IN,
-        payload: {
-          fadeDuration: fadeDuration,
-          via: via
-        }
-      });
-    },
-    fadeOutAndPause: function fadeOutAndPause(fadeDuration) {
-      var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          via = _ref5.via;
-
-      dispatch({
-        type: FADE_OUT_AND_PAUSE,
-        payload: {
-          fadeDuration: fadeDuration,
-          via: via
-        }
-      });
-    },
-    changeVolumeFactor: function changeVolumeFactor(volumeFactor, fadeDuration) {
-      dispatch({
-        type: CHANGE_VOLUME_FACTOR,
-        payload: {
-          fadeDuration: fadeDuration,
-          volumeFactor: volumeFactor
-        }
-      });
-    },
-    metaDataLoaded: function metaDataLoaded(currentTime, duration) {
-      dispatch({
-        type: META_DATA_LOADED,
-        payload: {
-          currentTime: currentTime,
-          duration: duration
-        }
-      });
-    },
-    dataLoaded: function dataLoaded() {
-      dispatch({
-        type: DATA_LOADED
-      });
-    },
-    progress: function progress(bufferedEnd) {
-      dispatch({
-        type: PROGRESS,
-        payload: {
-          bufferedEnd: bufferedEnd
-        }
-      });
-    },
-    timeUpdate: function timeUpdate(currentTime, duration) {
-      dispatch({
-        type: TIME_UPDATE,
-        payload: {
-          currentTime: currentTime,
-          duration: duration
-        }
-      });
-    },
-    ended: function ended() {
-      dispatch({
-        type: ENDED
-      });
-    },
-    scrubTo: function scrubTo(time) {
-      dispatch({
-        type: SCRUB_TO,
-        payload: {
-          time: time
-        }
-      });
-    },
-    seekTo: function seekTo(time) {
-      dispatch({
-        type: SEEK_TO,
-        payload: {
-          time: time
-        }
-      });
-    },
-    seeking: function seeking() {
-      dispatch({
-        type: SEEKING
-      });
-    },
-    seeked: function seeked() {
-      dispatch({
-        type: SEEKED
-      });
-    },
-    waiting: function waiting() {
-      dispatch({
-        type: WAITING
-      });
-    },
-    prebuffer: function prebuffer() {
-      dispatch({
-        type: PREBUFFER
-      });
-    },
-    prebuffered: function prebuffered() {
-      dispatch({
-        type: PREBUFFERED
-      });
-    },
-    bufferUnderrun: function bufferUnderrun() {
-      dispatch({
-        type: BUFFER_UNDERRUN
-      });
-    },
-    bufferUnderrunContinue: function bufferUnderrunContinue() {
-      dispatch({
-        type: BUFFER_UNDERRUN_CONTINUE
-      });
-    },
-    mouseEntered: function mouseEntered() {
-      dispatch({
-        type: MOUSE_ENTERED
-      });
-    },
-    mouseLeft: function mouseLeft() {
-      dispatch({
-        type: MOUSE_LEFT
-      });
-    },
-    mouseEnteredControls: function mouseEnteredControls() {
-      dispatch({
-        type: MOUSE_ENTERED_CONTROLS
-      });
-    },
-    mouseLeftControls: function mouseLeftControls() {
-      dispatch({
-        type: MOUSE_LEFT_CONTROLS
-      });
-    },
-    userInteraction: function userInteraction() {
-      dispatch({
-        type: USER_INTERACTION
-      });
-    },
-    userIdle: function userIdle() {
-      dispatch({
-        type: USER_IDLE
-      });
-    },
-    focusEnteredControls: function focusEnteredControls() {
-      dispatch({
-        type: FOCUS_ENTERED_CONTROLS
-      });
-    },
-    focusLeftControls: function focusLeftControls() {
-      dispatch({
-        type: FOCUS_LEFT_CONTROLS
-      });
-    },
-    saveMediaElementId: function saveMediaElementId(id) {
-      dispatch({
-        type: SAVE_MEDIA_ELEMENT_ID,
-        payload: {
-          id: id
-        }
-      });
-    },
-    discardMediaElementId: function discardMediaElementId() {
-      dispatch({
-        type: DISCARD_MEDIA_ELEMENT_ID
-      });
-    }
-  };
-}
-
-function getInitialPlayerState() {
-  return {
-    isPlaying: false,
-    shouldPlay: false,
-    unplayed: true,
-    dataLoaded: false,
-    isLoading: true,
-    playFailed: false,
-    duration: 0,
-    bufferedEnd: 0,
-    shouldPrebuffer: true,
-    fadeDuration: undefined,
-    bufferUnderrun: undefined,
-    scrubbingAt: undefined,
-    currentTime: 0,
-    mediaElementId: undefined,
-    shouldSeekTo: undefined,
-    userHovering: false,
-    userHoveringControls: false,
-    focusInsideControls: false,
-    userIdle: false,
-    volumeFactor: 1
-  };
-}
-function playerStateReducer(state, action) {
-  switch (action.type) {
-    case PLAY:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        isLoading: true,
-        shouldPlay: true,
-        playFailed: false,
-        unplayed: false,
-        lastControlledVia: action.payload.via
-      });
-
-    case PLAYING:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPlay: true,
-        isPlaying: true,
-        userIdle: false
-      });
-
-    case PLAY_AND_FADE_IN:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPlay: true,
-        fadeDuration: action.payload.fadeDuration,
-        isLoading: true,
-        lastControlledVia: action.payload.via
-      });
-
-    case FADE_OUT_AND_PAUSE:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPlay: false,
-        fadeDuration: action.payload.fadeDuration,
-        isLoading: false,
-        lastControlledVia: action.payload.via
-      });
-
-    case PLAY_FAILED:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPlay: false,
-        playFailed: true,
-        fadeDuration: null,
-        unplayed: true,
-        isLoading: false
-      });
-
-    case PAUSE:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPlay: false,
-        isLoading: false,
-        fadeDuration: null,
-        lastControlledVia: action.payload.via
-      });
-
-    case PAUSED:
-      if (state.bufferUnderrun) {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          isPlaying: false
-        });
-      } else {
-        return _objectSpread2(_objectSpread2({}, state), {}, {
-          shouldPlay: false,
-          fadeDuration: null,
-          isPlaying: false,
-          isLoading: false
-        });
-      }
-
-    case SCRUB_TO:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        scrubbingAt: action.payload.time
-      });
-
-    case SEEK_TO:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldSeekTo: action.payload.time
-      });
-
-    case SEEKING:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        isLoading: true
-      });
-
-    case SEEKED:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldSeekTo: undefined,
-        scrubbingAt: undefined,
-        isLoading: false
-      });
-
-    case META_DATA_LOADED:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        currentTime: action.payload.currentTime,
-        duration: action.payload.duration
-      });
-
-    case DATA_LOADED:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        dataLoaded: true
-      });
-
-    case PROGRESS:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        bufferedEnd: action.payload.bufferedEnd
-      });
-
-    case TIME_UPDATE:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        currentTime: action.payload.currentTime,
-        duration: action.payload.duration,
-        isLoading: false
-      });
-
-    case ENDED:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPlay: false,
-        isPlaying: false,
-        unplayed: true,
-        lastControlledVia: null
-      });
-
-    case WAITING:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        isLoading: true
-      });
-
-    case PREBUFFER:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPrebuffer: true
-      });
-
-    case PREBUFFERED:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        shouldPrebuffer: false
-      });
-
-    case BUFFER_UNDERRUN:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        bufferUnderrun: true
-      });
-
-    case BUFFER_UNDERRUN_CONTINUE:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        bufferUnderrun: false
-      });
-
-    case MOUSE_ENTERED:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        userHovering: true
-      });
-
-    case MOUSE_LEFT:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        userHovering: false
-      });
-
-    case MOUSE_ENTERED_CONTROLS:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        userHoveringControls: true
-      });
-
-    case MOUSE_LEFT_CONTROLS:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        userHoveringControls: false
-      });
-
-    case FOCUS_ENTERED_CONTROLS:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        focusInsideControls: true,
-        userIdle: false
-      });
-
-    case FOCUS_LEFT_CONTROLS:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        focusInsideControls: false,
-        userIdle: false
-      });
-
-    case USER_INTERACTION:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        userIdle: false
-      });
-
-    case USER_IDLE:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        userIdle: true
-      });
-
-    case SAVE_MEDIA_ELEMENT_ID:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        mediaElementId: action.payload.id
-      });
-
-    case DISCARD_MEDIA_ELEMENT_ID:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        dataLoaded: false,
-        isPlaying: false,
-        mediaElementId: null
-      });
-
-    case CHANGE_VOLUME_FACTOR:
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        volumeFactor: action.payload.volumeFactor,
-        volumeFactorFadeDuration: action.payload.fadeDuration
-      });
-
-    default:
-      return state;
-  }
-}
-function usePlayerState() {
-  var _useReducer = useReducer(playerStateReducer, getInitialPlayerState()),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
-
-  var actions = useMemo(function () {
-    return createActions(dispatch);
-  }, [dispatch]);
-  return [state, actions];
-}
-
-function MediaPlayer(props) {
-  var isStaticPreview = useIsStaticPreview();
-  var load = props.load === 'auto' && isStaticPreview ? 'poster' : props.load;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$4.wrapper, styles$4[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,
-    hide: props.type === 'video' && load !== 'poster' && props.playerState.dataLoaded && !props.playerState.unplayed
-  }));
-}
-MediaPlayer.defaultProps = {
-  load: 'auto'
-};
-
-function Poster(_ref) {
-  var imageUrl = _ref.imageUrl,
-      objectPosition = _ref.objectPosition,
-      hide = _ref.hide;
-
-  if (!imageUrl) {
-    return null;
-  }
-
-  return /*#__PURE__*/React.createElement("img", {
-    src: imageUrl,
-    alt: "",
-    style: {
-      display: hide ? 'none' : undefined,
-      objectPosition: objectPosition && "".concat(objectPosition.x, "% ").concat(objectPosition.y, "%")
-    }
-  });
-}
-
-function PreparedMediaPlayer(props) {
-  var playerRef = useRef();
-  var previousPlayerState = useRef(props.playerState);
-  var scrollToSection = useContext(ScrollToSectionContext);
-  var eventContextData = useEventContextData();
-
-  var onSetup = function onSetup(newPlayer) {
-    playerRef.current = newPlayer;
-    newPlayer.on('ended', function () {
-      return props.nextSectionOnEnd && scrollToSection('next');
-    });
-    watchPlayer(newPlayer, props.playerActions);
-    applyPlayerState(newPlayer, props.playerState, props.playerActions);
-    updateObjectPosition(newPlayer, props.objectPosition.x, props.objectPosition.y);
-  };
-
-  var onDispose = function onDispose() {
-    unwatchPlayer(playerRef.current, props.playerActions);
-    playerRef.current = undefined;
-  };
-
-  useEffect(function () {
-    var player = playerRef.current;
-
-    if (player) {
-      updatePlayerState(player, previousPlayerState.current, props.playerState, props.playerActions);
-    }
-
-    previousPlayerState.current = props.playerState;
-  }, [props.playerState, props.playerActions]);
-  useEffect(function () {
-    var player = playerRef.current;
-
-    if (player) {
-      updateTextTracksMode(player, props.textTracks.activeFileId);
-    }
-  }, [props.textTracks.activeFileId]);
-  useEffect(function () {
-    var player = playerRef.current;
-
-    if (player) {
-      updateObjectPosition(player, props.objectPosition.x, props.objectPosition.y);
-    }
-  }, [props.objectPosition.x, props.objectPosition.y]);
-  return /*#__PURE__*/React.createElement(PlayerContainer$1, {
-    type: props.type,
-    sources: appendSuffix(props.sources, props.sourceUrlSuffix),
-    textTrackSources: getTextTrackSources(props.textTracks.files, props.textTracksDisabled),
-    filePermaId: props.filePermaId,
-    loop: props.loop,
-    controls: props.controls,
-    playsInline: props.playsInline,
-    mediaEventsContextData: eventContextData,
-    atmoDuringPlayback: props.atmoDuringPlayback,
-    onSetup: onSetup,
-    onDispose: onDispose,
-    altText: props.altText
-  });
-}
-PreparedMediaPlayer.defaultProps = {
-  objectPosition: {},
-  textTracks: {
-    files: []
-  }
-};
-
-function appendSuffix(sources, suffix) {
-  if (!suffix) {
-    return sources;
-  }
-
-  return sources.map(function (source) {
-    return _objectSpread2(_objectSpread2({}, source), {}, {
-      src: "".concat(source.src).concat(suffix)
-    });
-  });
-}
-
-function useSetting(name) {
-  var _useState = useState(settings.get(name)),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  useEffect(function () {
-    function update() {
-      setValue(settings.get(name));
-    }
-
-    settings.on("change:".concat(name), update);
-    return function () {
-      return settings.off(undefined, update);
-    };
-  }, [setValue, name]);
-  var setter = useCallback(function (value) {
-    return settings.set(name, value);
-  }, [name]);
-  return [value, setter];
-}
-
-function useTextTracks(_ref) {
-  var file = _ref.file,
-      defaultTextTrackFilePermaId = _ref.defaultTextTrackFilePermaId,
-      captionsByDefault = _ref.captionsByDefault;
-
-  var _useSetting = useSetting('textTrack'),
-      _useSetting2 = _slicedToArray(_useSetting, 2),
-      setting = _useSetting2[0],
-      setSetting = _useSetting2[1];
-
-  setting = setting || {};
-
-  var _useI18n = useI18n(),
-      t = _useI18n.t;
-
-  var _useEntryMetadata = useEntryMetadata(),
-      locale = _useEntryMetadata.locale;
-
-  var textTrackFiles = useTextTrackFiles({
-    file: file
-  });
-  var autoTextTrackFile = getAutoTextTrackFile(textTrackFiles, defaultTextTrackFilePermaId, locale, captionsByDefault);
-  return {
-    mode: setting.kind === 'off' ? 'off' : setting.kind ? 'user' : 'auto',
-    autoDisplayLabel: autoTextTrackFile ? t('pageflow_scrolled.public.text_track_modes.auto', {
-      label: autoTextTrackFile.displayLabel
-    }) : t('pageflow_scrolled.public.text_track_modes.auto_off'),
-    files: textTrackFiles,
-    activeFileId: getActiveTextTrackFileId(textTrackFiles, autoTextTrackFile, setting),
-    select: function select(textTrackFileIdOrKind) {
-      if (textTrackFileIdOrKind === 'off') {
-        setSetting({
-          kind: 'off'
-        });
-      } else if (textTrackFileIdOrKind === 'auto') {
-        setSetting({});
-      } else {
-        var textTrackFile = textTrackFiles.find(function (file) {
-          return file.id === textTrackFileIdOrKind;
-        });
-        setSetting({
-          kind: textTrackFile.configuration.kind,
-          srclang: textTrackFile.configuration.srclang
-        });
-      }
-    }
-  };
-}
-
-function useTextTrackFiles(_ref2) {
-  var file = _ref2.file;
-
-  var _useI18n2 = useI18n(),
-      t = _useI18n2.t;
-
-  return useNestedFiles({
-    collectionName: 'textTrackFiles',
-    parent: file
-  }).map(function (file) {
-    return addDisplayLabel(file, t);
-  }).sort(function (file1, file2) {
-    return file1.displayLabel.localeCompare(file2.displayLabel);
-  });
-}
-
-function getActiveTextTrackFileId(textTrackFiles, autoTextTrackFile, setting) {
-  if (setting.kind === 'off') {
-    return null;
-  }
-
-  var file = textTrackFiles.find(function (textTrackFile) {
-    return textTrackFile.configuration.srclang === setting.srclang && textTrackFile.configuration.kind === setting.kind;
-  });
-
-  if (file) {
-    return file.id;
-  }
-
-  return autoTextTrackFile && autoTextTrackFile.id;
-}
-
-function getAutoTextTrackFile(textTrackFiles, defaultTextTrackFilePermaId, locale, captionsByDefault) {
-  if (defaultTextTrackFilePermaId) {
-    var defaultTextTrackFile = textTrackFiles.find(function (textTrackFile) {
-      return textTrackFile.permaId === defaultTextTrackFilePermaId;
-    });
-
-    if (defaultTextTrackFile) {
-      return defaultTextTrackFile;
-    }
-  }
-
-  var subtitlesInEntryLanguage = textTrackFiles.find(function (textTrackFile) {
-    return textTrackFile.configuration.kind === 'subtitles' && textTrackFile.configuration.srclang === locale;
-  });
-  var defaultCaptions = captionsByDefault ? textTrackFiles.find(function (textTrackFile) {
-    return textTrackFile.configuration.kind === 'captions';
-  }) : null;
-  return subtitlesInEntryLanguage || defaultCaptions;
-}
-
-function addDisplayLabel(textTrackFile, t) {
-  return _objectSpread2(_objectSpread2({}, textTrackFile), {}, {
-    displayLabel: textTrackFile.configuration.label || t('pageflow_scrolled.public.languages.' + textTrackFile.configuration.srclang || 'unknown', {
-      defaultValue: t('pageflow_scrolled.public.languages.unknown')
-    })
-  });
-}
-
-function usePrevious(value) {
-  var ref = useRef();
-  useEffect(function () {
-    ref.current = value;
-  });
-  return ref.current;
-}
-
-var MediaMutedContext = createContext(false);
-function MediaMutedProvider(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState(media.muted),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  useEffect(function () {
-    media.on('change:muted', setValue);
-    return function () {
-      return media.off('change:muted', setValue);
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(MediaMutedContext.Provider, {
-    value: value
-  }, children);
-}
-/**
- * Returns boolean indicating whether the entry is currently muted.
- */
-
-function useMediaMuted() {
-  return useContext(MediaMutedContext);
-}
-function useOnUnmuteMedia(callback) {
-  var muted = useMediaMuted();
-  var wasMuted = usePrevious(muted);
-  useIsomorphicLayoutEffect(function () {
-    if (wasMuted && !muted) {
-      callback();
-    }
-  }, [wasMuted, muted, callback]);
-}
-
-function ensureProtocol(protocol, url) {
-  if (url && url.match(/^\/\//)) {
-    return "".concat(protocol, ":").concat(url);
-  }
-
-  return url;
-}
-
-function formatTimeDuration(durationInMs) {
-  var seconds = Math.round(durationInMs / 1000) % 60;
-  var minutes = Math.floor(durationInMs / 1000 / 60) % 60;
-  var hours = Math.floor(durationInMs / 1000 / 60 / 60);
-  var result = 'PT';
-
-  if (hours > 0) {
-    result += "".concat(hours, "H");
-  }
-
-  if (minutes > 0) {
-    result += "".concat(minutes, "M");
-  }
-
-  if (seconds > 0 || minutes === 0 && hours === 0) {
-    result += "".concat(seconds, "S");
-  }
-
-  return result;
-}
-
-function StructuredData(_ref) {
-  var data = _ref.data;
-  return /*#__PURE__*/React.createElement("script", {
-    type: "application/ld+json",
-    dangerouslySetInnerHTML: {
-      __html: JSON.stringify(data)
-    }
-  });
-}
-
-function AudioStructuredData(_ref) {
-  var file = _ref.file;
-  var entryMedadata = useEntryMetadata();
-  var data = {
-    '@context': 'http://schema.org',
-    '@type': 'AudioObject',
-    name: file.basename,
-    description: file.configuration.alt,
-    url: ensureProtocol('https', file.urls.mp3),
-    duration: formatTimeDuration(file.durationInMs),
-    datePublished: entryMedadata.publishedAt,
-    uploadDate: file.createdAt,
-    copyrightHolder: {
-      '@type': 'Organization',
-      name: file.rights
-    }
-  };
-  return /*#__PURE__*/React.createElement(StructuredData, {
-    data: data
-  });
-}
-
-var styles$5 = {"spaceForTextTracks":"AudioPlayer-module_spaceForTextTracks__169MK","spaceForTextTracksActive":"AudioPlayer-module_spaceForTextTracksActive__99m7R"};
-
-/**
- * Render audio file in MediaPlayer.
- *
- * @param {Object} props
- * @param {Object} props.audioFile - Audio file obtained via `useFile`.
- * @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
- * @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
- * @param {string} [props.load] - Control lazy loading. `"auto"` (default), `"poster"` or `"none"`.
- */
-
-function AudioPlayer(_ref) {
-  var audioFile = _ref.audioFile,
-      posterImageFile = _ref.posterImageFile,
-      props = _objectWithoutProperties(_ref, ["audioFile", "posterImageFile"]);
-
-  var textTracks = useTextTracks({
-    file: audioFile,
-    defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
-    captionsByDefault: useMediaMuted()
-  });
-
-  if (audioFile && audioFile.isReady) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles$5.spaceForTextTracks, _defineProperty({}, styles$5.spaceForTextTracksActive, !posterImageFile && textTracks.files.length))
-    }, /*#__PURE__*/React.createElement(MediaPlayer, Object.assign({
-      type: 'audio',
-      textTracks: textTracks,
-      filePermaId: audioFile.permaId,
-      sources: processSources(audioFile),
-      textTracksInset: !!posterImageFile,
-      posterImageUrl: posterImageFile && posterImageFile.isReady ? posterImageFile.urls.large : undefined,
-      altText: audioFile.configuration.alt
-    }, props)), /*#__PURE__*/React.createElement(AudioStructuredData, {
-      file: audioFile
-    }));
-  }
-
-  return null;
-}
-AudioPlayer.defaultProps = {
-  controls: true
-};
-function processSources(audioFile) {
-  var sources = [];
-
-  if (audioFile.urls['ogg']) {
-    sources.push({
-      type: 'audio/ogg',
-      src: "".concat(audioFile.urls['ogg'], "?u=1")
-    });
-  }
-
-  if (audioFile.urls['mp3']) {
-    sources.push({
-      type: 'audio/mp3',
-      src: "".concat(audioFile.urls['mp3'], "?u=1")
-    });
-  }
-
-  if (audioFile.urls['m4a']) {
-    sources.push({
-      type: 'audio/m4a',
-      src: "".concat(audioFile.urls['m4a'], "?u=1")
-    });
-  }
-
-  return sources;
-}
-
-function SectionAtmo(props) {
-  var audioFile = useFile({
-    collectionName: 'audioFiles',
-    permaId: props.audioFilePermaId
-  });
-  var lastAudioFile = usePrevious(audioFile);
-  var atmo = useAtmo();
-  var processAtmo = useCallback(function () {
-    var sources = undefined;
-
-    if (audioFile && audioFile.isReady) {
-      sources = processSources(audioFile);
-    }
-
-    if (atmo) {
-      atmo.updateAtmo({
-        sources: sources,
-        audioFilePermaId: props.audioFilePermaId
-      });
-    }
-  }, [atmo, audioFile, props.audioFilePermaId]);
-  useSectionLifecycle({
-    onActivate: function onActivate() {
-      processAtmo();
-    }
-  });
-  useEffect(function () {
-    if (lastAudioFile !== undefined && (lastAudioFile && lastAudioFile.permaId) !== (audioFile && audioFile.permaId)) {
-      processAtmo();
-    }
-  }, [processAtmo, lastAudioFile, audioFile]);
-  return null;
-}
-
-function getSize(el) {
-  if (!el) {
-    return {
-      left: 0,
-      top: 0,
-      width: 0,
-      height: 0,
-      bottom: 0
-    };
-  }
-
-  return {
-    left: el.offsetLeft,
-    top: el.offsetTop,
-    width: el.offsetWidth,
-    height: el.offsetHeight,
-    bottom: el.offsetParent ? el.offsetParent.offsetHeight - el.offsetTop - el.offsetHeight : 0
-  };
-}
-
-function useDimension() {
-  var _useState = useState(getSize(null)),
-      _useState2 = _slicedToArray(_useState, 2),
-      componentSize = _useState2[0],
-      setComponentSize = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentNode = _useState4[0],
-      setCurrentNode = _useState4[1];
-
-  var measuredRef = useCallback(function (node) {
-    setCurrentNode(node);
-    setComponentSize(getSize(node));
-  }, []);
-  useEffect(function () {
-    function handleResize() {
-      setComponentSize(getSize(currentNode));
-    }
-
-    if (!currentNode) {
-      return;
-    }
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return function () {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [currentNode]);
-  return [componentSize, measuredRef];
-}
-
-var styles$6 = {"root":"Fullscreen-module_root__1N3CI"};
-
-var HeightContext = React.createContext();
-function FullscreenHeightProvider(_ref) {
-  var height = _ref.height,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement(HeightContext.Provider, {
-    value: height
-  }, children);
-}
-var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
-  var height = useContext(HeightContext);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref,
-    className: styles$6.root,
-    style: {
-      height: height
-    }
-  }, props.children);
-});
-
-var styles$7 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
-
-function FillColor(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$7.FillColor,
-    style: {
-      backgroundColor: props.color
-    }
-  }, /*#__PURE__*/React.createElement(Fullscreen, null));
-}
-
-/**
- * Extend image or video file with position/motif area related
- * properties that are needed to use the file as a section backdrop.
- *
- * The added properties are:
- *
- * `cropPosition`: Position in percent that can be used as
- * `background-position` or `object-position` to center the given
- * motif area in the container.
- *
- * `motifAreaOffsetRect`: Pixel position and size of the motif area in
- * the container assuming the crop position has been applied.
- *
- * `motifArea`: Either the passed motif area object or the motif area
- * from the legacy file configuration if no motif area has been
- * passed.
- *
- * @param {Object} options
- * @param {Object} options.file - Image or video file obtained via
- * `useFile`.
- * @param {Object} options.motifArea - Section specific setting
- * specifying motif area rect in percent.
- * @param {Object} options.containerDimension - Width and height in
- *   pixels of the container (normally the backdrop) the file shall be
- *   displayed as background of.
- *
- * @private
- */
-function useBackgroundFile(_ref) {
-  var file = _ref.file,
-      motifArea = _ref.motifArea,
-      containerDimension = _ref.containerDimension;
-
-  if (!file) {
-    return null;
-  } // Calculate scale factor required to make the file cover the container:
-
-
-  var originalRatio = file.width / file.height;
-  var containerRatio = containerDimension.width / containerDimension.height;
-  var scale = containerRatio > originalRatio ? containerDimension.width / file.width : containerDimension.height / file.height; // Calculate the pixel size the image will have inside the container:
-
-  var displayFileWidth = file.width * scale;
-  var displayFileHeight = file.height * scale; // Calculate the pixel position of the center of the motif area in
-  // the scaled image:
-
-  var motifCenterX = motifArea ? motifArea.left + motifArea.width / 2 : 50;
-  var motifCenterY = motifArea ? motifArea.top + motifArea.height / 2 : 50;
-  var displayMotifCenterX = motifCenterX * displayFileWidth / 100;
-  var displayMotifCenterY = motifCenterY * displayFileHeight / 100; // If the x-axis position (inside the image) of the center of the
-  // motif area is smaller than `A = containerDimension.width / 2`, we
-  // need to set the crop position to 0% to ensure that the full width
-  // motif area is visible:
-  //
-  //     center of motif area
-  //      |
-  //   oXXXXXooo...........
-  //   |-A-|
-  //
-  // Legend:
-  //   o: Part of the image that is visible in the container
-  //   .: Part of the image that is clipped
-  //   X: Part of the motif area that is visible in the container
-  //   x: Part of the motif area that is clipped
-  //
-  // If the x-axis position (inside the image) of the center of the
-  // motif area is greater than
-  // `B = image.width - containerDimension.width / 2`, we need to set the
-  // crop position to 100%:
-  //
-  //   ............oooXXXXXo
-  //   |-------B-------|
-  //
-  // For positions between A and B we want to linearly shift the crop
-  // position to ensure the center of the motif area is centered in
-  // the container:
-  //
-  //   ...ooXXXXXoo.........
-  //
-  // This also applies if the motif area is wider than the container:
-  //
-  //   .xxXXXXXXXXXxx.......
-  //
-
-  var Ax = containerDimension.width / 2;
-  var Ay = containerDimension.height / 2;
-  var Bx = displayFileWidth - containerDimension.width / 2;
-  var By = displayFileHeight - containerDimension.height / 2;
-  var cropPosition = {
-    x: Bx - Ax > 0 ? Math.min(100, Math.max(0, (displayMotifCenterX - Ax) / (Bx - Ax) * 100)) : 50,
-    y: By - Ay > 0 ? Math.min(100, Math.max(0, (displayMotifCenterY - Ay) / (By - Ay) * 100)) : 50
-  }; // Calculate the amount of pixels the image will be shifted
-  // when the crop position is applied:
-
-  var cropLeft = (displayFileWidth - containerDimension.width) * cropPosition.x / 100;
-  var cropTop = (displayFileHeight - containerDimension.height) * cropPosition.y / 100; // Calculate the pixel position and dimension of the motif area
-  // relative to the container assuming the crop position has been
-  // applied:
-
-  var motifAreaOffsetRect = motifArea && {
-    top: Math.round(displayFileHeight * motifArea.top / 100 - cropTop),
-    left: Math.round(displayFileWidth * motifArea.left / 100 - cropLeft),
-    width: Math.round(displayFileWidth * motifArea.width / 100),
-    height: Math.round(displayFileHeight * motifArea.height / 100)
-  };
-  return _objectSpread2(_objectSpread2({}, file), {}, {
-    cropPosition: cropPosition,
-    motifArea: motifArea,
-    motifAreaOffsetRect: motifAreaOffsetRect
-  });
-}
-
-function useVideoQualitySetting() {
-  var _useSetting = useSetting('videoQuality'),
-      _useSetting2 = _slicedToArray(_useSetting, 2),
-      value = _useSetting2[0],
-      setValue = _useSetting2[1];
-
-  return [value || 'auto', setValue];
-}
-
-browser.feature('dash', function () {
-  return true;
-});
-browser.feature('video', function () {
-  return true;
-});
-browser.feature('highdef', function () {
-  return true;
-});
-function sources(videoFile) {
-  var quality = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
-
-  if (typeof window !== 'undefined') {
-    if (!browser.has('video')) {
-      return [];
-    }
-
-    if (!browser.has('highdef')) {
-      return [{
-        type: 'video/mp4',
-        src: videoFile.urls.high
-      }];
-    }
-
-    if (!browser.has('dash')) {
-      return [{
-        type: 'video/mp4',
-        src: videoFile.urls['4k'] || videoFile.urls.fullhd || videoFile.urls.high
-      }];
-    }
-  }
-
-  if (quality === 'auto') {
-    var result = [{
-      type: 'application/x-mpegURL',
-      src: videoFile.urls['hls-playlist']
-    }, {
-      type: 'video/mp4',
-      src: videoFile.urls.high
-    }];
-
-    if (videoFile.urls['dash-playlist']) {
-      result = [{
-        type: 'application/dash+xml',
-        src: videoFile.urls['dash-playlist']
-      }].concat(result);
-    }
-
-    return result;
-  } else {
-    if (!videoFile.urls[quality]) {
-      quality = 'high';
-    }
-
-    return [{
-      type: 'video/mp4',
-      src: videoFile.urls[quality]
-    }];
-  }
-}
-
-function VideoStructuredData(_ref) {
-  var file = _ref.file;
-  var entryMedadata = useEntryMetadata();
-  var data = {
-    '@context': 'http://schema.org',
-    '@type': 'VideoObject',
-    name: file.basename,
-    description: file.configuration.alt,
-    url: ensureProtocol('https', file.urls.high),
-    thumbnailUrl: ensureProtocol('https', file.urls.posterMedium),
-    width: file.width,
-    height: file.height,
-    duration: formatTimeDuration(file.durationInMs),
-    datePublished: entryMedadata.publishedAt,
-    uploadDate: file.createdAt,
-    copyrightHolder: {
-      '@type': 'Organization',
-      name: file.rights
-    }
-  };
-  return /*#__PURE__*/React.createElement(StructuredData, {
-    data: data
-  });
-}
-
-/**
- * Render video file in MediaPlayer.
- *
- * @param {Object} props
- * @param {Object} props.videoFile - Video file obtained via `useFile`.
- * @param {number} [props.posterImageFile] - Poster image file obtained via `useFile`.
- * @param {number} [props.defaultTextTrackFileId] - Perma id of default text track file.
- * @param {string} [props.load] - Control lazy loading. `"auto"` (default), `"poster"` or `"none"`.
- * @param {String} [props.fit] - `"contain"` (default) or `"cover"`.
- */
-
-function VideoPlayer(_ref) {
-  var videoFile = _ref.videoFile,
-      posterImageFile = _ref.posterImageFile,
-      props = _objectWithoutProperties(_ref, ["videoFile", "posterImageFile"]);
-
-  var _useVideoQualitySetti = useVideoQualitySetting(),
-      _useVideoQualitySetti2 = _slicedToArray(_useVideoQualitySetti, 1),
-      activeQuality = _useVideoQualitySetti2[0];
-
-  var textTracks = useTextTracks({
-    file: videoFile,
-    defaultTextTrackFilePermaId: props.defaultTextTrackFilePermaId,
-    captionsByDefault: useMediaMuted()
-  });
-
-  if (videoFile && videoFile.isReady) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MediaPlayer, Object.assign({
-      type: 'video',
-      fit: props.fit,
-      textTracks: textTracks,
-      filePermaId: videoFile.permaId,
-      sources: sources(videoFile, activeQuality),
-      textTracksInset: true,
-      posterImageUrl: posterImageFile && posterImageFile.isReady ? posterImageFile.urls.large : videoFile.urls.posterLarge,
-      altText: videoFile.configuration.alt,
-      objectPosition: props.fit === 'cover' ? videoFile.cropPosition : undefined
-    }, props)), /*#__PURE__*/React.createElement(VideoStructuredData, {
-      file: videoFile
-    }));
-  }
-
-  return null;
-}
-VideoPlayer.defaultProps = {
-  fit: 'contain',
-  controls: true
-};
-
-function BackgroundVideo(_ref) {
-  var video = _ref.video,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      containerDimension = _ref.containerDimension;
-
-  var _usePlayerState = usePlayerState(),
-      _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
-      playerState = _usePlayerState2[0],
-      playerActions = _usePlayerState2[1];
-
-  var _useSectionLifecycle = useSectionLifecycle({
-    onVisible: function onVisible() {
-      playerActions.changeVolumeFactor(0, 0);
-      playerActions.play();
-    },
-    onActivate: function onActivate() {
-      playerActions.changeVolumeFactor(1, 1000);
-    },
-    onDeactivate: function onDeactivate() {
-      playerActions.changeVolumeFactor(0, 1000);
-    },
-    onInvisible: function onInvisible() {
-      playerActions.pause();
-    }
-  }),
-      shouldLoad = _useSectionLifecycle.shouldLoad,
-      shouldPrepare = _useSectionLifecycle.shouldPrepare;
-
-  useEffect(function () {
-    var documentState = documentHiddenState(function (visibilityState) {
-      if (visibilityState === 'hidden') {
-        playerActions.pause();
-      } else {
-        playerActions.play();
-      }
-    });
-    return function () {
-      documentState.removeCallback();
-    };
-  }, [playerActions]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VideoPlayer, {
-    load: shouldPrepare ? 'auto' : shouldLoad ? 'poster' : 'none',
-    playerState: playerState,
-    playerActions: playerActions,
-    videoFile: video,
-    textTracksDisabled: true,
-    fit: "cover",
-    loop: true,
-    playsInline: true
-  }), /*#__PURE__*/React.createElement(MotifArea, {
-    key: video.permaId,
-    onUpdate: onMotifAreaUpdate,
-    file: video,
-    containerWidth: containerDimension.width,
-    containerHeight: containerDimension.height
-  }));
-}
-
-/**
- * Returns boolean indicating whether viewport orientation is currently
- * portrait.
- */
-
-function usePortraitOrientation() {
-  return useMediaQuery('(orientation: portrait)');
-}
-
-var styles$8 = {"root":"Image-module_root__1ef3j"};
-
-function ImageStructuredData(_ref) {
-  var file = _ref.file;
-  var entryMedadata = useEntryMetadata();
-  var data = {
-    '@context': 'http://schema.org',
-    '@type': 'ImageObject',
-    name: file.basename,
-    description: file.configuration.alt,
-    url: ensureProtocol('https', file.urls.large),
-    width: file.width,
-    height: file.height,
-    datePublished: entryMedadata.publishedAt,
-    uploadDate: file.createdAt,
-    copyrightHolder: {
-      '@type': 'Organization',
-      name: file.rights
-    }
-  };
-  return /*#__PURE__*/React.createElement(StructuredData, {
-    data: data
-  });
-}
-
-/**
- * Render an image file.
- *
- * @param {Object} props
- * @param {Object} props.imageFile - Image file obtained via `useFile`.
- * @param {string} [props.variant] - Paperclip style to use. Defaults to large.
- * @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.
- */
-
-function Image(_ref) {
-  var imageFile = _ref.imageFile,
-      props = _objectWithoutProperties(_ref, ["imageFile"]);
-
-  if (imageFile && imageFile.isReady && props.load) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, renderImageTag(props, imageFile), renderStructuredData(props, imageFile));
-  }
-
-  return null;
-}
-
-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$8.root),
-    src: imageFile.urls[props.variant],
-    alt: imageFile.configuration.alt ? imageFile.configuration.alt : '',
-    style: {
-      objectPosition: "".concat(cropPositionX, "% ").concat(cropPositionY, "%")
-    }
-  });
-}
-
-function renderStructuredData(props, file) {
-  if (props.structuredData && file) {
-    return /*#__PURE__*/React.createElement(ImageStructuredData, {
-      file: file
-    });
-  }
-}
-
-Image.defaultProps = {
-  load: true,
-  variant: 'large'
-};
-
-function BackgroundImage(_ref) {
-  var image = _ref.image,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      containerDimension = _ref.containerDimension;
-
-  var _useSectionLifecycle = useSectionLifecycle(),
-      shouldLoad = _useSectionLifecycle.shouldLoad;
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
-    imageFile: image,
-    load: shouldLoad,
-    structuredData: true
-  }), /*#__PURE__*/React.createElement(MotifArea, {
-    key: image === null || image === void 0 ? void 0 : image.permaId,
-    onUpdate: onMotifAreaUpdate,
-    file: image,
-    containerWidth: containerDimension.width,
-    containerHeight: containerDimension.height
-  }));
-}
-
-function OrientationAwareBackgroundImage(_ref) {
-  var image = _ref.image,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      imageMobile = _ref.imageMobile,
-      containerDimension = _ref.containerDimension;
-  var mobile = usePortraitOrientation();
-
-  if (mobile) {
-    return /*#__PURE__*/React.createElement(BackgroundImage, {
-      image: imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(BackgroundImage, {
-      image: image,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  }
-}
-
-function BackgroundAsset(props) {
-  var video = useBackgroundFile({
-    file: useFile({
-      collectionName: 'videoFiles',
-      permaId: props.video
-    }),
-    motifArea: props.videoMotifArea,
-    containerDimension: props.containerDimension
-  });
-  var image = useBackgroundFile({
-    file: useFile({
-      collectionName: 'imageFiles',
-      permaId: props.image
-    }),
-    motifArea: props.imageMotifArea,
-    containerDimension: props.containerDimension
-  });
-  var imageMobile = useBackgroundFile({
-    file: useFile({
-      collectionName: 'imageFiles',
-      permaId: props.imageMobile
-    }),
-    motifArea: props.imageMobileMotifArea,
-    containerDimension: props.containerDimension
-  });
-
-  if (video) {
-    return /*#__PURE__*/React.createElement(Fullscreen, {
-      ref: props.setContainerRef
-    }, /*#__PURE__*/React.createElement(BackgroundVideo, {
-      video: video,
-      onMotifAreaUpdate: props.onMotifAreaUpdate,
-      containerDimension: props.containerDimension
-    }));
-  } else if (props.color || props.image && props.image.toString().startsWith('#')) {
-    return /*#__PURE__*/React.createElement(FillColor, {
-      color: props.color || props.image
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(Fullscreen, {
-      ref: props.setContainerRef
-    }, renderBackgroundImage({
-      image: image,
-      imageMobile: imageMobile,
-      onMotifAreaUpdate: props.onMotifAreaUpdate,
-      containerDimension: props.containerDimension
-    }));
-  }
-}
-
-function renderBackgroundImage(_ref) {
-  var image = _ref.image,
-      imageMobile = _ref.imageMobile,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      containerDimension = _ref.containerDimension;
-
-  if (image && imageMobile) {
-    return /*#__PURE__*/React.createElement(OrientationAwareBackgroundImage, {
-      image: image,
-      imageMobile: imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(BackgroundImage, {
-      image: image || imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  }
-}
-
-var styles$9 = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","defaultBackground":"Backdrop-module_defaultBackground__1YQQL"};
-
-function Backdrop(props) {
-  var _useDimension = useDimension(),
-      _useDimension2 = _slicedToArray(_useDimension, 2),
-      containerDimension = _useDimension2[0],
-      setContainerRef = _useDimension2[1];
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$9.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$9.defaultBackground, props.transitionStyles.backdropInner2)
-  }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset, Object.assign({}, props, {
-    containerDimension: containerDimension,
-    setContainerRef: setContainerRef
-  }))))));
-}
-Backdrop.defaultProps = {
-  children: function children(_children) {
-    return _children;
-  },
-  transitionStyles: {}
-};
-
-function isIntersectingX(rectA, rectB) {
-  return rectA.left < rectB.right && rectA.right > rectB.left || rectB.left < rectA.right && rectB.right > rectA.left;
-}
-
-function getBoundingClientRect(el) {
-  if (!el) {
-    return {
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      width: 0,
-      height: 0
-    };
-  }
-
-  return el.getBoundingClientRect();
-}
-
-function useBoundingClientRect() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$updateOnScrollAn = _ref.updateOnScrollAndResize,
-      updateOnScrollAndResize = _ref$updateOnScrollAn === void 0 ? true : _ref$updateOnScrollAn,
-      _ref$dependencies = _ref.dependencies,
-      dependencies = _ref$dependencies === void 0 ? [] : _ref$dependencies;
-
-  var _useState = useState(getBoundingClientRect(null)),
-      _useState2 = _slicedToArray(_useState, 2),
-      boundingClientRect = _useState2[0],
-      setBoundingClientRect = _useState2[1];
-
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentNode = _useState4[0],
-      setCurrentNode = _useState4[1];
-
-  var measureRef = useCallback(function (node) {
-    setCurrentNode(node);
-    setBoundingClientRect(getBoundingClientRect(node));
-  }, []);
-  useIsomorphicLayoutEffect(function () {
-    if (dependencies.length && currentNode) {
-      setBoundingClientRect(getBoundingClientRect(currentNode));
-    }
-  }, dependencies);
-  useEffect(function () {
-    function handler() {
-      setBoundingClientRect(getBoundingClientRect(currentNode));
-    }
-
-    if (!currentNode || !updateOnScrollAndResize) {
-      return;
-    }
-
-    window.addEventListener('resize', handler);
-    window.addEventListener('scroll', handler);
-    return function () {
-      window.removeEventListener('resize', handler);
-      window.removeEventListener('scroll', handler);
-    };
-  }, [currentNode, updateOnScrollAndResize]);
-  return [boundingClientRect, measureRef];
-}
-
-/**
- * Handles the state of the section layout based on the current
- * position of content and motif area. Returns an array of the form:
- *
- *     [
- *      {
- *        isContentPadded,    // true if motif and content will
- *                            // not fit side by side.
- *
- *        intersectionRatioY, // Ratio of the motif area that is
- *                            // covered by the content given the
- *                            // current scroll position if motif
- *                            // is exposed.
- *
- *        paddingTop,         // Distance to shift down the content
- *                            // to ensure the motif area can be
- *                            // seen when entering the section.
- *
- *        minHeight,          // Min Height of the section to ensure
- *                            // the motif area can be seen.
- *      },
- *      setMotifAreaRectRef,  // Assign motif area element that shall be
- *                            // measured.
- *
- *      setContentAreaRef     // Assign content area element that
- *                            // shall be measured.
- *     ]
- *
- * @param {Object} options
- * @param {string[]} transitions - Names of the section's enter and exit
- *   transitions.
- * @param {boolean} fullHeight - Whether the section has full or dynamic
- *   height.
- * @param {boolean} empty - Whether the section contains content
- *  elements.
- * @param {boolean} exposeMotifArea - Whether to pad content down if it
- *  would otherwise intersect with the motif area.
- *
- * @private
- */
-
-function useMotifAreaState() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      transitions = _ref.transitions,
-      fullHeight = _ref.fullHeight,
-      empty = _ref.empty,
-      exposeMotifArea = _ref.exposeMotifArea,
-      updateOnScrollAndResize = _ref.updateOnScrollAndResize;
-
-  var _useBoundingClientRec = useBoundingClientRect({
-    updateOnScrollAndResize: updateOnScrollAndResize
-  }),
-      _useBoundingClientRec2 = _slicedToArray(_useBoundingClientRec, 2),
-      motifAreaRect = _useBoundingClientRec2[0],
-      setMotifAreaRectRef = _useBoundingClientRec2[1];
-
-  var _useDimension = useDimension(),
-      _useDimension2 = _slicedToArray(_useDimension, 2),
-      motifAreaDimension = _useDimension2[0],
-      setMotifAreaDimensionRef = _useDimension2[1];
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isPadded = _useState2[0],
-      setIsPadded = _useState2[1];
-
-  var setMotifAreaRef = useCallback(function (node) {
-    setMotifAreaRectRef(node);
-    setMotifAreaDimensionRef(node);
-  }, [setMotifAreaRectRef, setMotifAreaDimensionRef]);
-
-  var _useBoundingClientRec3 = useBoundingClientRect({
-    updateOnScrollAndResize: updateOnScrollAndResize,
-    dependencies: [isPadded]
-  }),
-      _useBoundingClientRec4 = _slicedToArray(_useBoundingClientRec3, 2),
-      contentAreaRect = _useBoundingClientRec4[0],
-      setContentAreaRef = _useBoundingClientRec4[1];
-
-  var isContentPadded = exposeMotifArea && isIntersectingX(motifAreaRect, contentAreaRect) && motifAreaRect.height > 0 && !empty;
-  var paddingTop = getMotifAreaPadding(isContentPadded, transitions, motifAreaDimension); // Force measuring content area again since applying the padding
-  // changes the intersection ratio.
-
-  var willBePadded = paddingTop > 0;
-  useEffect(function () {
-    setIsPadded(willBePadded);
-  }, [willBePadded]);
-  return [{
-    paddingTop: paddingTop,
-    isContentPadded: isContentPadded,
-    minHeight: getMotifAreaMinHeight(fullHeight, transitions, motifAreaDimension),
-    intersectionRatioY: getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect)
-  }, setMotifAreaRef, setContentAreaRef];
-}
-
-function getMotifAreaPadding(isContentPadded, transitions, motifAreaDimension) {
-  if (!isContentPadded) {
-    return;
-  }
-
-  if (transitions[0] === 'fadeIn' || transitions[0] === 'fadeInBg') {
-    // Once the section has become active, the backdrop becomes
-    // visible all at once. Motif area aware background positioning
-    // ensures that the motif area is within the viewport. Still, when
-    // scrolling fast, the top of the section will already have
-    // reached the top of the viewport once the fade transitions ends.
-    //
-    // If the motif area is at the top of the backdrop, adding its
-    // height as padding is enough to ensure that the content does not
-    // immediately start intersecting.
-    //
-    // If the motif area is at the bottom of the backdrop, additional
-    // padding is needed to prevent the content from hiding the motif
-    // right at the start. Adding the full top distance of the motif
-    // area, though, means a full viewport height has to be scrolled
-    // by after the content of the previous section has been faded out
-    // before the content of the section enters the viewport.
-    // Subjectively, this feels like to little feedback that more
-    // content is coming. We therefore reduce the additional distance
-    // by a third.
-    return motifAreaDimension.top * 2 / 3 + motifAreaDimension.height;
-  }
-
-  if (transitions[0] === 'reveal') {
-    // The backdrop remains in a fixed position while the content is
-    // being scrolled in. Shifting the content down by the height of
-    // the motif area means the motif area will be completely visible
-    // when the top of the section aligns with the top of the motif
-    // area.
-    //
-    // For exit transition `scrollOut`, the min height determined
-    // below, ensures that the top of the section can actually reach
-    // that position before the section begins to scroll.
-    return motifAreaDimension.height;
-  } else {
-    // In the remaining `scrollIn` case, content and backdrop move in
-    // together. We need to shift content down below the motif.
-    return motifAreaDimension.top + motifAreaDimension.height;
-  }
-}
-
-function getMotifAreaMinHeight(fullHeight, transitions, motifAreaDimension) {
-  if (fullHeight) {
-    return;
-  }
-
-  if (transitions[0] === 'reveal') {
-    if (transitions[1] === 'conceal') {
-      // Ensure section is tall enough to reveal the full height of
-      // the motif area once the section passes it.
-      return motifAreaDimension.height;
-    } else {
-      // Ensure backdrop can be revealed far enough before the section
-      // starts scrolling.
-      return motifAreaDimension.bottom + motifAreaDimension.height;
-    }
-  } else {
-    // Ensure motif is visible in scrolled in section.
-    return motifAreaDimension.top + motifAreaDimension.height;
-  }
-}
-
-function getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect) {
-  var motifAreaOverlap = Math.max(0, Math.min(motifAreaRect.height, motifAreaRect.bottom - contentAreaRect.top));
-  return isContentPadded ? motifAreaOverlap / motifAreaRect.height : 0;
-}
-
-function useScrollTarget(ref, isScrollTarget) {
-  useEffect(function () {
-    if (ref.current && isScrollTarget) {
-      window.scrollTo({
-        top: ref.current.getBoundingClientRect().top + window.scrollY - window.innerHeight * 0.25,
-        behavior: 'smooth'
-      });
-    }
-  }, [ref, isScrollTarget]);
-}
-
-var DarkBackgroundContext = createContext(true);
-function BackgroundColorProvider(_ref) {
-  var dark = _ref.dark,
-      invert = _ref.invert,
-      children = _ref.children;
-  var previousValue = useDarkBackground();
-  return /*#__PURE__*/React.createElement(DarkBackgroundContext.Provider, {
-    value: getValue({
-      dark: dark,
-      invert: invert,
-      previousValue: previousValue
-    })
-  }, children);
-}
-
-function getValue(_ref2) {
-  var dark = _ref2.dark,
-      invert = _ref2.invert,
-      previousValue = _ref2.previousValue;
-
-  if (dark !== undefined) {
-    return dark;
-  } else if (invert === true) {
-    return !previousValue;
-  } else {
-    return previousValue;
-  }
-}
-/**
- * Use to invert elements depending on whether they are rendered on a
- * dark or light background to ensure correct display in inverted
- * sections or in sections with card appearance.
- *
- * @return {boolean}
- */
-
-
-function useDarkBackground() {
-  return useContext(DarkBackgroundContext);
-}
-
-var styles$a = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","Section":"Section-module_Section__Yo58b","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","foreground":"fadeInBgFadeOut-module_foreground__Q2vkT","foreground-above":"fadeInBgFadeOut-module_foreground-above__3pmz9","backdrop-below":"fadeInBgFadeOut-module_backdrop-below__2G-Ic"};
-
-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","foreground":"fadeInConceal-module_foreground__3giM9","backdrop-below":"fadeInConceal-module_backdrop-below__AWyQe","foreground-below":"fadeInConceal-module_foreground-below__2z5Op"};
-
-var fadeInFadeOut = {"fade-duration":"0.5s","backdrop":"fadeInFadeOut-module_backdrop__Y4xOA","backdropInner":"fadeInFadeOut-module_backdropInner__1oRfP","foreground":"fadeInFadeOut-module_foreground__1eleZ","foreground-above":"fadeInFadeOut-module_foreground-above__249wa","backdrop-below":"fadeInFadeOut-module_backdrop-below__1h2I4","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","foreground":"fadeInFadeOutBg-module_foreground__24f_M","backdrop-below":"fadeInFadeOutBg-module_backdrop-below__4Ys_2","boxShadow-above":"fadeInFadeOutBg-module_boxShadow-above__3T2K5","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","backdrop-below":"fadeInScrollOut-module_backdrop-below__3cRLH","foreground-below":"fadeInScrollOut-module_foreground-below__1Jcql"};
-
-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$b = {
-  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$b[name]) {
-    throw new Error("Unknown transition ".concat(name));
-  }
-
-  return styles$b[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$c = {"shadow":"GradientShadow-module_shadow__2UiDH","align-right":"GradientShadow-module_align-right__3iXZs","shadowBlack":"GradientShadow-module_shadowBlack__cSr14","align-left":"GradientShadow-module_align-left__3qcNM","intersecting":"GradientShadow-module_intersecting__h6vpz","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","shadowWhite":"GradientShadow-module_shadowWhite__3Xw2q"};
-
-function GradientShadow(props) {
-  // 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. If motif area does
-  // not intersect, always make it visible. Shadow appearance will then
-  // depend on alignment (i.e. a gradient from the left).
-  var opacityFactor = props.motifAreaState.isContentPadded ? // 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)) : 1;
-  var opacity = props.motifAreaState.isContentPadded ? props.dynamicShadowOpacity : props.staticShadowOpacity;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$c.root, styles$c["align-".concat(props.align)], _defineProperty({}, styles$c.intersecting, props.motifAreaState.isContentPadded))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$c.shadow, props.inverted ? styles$c.shadowWhite : styles$c.shadowBlack),
-    style: {
-      opacity: opacity * opacityFactor
-    }
-  }, /*#__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$d = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
-
-function InvisibleBoxWrapper(_ref) {
-  var _classNames;
-
-  var position = _ref.position,
-      openStart = _ref.openStart,
-      openEnd = _ref.openEnd,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames = {}, _defineProperty(_classNames, styles$d.start, !openStart && position !== 'full'), _defineProperty(_classNames, styles$d.end, !openEnd && position !== 'full'), _classNames))
-  }, children);
-}
-
-var styles$e = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","long":"GradientBox-module_long__10s6v","gradient":"GradientBox-module_gradient__31tJ-","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6","root":"GradientBox-module_root__8Xn9W"};
-
-function GradientBox(props) {
-  var _classNames;
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$e.root, (_classNames = {}, _defineProperty(_classNames, styles$e.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$e["long"], props.coverInvisibleNextSection), _classNames)),
-    style: {
-      paddingTop: props.motifAreaState.paddingTop
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$e.wrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$e.shadow, props.inverted ? styles$e.shadowLight : styles$e.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
-    style: {
-      top: props.motifAreaState.paddingTop,
-      opacity: props.staticShadowOpacity
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$e.content
-  }, props.children)));
-}
-
-var styles$f = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
-
-function CardBox(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$f.wrapper,
-    style: {
-      paddingTop: props.motifAreaState.paddingTop
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$f.content
-  }, props.children));
-}
-
-var styles$g = {"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(props)
-  }, /*#__PURE__*/React.createElement(BackgroundColorProvider, {
-    invert: !positionOutsideBox.includes(props.position)
-  }, props.children));
-}
-
-function className(props) {
-  if (positionOutsideBox.includes(props.position)) {
-    return undefined;
-  }
-
-  return classNames(styles$g.card, props.inverted ? styles$g.cardBgBlack : styles$g.cardBgWhite, _defineProperty({}, styles$g.cardStart, !props.openStart), _defineProperty({}, styles$g.cardEnd, !props.openEnd));
-}
-
-var components = {
-  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[appearance || 'shadow'];
-}
-
-var Section = withInlineEditingDecorator('SectionDecorator', function Section(_ref) {
-  var section = _ref.section,
-      contentElements = _ref.contentElements,
-      state = _ref.state,
-      isScrollTarget = _ref.isScrollTarget,
-      onActivate = _ref.onActivate;
-  var ref = useRef();
-  useScrollTarget(ref, isScrollTarget);
-  var transitionStyles = getTransitionStyles(section, section.previousSection, section.nextSection);
-  return /*#__PURE__*/React.createElement("section", {
-    id: "section-".concat(section.permaId),
-    ref: ref,
-    className: classNames(styles$a.Section, transitionStyles.section, _defineProperty({}, styles$a.narrow, section.width === 'narrow'), _defineProperty({}, styles$a.invert, section.invert))
-  }, /*#__PURE__*/React.createElement(SectionLifecycleProvider, {
-    onActivate: onActivate,
-    isLast: !section.nextSection
-  }, /*#__PURE__*/React.createElement(SectionAtmo, {
-    audioFilePermaId: section.atmoAudioFileId
-  }), /*#__PURE__*/React.createElement(SectionContents, {
-    section: section,
-    contentElements: contentElements,
-    state: state,
-    transitionStyles: transitionStyles
-  })));
-});
-
-function SectionContents(_ref2) {
-  var section = _ref2.section,
-      contentElements = _ref2.contentElements,
-      state = _ref2.state,
-      transitionStyles = _ref2.transitionStyles;
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-  var _useSectionLifecycle = useSectionLifecycle(),
-      shouldPrepare = _useSectionLifecycle.shouldPrepare;
+// Make sure Webpack loads chunks via asset host.
+// Free variable assignment will be rewritten during Webpack compilation.
+// See https://v4.webpack.js.org/guides/public-path/#on-the-fly
+// PageflowScrolled::WebpackPublicPathHelper generates js snippet
+// that defines the global. For Storybook, we set it to an empty default.
+// eslint-disable-next-line no-undef
+__webpack_public_path__ = commonjsGlobal.__webpack_public_path__ || '';
 
-  var sectionProperties = useMemo(function () {
-    return {
-      layout: section.layout,
-      invert: section.invert,
-      sectionIndex: section.sectionIndex
-    };
-  }, [section.layout, section.invert, section.sectionIndex]);
-
-  var _useMotifAreaState = useMotifAreaState({
-    updateOnScrollAndResize: shouldPrepare,
-    exposeMotifArea: section.exposeMotifArea,
-    transitions: getEnterAndExitTransitions(section, section.previousSection, section.nextSection),
-    empty: !contentElements.length,
-    sectionTransition: section.transition,
-    fullHeight: section.fullHeight
-  }),
-      _useMotifAreaState2 = _slicedToArray(_useMotifAreaState, 4),
-      motifAreaState = _useMotifAreaState2[0],
-      setMotifAreaRef = _useMotifAreaState2[1],
-      setContentAreaRef = _useMotifAreaState2[2],
-      setForegroundContentRef = _useMotifAreaState2[3];
-
-  var _getAppearanceCompone = getAppearanceComponents(section.appearance),
-      Shadow = _getAppearanceCompone.Shadow,
-      Box = _getAppearanceCompone.Box,
-      BoxWrapper = _getAppearanceCompone.BoxWrapper;
-
-  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, {
-    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,
-    inFirstSection: section.sectionIndex === 0,
-    minHeight: motifAreaState.minHeight,
-    paddingBottom: !endsWithFullWidthElement(contentElements),
-    contentRef: setForegroundContentRef,
-    heightMode: heightMode(section)
-  }, /*#__PURE__*/React.createElement(Box, {
-    inverted: section.invert,
-    coverInvisibleNextSection: section.nextSection && section.nextSection.transition.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);
-  })))));
-}
+// iframes. Use polyfill instead.
 
-function ConnectedSection(props) {
-  var contentElements = useSectionContentElements({
-    sectionId: props.section.id
-  });
-  return /*#__PURE__*/React.createElement(Section, Object.assign({}, props, {
-    contentElements: contentElements
-  }));
+if (browser.agent.matchesSafari() && window.parent !== window) {
+  delete window.IntersectionObserver;
 }
 
-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 'dynamic';
-}
+require('intersection-observer'); // Make sure we're in a Browser-like environment before importing polyfills
+// This prevents `fetch()` from being imported in a Node test environment
 
-function endsWithFullWidthElement(elements) {
-  var lastElement = elements[elements.length - 1];
-  return lastElement && lastElement.position === 'full';
-}
 
-function percentToFraction(value, _ref3) {
-  var defaultValue = _ref3.defaultValue;
-  return typeof value !== 'undefined' ? value / 100 : defaultValue;
+if (typeof window !== 'undefined') {
+  require('whatwg-fetch');
 }
 
 function Chapter(props) {
@@ -3479,7 +131,8 @@ function renderSections(sections, currentSectionIndex, setCurrentSection, scroll
   return sections.map(function (section) {
     return /*#__PURE__*/React.createElement(EventContextDataProvider, {
       key: section.permaId,
-      section: section
+      section: section,
+      sectionsCount: sections.length
     }, /*#__PURE__*/React.createElement(ConnectedSection, {
       state: section.sectionIndex > currentSectionIndex ? 'below' : section.sectionIndex < currentSectionIndex ? 'above' : 'active',
       isScrollTarget: section.sectionIndex === scrollTargetSectionIndex,
@@ -3491,48 +144,77 @@ function renderSections(sections, currentSectionIndex, setCurrentSection, scroll
   });
 }
 
-var CurrentChapterContext = React.createContext();
-var CurrentSectionIndexStateContext = React.createContext();
-function CurrentSectionProvider(_ref) {
+// initial viewport as 100vh. Once the page is scrolled, browser
+// toolbars are hidden, the viewport becomes larger and elements with
+// height 100vh no longer cover the viewport.
+//
+// To detect this situation, this component compares the height of a
+// 100vh div with the inner height of the window on resize. Once those
+// window height exceeds probe heights the component sets the `--vh`
+// custom property (which default to 1vh) to a pixel value such that
+// `calc(100 * var(--vh))` equals the inner height of the window.
+//
+// To prevent changing element sizes once the browser toolbars are
+// shown again (when the user scrolls back up), `--vh` is not updated
+// when the inner height of the window decreases slightly.
+//
+// On orientation change, we do want to update `--vh`, though. We
+// therefore do update it when the inner height of the window
+// decreases by more than 30%.
+
+function VhFix(_ref) {
   var children = _ref.children;
+  var probeRef = useRef();
 
-  var _useState = useState(0),
+  var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
-      currentSectionIndex = _useState2[0],
-      setCurrentSectionIndex = _useState2[1];
+      height = _useState2[0],
+      setHeight = _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));
-}
-/**
- * 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'
- *  }
- */
+  useEffect(function () {
+    if (!browser.has('ios platform')) {
+      return;
+    }
+
+    window.addEventListener('resize', update);
+    return function () {
+      return window.removeEventListener('resize', update);
+    };
 
-function useCurrentChapter() {
-  return useContext(CurrentChapterContext);
+    function update() {
+      setHeight(function (previousHeight) {
+        return getHeight({
+          windowHeight: window.innerHeight,
+          probeHeight: probeRef.current.clientHeight,
+          previousHeight: previousHeight
+        });
+      });
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: height && {
+      '--vh': "".concat(height / 100, "px")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '100vh',
+      position: 'absolute'
+    },
+    ref: probeRef
+  }), children);
 }
-function useCurrentSectionIndexState() {
-  return useContext(CurrentSectionIndexStateContext);
+function getHeight(_ref2) {
+  var windowHeight = _ref2.windowHeight,
+      probeHeight = _ref2.probeHeight,
+      previousHeight = _ref2.previousHeight;
+
+  if (probeHeight < windowHeight || previousHeight) {
+    if (!previousHeight || windowHeight > previousHeight || windowHeight < previousHeight * 0.7) {
+      return windowHeight;
+    } else {
+      return previousHeight;
+    }
+  }
 }
 
 function useSectionChangeEvents(currentSectionIndex) {
@@ -3540,7 +222,10 @@ function useSectionChangeEvents(currentSectionIndex) {
   var sections = useSectionsWithChapter();
   useEffect(function () {
     if (previousSectionIndex !== currentSectionIndex) {
-      events.trigger('page:change', getEventObject(sections[currentSectionIndex]));
+      events.trigger('page:change', getEventObject({
+        section: sections[currentSectionIndex],
+        sectionsCount: sections.length
+      }));
     }
   });
 }
@@ -3556,8 +241,6 @@ var sectionChangeMessagePoster = function sectionChangeMessagePoster(index) {
   }
 };
 
-var contentStyles = {"Content":"Content-module_Content__m7urk"};
-
 var Content = withInlineEditingDecorator('ContentDecorator', function Content(props) {
   var _useCurrentSectionInd = useCurrentSectionIndexState(),
       _useCurrentSectionInd2 = _slicedToArray(_useCurrentSectionInd, 2),
@@ -3605,9 +288,9 @@ var Content = withInlineEditingDecorator('ContentDecorator', function Content(pr
   return /*#__PURE__*/React.createElement("div", {
     className: contentStyles.Content,
     id: "goToContent"
-  }, /*#__PURE__*/React.createElement(AtmoProvider, null, /*#__PURE__*/React.createElement(ScrollToSectionContext.Provider, {
+  }, /*#__PURE__*/React.createElement(VhFix, null, /*#__PURE__*/React.createElement(AtmoProvider, null, /*#__PURE__*/React.createElement(ScrollToSectionContext.Provider, {
     value: scrollToSection
-  }, renderChapters(entryStructure, currentSectionIndex, setCurrentSection, scrollTargetSectionIndex, setScrollTargetSectionIndex))));
+  }, renderChapters(entryStructure, currentSectionIndex, setCurrentSection, scrollTargetSectionIndex, setScrollTargetSectionIndex)))));
 });
 
 function renderChapters(entryStructure, currentSectionIndex, setCurrentSection, scrollTargetSectionIndex, setScrollTargetSectionIndex) {
@@ -3649,123 +332,13 @@ function Entry() {
   }));
 }
 
-var styles$h = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
-
-var FocusVisibleContext = createContext();
-function useFocusOutlineVisible() {
-  return useContext(FocusVisibleContext);
-}
-function FocusOutlineProvider(_ref) {
-  var children = _ref.children;
-
-  var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
-  useEffect(function () {
-    document.body.addEventListener('keydown', enable);
-    document.body.addEventListener('mousedown', disable);
-    disable();
-    return function () {
-      document.body.removeEventListener('keydown', enable);
-      document.body.removeEventListener('mousedown', disable);
-    };
-
-    function enable() {
-      document.body.classList.remove(styles$h.focusOutlineDisabled);
-      setValue(true);
-    }
-
-    function disable() {
-      document.body.classList.add(styles$h.focusOutlineDisabled);
-      setValue(false);
-    }
-  }, []);
-  return /*#__PURE__*/React.createElement(FocusVisibleContext.Provider, {
-    value: value
-  }, children);
-}
-
-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 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.
- *
- * @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.
- */
-
-function useAudioFocus(_ref2) {
-  var key = _ref2.key,
-      request = _ref2.request,
-      onLost = _ref2.onLost;
-  var wasRequested = usePrevious(request);
-
-  var _useContext = useContext(AudioFocusContext),
-      _useContext2 = _slicedToArray(_useContext, 2),
-      currentKey = _useContext2[0],
-      setCurrentKey = _useContext2[1];
-
-  var previousKey = usePrevious(currentKey);
-  useEffect(function () {
-    if (request && !wasRequested) {
-      setCurrentKey(key);
-    }
-  }, [request, wasRequested, setCurrentKey, key]);
-  useEffect(function () {
-    if (previousKey === key && currentKey !== key) {
-      onLost();
-    }
-  }, [currentKey, previousKey, key, onLost]);
-}
-
-function RootProviders(_ref) {
-  var seed = _ref.seed,
-      _ref$consent = _ref.consent,
-      consent$1 = _ref$consent === void 0 ? consent : _ref$consent,
-      children = _ref.children;
-  return /*#__PURE__*/React.createElement(FocusOutlineProvider, null, /*#__PURE__*/React.createElement(BrowserFeaturesProvider, null, /*#__PURE__*/React.createElement(PhonePlatformProvider, null, /*#__PURE__*/React.createElement(MediaMutedProvider, null, /*#__PURE__*/React.createElement(AudioFocusProvider, null, /*#__PURE__*/React.createElement(EntryStateProvider, {
-    seed: seed
-  }, /*#__PURE__*/React.createElement(CurrentSectionProvider, null, /*#__PURE__*/React.createElement(LocaleProvider, null, /*#__PURE__*/React.createElement(ConsentProvider, {
-    consent: consent$1
-  }, children)))))))));
-}
-
 function loadDashUnlessHlsSupported(_x) {
   return _loadDashUnlessHlsSupported.apply(this, arguments);
 }
 
 function _loadDashUnlessHlsSupported() {
-  _loadDashUnlessHlsSupported = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(seed) {
-    return regenerator.wrap(function _callee$(_context) {
+  _loadDashUnlessHlsSupported = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(seed) {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
@@ -3800,7 +373,7 @@ function hlsHostSupportedByAndroid(seed) {
   return getFileUrlTemplateHost(seed, 'videoFiles', 'hls-playlist').indexOf('_') < 0;
 }
 
-var styles$i = {"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)","root":"Figure-module_root__3FC-x","invert":"Figure-module_invert___0BJP"};
+var styles = {"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)","root":"Figure-module_root__3FC-x","invert":"Figure-module_invert___0BJP"};
 
 /**
  * Render a figure with a caption text attached.
@@ -3817,7 +390,7 @@ function Figure(_ref) {
 
   if (caption) {
     return /*#__PURE__*/React.createElement("figure", {
-      className: classNames(styles$i.root, _defineProperty({}, styles$i.invert, !darkBackground))
+      className: classNames(styles.root, _defineProperty({}, styles.invert, !darkBackground))
     }, children, /*#__PURE__*/React.createElement("figcaption", null, /*#__PURE__*/React.createElement(Text, {
       scaleCategory: "caption"
     }, caption)));
@@ -3826,7 +399,7 @@ function Figure(_ref) {
   }
 }
 
-var styles$j = {"wrapper":"ContentElementBox-module_wrapper__3wZgP"};
+var styles$1 = {"wrapper":"ContentElementBox-module_wrapper__3wZgP"};
 
 /**
  * Wrap content element that render a visible box in this component to
@@ -3839,7 +412,7 @@ var styles$j = {"wrapper":"ContentElementBox-module_wrapper__3wZgP"};
 function ContentElementBox(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$j.wrapper
+    className: styles$1.wrapper
   }, children);
 }
 
@@ -3915,7 +488,7 @@ function RemotePeakData(_ref) {
   }
 }
 
-var styles$k = {"container":"Waveform-module_container__1Dxdv","clickMask":"Waveform-module_clickMask__3LYAT","menuBar":"Waveform-module_menuBar__342n-","timeDisplay":"Waveform-module_timeDisplay__1v4Tl","playControl":"Waveform-module_playControl__QWTsJ","waveWrapper":"Waveform-module_waveWrapper__3gamc"};
+var styles$2 = {"container":"Waveform-module_container__1Dxdv","clickMask":"Waveform-module_clickMask__3LYAT","menuBar":"Waveform-module_menuBar__342n-","timeDisplay":"Waveform-module_timeDisplay__1v4Tl","playControl":"Waveform-module_playControl__QWTsJ","waveWrapper":"Waveform-module_waveWrapper__3gamc"};
 
 var waveColor = '#828282ed';
 var waveColorInverted = 'rgba(0, 0, 0, 0.5)';
@@ -3953,7 +526,7 @@ function Waveform(props) {
       var measureRef = _ref.measureRef;
       return /*#__PURE__*/React.createElement("div", {
         ref: measureRef,
-        className: styles$k.waveWrapper
+        className: styles$2.waveWrapper
       }, /*#__PURE__*/React.createElement(RemotePeakData, {
         audioFile: props.audioFile
       }, function (peakData) {
@@ -3978,7 +551,7 @@ function Waveform(props) {
   }
 }
 
-var styles$l = {"timeDisplay":"TimeDisplay-module_timeDisplay__2UwqM","time":"TimeDisplay-module_time__li1ZU"};
+var styles$3 = {"timeDisplay":"TimeDisplay-module_timeDisplay__2UwqM","time":"TimeDisplay-module_time__li1ZU"};
 
 var unknownTimePlaceholder = '-:--';
 function formatTime(value) {
@@ -4004,18 +577,18 @@ function pad(value) {
 function TimeDisplay(props) {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": 'time-display',
-    className: styles$l.timeDisplay
+    className: styles$3.timeDisplay
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$l.time
+    className: styles$3.time
   }, formatTime(props.currentTime)), "/", /*#__PURE__*/React.createElement("span", {
-    className: styles$l.time
+    className: styles$3.time
   }, formatTime(props.duration)));
 }
 
-var styles$m = {"button":"MenuBarButton-module_button__2sY0F ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","icon":"MenuBarButton-module_icon__2h8__","subMenuItemAnnotation":"MenuBarButton-module_subMenuItemAnnotation__32Quc","subMenu":"MenuBarButton-module_subMenu__f-E-X","subMenuExpanded":"MenuBarButton-module_subMenuExpanded__2UvkJ","subMenuItem":"MenuBarButton-module_subMenuItem__1pyn_","subMenuItemIcon":"MenuBarButton-module_subMenuItemIcon__3iaB-","subMenuItemButton":"MenuBarButton-module_subMenuItemButton__2QnUz utils-module_unstyledButton__3rgne"};
+var styles$4 = {"button":"MenuBarButton-module_button__2sY0F ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","icon":"MenuBarButton-module_icon__2h8__","subMenuItemAnnotation":"MenuBarButton-module_subMenuItemAnnotation__32Quc","subMenu":"MenuBarButton-module_subMenu__f-E-X","subMenuExpanded":"MenuBarButton-module_subMenuExpanded__2UvkJ","subMenuItem":"MenuBarButton-module_subMenuItem__1pyn_","subMenuItemIcon":"MenuBarButton-module_subMenuItemIcon__3iaB-","subMenuItemButton":"MenuBarButton-module_subMenuItemButton__2QnUz utils-module_unstyledButton__3rgne"};
 
-function _extends$5() {
-  _extends$5 = Object.assign || function (target) {
+function _extends() {
+  _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4029,13 +602,13 @@ function _extends$5() {
     return target;
   };
 
-  return _extends$5.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 var CheckIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "24",
@@ -4085,18 +658,18 @@ function MenuBarButton(props) {
     }
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(_defineProperty({}, styles$m.subMenuExpanded, subMenuExpanded), styles$m.wrapper),
+    className: classNames(_defineProperty({}, styles$4.subMenuExpanded, subMenuExpanded), styles$4.wrapper),
     onMouseEnter: openMenu,
     onMouseLeave: closeMenu,
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown
   }, /*#__PURE__*/React.createElement("button", {
-    className: styles$m.button,
+    className: styles$4.button,
     title: props.title,
     onClick: onButtonClick
   }, React.createElement(props.icon, {
-    className: styles$m.icon
+    className: styles$4.icon
   })), renderSubMenu(props, closeMenu));
 }
 MenuBarButton.defaultProps = {
@@ -4106,7 +679,7 @@ MenuBarButton.defaultProps = {
 function renderSubMenu(props, closeMenu) {
   if (props.subMenuItems.length > 0) {
     return /*#__PURE__*/React.createElement("ul", {
-      className: styles$m.subMenu,
+      className: styles$4.subMenu,
       role: "menu"
     }, renderSubMenuItems(props, closeMenu));
   }
@@ -4115,10 +688,10 @@ function renderSubMenu(props, closeMenu) {
 function renderSubMenuItems(props, closeMenu) {
   return props.subMenuItems.map(function (item) {
     return /*#__PURE__*/React.createElement("li", {
-      className: styles$m.subMenuItem,
+      className: styles$4.subMenuItem,
       key: item.value
     }, /*#__PURE__*/React.createElement("button", {
-      className: styles$m.subMenuItemButton,
+      className: styles$4.subMenuItemButton,
       role: "menuitemradio",
       "aria-checked": item.active,
       onClick: subMenuItemClickHandler(props, item.value, closeMenu)
@@ -4129,7 +702,7 @@ function renderSubMenuItems(props, closeMenu) {
 function renderSubMenuItemIcon(item) {
   if (item.active) {
     return /*#__PURE__*/React.createElement(CheckIcon, {
-      className: styles$m.subMenuItemIcon
+      className: styles$4.subMenuItemIcon
     });
   }
 }
@@ -4137,7 +710,7 @@ function renderSubMenuItemIcon(item) {
 function renderSubMenuItemAnnotation(props, item) {
   if (item.annotation) {
     return /*#__PURE__*/React.createElement("span", {
-      className: styles$m.subMenuItemAnnotation
+      className: styles$4.subMenuItemAnnotation
     }, item.annotation);
   }
 }
@@ -4153,8 +726,8 @@ function subMenuItemClickHandler(props, value, closeMenu) {
   };
 }
 
-function _extends$6() {
-  _extends$6 = Object.assign || function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4168,13 +741,13 @@ function _extends$6() {
     return target;
   };
 
-  return _extends$6.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 var TextTracksIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-3 -3 30 30"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -4201,10 +774,10 @@ TextTracksMenu.defaultProps = {
   items: []
 };
 
-var styles$n = {"container":"ControlBar-module_container__1GH64","transparent":"ControlBar-module_transparent__eS4af","lightBackground":"ControlBar-module_lightBackground__3-tGf","darkBackground":"ControlBar-module_darkBackground__31Wv7","controlBarContainer":"ControlBar-module_controlBarContainer__1cxRO","inset":"ControlBar-module_inset__JvBh9","button":"ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","playControl":"ControlBar-module_playControl__Vg5et ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne"};
+var styles$5 = {"container":"ControlBar-module_container__1GH64","transparent":"ControlBar-module_transparent__eS4af","lightBackground":"ControlBar-module_lightBackground__3-tGf","darkBackground":"ControlBar-module_darkBackground__31Wv7","controlBarContainer":"ControlBar-module_controlBarContainer__1cxRO","inset":"ControlBar-module_inset__JvBh9","button":"ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne","playControl":"ControlBar-module_playControl__Vg5et ControlBar-module_button___4aXE utils-module_unstyledButton__3rgne"};
 
-function _extends$7() {
-  _extends$7 = Object.assign || function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4218,13 +791,13 @@ function _extends$7() {
     return target;
   };
 
-  return _extends$7.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 var PlayIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -4232,8 +805,8 @@ var PlayIcon = (function (_ref) {
   }));
 });
 
-function _extends$8() {
-  _extends$8 = Object.assign || function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4247,13 +820,13 @@ function _extends$8() {
     return target;
   };
 
-  return _extends$8.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 var PauseIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -4266,7 +839,7 @@ function PlayPauseButton(props) {
       t = _useI18n.t;
 
   return /*#__PURE__*/React.createElement("button", {
-    className: styles$n.playControl,
+    className: styles$5.playControl,
     "aria-label": t(props.isPlaying ? 'pause' : 'play', {
       scope: 'pageflow_scrolled.public.player_controls'
     }),
@@ -4283,11 +856,11 @@ function PlayPauseButton(props) {
 function pausePlayIcon(props) {
   if (props.isPlaying) {
     return /*#__PURE__*/React.createElement(PauseIcon, {
-      className: styles$n.controlsIcon
+      className: styles$5.controlsIcon
     });
   } else {
     return /*#__PURE__*/React.createElement(PlayIcon, {
-      className: styles$n.controlsIcon
+      className: styles$5.controlsIcon
     });
   }
 }
@@ -4301,9 +874,9 @@ function WaveformPlayerControls(props) {
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
     "data-testid": "waveform-controls",
-    className: classNames(styles$k.container)
+    className: classNames(styles$2.container)
   }, props.children, /*#__PURE__*/React.createElement("div", {
-    className: styles$k.clickMask,
+    className: styles$2.clickMask,
     onClick: props.onPlayerClick
   }), /*#__PURE__*/React.createElement(Waveform, {
     audioFile: props.file,
@@ -4316,13 +889,13 @@ function WaveformPlayerControls(props) {
     pause: props.pause,
     mediaElementId: props.mediaElementId
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$k.playControl
+    className: styles$2.playControl
   }, /*#__PURE__*/React.createElement(PlayPauseButton, {
     isPlaying: props.isPlaying,
     play: props.play,
     pause: props.pause
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$k.menuBar, darkBackground ? styles$n.darkBackground : styles$n.lightBackground, _defineProperty({}, styles$n.inset, !props.standAlone))
+    className: classNames(styles$2.menuBar, darkBackground ? styles$5.darkBackground : styles$5.lightBackground, _defineProperty({}, styles$5.inset, !props.standAlone))
   }, /*#__PURE__*/React.createElement(TimeDisplay, {
     currentTime: props.currentTime,
     duration: props.duration
@@ -4332,14 +905,14 @@ function WaveformPlayerControls(props) {
   })));
 }
 
-var styles$o = {"container":"BigPlayPauseButton-module_container__19sKj","pointerCursor":"BigPlayPauseButton-module_pointerCursor__2A55P","hideCursor":"BigPlayPauseButton-module_hideCursor__2Hyys","button":"BigPlayPauseButton-module_button__10g4Q utils-module_unstyledButton__3rgne","hidden":"BigPlayPauseButton-module_hidden__1KUzr","animated":"BigPlayPauseButton-module_animated__1MMNq","fadeOut":"BigPlayPauseButton-module_fadeOut__2vcA_","fadeIn":"BigPlayPauseButton-module_fadeIn__1Ge1-"};
+var styles$6 = {"container":"BigPlayPauseButton-module_container__19sKj","pointerCursor":"BigPlayPauseButton-module_pointerCursor__2A55P","hideCursor":"BigPlayPauseButton-module_hideCursor__2Hyys","button":"BigPlayPauseButton-module_button__10g4Q utils-module_unstyledButton__3rgne","hidden":"BigPlayPauseButton-module_hidden__1KUzr","animated":"BigPlayPauseButton-module_animated__1MMNq","fadeOut":"BigPlayPauseButton-module_fadeOut__2vcA_","fadeIn":"BigPlayPauseButton-module_fadeIn__1Ge1-"};
 
 function BigPlayPauseButton(props) {
   var _classNames, _classNames2;
 
-  var c = classNames(styles$o.button, (_classNames = {}, _defineProperty(_classNames, styles$o.hidden, props.hidden || props.lastControlledVia === 'playPauseButton'), _defineProperty(_classNames, styles$o.fadeIn, props.unplayed), _defineProperty(_classNames, styles$o.animated, !props.unplayed), _classNames));
+  var c = classNames(styles$6.button, (_classNames = {}, _defineProperty(_classNames, styles$6.hidden, props.hidden || props.lastControlledVia === 'playPauseButton'), _defineProperty(_classNames, styles$6.fadeIn, props.unplayed), _defineProperty(_classNames, styles$6.animated, !props.unplayed), _classNames));
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$o.container, (_classNames2 = {}, _defineProperty(_classNames2, styles$o.hideCursor, props.hideCursor), _defineProperty(_classNames2, styles$o.pointerCursor, !!props.onClick), _classNames2)),
+    className: classNames(styles$6.container, (_classNames2 = {}, _defineProperty(_classNames2, styles$6.hideCursor, props.hideCursor), _defineProperty(_classNames2, styles$6.pointerCursor, !!props.onClick), _classNames2)),
     onClick: props.onClick
   }, /*#__PURE__*/React.createElement("div", {
     key: props.isPlaying,
@@ -4355,7 +928,7 @@ function pausePlayIcon$1(props) {
   }
 }
 
-var styles$p = {"container":"ProgressIndicators-module_container__1QiQJ","wrapper":"ProgressIndicators-module_wrapper__2PCVv","draggable":"ProgressIndicators-module_draggable__1iAE8","bars":"ProgressIndicators-module_bars__2-ddd","progressBar":"ProgressIndicators-module_progressBar__2PYn-","background":"ProgressIndicators-module_background__-x5f_ ProgressIndicators-module_progressBar__2PYn-","loadingProgressBar":"ProgressIndicators-module_loadingProgressBar__YD2GH ProgressIndicators-module_progressBar__2PYn-","playProgressBar":"ProgressIndicators-module_playProgressBar__3mCSX ProgressIndicators-module_progressBar__2PYn-","sliderHandle":"ProgressIndicators-module_sliderHandle__3ArIf","dragging":"ProgressIndicators-module_dragging__3yY3t"};
+var styles$7 = {"container":"ProgressIndicators-module_container__1QiQJ","wrapper":"ProgressIndicators-module_wrapper__2PCVv","draggable":"ProgressIndicators-module_draggable__1iAE8","bars":"ProgressIndicators-module_bars__2-ddd","progressBar":"ProgressIndicators-module_progressBar__2PYn-","background":"ProgressIndicators-module_background__-x5f_ ProgressIndicators-module_progressBar__2PYn-","loadingProgressBar":"ProgressIndicators-module_loadingProgressBar__YD2GH ProgressIndicators-module_progressBar__2PYn-","playProgressBar":"ProgressIndicators-module_playProgressBar__3mCSX ProgressIndicators-module_progressBar__2PYn-","sliderHandle":"ProgressIndicators-module_sliderHandle__3ArIf","dragging":"ProgressIndicators-module_dragging__3yY3t"};
 
 function ProgressIndicators(_ref) {
   var currentTime = _ref.currentTime,
@@ -4403,7 +976,7 @@ function ProgressIndicators(_ref) {
   var loadProgress = duration > 0 ? Math.min(1, bufferedEnd / duration) : 0;
   var playProgress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$p.container, _defineProperty({}, styles$p.dragging, dragging)),
+    className: classNames(styles$7.container, _defineProperty({}, styles$7.dragging, dragging)),
     "aria-label": t('pageflow_scrolled.public.player_controls.progress', {
       currentTime: formatTime(currentTime),
       duration: formatTime(duration)
@@ -4411,7 +984,7 @@ function ProgressIndicators(_ref) {
     onKeyDown: handleKeyDown,
     tabIndex: "0"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$p.wrapper
+    className: styles$7.wrapper
   }, /*#__PURE__*/React.createElement(Measure, {
     client: true,
     onResize: function onResize(contentRect) {
@@ -4424,26 +997,26 @@ function ProgressIndicators(_ref) {
       onDrag: handleDrag,
       onStop: handleStop
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames(styles$p.draggable)
+      className: classNames(styles$7.draggable)
     }, /*#__PURE__*/React.createElement("div", {
       ref: measureRef,
-      className: styles$p.bars
+      className: styles$7.bars
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles$p.background
+      className: styles$7.background
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$p.loadingProgressBar,
+      className: styles$7.loadingProgressBar,
       style: {
         width: toPercent(loadProgress)
       },
       "data-testid": "loading-progress-bar"
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$p.playProgressBar,
+      className: styles$7.playProgressBar,
       style: {
         width: toPercent(playProgress)
       },
       "data-testid": "play-progress-bar"
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$p.sliderHandle,
+      className: styles$7.sliderHandle,
       style: {
         left: toPercent(playProgress)
       },
@@ -4456,8 +1029,8 @@ function toPercent(value) {
   return value > 0 ? value * 100 + '%' : 0;
 }
 
-function _extends$9() {
-  _extends$9 = Object.assign || function (target) {
+function _extends$4() {
+  _extends$4 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4471,13 +1044,13 @@ function _extends$9() {
     return target;
   };
 
-  return _extends$9.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
 var QualityIcon = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "-3 -3 30 30"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -4510,7 +1083,7 @@ function ClassicPlayerControls(props) {
   var darkBackground = useDarkBackground();
   var transparent = !props.standAlone && props.unplayed || props.isPlaying && props.inactive;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$n.container
+    className: styles$5.container
   }, props.children, !props.standAlone && /*#__PURE__*/React.createElement(BigPlayPauseButton, {
     unplayed: props.unplayed,
     isPlaying: props.isPlaying,
@@ -4529,7 +1102,7 @@ function renderControlBar(props, darkBackground, transparent) {
     onBlur: props.onBlur,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave,
-    className: classNames(styles$n.controlBarContainer, darkBackground ? styles$n.darkBackground : styles$n.lightBackground, (_classNames = {}, _defineProperty(_classNames, styles$n.inset, !props.standAlone), _defineProperty(_classNames, styles$n.transparent, transparent), _classNames))
+    className: classNames(styles$5.controlBarContainer, darkBackground ? styles$5.darkBackground : styles$5.lightBackground, (_classNames = {}, _defineProperty(_classNames, styles$5.inset, !props.standAlone), _defineProperty(_classNames, styles$5.transparent, transparent), _classNames))
   }, /*#__PURE__*/React.createElement(PlayPauseButton, {
     isPlaying: props.isPlaying,
     play: props.play,
@@ -4682,7 +1255,7 @@ function AudioPlayerControls(_ref) {
 }
 
 var Viewer = React.lazy(function () {
-  return import('./Viewer-e2290ea0.js');
+  return import('./Viewer-6b05522f.js');
 });
 function Panorama(props) {
   return /*#__PURE__*/React.createElement(Suspense, {
@@ -4690,61 +1263,6 @@ function Panorama(props) {
   }, /*#__PURE__*/React.createElement(Viewer, props));
 }
 
-var styles$q = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
-
-function SectionThumbnail(_ref) {
-  var seed = _ref.seed,
-      props = _objectWithoutProperties(_ref, ["seed"]);
-
-  return /*#__PURE__*/React.createElement(RootProviders, {
-    seed: seed
-  }, /*#__PURE__*/React.createElement(Inner, props));
-}
-
-function Inner(_ref2) {
-  var sectionPermaId = _ref2.sectionPermaId,
-      subscribe = _ref2.subscribe;
-  var dispatch = useEntryStateDispatch();
-  useEffect(function () {
-    return subscribe(dispatch);
-  }, [subscribe, dispatch]);
-  var section = useSection({
-    sectionPermaId: sectionPermaId
-  });
-
-  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(FullscreenHeightProvider, {
-        height: contentRect.client.height && Math.ceil(contentRect.client.height) * 5
-      }, /*#__PURE__*/React.createElement("div", {
-        ref: measureRef,
-        className: styles$q.crop
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles$q.scale
-      }, /*#__PURE__*/React.createElement("div", {
-        className: contentStyles.Content
-      }, /*#__PURE__*/React.createElement(ConnectedSection, {
-        state: "active",
-        section: _objectSpread2(_objectSpread2({}, section), {}, {
-          transition: 'preview'
-        })
-      })))));
-    }));
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles$q.root
-    }, "Not found.");
-  }
-}
-
-Inner.defaultProps = {
-  subscribe: function subscribe() {}
-};
-
 // from https://github.com/n8tb1t/use-scroll-position
 var isBrowser = typeof window !== "undefined";
 
@@ -4822,11 +1340,11 @@ var EditableInlineText = withInlineEditingAlternative('EditableInlineText', func
       _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue;
   return /*#__PURE__*/React.createElement("span", {
-    className: classNames(frontendStyles.root, _defineProperty({}, frontendStyles.manualHyphens, hyphens === 'manual'))
+    className: classNames(frontendStyles.root, frontendStyles["hyphens-".concat(hyphens)])
   }, value ? (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : (_value$$children$ = _value$.children[0]) === null || _value$$children$ === void 0 ? void 0 : _value$$children$.text : defaultValue);
 });
 
-var styles$r = {"container":"FitViewport-module_container__-awVj","content":"FitViewport-module_content__1_K5a","inner":"FitViewport-module_inner__3psd1","opaque":"FitViewport-module_opaque__3EE3o"};
+var styles$8 = {"container":"FitViewport-module_container__-awVj","content":"FitViewport-module_content__1_K5a","inner":"FitViewport-module_inner__3psd1","opaque":"FitViewport-module_opaque__3EE3o"};
 
 var AspectRatioContext = React.createContext();
 /**
@@ -4859,7 +1377,10 @@ function FitViewport(_ref) {
       aspectRatio = _ref.aspectRatio,
       opaque = _ref.opaque,
       children = _ref.children;
-  var height = useContext(HeightContext);
+
+  var _useFullscreenDimensi = useFullscreenDimensions(),
+      height = _useFullscreenDimensi.height;
+
   if (!file && !aspectRatio) return children;
   aspectRatio = aspectRatio || file.height / file.width;
   var maxWidthCSS;
@@ -4873,7 +1394,7 @@ function FitViewport(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$r.container, _defineProperty({}, styles$r.opaque, opaque)),
+    className: classNames(styles$8.container, _defineProperty({}, styles$8.opaque, opaque)),
     style: {
       maxWidth: maxWidthCSS
     }
@@ -4891,17 +1412,17 @@ FitViewport.Content = function FitViewportContent(_ref2) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$r.content
+    className: styles$8.content
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       paddingTop: arPaddingTop + '%'
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$r.inner
+    className: styles$8.inner
   }, children));
 };
 
-var styles$s = {"container":"Tooltip-module_container__3V63U","bubble":"Tooltip-module_bubble__FIL1C scope-tooltip","fixed":"Tooltip-module_fixed__3NGyG","openOnHover":"Tooltip-module_openOnHover__1EeI5","fadeIn":"Tooltip-module_fadeIn__3g9QH","inner":"Tooltip-module_inner__E2hsp","highlight":"Tooltip-module_highlight__2NpuQ","arrow":"Tooltip-module_arrow__3LxXo"};
+var styles$9 = {"container":"Tooltip-module_container__3V63U","bubble":"Tooltip-module_bubble__FIL1C scope-tooltip","fixed":"Tooltip-module_fixed__3NGyG","openOnHover":"Tooltip-module_openOnHover__1EeI5","fadeIn":"Tooltip-module_fadeIn__3g9QH","inner":"Tooltip-module_inner__E2hsp","highlight":"Tooltip-module_highlight__2NpuQ","arrow":"Tooltip-module_arrow__3LxXo"};
 
 function Tooltip(_ref) {
   var _classNames;
@@ -4916,7 +1437,7 @@ function Tooltip(_ref) {
       verticalOffset = _ref.verticalOffset,
       horizontalOffset = _ref.horizontalOffset;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$s.container, (_classNames = {}, _defineProperty(_classNames, styles$s.openOnHover, openOnHover), _defineProperty(_classNames, styles$s.fixed, fixed), _classNames)),
+    className: classNames(styles$9.container, (_classNames = {}, _defineProperty(_classNames, styles$9.openOnHover, openOnHover), _defineProperty(_classNames, styles$9.fixed, fixed), _classNames)),
     onClick: fixFocusHandlingSafari
   }, children, /*#__PURE__*/React.createElement(Bubble, {
     className: bubbleClassName,
@@ -4943,14 +1464,14 @@ function Bubble(_ref2) {
   return /*#__PURE__*/React.createElement("div", {
     style: inlineStyle,
     tabIndex: "-1",
-    className: classNames(className, styles$s.bubble, _defineProperty({}, styles$s.highlight, highlight))
+    className: classNames(className, styles$9.bubble, _defineProperty({}, styles$9.highlight, highlight))
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       left: arrowPos
     },
-    className: styles$s.arrow
+    className: styles$9.arrow
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$s.inner
+    className: styles$9.inner
   }, children));
 } // Safari does not focus buttons after they are clicked [1]. Focus
 // manually to ensure `focus-within` selector that opens the tooltip
@@ -4979,8 +1500,8 @@ Tooltip.defaultProps = {
   horizontalOffset: 0
 };
 
-function _extends$a() {
-  _extends$a = Object.assign || function (target) {
+function _extends$5() {
+  _extends$5 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4994,14 +1515,14 @@ function _extends$a() {
     return target;
   };
 
-  return _extends$a.apply(this, arguments);
+  return _extends$5.apply(this, arguments);
 }
 var muted = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "volume-mute",
@@ -5013,8 +1534,8 @@ var muted = (function (_ref) {
   }));
 });
 
-function _extends$b() {
-  _extends$b = Object.assign || function (target) {
+function _extends$6() {
+  _extends$6 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -5028,13 +1549,13 @@ function _extends$b() {
     return target;
   };
 
-  return _extends$b.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 var share = (function (_ref) {
   var _ref$styles = _ref.styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "5 5 84 84"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -5042,8 +1563,8 @@ var share = (function (_ref) {
   }));
 });
 
-function _extends$c() {
-  _extends$c = Object.assign || function (target) {
+function _extends$7() {
+  _extends$7 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -5057,14 +1578,14 @@ function _extends$c() {
     return target;
   };
 
-  return _extends$c.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
 var unmuted = (function (_ref) {
   var _ref$styles = _ref.styles,
       styles = _ref$styles === void 0 ? {} : _ref$styles,
       props = _objectWithoutProperties(_ref, ["styles"]);
 
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     "aria-hidden": "true",
     "data-prefix": "fas",
     "data-icon": "volume-mute",
@@ -5077,6 +1598,7 @@ var unmuted = (function (_ref) {
 });
 
 var icons = {
+  expand: ArrowRightIcon,
   information: information,
   muted: muted,
   share: share,
@@ -5086,7 +1608,7 @@ var icons = {
  * Render an SVG icon that can be customized in themes.
  *
  * @param {Object} props
- * @param {string} props.name - Either: information, muted, share or unmuted.
+ * @param {string} props.name - Either: expand, information, muted, share or unmuted.
  */
 
 function ThemeIcon(_ref) {
@@ -5125,16 +1647,17 @@ function presence(html) {
 }
 
 var utils = {
+  camelize: camelize,
   isBlank: isBlank,
   presence: presence
 };
 
 var editMode = typeof window !== 'undefined' && window.location.pathname.indexOf('/editor/entries') === 0;
-var withShadowClassName = styles$e.withShadow;
+var withShadowClassName = styles$a.withShadow;
 
 global.pageflowScrolledRender = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(seed) {
-    return regenerator.wrap(function _callee$(_context) {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(seed) {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
@@ -5216,4 +1739,4 @@ function Root(_ref2) {
   }, /*#__PURE__*/React.createElement(Entry, null));
 }
 
-export { Atmo, AtmoContext, AtmoProvider, AudioPlayer, AudioPlayerControls, ClassicPlayerControls, ContentElementBox, EditableInlineText, Entry, Figure, FitViewport, Image, MediaInteractionTracking, MediaPlayer, MediaPlayerControls, Panorama, PhonePlatformProvider, PlayerControls, Root, RootProviders, SectionThumbnail, ThemeIcon, OptIn as ThirdPartyOptIn, OptOutInfo as ThirdPartyOptOutInfo, Tooltip, VideoPlayer, VideoPlayerControls, WaveformPlayerControls, Widget, getAvailableTransitionNames, getInitialPlayerState, getTransitionNames, playerStateReducer, processSources, registerVendors as registerConsentVendors, registerTemplateWidgetType, textColorForBackgroundColor, useAtmo, useAudioFocus, useCurrentChapter, useDarkBackground, useMediaMuted, useOnUnmuteMedia, usePlayerState, usePortraitOrientation, useScrollPosition, utils, withShadowClassName };
+export { AudioPlayerControls, ClassicPlayerControls, ContentElementBox, EditableInlineText, Entry, Figure, FitViewport, MediaInteractionTracking, MediaPlayerControls, Panorama, PlayerControls, Root, ThemeIcon, Tooltip, VideoPlayerControls, WaveformPlayerControls, Widget, registerTemplateWidgetType, textColorForBackgroundColor, useScrollPosition, utils, withShadowClassName };