pageflow 16.0.0 → 16.2.0

data/entry_types/scrolled/package/contentElements-frontend.js

@@ -1,5 +1,5 @@
-import { useContentElementConfigurationUpdate, useI18n, withShadowClassName, Text, EditableInlineText, frontend, useFile, useContentElementEditorState, FitViewport, ContentElementBox, Figure, useContentElementLifecycle, usePortraitOrientation, Image, usePlayerState, MediaInteractionTracking, useAudioFocus, VideoPlayerControls, PlayerEventContextDataProvider, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, useDarkBackground, EditableText, ThirdPartyOptOutInfo, ThirdPartyOptIn, useAtmo, textColorForBackgroundColor, Panorama, utils, ThemeIcon } from 'pageflow-scrolled/frontend';
-import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useContentElementConfigurationUpdate, useI18n, useDarkBackground, useContentElementEditorState, useIsStaticPreview, useContentElementLifecycle, utils, contentElementWidths, withShadowClassName, paletteColor, Text, EditableInlineText, frontend, useFileWithInlineRights, FitViewport, ContentElementBox, ContentElementFigure, InlineFileRights, usePortraitOrientation, ExpandableImage, Image, usePlayerState, MediaInteractionTracking, useAudioFocus, VideoPlayerControls, PlayerEventContextDataProvider, VideoPlayer, AudioPlayerControls, AudioPlayer, useMediaMuted, useTheme, EditableText, ThirdPartyOptOutInfo, useFile, ThirdPartyOptIn, useAtmo, textColorForBackgroundColor, Panorama, ThemeIcon, useLocale, Figure, usePhonePlatform, FullscreenViewer, ToggleFullscreenCornerButton } from 'pageflow-scrolled/frontend';
+import React, { useState, useRef, useEffect, useMemo, useCallback, forwardRef } from 'react';
 import classNames from 'classnames';
 import ReactCompareImage from 'react-compare-image';
 import Measure from 'react-measure';
@@ -21,61 +21,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var styles = {"root":"Heading-module_root__33TFw","right":"Heading-module_right__1TJKF","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","forcePaddingTop":"Heading-module_forcePaddingTop__30Juh"};
-
-function Heading(_ref) {
-  var configuration = _ref.configuration,
-      sectionProps = _ref.sectionProps;
-  var level = configuration.level || sectionProps.sectionIndex;
-  var firstSectionInEntry = level === 0;
-  var updateConfiguration = useContentElementConfigurationUpdate();
-
-  var _useI18n = useI18n({
-    locale: 'ui'
-  }),
-      t = _useI18n.t;
-
-  var legacyValue = configuration.children;
-  var Tag = firstSectionInEntry ? 'h1' : 'h2';
-  var forcePaddingTop = firstSectionInEntry && !('marginTop' in configuration);
-  return /*#__PURE__*/React.createElement(Tag, {
-    className: classNames(styles.root, configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), _defineProperty({}, styles.forcePaddingTop, forcePaddingTop), _defineProperty({}, styles[sectionProps.layout], configuration.position === 'wide' || sectionProps.layout === 'centerRagged'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
-  }, /*#__PURE__*/React.createElement(Text, {
-    scaleCategory: getScaleCategory(configuration, firstSectionInEntry),
-    inline: true
-  }, /*#__PURE__*/React.createElement(EditableInlineText, {
-    value: configuration.value,
-    defaultValue: legacyValue,
-    hyphens: configuration.hyphens,
-    placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
-    onChange: function onChange(value) {
-      return updateConfiguration({
-        value: value
-      });
-    }
-  })));
-}
-
-function getScaleCategory(configuration, firstSectionInEntry) {
-  switch (configuration.textSize) {
-    case 'large':
-      return 'heading-lg';
-
-    case 'medium':
-      return 'heading-md';
-
-    case 'small':
-      return 'heading-sm';
-
-    default:
-      return firstSectionInEntry ? 'heading-lg' : 'heading-sm';
-  }
-}
-
-frontend.contentElementTypes.register('heading', {
-  component: Heading
-});
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -134,6 +79,139 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+var styles = {"darkContentTextColor":"var(--theme-dark-content-text-color, #222)","lightContentTextColor":"var(--theme-light-content-text-color, #fff)","root":"Heading-module_root__33TFw","animation-fadeIn":"Heading-module_animation-fadeIn__3jlOG","animation-fadeInFast":"Heading-module_animation-fadeInFast__b41KH Heading-module_animation-fadeIn__3jlOG","animation-fadeInSlow":"Heading-module_animation-fadeInSlow__1G1o5 Heading-module_animation-fadeIn__3jlOG","main":"Heading-module_main__35wWK","tagline":"Heading-module_tagline__pvHO5","subtitle":"Heading-module_subtitle__19eD8","animating":"Heading-module_animating__1ziJR","hasTagline":"Heading-module_hasTagline__Pgn8c","right":"Heading-module_right__1TJKF","light":"Heading-module_light__1TQE8","dark":"Heading-module_dark__18iWa","centerRagged":"Heading-module_centerRagged__388sq","center":"Heading-module_center__38lDY","forcePaddingTop":"Heading-module_forcePaddingTop__30Juh"};
+
+function Heading(_ref) {
+  var configuration = _ref.configuration,
+      sectionProps = _ref.sectionProps,
+      contentElementWidth = _ref.contentElementWidth;
+  var level = configuration.level || sectionProps.sectionIndex;
+  var firstSectionInEntry = level === 0;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var darkBackground = useDarkBackground();
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected,
+      isEditable = _useContentElementEdi.isEditable;
+
+  var legacyValue = configuration.children;
+  var Tag = firstSectionInEntry ? 'h1' : 'h2';
+  var forcePaddingTop = firstSectionInEntry && !('marginTop' in configuration);
+  var entranceAnimation = !useIsStaticPreview() && configuration.entranceAnimation || 'none';
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      animating = _useState2[0],
+      setAnimating = _useState2[1];
+
+  useContentElementLifecycle({
+    onActivate: function onActivate() {
+      setAnimating(entranceAnimation !== 'none');
+    },
+    onInvisible: function onInvisible() {
+      if (isEditable) {
+        setAnimating(false);
+      }
+    }
+  });
+  var previousAnimation = useRef(entranceAnimation);
+  var previouslySelected = useRef(isSelected);
+  useEffect(function () {
+    if (isEditable && previousAnimation.current !== entranceAnimation) {
+      previousAnimation.current = entranceAnimation;
+      setAnimating(false);
+      setTimeout(function () {
+        return setAnimating(true);
+      }, 100);
+    }
+  }, [entranceAnimation, isEditable]);
+  useEffect(function () {
+    if (!previouslySelected.current && isSelected) {
+      setAnimating(true);
+    }
+
+    previouslySelected.current = isSelected;
+  }, [isSelected]);
+
+  function renderSubtitle(name) {
+    var value = configuration[name];
+
+    if (!isSelected && utils.isBlankEditableTextValue(value)) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement(Text, {
+      scaleCategory: getScaleCategory(configuration, firstSectionInEntry, name)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles[name],
+      role: "doc-subtitle"
+    }, /*#__PURE__*/React.createElement(EditableInlineText, {
+      value: value,
+      hyphens: configuration.hyphens,
+      placeholder: t("pageflow_scrolled.inline_editing.type_".concat(name)),
+      onChange: function onChange(value) {
+        return updateConfiguration(_defineProperty({}, name, value));
+      }
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement("header", {
+    className: classNames(styles.root, styles["animation-".concat(entranceAnimation)], _defineProperty({}, styles.animating, animating), _defineProperty({}, styles.hasTagline, !utils.isBlankEditableTextValue(configuration.tagline) || isSelected), _defineProperty({}, styles.forcePaddingTop, forcePaddingTop), _defineProperty({}, styles[sectionProps.layout], contentElementWidth > contentElementWidths.md || sectionProps.layout === 'centerRagged'), _defineProperty({}, withShadowClassName, !sectionProps.invert))
+  }, renderSubtitle('tagline'), /*#__PURE__*/React.createElement(Tag, {
+    className: classNames(styles.main, 'scope-headings', configuration.typographyVariant && "typography-heading-".concat(configuration.typographyVariant), darkBackground ? styles.light : styles.dark),
+    style: {
+      color: paletteColor(configuration.color)
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    scaleCategory: getScaleCategory(configuration, firstSectionInEntry),
+    inline: true
+  }, /*#__PURE__*/React.createElement(EditableInlineText, {
+    value: configuration.value,
+    defaultValue: legacyValue,
+    hyphens: configuration.hyphens,
+    placeholder: firstSectionInEntry ? t('pageflow_scrolled.inline_editing.type_title') : t('pageflow_scrolled.inline_editing.type_heading'),
+    onChange: function onChange(value) {
+      return updateConfiguration({
+        value: value
+      });
+    }
+  }))), renderSubtitle('subtitle'));
+}
+
+function getScaleCategory(configuration, firstSectionInEntry) {
+  var suffix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var base = "heading".concat(capitalize(suffix));
+
+  switch (configuration.textSize) {
+    case 'large':
+      return "".concat(base, "-lg");
+
+    case 'medium':
+      return "".concat(base, "-md");
+
+    case 'small':
+      return "".concat(base, "-sm");
+
+    default:
+      return firstSectionInEntry ? "".concat(base, "-lg") : "".concat(base, "-sm");
+  }
+}
+
+function capitalize(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+frontend.contentElementTypes.register('heading', {
+  component: Heading,
+  lifecycle: true
+});
+
 var styles$1 = {"sliderStart":"BeforeAfter-module_sliderStart__2C5cN","container":"BeforeAfter-module_container__2Lm06","wiggle":"BeforeAfter-module_wiggle__3nVSe","SliderLeftRightShake":"BeforeAfter-module_SliderLeftRightShake__2mcn5","BeforeImageLeftRightShake":"BeforeAfter-module_BeforeImageLeftRightShake__38m9V","AfterImageLeftRightShake":"BeforeAfter-module_AfterImageLeftRightShake__3WMf1"};
 
 var placeholderForBeforeImage = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQwMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KIDwhLS0gQ3JlYXRlZCB3aXRoIE1ldGhvZCBEcmF3IC0gaHR0cDovL2dpdGh1Yi5jb20vZHVvcGl4ZWwvTWV0aG9kLURyYXcvIC0tPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9IiMzZDVhODAiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDUiIHdpZHRoPSI2NDIiIHk9Ii0xIiB4PSItMSIvPgogIDxnIGRpc3BsYXk9Im5vbmUiIG92ZXJmbG93PSJ2aXNpYmxlIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiBpZD0iY2FudmFzR3JpZCI+CiAgIDxyZWN0IGZpbGw9InVybCgjZ3JpZHBhdHRlcm4pIiBzdHJva2Utd2lkdGg9IjAiIHk9IjAiIHg9IjAiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiLz4KICA8L2c+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiA8L2c+Cjwvc3ZnPg==';
@@ -142,17 +220,13 @@ var placeholderFile = {
   width: 640,
   height: 403
 };
-function BeforeAfter(_ref) {
-  var isActive = _ref.isActive,
-      load = _ref.load,
-      caption = _ref.caption,
-      position = _ref.position,
-      before_id = _ref.before_id,
-      before_label = _ref.before_label,
-      after_id = _ref.after_id,
-      after_label = _ref.after_label,
-      initial_slider_position = _ref.initial_slider_position,
-      slider_color = _ref.slider_color;
+function BeforeAfter(configuration) {
+  var isActive = configuration.isActive,
+      load = configuration.load,
+      before_label = configuration.before_label,
+      after_label = configuration.after_label,
+      initial_slider_position = configuration.initial_slider_position,
+      slider_color = configuration.slider_color;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -171,13 +245,15 @@ function BeforeAfter(_ref) {
       return wiggle || isActive;
     });
   }, [isActive]);
-  var beforeImage = useFile({
+  var beforeImage = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: before_id
+    propertyName: 'before_id'
   });
-  var afterImage = useFile({
+  var afterImage = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: after_id
+    propertyName: 'after_id'
   });
 
   var _useContentElementEdi = useContentElementEditorState(),
@@ -188,17 +264,24 @@ function BeforeAfter(_ref) {
   var afterImageUrl = afterImage && afterImage.urls.large;
   var afterImageAlt = afterImage && afterImage.configuration.alt;
   var initialSliderPos = initial_slider_position / 100;
+  var inlineFileRightsItems = [{
+    file: beforeImage,
+    label: 'before'
+  }, {
+    file: afterImage,
+    label: 'after'
+  }];
   return /*#__PURE__*/React.createElement(FitViewport, {
     file: beforeImage || afterImage || placeholderFile
-  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: caption
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
   }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(Measure, {
     bounds: true
-  }, function (_ref2) {
+  }, function (_ref) {
     var _cx;
 
-    var measureRef = _ref2.measureRef,
-        contentRect = _ref2.contentRect;
+    var measureRef = _ref.measureRef,
+        contentRect = _ref.contentRect;
     var initialRectWidth = contentRect.bounds.width * initialSliderPos + 'px';
     return /*#__PURE__*/React.createElement("div", {
       ref: measureRef,
@@ -210,7 +293,13 @@ function BeforeAfter(_ref) {
       parentSelected: isSelected,
       position: initial_slider_position
     }), renderCompareImage());
-  })))));
+  }), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: inlineFileRightsItems
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: inlineFileRightsItems
+  }));
 
   function renderCompareImage() {
     if (!load) {
@@ -233,9 +322,9 @@ function BeforeAfter(_ref) {
   }
 }
 
-function InitialSliderPositionIndicator(_ref3) {
-  var parentSelected = _ref3.parentSelected,
-      position = _ref3.position;
+function InitialSliderPositionIndicator(_ref2) {
+  var parentSelected = _ref2.parentSelected,
+      position = _ref2.position;
   var indicatorWidth = '2px';
   var indicatorStyles = {
     left: "calc(".concat(position, "% - ").concat(indicatorWidth, "/2)"),
@@ -269,14 +358,18 @@ frontend.contentElementTypes.register('inlineBeforeAfter', {
 });
 
 function InlineImage(_ref) {
-  var configuration = _ref.configuration;
-  var imageFile = useFile({
+  var contentElementId = _ref.contentElementId,
+      contentElementWidth = _ref.contentElementWidth,
+      configuration = _ref.configuration;
+  var imageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.id
+    propertyName: 'id'
   });
-  var portraitImageFile = useFile({
+  var portraitImageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.portraitId
+    propertyName: 'portraitId'
   }); // Only render OrientationAwareInlineImage if a portrait image has
   // been selected. This prevents having the component rerender on
   // orientation changes even if it does not depend on orientation at
@@ -286,11 +379,15 @@ function InlineImage(_ref) {
     return /*#__PURE__*/React.createElement(OrientationAwareInlineImage, {
       landscapeImageFile: imageFile,
       portraitImageFile: portraitImageFile,
+      contentElementId: contentElementId,
+      contentElementWidth: contentElementWidth,
       configuration: configuration
     });
   } else {
     return /*#__PURE__*/React.createElement(ImageWithCaption, {
       imageFile: imageFile,
+      contentElementId: contentElementId,
+      contentElementWidth: contentElementWidth,
       configuration: configuration
     });
   }
@@ -299,35 +396,59 @@ function InlineImage(_ref) {
 function OrientationAwareInlineImage(_ref2) {
   var landscapeImageFile = _ref2.landscapeImageFile,
       portraitImageFile = _ref2.portraitImageFile,
+      contentElementId = _ref2.contentElementId,
+      contentElementWidth = _ref2.contentElementWidth,
       configuration = _ref2.configuration;
   var portraitOrientation = usePortraitOrientation();
   var imageFile = portraitOrientation && portraitImageFile ? portraitImageFile : landscapeImageFile;
   return /*#__PURE__*/React.createElement(ImageWithCaption, {
     imageFile: imageFile,
+    contentElementId: contentElementId,
+    contentElementWidth: contentElementWidth,
     configuration: configuration
   });
 }
 
 function ImageWithCaption(_ref3) {
   var imageFile = _ref3.imageFile,
+      contentElementId = _ref3.contentElementId,
+      contentElementWidth = _ref3.contentElementWidth,
       configuration = _ref3.configuration;
 
   var _useContentElementLif = useContentElementLifecycle(),
       shouldLoad = _useContentElementLif.shouldLoad;
 
+  var enableFullscreen = configuration.enableFullscreen;
+  var supportFullscreen = enableFullscreen && contentElementWidth < contentElementWidths.full;
   return /*#__PURE__*/React.createElement(FitViewport, {
     file: imageFile,
     aspectRatio: imageFile ? undefined : 0.75,
     opaque: !imageFile
-  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: configuration.caption
-  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(Image, {
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(ExpandableImage, {
+    enabled: supportFullscreen && shouldLoad,
+    imageFile: imageFile,
+    contentElementId: contentElementId
+  }, /*#__PURE__*/React.createElement(Image, {
     imageFile: imageFile,
     load: shouldLoad,
     structuredData: true,
-    variant: configuration.position === 'full' ? 'large' : 'medium',
+    variant: contentElementWidth === contentElementWidths.full ? 'large' : 'medium',
     preferSvg: true
-  })))));
+  })), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  }));
 }
 
 frontend.contentElementTypes.register('inlineImage', {
@@ -439,22 +560,87 @@ function getPlayerClickHandler(_ref) {
 
 function InlineVideo(_ref) {
   var contentElementId = _ref.contentElementId,
-      sectionProps = _ref.sectionProps,
       configuration = _ref.configuration;
-  var videoFile = useFile({
+  var videoFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'videoFiles',
-    permaId: configuration.id
+    propertyName: 'id'
   });
-  var posterImageFile = useFile({
+  var posterImageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.posterId
+    propertyName: 'posterId'
+  });
+  var portraitVideoFile = useFileWithInlineRights({
+    configuration: configuration,
+    collectionName: 'videoFiles',
+    propertyName: 'portraitId'
+  });
+  var portraitPosterImageFile = useFileWithInlineRights({
+    configuration: configuration,
+    collectionName: 'imageFiles',
+    propertyName: 'portraitPosterId'
+  }); // Only render OrientationAwareInlineImage if a portrait image has
+  // been selected. This prevents having the component rerender on
+  // orientation changes even if it does not depend on orientation at
+  // all.
+
+  if (portraitVideoFile) {
+    return /*#__PURE__*/React.createElement(OrientationAwareInlineVideo, {
+      landscapeVideoFile: videoFile,
+      portraitVideoFile: portraitVideoFile,
+      landscapePosterImageFile: posterImageFile,
+      portraitPosterImageFile: portraitPosterImageFile,
+      contentElementId: contentElementId,
+      configuration: configuration
+    });
+  } else {
+    return /*#__PURE__*/React.createElement(OrientationUnawareInlineVideo, {
+      videoFile: videoFile,
+      posterImageFile: posterImageFile,
+      contentElementId: contentElementId,
+      configuration: configuration
+    });
+  }
+}
+
+function OrientationAwareInlineVideo(_ref2) {
+  var landscapeVideoFile = _ref2.landscapeVideoFile,
+      portraitVideoFile = _ref2.portraitVideoFile,
+      landscapePosterImageFile = _ref2.landscapePosterImageFile,
+      portraitPosterImageFile = _ref2.portraitPosterImageFile,
+      contentElementId = _ref2.contentElementId,
+      configuration = _ref2.configuration;
+  var portraitOrientation = usePortraitOrientation();
+  var videoFile = portraitOrientation && portraitVideoFile ? portraitVideoFile : landscapeVideoFile;
+  var posterImageFile = portraitOrientation && portraitPosterImageFile ? portraitPosterImageFile : landscapePosterImageFile;
+  return /*#__PURE__*/React.createElement(OrientationUnawareInlineVideo, {
+    key: portraitOrientation,
+    videoFile: videoFile,
+    posterImageFile: posterImageFile,
+    contentElementId: contentElementId,
+    configuration: configuration
   });
+}
+
+function OrientationUnawareInlineVideo(_ref3) {
+  var videoFile = _ref3.videoFile,
+      posterImageFile = _ref3.posterImageFile,
+      contentElementId = _ref3.contentElementId,
+      configuration = _ref3.configuration;
 
   var _usePlayerState = usePlayerState(),
       _usePlayerState2 = _slicedToArray(_usePlayerState, 2),
       playerState = _usePlayerState2[0],
       playerActions = _usePlayerState2[1];
 
+  var inlineFileRightsItems = [{
+    label: 'video',
+    file: videoFile
+  }, {
+    label: 'poster',
+    file: posterImageFile
+  }];
   return /*#__PURE__*/React.createElement(MediaInteractionTracking, {
     playerState: playerState,
     playerActions: playerActions
@@ -462,30 +648,33 @@ function InlineVideo(_ref) {
     file: videoFile,
     aspectRatio: videoFile ? undefined : fallbackAspectRatio,
     opaque: !videoFile
-  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
   }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(MutedIndicator, {
     visible: media.muted && playerState.shouldPlay && !configuration.keepMuted
   }), /*#__PURE__*/React.createElement(Player, {
     key: configuration.playbackMode === 'loop',
     videoFile: videoFile,
     posterImageFile: posterImageFile,
+    inlineFileRightsItems: inlineFileRightsItems,
     playerState: playerState,
     playerActions: playerActions,
     contentElementId: contentElementId,
-    sectionProps: sectionProps,
     configuration: configuration
-  }))))));
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: inlineFileRightsItems
+  })));
 }
 
-function Player(_ref2) {
-  var videoFile = _ref2.videoFile,
-      posterImageFile = _ref2.posterImageFile,
-      playerState = _ref2.playerState,
-      playerActions = _ref2.playerActions,
-      contentElementId = _ref2.contentElementId,
-      sectionProps = _ref2.sectionProps,
-      configuration = _ref2.configuration;
+function Player(_ref4) {
+  var videoFile = _ref4.videoFile,
+      posterImageFile = _ref4.posterImageFile,
+      inlineFileRightsItems = _ref4.inlineFileRightsItems,
+      playerState = _ref4.playerState,
+      playerActions = _ref4.playerActions,
+      contentElementId = _ref4.contentElementId,
+      configuration = _ref4.configuration;
 
   var _useContentElementEdi = useContentElementEditorState(),
       isEditable = _useContentElementEdi.isEditable,
@@ -536,8 +725,8 @@ function Player(_ref2) {
     playerActions: playerActions,
     hideControlBar: configuration.hideControlBar || configuration.playbackMode === 'loop',
     hideBigPlayButton: configuration.playbackMode === 'loop',
+    inlineFileRightsItems: inlineFileRightsItems,
     configuration: configuration,
-    sectionProps: sectionProps,
     onPlayerClick: onPlayerClick
   }, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
     playerDescription: "Inline Video",
@@ -565,15 +754,16 @@ frontend.contentElementTypes.register('inlineVideo', {
 
 function InlineAudio(_ref) {
   var contentElementId = _ref.contentElementId,
-      sectionProps = _ref.sectionProps,
       configuration = _ref.configuration;
-  var audioFile = useFile({
+  var audioFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'audioFiles',
-    permaId: configuration.id
+    propertyName: 'id'
   });
-  var posterImageFile = useFile({
+  var posterImageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.posterId
+    propertyName: 'posterId'
   });
 
   var _usePlayerState = usePlayerState(),
@@ -618,18 +808,25 @@ function InlineAudio(_ref) {
     }
   };
 
+  var inlineFileRightsItems = [{
+    label: 'audio',
+    file: audioFile
+  }, {
+    label: 'image',
+    file: posterImageFile
+  }];
   return /*#__PURE__*/React.createElement(FitViewport, {
     file: posterImageFile
-  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
   }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(AudioPlayerControls, {
     audioFile: audioFile,
     defaultTextTrackFilePermaId: configuration.defaultTextTrackFileId,
     playerState: playerState,
     playerActions: playerActions,
     standAlone: !posterImageFile,
+    inlineFileRightsItems: inlineFileRightsItems,
     configuration: configuration,
-    sectionProps: sectionProps,
     onPlayerClick: onPlayerClick
   }, /*#__PURE__*/React.createElement(PlayerEventContextDataProvider, {
     playerDescription: "Inline Audio",
@@ -645,7 +842,10 @@ function InlineAudio(_ref) {
     quality: 'high',
     playsInline: true,
     atmoDuringPlayback: configuration.atmoDuringPlayback
-  })))))));
+  })))))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: inlineFileRightsItems
+  }));
 }
 
 frontend.contentElementTypes.register('inlineAudio', {
@@ -793,18 +993,18 @@ frontend.contentElementTypes.register('soundDisclaimer', {
   component: SoundDisclaimer
 });
 
-var styles$4 = {"breakpoint-sm":"(min-width: 640px)","text":"TextBlock-module_text__21Hk4","darkBackground":"TextBlock-module_darkBackground__22pEl","layout-centerRagged":"TextBlock-module_layout-centerRagged__1tjoI"};
+var styles$4 = {"contentLinkColor":"var(--content-link-color)","breakpoint-sm":"(min-width: 640px)","text":"TextBlock-module_text__21Hk4","quoteDesign-hanging":"TextBlock-module_quoteDesign-hanging__1c9AW","quoteDesign-largeHanging":"TextBlock-module_quoteDesign-largeHanging__2VkIW","layout-centerRagged":"TextBlock-module_layout-centerRagged__1tjoI"};
 
 function TextBlock(props) {
   var updateConfiguration = useContentElementConfigurationUpdate();
-  var dark = useDarkBackground();
 
   var _useI18n = useI18n({
     locale: 'ui'
   }),
       t = _useI18n.t;
 
-  var className = classNames(styles$4.text, _defineProperty({}, styles$4.darkBackground, dark), styles$4["layout-".concat(props.sectionProps.layout)]);
+  var theme = useTheme();
+  var className = classNames(styles$4.text, styles$4["quoteDesign-".concat(theme.options.quoteDesign || 'largeHanging')], styles$4["layout-".concat(props.sectionProps.layout)]);
   return /*#__PURE__*/React.createElement(EditableText, {
     value: props.configuration.value,
     contentElementId: props.contentElementId,
@@ -871,8 +1071,8 @@ function VideoEmbed(_ref) {
     }
   }, /*#__PURE__*/React.createElement(FitViewport, {
     aspectRatio: aspectRatios[configuration.aspectRatio || 'wide']
-  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: configuration.caption
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
   }, /*#__PURE__*/React.createElement(FitViewport.Content, null, shouldLoad && /*#__PURE__*/React.createElement(PreparedPlayer, {
     playerState: playerState,
     setPlayerState: setPlayerState,
@@ -881,8 +1081,7 @@ function VideoEmbed(_ref) {
     providerName: providerName
   })), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
     providerName: providerName,
-    hide: playerState === 'playing',
-    contentElementPosition: configuration.position
+    hide: playerState === 'playing'
   })))));
 }
 
@@ -1021,7 +1220,7 @@ frontend.contentElementTypes.register('videoEmbed', {
   }
 });
 
-var styles$6 = {"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)","hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","invert":"ExternalLink-module_invert__1zrgN","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","link_desc":"ExternalLink-module_link_desc__3fSe1","tooltip":"ExternalLink-module_tooltip__18MpC"};
+var styles$6 = {"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)","breakpoint-sm":"(min-width: 640px)","hidden":"ExternalLink-module_hidden__3jer0","link_item":"ExternalLink-module_link_item__Blypv","layout_center":"ExternalLink-module_layout_center__3NRpQ","link_title":"ExternalLink-module_link_title__FZJ-0","link_thumbnail":"ExternalLink-module_link_thumbnail__2_BHq","link_details":"ExternalLink-module_link_details__lRhKU","invert":"ExternalLink-module_invert__1zrgN","tooltip":"ExternalLink-module_tooltip__18MpC"};
 
 function ExternalLink(props) {
   var _classNames2;
@@ -1111,7 +1310,7 @@ function ensureAbsolute(url) {
   }
 }
 
-var styles$7 = {"ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo scope-externalLinks"};
+var styles$7 = {"contentColorScope":"colors-module_contentColorScope__3zLO1","ext_links_container":"ExternalLinkList-module_ext_links_container__16IIo scope-externalLinks colors-module_contentColorScope__3zLO1"};
 
 function ExternalLinkList(props) {
   var linkList = props.configuration.links || [];
@@ -1187,8 +1386,8 @@ function DataWrapperChart(_ref) {
   }
 
   var backgroundColor = configuration.backgroundColor || '#323d4d';
-  return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: configuration.caption
+  return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$8.container,
     style: {
@@ -1201,8 +1400,7 @@ function DataWrapperChart(_ref) {
   }, /*#__PURE__*/React.createElement(ThirdPartyOptIn, {
     providerName: "datawrapper"
   }, shouldLoad && renderIframe(srcURL, configuration.title || t('pageflow_scrolled.public.chart.default_title'))), /*#__PURE__*/React.createElement(DatawrapperOptOutInfo, {
-    providerName: "datawrapper",
-    contentElementPosition: configuration.position
+    providerName: "datawrapper"
   }))));
 }
 
@@ -1295,7 +1493,8 @@ function useAutoCruising(_ref) {
 }
 
 function VrImage(_ref) {
-  var configuration = _ref.configuration;
+  var configuration = _ref.configuration,
+      contentElementWidth = _ref.contentElementWidth;
 
   var _useContentElementLif = useContentElementLifecycle(),
       shouldLoad = _useContentElementLif.shouldLoad;
@@ -1304,19 +1503,32 @@ function VrImage(_ref) {
       isEditable = _useContentElementEdi.isEditable,
       isSelected = _useContentElementEdi.isSelected;
 
-  var imageFile = useFile({
+  var imageFile = useFileWithInlineRights({
+    configuration: configuration,
     collectionName: 'imageFiles',
-    permaId: configuration.image
+    propertyName: 'image'
   });
   return /*#__PURE__*/React.createElement("div", {
     style: {
       pointerEvents: isEditable && !isSelected ? 'none' : undefined
     }
   }, /*#__PURE__*/React.createElement(FitViewport, {
-    aspectRatio: configuration.position === 'full' ? 0.5 : 0.75
-  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: configuration.caption
-  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, renderLazyPanorama(configuration, imageFile, shouldLoad))))));
+    aspectRatio: contentElementWidth === contentElementWidths.full ? 0.5 : 0.75
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, renderLazyPanorama(configuration, imageFile, shouldLoad), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })));
 }
 
 function renderLazyPanorama(configuration, imageFile, shouldLoad) {
@@ -1401,13 +1613,25 @@ function IframeEmbed(_ref) {
   }, /*#__PURE__*/React.createElement(FitViewport, {
     aspectRatio: aspectRatios$1[aspectRatio || 'wide'],
     opaque: utils.isBlank(configuration.source)
-  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
-    caption: configuration.caption
-  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, shouldLoad && /*#__PURE__*/React.createElement("iframe", {
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
+    configuration: configuration
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement(ThirdPartyOptIn, null, shouldLoad && /*#__PURE__*/React.createElement("iframe", {
     className: classNames(styles$9.iframe, styles$9["scale-".concat(configuration.scale)]),
     title: configuration.title,
     src: configuration.source
-  }))))));
+  }))), /*#__PURE__*/React.createElement(OptOutInfo, {
+    configuration: configuration
+  })))));
+}
+
+function OptOutInfo(_ref2) {
+  var configuration = _ref2.configuration;
+
+  if (!configuration.requireConsent) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, null);
 }
 
 frontend.contentElementTypes.register('iframeEmbed', {
@@ -1519,8 +1743,7 @@ function TwitterEmbed(_ref) {
   })) : /*#__PURE__*/React.createElement(Placeholder, {
     minHeight: minHeight[key]
   }), /*#__PURE__*/React.createElement(ThirdPartyOptOutInfo, {
-    providerName: "twitter",
-    contentElementPosition: configuration.position
+    providerName: "twitter"
   })));
 }
 
@@ -1597,7 +1820,7 @@ frontend.contentElementTypes.register('twitterEmbed', {
   }
 });
 
-var styles$c = {"details":"Question-module_details__3FxH-","layout-centerRagged":"Question-module_layout-centerRagged__1hovs"};
+var styles$c = {"contentLinkColor":"var(--content-link-color)","details":"Question-module_details__3FxH-","answer":"Question-module_answer__2jMt6","layout-centerRagged":"Question-module_layout-centerRagged__1hovs"};
 
 function Question(_ref) {
   var configuration = _ref.configuration,
@@ -1637,6 +1860,7 @@ function Question(_ref) {
   }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(EditableText, {
     value: configuration.answer,
     contentElementId: contentElementId,
+    className: styles$c.answer,
     onChange: function onChange(answer) {
       return updateConfiguration({
         answer: answer
@@ -1651,3 +1875,554 @@ function Question(_ref) {
 frontend.contentElementTypes.register('question', {
   component: Question
 });
+
+var styles$d = {"contentLinkColor":"var(--content-link-color)","wrapper":"Counter-module_wrapper__3XTil","number":"Counter-module_number__1Y4AV","centerRagged":"Counter-module_centerRagged__3Va0Y","center":"Counter-module_center__1SCJY","animation-fadeIn":"Counter-module_animation-fadeIn__3Hyky","animation-fadeIn-active":"Counter-module_animation-fadeIn-active__16DIk","animation-fadeInFromBelow":"Counter-module_animation-fadeInFromBelow__3l1qX","animation-fadeInFromAbove":"Counter-module_animation-fadeInFromAbove__3iGf-","animation-fadeInFromAbove-active":"Counter-module_animation-fadeInFromAbove-active__37UsW","animation-fadeInFromBelow-active":"Counter-module_animation-fadeInFromBelow-active__2CSjv","animation-fadeInScaleUp":"Counter-module_animation-fadeInScaleUp__1ngk5","animation-fadeInScaleDown":"Counter-module_animation-fadeInScaleDown__SpNGu","animation-fadeInScaleUp-active":"Counter-module_animation-fadeInScaleUp-active__1GEXn","animation-fadeInScaleDown-active":"Counter-module_animation-fadeInScaleDown-active__3gaYM"};
+
+function Counter(_ref) {
+  var configuration = _ref.configuration,
+      contentElementId = _ref.contentElementId,
+      contentElementWidth = _ref.contentElementWidth,
+      sectionProps = _ref.sectionProps;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+  var locale = useLocale();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var targetValue = configuration.targetValue || 0;
+  var decimalPlaces = configuration.decimalPlaces || 0;
+  var startValue = configuration.startValue || 0;
+  var countingDuration = countingDurations[configuration.countingSpeed];
+
+  var _useState = useState(countingDuration > 0 ? startValue : targetValue),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentValue = _useState2[0],
+      setCurrentValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      animated = _useState4[0],
+      setAnimated = _useState4[1];
+
+  var intervalRef = useRef();
+  var timeoutRef = useRef();
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isEditable = _useContentElementEdi.isEditable;
+
+  var animate = useCallback(function () {
+    setAnimated(true);
+
+    if (!intervalRef.current && countingDuration > 0) {
+      var startTime = new Date().getTime();
+      var ease = configuration.entranceAnimation && configuration.entranceAnimation !== 'none' ? easeOut : easeInOut;
+      intervalRef.current = setInterval(function () {
+        var t = (new Date().getTime() - startTime) / countingDuration;
+
+        if (t < 1) {
+          setCurrentValue(startValue + (targetValue - startValue) * ease(t));
+        } else {
+          clearInterval(intervalRef.current);
+          setCurrentValue(targetValue);
+        }
+      }, 10);
+    }
+  }, [targetValue, startValue, countingDuration, configuration.entranceAnimation]);
+  var resetAnimation = useCallback(function () {
+    clearInterval(intervalRef.current);
+    intervalRef.current = null;
+    setCurrentValue(countingDuration > 0 ? startValue : targetValue);
+    setAnimated(false);
+  }, [startValue, targetValue, countingDuration]);
+  useEffect(function () {
+    if (isEditable) {
+      resetAnimation();
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(animate, 500);
+    }
+  }, [animate, resetAnimation, isEditable]);
+  useContentElementLifecycle({
+    onActivate: function onActivate() {
+      animate();
+    },
+    onInvisible: function onInvisible() {
+      if (isEditable) {
+        resetAnimation();
+      }
+    }
+  });
+
+  function format(value) {
+    var localeString = value.toLocaleString(locale, {
+      minimumFractionDigits: decimalPlaces,
+      maximumFractionDigits: decimalPlaces
+    });
+    var unit = configuration.unit || '';
+    return configuration.unitPlacement === 'leading' ? "".concat(unit).concat(localeString) : "".concat(localeString).concat(unit);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(_defineProperty({}, styles$d.center, contentElementWidth > contentElementWidths.md))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$d.wrapper, _defineProperty({}, styles$d.centerRagged, sectionProps.layout === 'centerRagged'))
+  }, /*#__PURE__*/React.createElement(Text, {
+    scaleCategory: numberScaleCategories[configuration.textSize || 'medium']
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames("typography-counter-".concat(configuration.typographyVariant), styles$d.number, styles$d["animation-".concat(configuration.entranceAnimation)], _defineProperty({}, styles$d["animation-".concat(configuration.entranceAnimation, "-active")], animated)),
+    style: {
+      '--counting-duration': "".concat(countingDuration || 1000, "ms"),
+      '--palette-color': paletteColor(configuration.numberColor)
+    }
+  }, format(currentValue))), /*#__PURE__*/React.createElement(EditableText, {
+    value: configuration.description,
+    contentElementId: contentElementId,
+    className: styles$d.description,
+    onChange: function onChange(description) {
+      return updateConfiguration({
+        description: description
+      });
+    },
+    onlyParagraphs: true,
+    scaleCategory: "counterDescription",
+    placeholder: t('pageflow_scrolled.inline_editing.type_description')
+  })));
+}
+var numberScaleCategories = {
+  verySmall: 'counterNumber-xs',
+  small: 'counterNumber-sm',
+  medium: 'counterNumber-md',
+  large: 'counterNumber-lg'
+};
+var countingDurations = {
+  none: 0,
+  fast: 500,
+  medium: 2000,
+  slow: 5000
+};
+
+function easeInOut(t) {
+  t = t * 2;
+  if (t < 1) return Math.pow(t, 2) / 2;
+  t = t - 1;
+  return t - Math.pow(t, 2) / 2 + 1 / 2;
+}
+
+function easeOut(t) {
+  return (t - Math.pow(t, 2) / 2) * 2;
+}
+
+frontend.contentElementTypes.register('counter', {
+  component: Counter,
+  lifecycle: true
+});
+
+var styles$e = {"breakpoint-sm":"(min-width: 640px)","contentLinkColor":"var(--content-link-color)","figure":"Quote-module_figure__1Q3tJ","design-largeCentered":"Quote-module_design-largeCentered__2f6qW","text":"Quote-module_text__C0md2","design-largeHanging":"Quote-module_design-largeHanging__1TVQh","design-hanging":"Quote-module_design-hanging__4aDVU","centerRagged":"Quote-module_centerRagged__1CeFH","maskedMark":"Quote-module_maskedMark__2n08e","attribution":"Quote-module_attribution__3iXxu"};
+
+function Quote(_ref) {
+  var _theme$options$proper, _theme$options$proper2;
+
+  var configuration = _ref.configuration,
+      contentElementId = _ref.contentElementId,
+      sectionProps = _ref.sectionProps;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected;
+
+  var theme = useTheme();
+
+  var _useI18n = useI18n({
+    locale: 'ui'
+  }),
+      t = _useI18n.t;
+
+  var design = configuration.variant ? configuration.variant.split('-')[0] : theme.options.quoteDesign;
+  return /*#__PURE__*/React.createElement("figure", {
+    className: classNames(styles$e.figure, styles$e["design-".concat(design || 'largeHanging')], "scope-quote-".concat(configuration.variant), _defineProperty({}, styles$e.maskedMark, (_theme$options$proper = theme.options.properties) === null || _theme$options$proper === void 0 ? void 0 : (_theme$options$proper2 = _theme$options$proper.root) === null || _theme$options$proper2 === void 0 ? void 0 : _theme$options$proper2.quoteLeftMarkMaskImage), _defineProperty({}, styles$e.centerRagged, sectionProps.layout === 'centerRagged')),
+    style: {
+      '--palette-color': paletteColor(configuration.color)
+    }
+  }, /*#__PURE__*/React.createElement("blockquote", {
+    className: styles$e.text
+  }, /*#__PURE__*/React.createElement(EditableText, {
+    value: configuration.text,
+    contentElementId: contentElementId,
+    onChange: function onChange(text) {
+      return updateConfiguration({
+        text: text
+      });
+    },
+    onlyParagraphs: true,
+    scaleCategory: getTextScaleCategory(configuration)
+  })), (isSelected || !utils.isBlankEditableTextValue(configuration.attribution || [])) && /*#__PURE__*/React.createElement("figcaption", {
+    className: styles$e.attribution
+  }, /*#__PURE__*/React.createElement(EditableText, {
+    value: configuration.attribution,
+    contentElementId: contentElementId,
+    onChange: function onChange(attribution) {
+      return updateConfiguration({
+        attribution: attribution
+      });
+    },
+    onlyParagraphs: true,
+    scaleCategory: "quoteAttribution",
+    placeholder: t('pageflow_scrolled.inline_editing.type_attribution')
+  })));
+}
+
+function getTextScaleCategory(configuration) {
+  switch (configuration.textSize) {
+    case 'large':
+      return 'quoteText-lg';
+
+    case 'small':
+      return 'quoteText-sm';
+
+    case 'verySmall':
+      return 'quoteText-xs';
+
+    default:
+      return 'quoteText-md';
+  }
+}
+
+frontend.contentElementTypes.register('quote', {
+  component: Quote
+});
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
+var styles$f = {"button":"ScrollButton-module_button__3DeL7","left":"ScrollButton-module_left__3uACk","right":"ScrollButton-module_right__25CLO","disabled":"ScrollButton-module_disabled__3fQR1","icon":"ScrollButton-module_icon__35w1l"};
+
+var size = 40;
+function ScrollButton(_ref) {
+  var direction = _ref.direction,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement("button", {
+    className: classNames(styles$f.button, styles$f[direction], _defineProperty({}, styles$f.disabled, disabled)),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.icon
+  }, /*#__PURE__*/React.createElement(ThemeIcon, {
+    name: direction === 'left' ? 'arrowLeft' : 'arrowRight',
+    width: size,
+    height: size
+  })));
+}
+
+function useIntersectionObserver(_ref) {
+  var threshold = _ref.threshold,
+      onVisibleIndexChange = _ref.onVisibleIndexChange;
+  var containerRef = useRef();
+  var childRefs = useRef([]);
+  var observerRef = useRef();
+  useEffect(function () {
+    var observer = observerRef.current = new IntersectionObserver(function (entries) {
+      var containerElement = containerRef.current;
+      entries.forEach(function (entry) {
+        var entryIndex = Array.from(containerElement.children).findIndex(function (child) {
+          return child === entry.target;
+        });
+
+        if (entry.isIntersecting) {
+          onVisibleIndexChange(entryIndex);
+        }
+      });
+    }, {
+      root: containerRef.current,
+      threshold: threshold
+    });
+    childRefs.current.forEach(function (child) {
+      if (child) {
+        observer.observe(child);
+      }
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, [threshold, onVisibleIndexChange]);
+
+  var setChildRef = function setChildRef(index) {
+    return function (ref) {
+      if (observerRef.current) {
+        if (ref) {
+          observerRef.current.observe(ref);
+        } else {
+          observerRef.current.unobserve(childRefs.current[index]);
+        }
+      }
+
+      childRefs.current[index] = ref;
+    };
+  };
+
+  return {
+    containerRef: containerRef,
+    setChildRef: setChildRef
+  };
+}
+
+var styles$g = {"lightContentTextColor":"var(--theme-light-content-text-color, #fff)","contentLinkColor":"var(--content-link-color)","wrapper":"ImageGallery-module_wrapper__2H9en","wide":"ImageGallery-module_wide__xGLuJ","customMargin":"ImageGallery-module_customMargin__1VxM6","button":"ImageGallery-module_button__35bDf","leftButton":"ImageGallery-module_leftButton__3V-J6 ImageGallery-module_button__35bDf","rightButton":"ImageGallery-module_rightButton__ba0q5 ImageGallery-module_button__35bDf","items":"ImageGallery-module_items__1q4QG","item":"ImageGallery-module_item__iqvfP","current":"ImageGallery-module_current__2Mm11","figure":"ImageGallery-module_figure__3zkJb","placeholder":"ImageGallery-module_placeholder__39Vq4"};
+
+function ImageGallery(_ref) {
+  var configuration = _ref.configuration,
+      contentElementId = _ref.contentElementId,
+      contentElementWidth = _ref.contentElementWidth,
+      customMargin = _ref.customMargin;
+
+  var _useState = useState(-1),
+      _useState2 = _slicedToArray(_useState, 2),
+      visibleIndex = _useState2[0],
+      setVisibleIndex = _useState2[1];
+
+  var isPhonePlatform = usePhonePlatform();
+  return /*#__PURE__*/React.createElement(FullscreenViewer, {
+    contentElementId: contentElementId,
+    renderChildren: function renderChildren(_ref2) {
+      var enterFullscreen = _ref2.enterFullscreen,
+          isFullscreen = _ref2.isFullscreen;
+      return /*#__PURE__*/React.createElement(Scroller, {
+        customMargin: customMargin,
+        configuration: configuration,
+        contentElementWidth: contentElementWidth,
+        controlled: isFullscreen,
+        displayFullscreenToggle: !isPhonePlatform && contentElementWidth !== contentElementWidths.full && configuration.enableFullscreenOnDesktop,
+        visibleIndex: visibleIndex,
+        setVisibleIndex: setVisibleIndex,
+        onFullscreenEnter: enterFullscreen
+      });
+    },
+    renderFullscreenChildren: function renderFullscreenChildren(_ref3) {
+      var exitFullscreen = _ref3.exitFullscreen;
+      return /*#__PURE__*/React.createElement(Scroller, {
+        configuration: configuration,
+        contentElementWidth: contentElementWidth,
+        visibleIndex: visibleIndex,
+        setVisibleIndex: setVisibleIndex,
+        displayFullscreenToggle: false,
+        onBump: exitFullscreen,
+        onFullscreenExit: exitFullscreen
+      });
+    }
+  });
+}
+
+function Scroller(_ref4) {
+  var visibleIndex = _ref4.visibleIndex,
+      setVisibleIndex = _ref4.setVisibleIndex,
+      displayFullscreenToggle = _ref4.displayFullscreenToggle,
+      customMargin = _ref4.customMargin,
+      onFullscreenEnter = _ref4.onFullscreenEnter,
+      onFullscreenExit = _ref4.onFullscreenExit,
+      onBump = _ref4.onBump,
+      configuration = _ref4.configuration,
+      contentElementWidth = _ref4.contentElementWidth,
+      controlled = _ref4.controlled;
+  var lastVisibleIndex = useRef(null);
+
+  var _useContentElementEdi = useContentElementEditorState(),
+      isSelected = _useContentElementEdi.isSelected,
+      isEditable = _useContentElementEdi.isEditable;
+
+  var items = configuration.items || [];
+
+  if (!items.length && isEditable) {
+    items = [{
+      id: 1,
+      placeholder: true
+    }];
+  }
+
+  var onVisibleIndexChange = useCallback(function (index) {
+    if (!controlled) {
+      lastVisibleIndex.current = index;
+      setVisibleIndex(index);
+    }
+  }, [controlled, setVisibleIndex]);
+
+  var _useIntersectionObser = useIntersectionObserver({
+    onVisibleIndexChange: onVisibleIndexChange,
+    threshold: 0.7
+  }),
+      scrollerRef = _useIntersectionObser.containerRef,
+      setChildRef = _useIntersectionObser.setChildRef;
+
+  useEffect(function () {
+    if (lastVisibleIndex.current !== visibleIndex && visibleIndex >= 0 && (controlled || lastVisibleIndex.current === null)) {
+      lastVisibleIndex.current = visibleIndex;
+      var scroller = scrollerRef.current;
+      var item = scroller.children[visibleIndex];
+      scroller.style.scrollBehavior = 'auto';
+      scroller.scrollTo(Math.abs(scroller.offsetLeft - item.offsetLeft), 0);
+      scroller.style.scrollBehavior = null;
+    }
+  }, [visibleIndex, scrollerRef, controlled]);
+
+  function scrollBy(delta) {
+    var scroller = scrollerRef.current;
+    var child = scroller.children[visibleIndex + delta];
+
+    if (child) {
+      scrollerRef.current.scrollTo(child.offsetLeft - scroller.offsetLeft, 0);
+    }
+  }
+
+  function handleClick(event) {
+    if (isEditable && !isSelected) {
+      return;
+    }
+
+    var rect = scrollerRef.current.getBoundingClientRect();
+
+    if ((event.pageX - rect.x) / rect.width < 0.5) {
+      if (visibleIndex > 0) {
+        scrollBy(-1);
+      } else if (onBump) {
+        onBump();
+      }
+    } else {
+      if (visibleIndex < items.length - 1) {
+        scrollBy(1);
+      } else if (onBump) {
+        onBump();
+      }
+    }
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$g.wrapper, _defineProperty({}, styles$g.wide, contentElementWidth === contentElementWidths.lg || contentElementWidth === contentElementWidths.xl), _defineProperty({}, styles$g.customMargin, customMargin))
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.leftButton
+  }, /*#__PURE__*/React.createElement(ScrollButton, {
+    direction: "left",
+    disabled: visibleIndex <= 0,
+    onClick: function onClick() {
+      return scrollBy(-1);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$g.rightButton
+  }, /*#__PURE__*/React.createElement(ScrollButton, {
+    direction: "right",
+    disabled: visibleIndex >= items.length - 1,
+    onClick: function onClick() {
+      return scrollBy(1);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$g.items,
+    ref: scrollerRef
+  }, items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Item, {
+      key: item.id,
+      ref: setChildRef(index),
+      item: item,
+      current: index === visibleIndex,
+      captions: configuration.captions || {},
+      onClick: handleClick
+    }, displayFullscreenToggle && /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
+      isFullscreen: false,
+      onEnter: onFullscreenEnter
+    }));
+  })));
+}
+
+var Item = forwardRef(function (_ref5, ref) {
+  var _classNames3;
+
+  var item = _ref5.item,
+      captions = _ref5.captions,
+      current = _ref5.current,
+      onClick = _ref5.onClick,
+      children = _ref5.children;
+  var updateConfiguration = useContentElementConfigurationUpdate();
+
+  var _useContentElementLif = useContentElementLifecycle(),
+      shouldLoad = _useContentElementLif.shouldLoad;
+
+  var caption = captions[item.id];
+  var imageFile = useFileWithInlineRights({
+    configuration: item,
+    collectionName: 'imageFiles',
+    propertyName: 'image'
+  });
+
+  var handleCaptionChange = function handleCaptionChange(caption) {
+    updateConfiguration({
+      captions: _objectSpread2(_objectSpread2({}, captions), {}, _defineProperty({}, item.id, caption))
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$g.item, (_classNames3 = {}, _defineProperty(_classNames3, styles$g.current, current), _defineProperty(_classNames3, styles$g.placeholder, item.placeholder), _classNames3)),
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.figure
+  }, /*#__PURE__*/React.createElement(FitViewport, {
+    file: imageFile,
+    aspectRatio: imageFile ? undefined : 0.75,
+    scale: 0.8,
+    opaque: !imageFile
+  }, /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(Figure, {
+    caption: caption,
+    onCaptionChange: handleCaptionChange,
+    addCaptionButtonVisible: current && !item.placeholder,
+    addCaptionButtonPosition: "inside"
+  }, /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement("div", {
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Image, {
+    imageFile: imageFile,
+    load: shouldLoad
+  })), children, /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "insideElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  })))), /*#__PURE__*/React.createElement(InlineFileRights, {
+    context: "afterElement",
+    items: [{
+      file: imageFile,
+      label: 'image'
+    }]
+  }))));
+});
+
+frontend.contentElementTypes.register('imageGallery', {
+  component: ImageGallery,
+  lifecycle: true,
+  customMargin: true
+});