pageflow 16.1.0 → 17.0.0

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

@@ -1,14 +1,15 @@
 import regeneratorRuntime from 'regenerator-runtime';
 import { events, browser, documentHiddenState, PlayerSourceIDMap, media, MultiPlayer, settings, features, consent } from 'pageflow/frontend';
 import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useReducer, useCallback, useLayoutEffect } from 'react';
-import { _ as _slicedToArray, a as _objectSpread2, b as _defineProperty, u as useI18n, c as useEntryMetadata, d as useNestedFiles, e as _objectWithoutProperties, f as useFile, g as useTheme, h as useSectionContentElements, i as useAdditionalSeedData, j as useSectionsWithChapter, k as useContentElementConsentVendor, l as _toConsumableArray, E as EntryStateProvider, L as LocaleProvider, m as useChapter, n as useEntryStateDispatch, o as useSection } from './i18n-ddd92820.js';
+import { _ as _slicedToArray, a as _objectSpread2, b as _defineProperty, u as useI18n, c as useEntryMetadata, d as useNestedFiles, e as _objectWithoutProperties, f as useWidget, g as useTheme, h as useFileWithInlineRights, i as useFile, j as useSectionContentElements, k as useAdditionalSeedData, l as useSectionsWithChapter, m as useContentElementConsentVendor, n as _toConsumableArray, E as EntryStateProvider, L as LocaleProvider, o as useChapter, p as useEntryStateDispatch, q as useSection } from './i18n-71c39823.js';
 import classNames from 'classnames';
-import { u as useDelayedBoolean, a as useContentElementEditorState } from './useContentElementEditorState-63045393.js';
+import { u as useDelayedBoolean, a as useContentElementEditorState } from './useContentElementEditorState-245f1986.js';
 import { _ as _createClass, a as _classCallCheck, b as _inherits, c as _createSuper } from './createSuper-d0f30da3.js';
 import BackboneEvents from 'backbone-events-standalone';
 import I18n from 'i18n-js';
-import { u as useBrowserFeature, P as PhonePlatformContext, B as BrowserFeaturesProvider } from './PhonePlatformContext-10a1d600.js';
+import stripTags from 'striptags';
 import Measure from 'react-measure';
+import { u as useBrowserFeature, P as PhonePlatformContext, B as BrowserFeaturesProvider } from './PhonePlatformContext-b28d991a.js';
 
 var regenerator = regeneratorRuntime;
 
@@ -1633,11 +1634,8 @@ function processSources(audioFile) {
   return sources;
 }
 
-function SectionAtmo(props) {
-  var audioFile = useFile({
-    collectionName: 'audioFiles',
-    permaId: props.audioFilePermaId
-  });
+function SectionAtmo(_ref) {
+  var audioFile = _ref.audioFile;
   var lastAudioFile = usePrevious(audioFile);
   var atmo = useAtmo();
   var processAtmo = useCallback(function () {
@@ -1650,10 +1648,10 @@ function SectionAtmo(props) {
     if (atmo) {
       atmo.updateAtmo({
         sources: sources,
-        audioFilePermaId: props.audioFilePermaId
+        audioFilePermaId: audioFile === null || audioFile === void 0 ? void 0 : audioFile.permaId
       });
     }
-  }, [atmo, audioFile, props.audioFilePermaId]);
+  }, [atmo, audioFile]);
   useSectionLifecycle({
     onActivate: function onActivate() {
       processAtmo();
@@ -1684,6 +1682,18 @@ function className(props, forcePadding) {
   return classNames(styles$3.Foreground, props.transitionStyles.foreground, props.transitionStyles["foreground-".concat(props.state)], _defineProperty({}, styles$3.paddingBottom, props.paddingBottom || forcePadding), styles$3["".concat(props.heightMode, "Height")]);
 }
 
+function isBlank(html) {
+  return !!stripTags(html).match(/^\s*$/);
+}
+function presence(html) {
+  return isBlank(html) ? null : html;
+}
+function isBlankEditableTextValue(value) {
+  var _value$0$children$;
+
+  return !value || value.length === 0 || value.length === 1 && value[0].children.length <= 1 && !((_value$0$children$ = value[0].children[0]) === null || _value$0$children$ === void 0 ? void 0 : _value$0$children$.text);
+}
+
 /**
  * Register new types of content elements.
  * @name frontend_contentElementTypes
@@ -1821,6 +1831,117 @@ var api = {
   widgetTypes: new WidgetTypeRegistry()
 };
 
+function Widget(_ref) {
+  var role = _ref.role,
+      props = _ref.props,
+      children = _ref.children;
+  var widget = useWidget({
+    role: role
+  });
+
+  if (!widget) {
+    return null;
+  }
+
+  var Component = api.widgetTypes.getComponent(widget.typeName);
+  return /*#__PURE__*/React.createElement(Component, Object.assign({
+    configuration: widget.configuration
+  }, props, {
+    children: children
+  }));
+}
+
+var styles$4 = {"list":"InlineFileRights-module_list__2OuO5"};
+
+function InlineFileRights(_ref) {
+  var _ref$items = _ref.items,
+      items = _ref$items === void 0 ? [] : _ref$items,
+      _ref$context = _ref.context,
+      context = _ref$context === void 0 ? 'standAlone' : _ref$context,
+      playerControlsTransparent = _ref.playerControlsTransparent,
+      playerControlsStandAlone = _ref.playerControlsStandAlone;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var filteredItems = items.filter(function (item) {
+    return item.file && item.file.inlineRights && !isBlank(item.file.rights);
+  });
+
+  if (!filteredItems.length) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Widget, {
+    role: "inlineFileRights",
+    props: {
+      context: context,
+      playerControlsTransparent: playerControlsTransparent,
+      playerControlsStandAlone: playerControlsStandAlone
+    }
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: styles$4.list
+  }, filteredItems.map(function (_ref2) {
+    var label = _ref2.label,
+        file = _ref2.file;
+    return /*#__PURE__*/React.createElement("li", {
+      key: "".concat(label, "-").concat(file.id)
+    }, label && /*#__PURE__*/React.createElement("span", null, t(label, {
+      scope: 'pageflow_scrolled.public.inline_file_rights_labels'
+    }), ": "), renderRights(file), renderLicense(file));
+  })));
+}
+
+function renderRights(file) {
+  if (isBlank(file.configuration.source_url)) {
+    return file.rights;
+  } else {
+    return /*#__PURE__*/React.createElement("a", {
+      href: file.configuration.source_url,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, file.rights);
+  }
+}
+
+function renderLicense(file) {
+  if (!file.license) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, ' ', "(", /*#__PURE__*/React.createElement("a", {
+    href: file.license.url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, file.license.name), ")");
+}
+
+var styles$5 = {"fade-duration":"0.5s","wrapper":"SectionInlineFileRights-module_wrapper__1l6rr","fade":"SectionInlineFileRights-module_fade__1Snfk","inactive":"SectionInlineFileRights-module_inactive__1VpQh"};
+
+function SectionInlineFileRights(_ref) {
+  var _section$nextSection, _section$nextSection$, _classNames;
+
+  var section = _ref.section,
+      state = _ref.state,
+      backdrop = _ref.backdrop,
+      atmoAudioFile = _ref.atmoAudioFile;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$5.wrapper, (_classNames = {}, _defineProperty(_classNames, styles$5.fade, (_section$nextSection = section.nextSection) === null || _section$nextSection === void 0 ? void 0 : (_section$nextSection$ = _section$nextSection.transition) === null || _section$nextSection$ === void 0 ? void 0 : _section$nextSection$.startsWith('fade')), _defineProperty(_classNames, styles$5.inactive, state !== 'active'), _classNames))
+  }, /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "section",
+    items: [{
+      label: 'image',
+      file: backdrop.image
+    }, {
+      label: 'video',
+      file: backdrop.video
+    }, {
+      label: 'atmo',
+      file: atmoAudioFile
+    }]
+  }));
+}
+
 // For reasons that are beyond me, Storybook's Webpack build fails
 // with a "JavaScript heap out of memory" error if this import
 // expression lives in inlineEditing/index.js directly. I originally
@@ -1829,7 +1950,7 @@ var api = {
 // file with an empty one, but found out that extracting the import
 // to a separate file apparently is enough.
 function importComponents() {
-  return import('./components-4a09bfa3.js');
+  return import('./components-24363f97.js');
 }
 
 var components = {};
@@ -1947,7 +2068,7 @@ function widthName(width) {
   return Object.keys(widths)[(width || 0) + 3];
 }
 
-var styles$4 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
+var styles$6 = {"wrapper":"ContentElementMargin-module_wrapper__20kIk"};
 
 function ContentElementMargin(_ref) {
   var width = _ref.width,
@@ -1958,11 +2079,11 @@ function ContentElementMargin(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$4.wrapper
+    className: styles$6.wrapper
   }, children);
 }
 
-var styles$5 = {"missing":"ContentElement-module_missing__2_1j9"};
+var styles$7 = {"missing":"ContentElement-module_missing__2_1j9"};
 
 var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ContentElementErrorBoundary, _React$Component);
@@ -1986,7 +2107,7 @@ var ContentElementErrorBoundary = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       if (this.state.hasError) {
         return /*#__PURE__*/React.createElement("div", {
-          className: styles$5.missing
+          className: styles$7.missing
         }, "Error rendering element of type \"", this.props.type, "\"");
       }
 
@@ -2026,7 +2147,7 @@ var ContentElement = withInlineEditingDecorator('ContentElementDecorator', funct
     })))));
   } else {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$5.missing
+      className: styles$7.missing
     }, "Element of unknown type \"", props.type, "\"");
   }
 });
@@ -2034,9 +2155,30 @@ ContentElement.defaultProps = {
   itemProps: {}
 };
 
+var styles$8 = {"wrapper":"ContentElementScrollSpace-module_wrapper__2ZBwZ","inner":"ContentElementScrollSpace-module_inner__1FBgh"};
+
+function ContentElementScrollSpace(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$8.wrapper
+  }, /*#__PURE__*/React.createElement(Measure, {
+    bounds: true
+  }, function (_ref2) {
+    var measureRef = _ref2.measureRef,
+        contentRect = _ref2.contentRect;
+    return /*#__PURE__*/React.createElement("div", {
+      ref: measureRef,
+      className: styles$8.inner,
+      style: {
+        '--height': contentRect.bounds.height / 2
+      }
+    }, children);
+  }));
+}
+
 function ContentElements(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.items.map(function (item, index) {
-    return props.children(item, /*#__PURE__*/React.createElement(MemoizedContentElement, {
+    return props.children(item, renderScrollSpace(item, /*#__PURE__*/React.createElement(MemoizedContentElement, {
       key: item.id,
       id: item.id,
       permaId: item.permaId,
@@ -2047,7 +2189,7 @@ function ContentElements(props) {
       itemProps: item.props,
       customMargin: props.customMargin,
       sectionProps: props.sectionProps
-    }), index);
+    })), index);
   }));
 }
 var MemoizedContentElement = React.memo(ContentElement, function (prevProps, nextProps) {
@@ -2059,50 +2201,59 @@ ContentElements.defaultProps = {
   }
 };
 
+function renderScrollSpace(item, children) {
+  if (!item.standAlone) {
+    return children;
+  }
+
+  return /*#__PURE__*/React.createElement(ContentElementScrollSpace, {
+    key: item.id,
+    children: children
+  });
+}
+
 function useMediaQuery(query) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    active: true
+  },
+      active = _ref.active;
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       doesMatch = _useState2[0],
-      onSetDoesMatch = _useState2[1];
+      setDoesMatch = _useState2[1];
 
   useEffect(function () {
-    var onUpdateMatch = function onUpdateMatch(_ref) {
-      var matches = _ref.matches;
-      onSetDoesMatch(matches);
+    if (!active) {
+      return;
+    }
+
+    var onUpdateMatch = function onUpdateMatch(_ref2) {
+      var matches = _ref2.matches;
+      setDoesMatch(matches);
     };
 
     var matcher = window.matchMedia(query);
-    var isModern = ('addEventListener' in matcher);
-
-    if (isModern) {
-      matcher.addEventListener('change', onUpdateMatch);
-    } else {
-      matcher.addListener(onUpdateMatch);
-    }
-
+    matcher.addEventListener('change', onUpdateMatch);
     onUpdateMatch(matcher);
     return function () {
-      if (isModern) {
-        matcher.removeEventListener('change', onUpdateMatch);
-      } else {
-        matcher.removeListener(onUpdateMatch);
-      }
+      matcher.removeEventListener('change', onUpdateMatch);
     };
-  }, [query, onSetDoesMatch]);
-  return doesMatch;
+  }, [query, setDoesMatch, active]);
+  return active && doesMatch;
 }
 
-var styles$6 = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","box":"TwoColumn-module_box__1Nils","inline":"TwoColumn-module_inline__1fPfM","width-lg":"TwoColumn-module_width-lg__2MD35","width-xl":"TwoColumn-module_width-xl__3Bxet","width-full":"TwoColumn-module_width-full__1QWYO","restrict-xxs":"TwoColumn-module_restrict-xxs__6il-H","restrict-xs":"TwoColumn-module_restrict-xs__AOezq","restrict-sm":"TwoColumn-module_restrict-sm__2rKty","customMargin":"TwoColumn-module_customMargin__o0uxH","right":"TwoColumn-module_right__Fr52a","sticky":"TwoColumn-module_sticky__4LCDO"};
+var styles$9 = {"root":"TwoColumn-module_root__37EqL","group":"TwoColumn-module_group__3Hg2y","group-full":"TwoColumn-module_group-full__2OT4o","box":"TwoColumn-module_box__1Nils","inline":"TwoColumn-module_inline__1fPfM","width-lg":"TwoColumn-module_width-lg__2MD35","width-xl":"TwoColumn-module_width-xl__3Bxet","width-full":"TwoColumn-module_width-full__1QWYO","restrict-xxs":"TwoColumn-module_restrict-xxs__6il-H","restrict-xs":"TwoColumn-module_restrict-xs__AOezq","restrict-sm":"TwoColumn-module_restrict-sm__2rKty","customMargin":"TwoColumn-module_customMargin__o0uxH","right":"TwoColumn-module_right__Fr52a","sticky":"TwoColumn-module_sticky__4LCDO"};
 
 function TwoColumn(props) {
   var shouldInline = useShouldInlineSticky();
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$6.root, styles$6[props.align])
+    className: classNames(styles$9.root, styles$9[props.align])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$6.group),
+    className: classNames(styles$9.group),
     key: props.align
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$6.box, styles$6.inline),
+    className: classNames(styles$9.box, styles$9.inline),
     ref: props.contentAreaRef
   })), renderItems(props, shouldInline), renderPlaceholder(props.placeholder));
 }
@@ -2128,7 +2279,7 @@ function renderItems(props, shouldInline) {
   return groupItemsByPosition(props.items, shouldInline).map(function (group, index) {
     return /*#__PURE__*/React.createElement(TwoColumn.GroupComponent, {
       key: index,
-      className: classNames(styles$6.group, styles$6["group-".concat(widthName(group.width))])
+      className: classNames(styles$9.group, styles$9["group-".concat(widthName(group.width))])
     }, group.boxes.map(function (box, index) {
       return renderItemGroup(props, box, index);
     }));
@@ -2139,7 +2290,7 @@ function renderItemGroup(props, box, key) {
   if (box.items.length) {
     return /*#__PURE__*/React.createElement("div", {
       key: key,
-      className: classNames(styles$6.box, styles$6[box.position], styles$6["width-".concat(widthName(box.width))], _defineProperty({}, styles$6.customMargin, box.customMargin))
+      className: classNames(styles$9.box, styles$9[box.position], styles$9["width-".concat(widthName(box.width))], _defineProperty({}, styles$9.customMargin, box.customMargin))
     }, props.children( /*#__PURE__*/React.createElement(RestrictWidth, {
       width: box.width
     }, /*#__PURE__*/React.createElement(ContentElements, {
@@ -2164,7 +2315,7 @@ function RestrictWidth(_ref) {
     return children;
   } else {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$6["restrict-".concat(widthName(width))]
+      className: styles$9["restrict-".concat(widthName(width))]
     }, children);
   }
 }
@@ -2231,18 +2382,18 @@ function renderPlaceholder(placeholder) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$6.group)
+    className: classNames(styles$9.group)
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$6.box, styles$6.inline)
+    className: classNames(styles$9.box, styles$9.inline)
   }, placeholder));
 }
 
-var styles$7 = {"outer":"Center-module_outer__3Rr0H","customMargin":"Center-module_customMargin__1es3t","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-inline-lg":"Center-module_item-inline-lg__DGjXl","item-inline-xl":"Center-module_item-inline-xl__2McfB","item-inline-full":"Center-module_item-inline-full__l-6kG","clear":"Center-module_clear__jJEap","inner-xxs":"Center-module_inner-xxs__1oroz","inner-xs":"Center-module_inner-xs__3FRT8","inner-sm":"Center-module_inner-sm__-oQ0E","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt","sideBySide":"Center-module_sideBySide__-YsP0","inner-md":"Center-module_inner-md__3dLC3","inner-lg":"Center-module_inner-lg__2GQbs","inner-xl":"Center-module_inner-xl__3dOME"};
+var styles$a = {"outer":"Center-module_outer__3Rr0H","customMargin":"Center-module_customMargin__1es3t","outer-full":"Center-module_outer-full__3dknO","item":"Center-module_item__1KSs3","item-inline-lg":"Center-module_item-inline-lg__DGjXl","item-inline-xl":"Center-module_item-inline-xl__2McfB","item-inline-full":"Center-module_item-inline-full__l-6kG","clear":"Center-module_clear__jJEap","inner-xxs":"Center-module_inner-xxs__1oroz","inner-xs":"Center-module_inner-xs__3FRT8","inner-sm":"Center-module_inner-sm__-oQ0E","inner-left":"Center-module_inner-left__2z9Ea","inner-right":"Center-module_inner-right__KBkVt","sideBySide":"Center-module_sideBySide__-YsP0","inner-md":"Center-module_inner-md__3dLC3","inner-lg":"Center-module_inner-lg__2GQbs","inner-xl":"Center-module_inner-xl__3dOME"};
 
 var floatedPositions = ['left', 'right'];
 function Center(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$7.root)
+    className: classNames(styles$a.root)
   }, /*#__PURE__*/React.createElement("div", {
     ref: props.contentAreaRef
   }), props.items.map(function (item, index) {
@@ -2259,9 +2410,9 @@ function Center(props) {
         key: item.id,
         className: outerClassName(props.items, index)
       }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles$7.item, styles$7["item-".concat(position, "-").concat(width)])
+        className: classNames(styles$a.item, styles$a["item-".concat(position, "-").concat(width)])
       }, props.children( /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles$7["inner-".concat(item.position)], styles$7["inner-".concat(width)], _defineProperty({}, styles$7["sideBySide"], sideBySideFloat(props.items, index)))
+        className: classNames(styles$a["inner-".concat(item.position)], styles$a["inner-".concat(width)], _defineProperty({}, styles$a["sideBySide"], sideBySideFloat(props.items, index)))
       }, child), boxProps(props.items, item, index))));
     });
   }), renderPlaceholder$1(props.placeholder));
@@ -2269,7 +2420,7 @@ function Center(props) {
 
 function outerClassName(items, index) {
   var item = items[index];
-  return classNames(styles$7.outer, styles$7["outer-".concat(widthName(getWidth(item)))], _defineProperty({}, styles$7.customMargin, hasCustomMargin(item)), _defineProperty({}, styles$7.clear, clearItem(items, index)));
+  return classNames(styles$a.outer, styles$a["outer-".concat(widthName(getWidth(item)))], _defineProperty({}, styles$a.customMargin, hasCustomMargin(item)), _defineProperty({}, styles$a.clear, clearItem(items, index)));
 }
 
 function boxProps(items, item, index) {
@@ -2354,9 +2505,9 @@ function renderPlaceholder$1(placeholder) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$7.outer)
+    className: classNames(styles$a.outer)
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$7.item)
+    className: classNames(styles$a.item)
   }, placeholder));
 }
 
@@ -2389,6 +2540,44 @@ function useScrollTarget(ref, isScrollTarget) {
   }, [ref, isScrollTarget]);
 }
 
+var SectionViewTimelineContext = React.createContext();
+function SectionViewTimelineProvider(_ref) {
+  var _backdrop$effects;
+
+  var backdrop = _ref.backdrop,
+      children = _ref.children;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      timeline = _useState2[0],
+      setTimeline = _useState2[1];
+
+  var ref = useRef();
+  var isNeeded = backdrop === null || backdrop === void 0 ? void 0 : (_backdrop$effects = backdrop.effects) === null || _backdrop$effects === void 0 ? void 0 : _backdrop$effects.some(function (effect) {
+    return effect.name === 'scrollParallax';
+  });
+  useEffect(function () {
+    if (!isNeeded || !window.ViewTimeline) {
+      return;
+    }
+
+    setTimeline(new window.ViewTimeline({
+      subject: ref.current
+    }));
+    return function () {
+      return setTimeline(null);
+    };
+  }, [isNeeded]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(SectionViewTimelineContext.Provider, {
+    value: timeline
+  }, children));
+}
+function useSectionViewTimeline() {
+  return useContext(SectionViewTimelineContext);
+}
+
 var DarkBackgroundContext = createContext(true);
 function BackgroundColorProvider(_ref) {
   var dark = _ref.dark,
@@ -2483,7 +2672,7 @@ function useDimension() {
   return [componentSize, measuredRef];
 }
 
-var styles$8 = {"root":"Fullscreen-module_root__1N3CI"};
+var styles$b = {"root":"Fullscreen-module_root__1N3CI"};
 
 var DimensionContext = React.createContext({});
 function useFullscreenDimensions() {
@@ -2509,18 +2698,18 @@ var Fullscreen = React.forwardRef(function Fullscreen(props, ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: styles$8.root,
+    className: styles$b.root,
     style: {
       height: height
     }
   }, props.children);
 });
 
-var styles$9 = {"FillColor":"FillColor-module_FillColor__S1uEG"};
+var styles$c = {"FillColor":"FillColor-module_FillColor__S1uEG"};
 
 function FillColor(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$9.FillColor,
+    className: styles$c.FillColor,
     style: {
       backgroundColor: props.color
     }
@@ -2790,7 +2979,7 @@ VideoPlayer.defaultProps = {
   controls: true
 };
 
-var styles$a = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
+var styles$d = {"root":"MotifArea-module_root__1_ACd","visible":"MotifArea-module_visible__18Kln"};
 
 var MotifAreaVisibilityContext = React.createContext(false);
 function MotifAreaVisibilityProvider(_ref) {
@@ -2827,7 +3016,7 @@ var MotifArea = function MotifArea(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     ref: setElementRef,
-    className: classNames(styles$a.root, _defineProperty({}, styles$a.visible, visible)),
+    className: classNames(styles$d.root, _defineProperty({}, styles$d.visible, visible)),
     style: position,
     onMouseEnter: props.onMouseEnter,
     onMouseLeave: props.onMouseLeave
@@ -2846,18 +3035,72 @@ function getPosition(props) {
   };
 }
 
-var styles$b = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","noCompositionLayer":"Backdrop-module_noCompositionLayer__33IlH","defaultBackground":"Backdrop-module_defaultBackground__1YQQL","effects":"Backdrop-module_effects__lCEXd"};
+var styles$e = {"Backdrop":"Backdrop-module_Backdrop__1w4UZ","noCompositionLayer":"Backdrop-module_noCompositionLayer__33IlH","defaultBackground":"Backdrop-module_defaultBackground__1YQQL","effects":"Backdrop-module_effects__lCEXd"};
 
 function Effects(_ref) {
   var file = _ref.file,
       children = _ref.children;
+  var ref = useRef();
+  var sectionViewTimeline = useSectionViewTimeline();
+  var isStaticPreview = useIsStaticPreview();
+
+  var _useSectionLifecycle = useSectionLifecycle(),
+      isVisible = _useSectionLifecycle.isVisible;
+
+  var scrollParallaxValue = getEffectValue(file, 'scrollParallax');
+  var autoZoomValue = getEffectValue(file, 'autoZoom');
+  useIsomorphicLayoutEffect(function () {
+    if (scrollParallaxValue && !isStaticPreview && sectionViewTimeline) {
+      var max = 20 * scrollParallaxValue / 100;
+      var scale = 100 + 2 * max;
+      var animation = ref.current.animate({
+        transform: ["scale(".concat(scale, "%) translateY(").concat(max, "%)"), "scale(".concat(scale, "%) translateY(").concat(-max, "%)")]
+      }, {
+        fill: 'forwards',
+        timeline: sectionViewTimeline,
+        rangeStart: 'cover 0%',
+        rangeEnd: 'cover 100%'
+      });
+      return function () {
+        return animation.cancel();
+      };
+    }
+  }, [sectionViewTimeline, scrollParallaxValue, isStaticPreview]);
+  var x = (file === null || file === void 0 ? void 0 : file.motifArea) ? 50 - (file.motifArea.left + file.motifArea.width / 2) : 0;
+  var y = (file === null || file === void 0 ? void 0 : file.motifArea) ? 50 - (file.motifArea.top + file.motifArea.height / 2) : 0;
+  useIsomorphicLayoutEffect(function () {
+    if (autoZoomValue && isVisible) {
+      var animation = ref.current.animate({
+        transform: ["translate(".concat(-x, "%, ").concat(-y, "%) scale(1) translate(").concat(x, "%, ").concat(y, "%)"), "translate(".concat(-x, "%, ").concat(-y, "%) scale(1.2) translate(").concat(x, "%, ").concat(y, "%)")]
+      }, {
+        iterations: 1,
+        fill: 'forwards',
+        duration: 1000 * (autoZoomValue / 100) + 40000 * (1 - autoZoomValue / 100),
+        composite: 'add',
+        easing: 'ease'
+      });
+      return function () {
+        return animation.cancel();
+      };
+    }
+  }, [autoZoomValue, isVisible, x, y]);
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$b.effects,
+    ref: ref,
+    className: styles$e.effects,
     style: {
       filter: getFilter((file === null || file === void 0 ? void 0 : file.effects) || [])
     }
   }, children);
 }
+
+function getEffectValue(file, name) {
+  var _find;
+
+  return (_find = ((file === null || file === void 0 ? void 0 : file.effects) || []).find(function (effect) {
+    return effect.name === name;
+  })) === null || _find === void 0 ? void 0 : _find.value;
+}
+
 function getFilter(effects) {
   return effects.map(function (effect) {
     if (effect.name === 'blur') {
@@ -2865,10 +3108,10 @@ function getFilter(effects) {
     } else if (['brightness', 'contrast', 'saturate'].includes(effect.name)) {
       var value = Math.round(effect.value < 0 ? 100 + effect.value * 0.6 : 100 + effect.value);
       return "".concat(effect.name, "(").concat(value, "%)");
-    } else {
+    } else if (['grayscale', 'sepia'].includes(effect.name)) {
       return "".concat(effect.name, "(").concat(effect.value, "%)");
     }
-  }).join(' ');
+  }).filter(Boolean).join(' ');
 }
 
 function BackgroundVideo(_ref) {
@@ -2934,16 +3177,7 @@ function BackgroundVideo(_ref) {
   }));
 }
 
-/**
- * Returns boolean indicating whether viewport orientation is currently
- * portrait.
- */
-
-function usePortraitOrientation() {
-  return useMediaQuery('(orientation: portrait)');
-}
-
-var styles$c = {"fill":"Image-module_fill__1D1wH"};
+var styles$f = {"fill":"Image-module_fill__1D1wH"};
 
 function ImageStructuredData(_ref) {
   var file = _ref.file;
@@ -2995,7 +3229,7 @@ function renderImageTag(props, imageFile) {
   var cropPositionX = imageFile.cropPosition ? imageFile.cropPosition.x : 50;
   var cropPositionY = imageFile.cropPosition ? imageFile.cropPosition.y : 50;
   return /*#__PURE__*/React.createElement("img", {
-    className: classNames(_defineProperty({}, styles$c.fill, props.fill)),
+    className: classNames(_defineProperty({}, styles$f.fill, props.fill)),
     src: imageUrl(imageFile, props),
     alt: imageFile.configuration.alt ? imageFile.configuration.alt : '',
     style: {
@@ -3053,157 +3287,37 @@ function BackgroundImage(_ref) {
   }));
 }
 
-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 OrientationAwareBackgroundVideo(_ref) {
-  var video = _ref.video,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      videoMobile = _ref.videoMobile,
-      containerDimension = _ref.containerDimension;
-  var mobile = usePortraitOrientation();
-
-  if (mobile) {
-    return /*#__PURE__*/React.createElement(BackgroundVideo, {
-      video: videoMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(BackgroundVideo, {
-      video: video,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  }
-}
-
 function BackgroundAsset(props) {
-  var video = useBackgroundFile({
-    file: useFile({
-      collectionName: 'videoFiles',
-      permaId: props.video
-    }),
-    motifArea: props.videoMotifArea,
-    containerDimension: props.containerDimension,
-    effects: props.effects
-  });
-  var videoMobile = useBackgroundFile({
-    file: useFile({
-      collectionName: 'videoFiles',
-      permaId: props.videoMobile
-    }),
-    motifArea: props.videoMobileMotifArea,
-    containerDimension: props.containerDimension,
-    effects: props.effectsMobile
-  });
-  var image = useBackgroundFile({
-    file: useFile({
-      collectionName: 'imageFiles',
-      permaId: props.image
-    }),
-    motifArea: props.imageMotifArea,
-    containerDimension: props.containerDimension,
-    effects: props.effects
-  });
-  var imageMobile = useBackgroundFile({
-    file: useFile({
-      collectionName: 'imageFiles',
-      permaId: props.imageMobile
-    }),
-    motifArea: props.imageMobileMotifArea,
-    containerDimension: props.containerDimension,
-    effects: props.effectsMobile
+  var backgroundFile = useBackgroundFile({
+    file: props.backdrop.video || props.backdrop.image,
+    motifArea: props.backdrop.motifArea,
+    effects: props.backdrop.effects,
+    containerDimension: props.containerDimension
   });
 
-  if (video || videoMobile) {
+  if (props.backdrop.video) {
     return /*#__PURE__*/React.createElement(Fullscreen, {
       ref: props.setContainerRef
-    }, renderBackgroundVideo({
-      video: video,
-      videoMobile: videoMobile,
+    }, /*#__PURE__*/React.createElement(BackgroundVideo, {
+      video: backgroundFile,
       onMotifAreaUpdate: props.onMotifAreaUpdate,
       containerDimension: props.containerDimension
     }));
-  } else if (props.color || props.image && props.image.toString().startsWith('#')) {
+  } else if (props.backdrop.color) {
     return /*#__PURE__*/React.createElement(FillColor, {
-      color: props.color || props.image
+      color: props.backdrop.color
     });
   } else {
     return /*#__PURE__*/React.createElement(Fullscreen, {
       ref: props.setContainerRef
-    }, renderBackgroundImage({
-      image: image,
-      imageMobile: imageMobile,
+    }, /*#__PURE__*/React.createElement(BackgroundImage, {
+      image: backgroundFile,
       onMotifAreaUpdate: props.onMotifAreaUpdate,
       containerDimension: props.containerDimension
     }));
   }
 }
 
-function renderBackgroundVideo(_ref) {
-  var video = _ref.video,
-      videoMobile = _ref.videoMobile,
-      onMotifAreaUpdate = _ref.onMotifAreaUpdate,
-      containerDimension = _ref.containerDimension;
-
-  if (video && videoMobile) {
-    return /*#__PURE__*/React.createElement(OrientationAwareBackgroundVideo, {
-      video: video,
-      videoMobile: videoMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(BackgroundVideo, {
-      video: video || videoMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  }
-}
-
-function renderBackgroundImage(_ref2) {
-  var image = _ref2.image,
-      imageMobile = _ref2.imageMobile,
-      onMotifAreaUpdate = _ref2.onMotifAreaUpdate,
-      containerDimension = _ref2.containerDimension;
-
-  if (image && imageMobile) {
-    return /*#__PURE__*/React.createElement(OrientationAwareBackgroundImage, {
-      image: image,
-      imageMobile: imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  } else {
-    return /*#__PURE__*/React.createElement(BackgroundImage, {
-      image: image || imageMobile,
-      onMotifAreaUpdate: onMotifAreaUpdate,
-      containerDimension: containerDimension
-    });
-  }
-}
-
 function Backdrop(props) {
   var _useDimension = useDimension(),
       _useDimension2 = _slicedToArray(_useDimension, 2),
@@ -3214,11 +3328,11 @@ function Backdrop(props) {
       shouldLoad = _useSectionLifecycle.shouldLoad;
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.Backdrop, _defineProperty({}, styles$b.noCompositionLayer, !shouldLoad && !props.eagerLoad), props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
+    className: classNames(styles$e.Backdrop, _defineProperty({}, styles$e.noCompositionLayer, !shouldLoad && !props.eagerLoad), props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
   }, /*#__PURE__*/React.createElement("div", {
     className: props.transitionStyles.backdropInner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.defaultBackground, props.transitionStyles.backdropInner2)
+    className: classNames(styles$e.defaultBackground, props.transitionStyles.backdropInner2)
   }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset, Object.assign({}, props, {
     containerDimension: containerDimension,
     setContainerRef: setContainerRef
@@ -3462,29 +3576,91 @@ function getIntersectionRatioY(isContentPadded, motifAreaRect, contentAreaRect)
   return isContentPadded ? motifAreaOverlap / motifAreaRect.height : 0;
 }
 
-function useBackdrop() {}
+/**
+ * Returns boolean indicating whether viewport orientation is currently
+ * portrait.
+ */
+
+function usePortraitOrientation(options) {
+  return useMediaQuery('(orientation: portrait)', options);
+}
+
+function useBackdrop(section) {
+  var _section$backdrop, _section$backdrop2;
+
+  var videoBackdrop = useFileBackdrop({
+    section: section,
+    collectionName: 'videoFiles',
+    propertyName: 'video'
+  });
+  var imageBackdrop = useFileBackdrop({
+    section: section,
+    collectionName: 'imageFiles',
+    propertyName: 'image'
+  });
+
+  if (((_section$backdrop = section.backdrop) === null || _section$backdrop === void 0 ? void 0 : _section$backdrop.color) || ((_section$backdrop2 = section.backdrop) === null || _section$backdrop2 === void 0 ? void 0 : _section$backdrop2.image) && section.backdrop.image.toString().startsWith('#')) {
+    return {
+      color: section.backdrop.color || section.backdrop.image
+    };
+  } else {
+    return videoBackdrop || imageBackdrop || {};
+  }
+}
+
+function useFileBackdrop(_ref) {
+  var section = _ref.section,
+      collectionName = _ref.collectionName,
+      propertyName = _ref.propertyName;
+  var file = useFileWithInlineRights({
+    configuration: section.backdrop || {},
+    collectionName: collectionName,
+    propertyName: propertyName
+  });
+  var mobileFile = useFileWithInlineRights({
+    configuration: section.backdrop || {},
+    collectionName: collectionName,
+    propertyName: "".concat(propertyName, "Mobile")
+  });
+  var mobile = usePortraitOrientation({
+    active: file && mobileFile
+  });
+
+  if (mobileFile && (mobile || !file)) {
+    var _ref2;
+
+    return _ref2 = {}, _defineProperty(_ref2, propertyName, mobileFile), _defineProperty(_ref2, "motifArea", section.backdrop["".concat(propertyName, "MobileMotifArea")]), _defineProperty(_ref2, "effects", section.backdropEffectsMobile), _ref2;
+  } else if (file) {
+    var _ref3;
+
+    return _ref3 = {}, _defineProperty(_ref3, propertyName, file), _defineProperty(_ref3, "motifArea", section.backdrop["".concat(propertyName, "MotifArea")]), _defineProperty(_ref3, "effects", section.backdropEffects), _ref3;
+  } else {
+    return null;
+  }
+}
+
 function useBackdropSectionCustomProperties() {}
 function useBackdropSectionClassNames() {}
 
 var v1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  useBackdrop: useBackdrop,
   useBackdropSectionCustomProperties: useBackdropSectionCustomProperties,
   useBackdropSectionClassNames: useBackdropSectionClassNames,
   Backdrop: Backdrop,
-  useMotifAreaState: useMotifAreaState
+  useMotifAreaState: useMotifAreaState,
+  useBackdrop: useBackdrop
 });
 
-var styles$d = {"wrapper":"Positioner-module_wrapper__3iFSg"};
+var styles$g = {"wrapper":"Positioner-module_wrapper__3iFSg"};
 
 function Positioner(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$d.wrapper
+    className: styles$g.wrapper
   }, children);
 }
 
-var styles$e = {"root":"Picture-module_root__1BCCg"};
+var styles$h = {"root":"Picture-module_root__1BCCg"};
 
 function Picture(_ref) {
   var imageFile = _ref.imageFile,
@@ -3522,7 +3698,7 @@ function renderTag(_ref2) {
     }),
     media: "(orientation: portrait)"
   }), /*#__PURE__*/React.createElement("img", {
-    className: classNames(styles$e.root),
+    className: classNames(styles$h.root),
     src: imageUrl$1({
       imageFile: imageFile,
       variant: variant,
@@ -3566,18 +3742,18 @@ var MotifArea$1 = function MotifArea(props) {
   var visible = useContext(MotifAreaVisibilityContext);
   return /*#__PURE__*/React.createElement("div", {
     ref: props.onUpdate,
-    className: classNames(styles$a.root, v2Styles.root, _defineProperty({}, styles$a.visible, visible))
+    className: classNames(styles$d.root, v2Styles.root, _defineProperty({}, styles$d.visible, visible))
   });
 };
 
-var styles$f = {"effects":"Effects-module_effects__MDZRR"};
+var styles$i = {"effects":"Effects-module_effects__MDZRR"};
 
 function Effects$1(_ref) {
   var file = _ref.file,
       mobileFile = _ref.mobileFile,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$f.effects,
+    className: styles$i.effects,
     style: {
       '--filter': getFilter$1((file === null || file === void 0 ? void 0 : file.effects) || []),
       '--mobile-filter': getFilter$1((mobileFile === null || mobileFile === void 0 ? void 0 : mobileFile.effects) || [])
@@ -3713,11 +3889,11 @@ BackgroundAsset$1.defaultProps = {
 
 function Backdrop$1(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
+    className: classNames(styles$e.Backdrop, props.transitionStyles.backdrop, props.transitionStyles["backdrop-".concat(props.state)])
   }, /*#__PURE__*/React.createElement("div", {
     className: props.transitionStyles.backdropInner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$b.defaultBackground, props.transitionStyles.backdropInner2)
+    className: classNames(styles$e.defaultBackground, props.transitionStyles.backdropInner2)
   }, props.children( /*#__PURE__*/React.createElement(BackgroundAsset$1, props)))));
 }
 Backdrop$1.defaultProps = {
@@ -3910,7 +4086,7 @@ function motifAreaCustomProperties(motifArea, prefix) {
   return motifArea ? (_ref = {}, _defineProperty(_ref, "--".concat(prefix, "motif-t"), motifArea.top), _defineProperty(_ref, "--".concat(prefix, "motif-l"), motifArea.left), _defineProperty(_ref, "--".concat(prefix, "motif-w"), motifArea.width), _defineProperty(_ref, "--".concat(prefix, "motif-h"), motifArea.height), _ref) : {};
 }
 
-var styles$g = {"section":"Section-module_section__7UvMm","orientation":"Section-module_orientation__3-m2N","exposeMotifArea":"Section-module_exposeMotifArea__2rsq_","layout-left":"Section-module_layout-left__2IqOD","layout-right":"Section-module_layout-right__3al0b"};
+var styles$j = {"section":"Section-module_section__7UvMm","orientation":"Section-module_orientation__3-m2N","exposeMotifArea":"Section-module_exposeMotifArea__2rsq_","layout-left":"Section-module_layout-left__2IqOD","layout-right":"Section-module_layout-right__3al0b"};
 
 function useBackdropSectionClassNames$1(backdrop) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -3919,7 +4095,7 @@ function useBackdropSectionClassNames$1(backdrop) {
       empty = _ref.empty;
 
   var fullscreenDimensions = useFullscreenDimensions();
-  return [styles$g.section, !fullscreenDimensions.height && styles$g.orientation, styles$g["layout-".concat(layout || 'left')], exposeMotifArea && !empty && styles$g.exposeMotifArea, useAspectRatioClassName(backdrop.file, fullscreenDimensions), useAspectRatioClassName(backdrop.mobileFile, fullscreenDimensions, {
+  return [styles$j.section, !fullscreenDimensions.height && styles$j.orientation, styles$j["layout-".concat(layout || 'left')], exposeMotifArea && !empty && styles$j.exposeMotifArea, useAspectRatioClassName(backdrop.file, fullscreenDimensions), useAspectRatioClassName(backdrop.mobileFile, fullscreenDimensions, {
     mobile: true
   })].filter(Boolean);
 }
@@ -4006,7 +4182,7 @@ var v2 = /*#__PURE__*/Object.freeze({
   useBackdropSectionClassNames: useBackdropSectionClassNames$1
 });
 
-var styles$h = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","Section":"Section-module_Section__Yo58b","first":"Section-module_first__1vLBH","narrow":"Section-module_narrow__3Dawu","invert":"Section-module_invert__3_p7F"};
+var styles$k = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","Section":"Section-module_Section__Yo58b","first":"Section-module_first__1vLBH","narrow":"Section-module_narrow__3Dawu","invert":"Section-module_invert__3_p7F"};
 
 var fadeInBgConceal = {"fade-duration":"0.5s","backdrop":"fadeInBgConceal-module_backdrop__11JGO","backdropInner":"fadeInBgConceal-module_backdropInner__1IAYD","backdrop-below":"fadeInBgConceal-module_backdrop-below__3E6Uk"};
 
@@ -4040,7 +4216,7 @@ var scrollInFadeOutBg = {"fade-duration":"0.5s","backdrop":"scrollInFadeOutBg-mo
 
 var scrollInScrollOut = {"backdrop":"scrollInScrollOut-module_backdrop__XzCge","foreground":"scrollInScrollOut-module_foreground__1yyY8"};
 
-var styles$i = {
+var styles$l = {
   fadeInBgConceal: fadeInBgConceal,
   fadeInBgFadeOut: fadeInBgFadeOut,
   fadeInBgFadeOutBg: fadeInBgFadeOutBg,
@@ -4089,11 +4265,11 @@ function getAvailableTransitionNames(section, previousSection) {
 function getTransitionStyles(section, previousSection, nextSection) {
   var name = getTransitionStylesName(section, previousSection, nextSection);
 
-  if (!styles$i[name]) {
+  if (!styles$l[name]) {
     throw new Error("Unknown transition ".concat(name));
   }
 
-  return styles$i[name];
+  return styles$l[name];
 }
 function getEnterAndExitTransitions(section, previousSection, nextSection) {
   return [enterTransitions[getTransitionName(previousSection, section)], exitTransitions[getTransitionName(section, nextSection)]];
@@ -4127,7 +4303,7 @@ function NoOpShadow(props) {
   return /*#__PURE__*/React.createElement("div", null, props.children);
 }
 
-var styles$j = {"static":"GradientShadow-module_static__rXNpZ","dynamic":"GradientShadow-module_dynamic__2v2JU","align-right":"GradientShadow-module_align-right__3iXZs","dark":"GradientShadow-module_dark__1YuV5","align-left":"GradientShadow-module_align-left__3qcNM","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","light":"GradientShadow-module_light__Vn92v","shadow":"GradientShadow-module_shadow__2UiDH"};
+var styles$m = {"static":"GradientShadow-module_static__rXNpZ","dynamic":"GradientShadow-module_dynamic__2v2JU","align-right":"GradientShadow-module_align-right__3iXZs","dark":"GradientShadow-module_dark__1YuV5","align-left":"GradientShadow-module_align-left__3qcNM","align-center":"GradientShadow-module_align-center__2C7cl","align-centerRagged":"GradientShadow-module_align-centerRagged__2-iv8","light":"GradientShadow-module_light__Vn92v","shadow":"GradientShadow-module_shadow__2UiDH"};
 
 function GradientShadow(props) {
   // Hide static shadow if motif area intersects with content area.
@@ -4139,14 +4315,14 @@ function GradientShadow(props) {
   // up half way across the motif area.
   roundToFirstDecimalPlace(Math.min(1, props.motifAreaState.intersectionRatioY * 2));
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$j["align-".concat(props.align)], props.inverted ? styles$j.light : styles$j.dark)
+    className: classNames(styles$m["align-".concat(props.align)], props.inverted ? styles$m.light : styles$m.dark)
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$j.dynamic,
+    className: styles$m.dynamic,
     style: {
       opacity: props.dynamicShadowOpacity * opacityFactor
     }
   }, /*#__PURE__*/React.createElement(Fullscreen, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$j["static"],
+    className: styles$m["static"],
     style: {
       opacity: staticShadowOpacity
     }
@@ -4161,7 +4337,7 @@ function roundToFirstDecimalPlace(value) {
   return Math.round(value * 10) / 10;
 }
 
-var styles$k = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
+var styles$n = {"start":"InvisibleBoxWrapper-module_start__F1nZ7","end":"InvisibleBoxWrapper-module_end__nphD-"};
 
 function InvisibleBoxWrapper(_ref) {
   var _classNames;
@@ -4173,47 +4349,47 @@ function InvisibleBoxWrapper(_ref) {
       children = _ref.children;
   var full = width === widths.full;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames = {}, _defineProperty(_classNames, styles$k.start, !openStart && !full), _defineProperty(_classNames, styles$k.end, !openEnd && !full), _classNames))
+    className: classNames((_classNames = {}, _defineProperty(_classNames, styles$n.start, !openStart && !full), _defineProperty(_classNames, styles$n.end, !openEnd && !full), _classNames))
   }, children);
 }
 
-var styles$l = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","gradient":"GradientBox-module_gradient__31tJ-","long":"GradientBox-module_long__10s6v","root":"GradientBox-module_root__8Xn9W","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6"};
+var styles$o = {"wrapper":"GradientBox-module_wrapper__1Jj7N","content":"GradientBox-module_content__96lDk","shadow":"GradientBox-module_shadow__2XilX","gradient":"GradientBox-module_gradient__31tJ-","long":"GradientBox-module_long__10s6v","root":"GradientBox-module_root__8Xn9W","withShadow":"GradientBox-module_withShadow__3mhPR","shadowDark":"GradientBox-module_shadowDark__3Tv0L","shadowLight":"GradientBox-module_shadowLight__Bieg6"};
 
 function GradientBox(props) {
   var _classNames;
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$l.root, (_classNames = {}, _defineProperty(_classNames, styles$l.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$l["long"], props.coverInvisibleNextSection), _classNames)),
+    className: classNames(styles$o.root, (_classNames = {}, _defineProperty(_classNames, styles$o.gradient, props.motifAreaState.isContentPadded), _defineProperty(_classNames, styles$o["long"], props.coverInvisibleNextSection), _classNames)),
     style: {
       paddingTop: props.motifAreaState.paddingTop
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$l.wrapper
+    className: styles$o.wrapper
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$l.shadow, props.inverted ? styles$l.shadowLight : styles$l.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
+    className: classNames(styles$o.shadow, props.inverted ? styles$o.shadowLight : styles$o.shadowDark, props.transitionStyles.boxShadow, props.transitionStyles["boxShadow-".concat(props.state)]),
     style: {
       top: props.motifAreaState.paddingTop,
       opacity: props.staticShadowOpacity
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$l.content
+    className: styles$o.content
   }, props.children)));
 }
 
-var styles$m = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
+var styles$p = {"content":"CardBox-module_content__36v7J","wrapper":"CardBox-module_wrapper__3vnaH"};
 
 function CardBox(props) {
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$m.wrapper,
+    className: styles$p.wrapper,
     style: {
       paddingTop: props.motifAreaState.paddingTop
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$m.content
+    className: styles$p.content
   }, props.children));
 }
 
-var styles$n = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","card":"CardBoxWrapper-module_card__hvRUa scope-cardsAppearance","selfClear-left":"CardBoxWrapper-module_selfClear-left__2Dd26","selfClear-right":"CardBoxWrapper-module_selfClear-right__9kgvN","selfClear-both":"CardBoxWrapper-module_selfClear-both__2hwB7","cardStart":"CardBoxWrapper-module_cardStart__2NywG","cardEnd":"CardBoxWrapper-module_cardEnd__x4Ye6","cardBgWhite":"CardBoxWrapper-module_cardBgWhite__xXhg7","cardBgBlack":"CardBoxWrapper-module_cardBgBlack__Ahp3s"};
+var styles$q = {"darkContentSurfaceColor":"var(--theme-dark-content-surface-color, #101010)","lightContentSurfaceColor":"var(--theme-light-content-surface-color, #fff)","darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","darkContentLinkColor":"var(--theme-dark-content-link-color, var(--theme-content-link-color, currentColor))","lightContentLinkColor":"var(--theme-light-content-link-color, var(--theme-content-link-color, currentColor))","card":"CardBoxWrapper-module_card__hvRUa scope-cardsAppearance","selfClear-left":"CardBoxWrapper-module_selfClear-left__2Dd26","selfClear-right":"CardBoxWrapper-module_selfClear-right__9kgvN","selfClear-both":"CardBoxWrapper-module_selfClear-both__2hwB7","cardStart":"CardBoxWrapper-module_cardStart__2NywG","cardEnd":"CardBoxWrapper-module_cardEnd__x4Ye6","cardBgWhite":"CardBoxWrapper-module_cardBgWhite__xXhg7","cardBgBlack":"CardBoxWrapper-module_cardBgBlack__Ahp3s"};
 
 function CardBoxWrapper(props) {
   if (outsideBox(props)) {
@@ -4232,7 +4408,7 @@ function outsideBox(props) {
 }
 
 function className$1(props) {
-  return classNames(styles$n.card, props.inverted ? styles$n.cardBgBlack : styles$n.cardBgWhite, styles$n["selfClear-".concat(props.selfClear)], _defineProperty({}, styles$n.cardStart, !props.openStart), _defineProperty({}, styles$n.cardEnd, !props.openEnd));
+  return classNames(styles$q.card, props.inverted ? styles$q.cardBgBlack : styles$q.cardBgWhite, styles$q["selfClear-".concat(props.selfClear)], _defineProperty({}, styles$q.cardStart, !props.openStart), _defineProperty({}, styles$q.cardEnd, !props.openEnd));
 }
 
 var components$1 = {
@@ -4280,23 +4456,35 @@ var Section = withInlineEditingDecorator('SectionDecorator', function Section(_r
     exposeMotifArea: section.exposeMotifArea,
     empty: !contentElements.length
   });
+  var atmoAudioFile = useFileWithInlineRights({
+    configuration: section,
+    collectionName: 'audioFiles',
+    propertyName: 'atmoAudioFileId'
+  });
   return /*#__PURE__*/React.createElement("section", {
     id: "".concat(domIdPrefix, "-").concat(section.permaId),
     ref: ref,
-    className: classNames(styles$h.Section, transitionStyles.section, backdropSectionClassNames, _defineProperty({}, styles$h.first, section.sectionIndex === 0), _defineProperty({}, styles$h.narrow, section.width === 'narrow'), _defineProperty({}, styles$h.invert, section.invert)),
+    className: classNames(styles$k.Section, transitionStyles.section, backdropSectionClassNames, _defineProperty({}, styles$k.first, section.sectionIndex === 0), _defineProperty({}, styles$k.narrow, section.width === 'narrow'), _defineProperty({}, styles$k.invert, section.invert)),
     style: useBackdropSectionCustomProperties(backdrop)
   }, /*#__PURE__*/React.createElement(SectionLifecycleProvider, {
     onActivate: onActivate,
     entersWithFadeTransition: (_section$transition = section.transition) === null || _section$transition === void 0 ? void 0 : _section$transition.startsWith('fade')
+  }, /*#__PURE__*/React.createElement(SectionViewTimelineProvider, {
+    backdrop: backdrop
   }, /*#__PURE__*/React.createElement(SectionAtmo, {
-    audioFilePermaId: section.atmoAudioFileId
+    audioFile: atmoAudioFile
   }), /*#__PURE__*/React.createElement(SectionContents, {
     section: section,
     backdrop: backdrop,
     contentElements: contentElements,
     state: state,
     transitionStyles: transitionStyles
-  })));
+  }), /*#__PURE__*/React.createElement(SectionInlineFileRights, {
+    section: section,
+    backdrop: backdrop,
+    atmoAudioFile: atmoAudioFile,
+    state: state
+  }))));
 });
 Section.defaultProps = {
   domIdPrefix: 'section'
@@ -4352,15 +4540,13 @@ function SectionContents(_ref3) {
   var dynamicShadowOpacity = percentToFraction(section.dynamicShadowOpacity, {
     defaultValue: 0.7
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Backdrop, Object.assign({}, section.backdrop, {
-    effects: section.backdropEffects,
-    effectsMobile: section.backdropEffectsMobile,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Backdrop, {
     backdrop: backdrop,
     eagerLoad: section.sectionIndex === 0,
     onMotifAreaUpdate: setMotifAreaRef,
     state: state,
     transitionStyles: transitionStyles
-  }), function (children) {
+  }, function (children) {
     return /*#__PURE__*/React.createElement(Shadow, {
       align: section.layout,
       inverted: section.invert,
@@ -4492,7 +4678,7 @@ function usePostMessageListener(receiveData) {
 
 var contentStyles = {"Content":"Content-module_Content__m7urk"};
 
-var styles$o = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
+var styles$r = {"focusOutlineDisabled":"focusOutline-module_focusOutlineDisabled__KV7d-"};
 
 var FocusVisibleContext = createContext();
 function useFocusOutlineVisible() {
@@ -4516,12 +4702,12 @@ function FocusOutlineProvider(_ref) {
     };
 
     function enable() {
-      document.body.classList.remove(styles$o.focusOutlineDisabled);
+      document.body.classList.remove(styles$r.focusOutlineDisabled);
       setValue(true);
     }
 
     function disable() {
-      document.body.classList.add(styles$o.focusOutlineDisabled);
+      document.body.classList.add(styles$r.focusOutlineDisabled);
       setValue(false);
     }
   }, []);
@@ -4719,7 +4905,7 @@ function useConsentGiven(vendorName) {
   return [consentGiven, giveConsent];
 }
 
-var styles$p = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
+var styles$s = {"optIn":"OptIn-module_optIn__3nHo1","optInIcon":"OptIn-module_optInIcon__3-81I","optInMessage":"OptIn-module_optInMessage__1OfTR","optInButton":"OptIn-module_optInButton__1LhtX"};
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -4809,13 +4995,13 @@ function OptIn(_ref) {
   }
 
   return wrapper( /*#__PURE__*/React.createElement("div", {
-    className: styles$p.optIn
+    className: styles$s.optIn
   }, icon && /*#__PURE__*/React.createElement("div", {
-    className: styles$p.optInIcon
+    className: styles$s.optInIcon
   }, /*#__PURE__*/React.createElement(OptInIcon, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$p.optInMessage
+    className: styles$s.optInMessage
   }, cookieMessage), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-    className: styles$p.optInButton,
+    className: styles$s.optInButton,
     onClick: accept
   }, t('pageflow_scrolled.public.third_party_consent.confirm')))));
 }
@@ -4826,7 +5012,7 @@ OptIn.defaultProps = {
   }
 };
 
-var styles$q = {"optOut":"OptOutInfo-module_optOut__2Q3d5","tooltip":"OptOutInfo-module_tooltip__2bpU0","icon":"OptOutInfo-module_icon__1kL6Q utils-module_unstyledButton__3rgne","full":"OptOutInfo-module_full__s_Ono"};
+var styles$t = {"optOut":"OptOutInfo-module_optOut__2Q3d5","tooltip":"OptOutInfo-module_tooltip__2bpU0","icon":"OptOutInfo-module_icon__1kL6Q utils-module_unstyledButton__3rgne","full":"OptOutInfo-module_full__s_Ono"};
 
 function _extends$1() {
   _extends$1 = Object.assign || function (target) {
@@ -4907,15 +5093,15 @@ function OptOutInfo(_ref) {
     link: linkHtml
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$q.optOut, _defineProperty({}, styles$q.full, width === widths.full)),
+    className: classNames(styles$t.optOut, _defineProperty({}, styles$t.full, width === widths.full)),
     style: hide ? {
       opacity: 0,
       visibility: 'hidden'
     } : undefined
   }, /*#__PURE__*/React.createElement("button", {
-    className: styles$q.icon
+    className: styles$t.icon
   }, /*#__PURE__*/React.createElement(information, null)), /*#__PURE__*/React.createElement("div", {
-    className: styles$q.tooltip
+    className: styles$t.tooltip
   }, /*#__PURE__*/React.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: html
@@ -4981,18 +5167,20 @@ function paletteColor(value) {
   return !value || value[0] === '#' ? value : "var(--theme-palette-color-".concat(value, ")");
 }
 
-var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"40px","text-2l":"50px","text-xl":"66px","text-2xl":"88px","text-3xl":"110px","text-4xl":"200px","text-5xl":"350px","heading-lg":"Text-module_heading-lg__FKxzu typography-headingLg typography-heading","heading-md":"Text-module_heading-md__1q5Ss typography-headingMd typography-heading","heading-sm":"Text-module_heading-sm__2awaz typography-headingSm typography-heading","heading-xs":"Text-module_heading-xs__21nHy typography-headingXs typography-heading","body":"Text-module_body__4oWD- typography-body","caption":"Text-module_caption__3_6Au typography-caption","question":"Text-module_question__ByVAq typography-question","quoteText-lg":"Text-module_quoteText-lg__3ZnZi typography-quoteText","quoteText-md":"Text-module_quoteText-md__2eooO typography-quoteText","quoteText-sm":"Text-module_quoteText-sm__5nKex typography-quoteText","quoteText-xs":"Text-module_quoteText-xs__2p5on typography-quoteText","quoteAttribution":"Text-module_quoteAttribution__VBqLw typography-quoteAttribution","counterNumber-lg":"Text-module_counterNumber-lg__2myJg typography-counterNumber","counterNumber-md":"Text-module_counterNumber-md__1NC3q typography-counterNumber","counterNumber-sm":"Text-module_counterNumber-sm__2SwHQ typography-counterNumber","counterNumber-xs":"Text-module_counterNumber-xs__1D-YR typography-counterNumber","counterDescription":"Text-module_counterDescription__34NjQ typography-counterDescription"};
+var textStyles = {"text-s":"20px","text-base":"22px","text-md":"33px","text-l":"40px","text-2l":"50px","text-xl":"66px","text-2xl":"88px","text-3xl":"110px","text-4xl":"200px","text-5xl":"350px","heading-lg":"Text-module_heading-lg__FKxzu typography-headingLg typography-heading","heading-md":"Text-module_heading-md__1q5Ss typography-headingMd typography-heading","heading-sm":"Text-module_heading-sm__2awaz typography-headingSm typography-heading","heading-xs":"Text-module_heading-xs__21nHy typography-headingXs typography-heading","headingTagline-lg":"Text-module_headingTagline-lg__1O2TQ typography-headingTagline","headingTagline-md":"Text-module_headingTagline-md__2hrVS typography-headingTagline","headingTagline-sm":"Text-module_headingTagline-sm__1Fw2J typography-headingTagline","headingSubtitle-lg":"Text-module_headingSubtitle-lg__15kj0 typography-headingSubtitle","headingSubtitle-md":"Text-module_headingSubtitle-md__2_qtz typography-headingSubtitle","headingSubtitle-sm":"Text-module_headingSubtitle-sm__MOc_6 typography-headingSubtitle","body":"Text-module_body__4oWD- typography-body","caption":"Text-module_caption__3_6Au typography-caption","question":"Text-module_question__ByVAq typography-question","quoteText-lg":"Text-module_quoteText-lg__3ZnZi typography-quoteText","quoteText-md":"Text-module_quoteText-md__2eooO typography-quoteText","quoteText-sm":"Text-module_quoteText-sm__5nKex typography-quoteText","quoteText-xs":"Text-module_quoteText-xs__2p5on typography-quoteText","quoteAttribution":"Text-module_quoteAttribution__VBqLw typography-quoteAttribution","counterNumber-lg":"Text-module_counterNumber-lg__2myJg typography-counterNumber","counterNumber-md":"Text-module_counterNumber-md__1NC3q typography-counterNumber","counterNumber-sm":"Text-module_counterNumber-sm__2SwHQ typography-counterNumber","counterNumber-xs":"Text-module_counterNumber-xs__1D-YR typography-counterNumber","counterDescription":"Text-module_counterDescription__34NjQ typography-counterDescription"};
 
 /**
  * Render some text using the default typography scale.
  *
  * @param {Object} props
  * @param {string} props.scaleCategory -
- *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,
- *   `'heading-xs'`, `'body'`, `'caption'`, `'question'`,
- *   `'quoteText-lg`', `'quoteText-md`', `'quoteText-sm`', `'quoteText-xs`', `'quoteAttribution`',
- *   `'counterNumber-lg`', `'counterNumber-md`', `'counterNumber-sm`',
- *   `'counterNumber-xs`', `'counterDescription`'.
+ *   One of the styles `'heading-lg'`, `'heading-md'`, `'heading-sm'`,`'heading-xs'`,
+ *   `'headingTagline-lg'`, `'headingTagline-md'`, `'headingTagline-sm'`,
+ *   `'headingSubtitle-lg'`, `'headingSubtitle-md'`, `'headingSubtitle-sm'`,
+ *   `'body'`, `'caption'`, `'question'`,
+ *   `'quoteText-lg'`, `'quoteText-md'`, `'quoteText-sm'`, `'quoteText-xs'`, `'quoteAttribution'`,
+ *   `'counterNumber-lg'`, `'counterNumber-md'`, `'counterNumber-sm'`,
+ *   `'counterNumber-xs'`, `'counterDescription`'.
  * @param {string} [props.inline] - Render a span instread of a div.
  * @param {string} props.children - Nodes to render with specified typography.
  */
@@ -5006,7 +5194,7 @@ function Text(_ref) {
   }, children);
 }
 
-var styles$r = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"EditableText-module_root__2v1tU","light":"EditableText-module_light__2c29h","dark":"EditableText-module_dark__2ym90"};
+var styles$u = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"EditableText-module_root__2v1tU","light":"EditableText-module_light__2c29h","dark":"EditableText-module_dark__2ym90"};
 
 var defaultValue = [{
   type: 'paragraph',
@@ -5020,7 +5208,7 @@ var EditableText = withInlineEditingAlternative('EditableText', function Editabl
       _ref$scaleCategory = _ref.scaleCategory,
       scaleCategory = _ref$scaleCategory === void 0 ? 'body' : _ref$scaleCategory;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$r.root, className)
+    className: classNames(styles$u.root, className)
   }, /*#__PURE__*/React.createElement(Text, {
     scaleCategory: scaleCategory
   }, render(value || defaultValue)));
@@ -5112,7 +5300,7 @@ function Heading(_ref3) {
       children = _ref3.children;
   var darkBackground = useDarkBackground();
   return /*#__PURE__*/React.createElement("h2", Object.assign({}, attributes, {
-    className: classNames(variantClassName, darkBackground ? styles$r.light : styles$r.dark, 'scope-headings', textStyles['heading-xs']),
+    className: classNames(variantClassName, darkBackground ? styles$u.light : styles$u.dark, 'scope-headings', textStyles['heading-xs']),
     style: inlineStyles
   }), children);
 }
@@ -5212,7 +5400,7 @@ function useContentElementConfigurationUpdate() {
   return useContext(ContentElementConfigurationUpdateContext);
 }
 
-var styles$s = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
+var styles$v = {"crop":"SectionThumbnail-module_crop__Q1nZj","scale":"SectionThumbnail-module_scale__2tKDG"};
 
 function StandaloneSectionThumbnail(_ref) {
   var seed = _ref.seed,
@@ -5245,10 +5433,10 @@ function SectionThumbnail(_ref2) {
           contentRect = _ref3.contentRect;
       return /*#__PURE__*/React.createElement(FullscreenDimensionProvider, clientDimensions(contentRect, scaleFactor), /*#__PURE__*/React.createElement("div", {
         ref: measureRef,
-        className: styles$s.crop,
+        className: styles$v.crop,
         inert: ""
       }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(_defineProperty({}, styles$s.scale, scale))
+        className: classNames(_defineProperty({}, styles$v.scale, scale))
       }, /*#__PURE__*/React.createElement("div", {
         className: contentStyles.Content,
         style: viewportUnitCustomProperties(clientDimensions(contentRect, scaleFactor))
@@ -5262,7 +5450,7 @@ function SectionThumbnail(_ref2) {
     }));
   } else {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$s.root
+      className: styles$v.root
     }, "Not found.");
   }
 }
@@ -5306,4 +5494,4 @@ function useContentElementEditorCommandSubscription(callback) {
 
 var frontendStyles = {"root":"EditableInlineText-module_root__3eA-J","hyphens-manual":"EditableInlineText-module_hyphens-manual__3Lj4H","hyphens-none":"EditableInlineText-module_hyphens-none__1UvNH"};
 
-export { usePlayerState as $, AtmoProvider as A, useAudioFocus as B, ConnectedSection as C, useContentElementEditorCommandSubscription as D, EventContextDataProvider as E, useContentElementLifecycle as F, useCurrentChapter as G, useIsStaticPreview as H, useOnUnmuteMedia as I, usePortraitOrientation as J, PhonePlatformProvider as K, OptOutInfo as L, useConsentRequested as M, getTransitionNames as N, OptIn as O, PlayerEventContextDataProvider as P, getAvailableTransitionNames as Q, RootProviders as R, ScrollToSectionContext as S, paletteColor as T, widthName as U, Image as V, Text as W, MediaPlayer as X, getInitialPlayerState as Y, playerStateReducer as Z, _asyncToGenerator as _, useCurrentSectionIndexState as a, VideoPlayer as a0, AudioPlayer as a1, processSources as a2, Atmo as a3, AtmoContext as a4, useAtmo as a5, useOnScreen as a6, StandaloneSectionThumbnail as a7, SectionThumbnail as a8, ContentElementEditorCommandEmitterContext as a9, MotifAreaVisibilityProvider as aa, ForcePaddingContext as ab, ContentElementConfigurationUpdateContext as ac, LayoutWithoutInlineEditing as ad, renderElement as ae, renderLeaf as af, usePostMessageListener as b, contentStyles as c, api as d, regenerator as e, withInlineEditingAlternative as f, getEventObject as g, useDarkBackground as h, EditableText as i, useContentElementConfigurationUpdate as j, useContentElementAttributes as k, widths as l, useTextTracks as m, useMediaMuted as n, useFocusOutlineVisible as o, useVideoQualitySetting as p, useIsomorphicLayoutEffect as q, frontendStyles as r, useFullscreenDimensions as s, information as t, usePrevious as u, camelize as v, withInlineEditingDecorator as w, styles$l as x, registerVendors as y, loadInlineEditingComponents as z };
+export { Image as $, AtmoProvider as A, registerVendors as B, ConnectedSection as C, api as D, EventContextDataProvider as E, loadInlineEditingComponents as F, useAudioFocus as G, useContentElementEditorCommandSubscription as H, InlineFileRights as I, useContentElementLifecycle as J, useCurrentChapter as K, useIsStaticPreview as L, useOnUnmuteMedia as M, usePortraitOrientation as N, PhonePlatformProvider as O, PlayerEventContextDataProvider as P, OptIn as Q, RootProviders as R, ScrollToSectionContext as S, OptOutInfo as T, useConsentRequested as U, getTransitionNames as V, Widget as W, getAvailableTransitionNames as X, paletteColor as Y, widthName as Z, _asyncToGenerator as _, useCurrentSectionIndexState as a, Text as a0, MediaPlayer as a1, getInitialPlayerState as a2, playerStateReducer as a3, usePlayerState as a4, VideoPlayer as a5, AudioPlayer as a6, processSources as a7, Atmo as a8, AtmoContext as a9, useAtmo as aa, useOnScreen as ab, StandaloneSectionThumbnail as ac, SectionThumbnail as ad, ContentElementEditorCommandEmitterContext as ae, MotifAreaVisibilityProvider as af, ForcePaddingContext as ag, ContentElementConfigurationUpdateContext as ah, LayoutWithoutInlineEditing as ai, renderElement as aj, renderLeaf as ak, usePostMessageListener as b, contentStyles as c, regenerator as d, withInlineEditingAlternative as e, useDarkBackground as f, getEventObject as g, EditableText as h, isBlankEditableTextValue as i, useContentElementConfigurationUpdate as j, useContentElementAttributes as k, widths as l, useTextTracks as m, useMediaMuted as n, useFocusOutlineVisible as o, useVideoQualitySetting as p, useIsomorphicLayoutEffect as q, frontendStyles as r, useFullscreenDimensions as s, information as t, usePrevious as u, camelize as v, withInlineEditingDecorator as w, isBlank as x, presence as y, styles$o as z };