pageflow 17.1.0 → 17.2.0

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

@@ -1,146 +1,143 @@
-import { useI18n, ThemeIcon, paletteColor, useContentElementLifecycle, useFile, Image, useContentElementConfigurationUpdate, useContentElementEditorState, useDarkBackground, useFileWithInlineRights, useFloatingPortalRoot, utils, InlineFileRights, Text, EditableInlineText, EditableText, LinkButton, usePortraitOrientation, usePhonePlatform, useContentElementEditorCommandSubscription, useIsomorphicLayoutEffect, FullscreenViewer, contentElementWidths, ContentElementBox, ContentElementFigure, FitViewport, ToggleFullscreenCornerButton, frontend } from 'pageflow-scrolled/frontend';
+import { useI18n, ThemeIcon, useTheme, paletteColor, useContentElementLifecycle, useFile, Image, useContentElementConfigurationUpdate, useContentElementEditorState, useStorylineActivity, useDelayedBoolean, useDarkBackground, useFileWithInlineRights, useFloatingPortalRoot, utils, InlineFileRights, Text, EditableInlineText, EditableText, LinkButton, usePortraitOrientation, usePhonePlatform, useContentElementEditorCommandSubscription, useIsomorphicLayoutEffect, FullscreenViewer, contentElementWidths, ContentElementBox, ContentElementFigure, FitViewport, FilePlaceholder, ToggleFullscreenCornerButton, frontend } from 'pageflow-scrolled/frontend';
 import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { FloatingPortal, useTransitionStyles, useFloating, offset, shift, flip, arrow, autoUpdate, useRole, useDismiss, useInteractions, CompositeItem, FloatingFocusManager, FloatingArrow, Composite } from '@floating-ui/react';
 import classNames from 'classnames';
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(n);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
 var styles = {"button":"PagerButton-module_button__1WPOu","icon":"PagerButton-module_icon__346kq","disabled":"PagerButton-module_disabled__1SbjV","visuallyHidden":"PagerButton-module_visuallyHidden__1Hrir"};
 
-var size = 40;
-function PagerButton(_ref) {
-  var direction = _ref.direction,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick;
-  var _useI18n = useI18n(),
-    t = _useI18n.t;
+var _jsxFileName = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/PagerButton.js";
+const size = 40;
+function PagerButton({
+  direction,
+  disabled,
+  onClick
+}) {
+  const {
+    t
+  } = useI18n();
   return /*#__PURE__*/React.createElement("button", {
-    className: classNames(styles.button, _defineProperty({}, styles.disabled, disabled)),
+    className: classNames(styles.button, {
+      [styles.disabled]: disabled
+    }),
     tabIndex: "-1",
-    onClick: onClick
+    onClick: onClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.icon
+    className: styles.icon,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 17,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(ThemeIcon, {
     name: direction === 'left' ? 'arrowLeft' : 'arrowRight',
     width: size,
-    height: size
+    height: size,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 18,
+      columnNumber: 9
+    }
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles.visuallyHidden
+    className: styles.visuallyHidden,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 21,
+      columnNumber: 9
+    }
   }, t(direction === 'left' ? 'pageflow_scrolled.public.previous' : 'pageflow_scrolled.public.next'))));
 }
 function insidePagerButton(element) {
-  return !!element.closest(".".concat(styles.button));
+  return !!element.closest(`.${styles.button}`);
 }
 
 var styles$1 = {"outer":"Pager-module_outer__2CrMo","customMargin":"Pager-module_customMargin__1qTs3","left":"Pager-module_left__2UmsW","right":"Pager-module_right__2Qn5W","center":"Pager-module_center__1nzq4"};
 
-function Pager(_ref) {
-  var areas = _ref.areas,
-    customMargin = _ref.customMargin,
-    panZoomEnabled = _ref.panZoomEnabled,
-    hideButtons = _ref.hideButtons,
-    activeIndex = _ref.activeIndex,
-    activateArea = _ref.activateArea,
-    children = _ref.children;
+var _jsxFileName$1 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/Pager.js";
+function Pager({
+  areas,
+  customMargin,
+  panZoomEnabled,
+  hideButtons,
+  activeIndex,
+  activateArea,
+  children
+}) {
+  const theme = useTheme();
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$1.outer, _defineProperty({}, styles$1.customMargin, customMargin))
+    className: classNames(styles$1.outer, {
+      [styles$1.customMargin]: customMargin
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 17,
+      columnNumber: 5
+    }
   }, renderScrollButtons(), /*#__PURE__*/React.createElement("div", {
-    className: styles$1.center
+    className: styles$1.center,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 19,
+      columnNumber: 7
+    }
   }, children));
   function renderScrollButtons() {
-    if (!panZoomEnabled) {
+    if (!panZoomEnabled || theme.options.hotspotsPagerButtonsHidden) {
       return null;
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: styles$1.left
+      className: styles$1.left,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 32,
+        columnNumber: 9
+      }
     }, /*#__PURE__*/React.createElement(PagerButton, {
       direction: "left",
       disabled: activeIndex === -1 || hideButtons,
-      onClick: function onClick() {
+      onClick: () => {
         if (activeIndex >= 0) {
           activateArea(activeIndex - 1);
         }
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 33,
+        columnNumber: 11
       }
     })), /*#__PURE__*/React.createElement("div", {
-      className: styles$1.right
+      className: styles$1.right,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 41,
+        columnNumber: 9
+      }
     }, /*#__PURE__*/React.createElement(PagerButton, {
       direction: "right",
       disabled: activeIndex >= areas.length || hideButtons,
-      onClick: function onClick() {
+      onClick: () => {
         if (activeIndex < areas.length) {
           activateArea(activeIndex + 1);
         }
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 42,
+        columnNumber: 11
       }
     })));
   }
@@ -148,47 +145,82 @@ function Pager(_ref) {
 
 var styles$2 = {"scroller":"Scroller-module_scroller__b_jkV","sticky":"Scroller-module_sticky__1nSEO","inner":"Scroller-module_inner__XTNms","step":"Scroller-module_step__1ar7Q"};
 
-var Scroller = React.forwardRef(function Scroller(_ref, ref) {
-  var areas = _ref.areas,
-    disabled = _ref.disabled,
-    setStepRef = _ref.setStepRef,
-    children = _ref.children;
+var _jsxFileName$2 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/Scroller.js";
+const Scroller = React.forwardRef(function Scroller({
+  areas,
+  disabled,
+  setStepRef,
+  children
+}, ref) {
   if (disabled) {
     return children;
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: styles$2.scroller
+    className: styles$2.scroller,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 14,
+      columnNumber: 7
+    }
   }, Array.from({
     length: areas.length + 2
-  }, function (_, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: index,
-      ref: setStepRef(index),
-      className: styles$2.step
-    });
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.sticky
+  }, (_, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    ref: setStepRef(index),
+    className: styles$2.step,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 17,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.sticky,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 21,
+      columnNumber: 9
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.inner
+    className: styles$2.inner,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 22,
+      columnNumber: 11
+    }
   }, children))));
 });
 
 var styles$3 = {"area":"Area-module_area__2uQD0","clip":"Area-module_clip__TgtiP","outline":"Area-module_outline__bRQqm","noPointerEvents":"Area-module_noPointerEvents__kLM1Z","hidden":"Area-module_hidden__2SAnU","highlighted":"Area-module_highlighted__2hdr1"};
 
-function Area(_ref) {
-  var area = _ref.area,
-    noPointerEvents = _ref.noPointerEvents,
-    highlighted = _ref.highlighted,
-    outlined = _ref.outlined,
-    outlineHidden = _ref.outlineHidden,
-    className = _ref.className,
-    children = _ref.children,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
-    onClick = _ref.onClick;
+var _jsxFileName$3 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/Area.js";
+function Area({
+  area,
+  noPointerEvents,
+  highlighted,
+  outlined,
+  outlineHidden,
+  className,
+  children,
+  onMouseEnter,
+  onMouseLeave,
+  onClick
+}) {
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$3.area, className, _defineProperty(_defineProperty({}, styles$3.highlighted, highlighted), styles$3.noPointerEvents, noPointerEvents))
+    className: classNames(styles$3.area, className, {
+      [styles$3.highlighted]: highlighted,
+      [styles$3.noPointerEvents]: noPointerEvents
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 15,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3.clip,
     style: {
@@ -197,193 +229,156 @@ function Area(_ref) {
     tabIndex: "-1",
     onClick: onClick,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 19,
+      columnNumber: 7
+    }
   }), children, outlined && /*#__PURE__*/React.createElement(Outline, {
     points: area.outline,
     color: areaColor(area),
-    hidden: outlineHidden
+    hidden: outlineHidden,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 26,
+      columnNumber: 20
+    }
   }));
 }
 function areaColor(area) {
   return paletteColor(area.color);
 }
-function Outline(_ref2) {
-  var points = _ref2.points,
-    color = _ref2.color,
-    hidden = _ref2.hidden;
+function Outline({
+  points,
+  color,
+  hidden
+}) {
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames(styles$3.outline, _defineProperty({}, styles$3.hidden, hidden)),
+    className: classNames(styles$3.outline, {
+      [styles$3.hidden]: hidden
+    }),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 100 100",
-    preserveAspectRatio: "none"
+    preserveAspectRatio: "none",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 39,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement("polygon", {
-    points: points.map(function (coords) {
-      return coords.map(function (coord) {
-        return coord;
-      }).join(',');
-    }).join(' '),
+    points: points.map(coords => coords.map(coord => coord).join(',')).join(' '),
     style: {
       stroke: color
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$3,
+      lineNumber: 44,
+      columnNumber: 7
     }
   }));
 }
 function polygon(points) {
-  return "polygon(".concat(points.map(function (coords) {
-    return coords.map(function (coord) {
-      return "".concat(coord, "%");
-    }).join(' ');
-  }).join(', '), ")");
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
+  return `polygon(${points.map(coords => coords.map(coord => `${coord}%`).join(' ')).join(', ')})`;
 }
 
 var styles$4 = {"area":"ImageArea-module_area__3rqgC","activeImageVisible":"ImageArea-module_activeImageVisible__oYKOK"};
 
-var _excluded = ["panZoomEnabled", "activeImageVisible"];
-function ImageArea(_ref) {
-  var panZoomEnabled = _ref.panZoomEnabled,
-    activeImageVisible = _ref.activeImageVisible,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useContentElementLif = useContentElementLifecycle(),
-    shouldLoad = _useContentElementLif.shouldLoad;
-  var activeImageFile = useFile({
+var _jsxFileName$4 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/ImageArea.js";
+function ImageArea({
+  panZoomEnabled,
+  activeImageVisible,
+  ...props
+}) {
+  const {
+    shouldLoad
+  } = useContentElementLifecycle();
+  const activeImageFile = useFile({
     collectionName: 'imageFiles',
     permaId: props.area.activeImage
   });
-  var fallbackActiveImageFile = useFile({
+  const fallbackActiveImageFile = useFile({
     collectionName: 'imageFiles',
     permaId: props.area.fallbackActiveImage
   });
   return /*#__PURE__*/React.createElement(Area, Object.assign({}, props, {
-    className: classNames(styles$4.area, _defineProperty({}, styles$4.activeImageVisible, activeImageVisible))
+    className: classNames(styles$4.area, {
+      [styles$4.activeImageVisible]: activeImageVisible
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 29,
+      columnNumber: 5
+    }
   }), /*#__PURE__*/React.createElement(Image, {
     imageFile: activeImageFile || fallbackActiveImageFile,
     load: shouldLoad,
     variant: panZoomEnabled ? 'ultra' : 'large',
-    preferSvg: true
+    preferSvg: true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 32,
+      columnNumber: 7
+    }
   }));
 }
 
 var styles$5 = {"wrapper":"Indicator-module_wrapper__2b1Mj","indicator":"Indicator-module_indicator__2A3-l","inner":"Indicator-module_inner__2BgbL","hidden":"Indicator-module_hidden__3j1Re","outer":"Indicator-module_outer__36JWr"};
 
-function Indicator(_ref) {
-  var area = _ref.area,
-    hidden = _ref.hidden,
-    panZoomTransform = _ref.panZoomTransform,
-    outerRef = _ref.outerRef;
+var _jsxFileName$5 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/Indicator.js";
+function Indicator({
+  area,
+  hidden,
+  panZoomTransform,
+  outerRef
+}) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles$5.wrapper,
     ref: outerRef,
     style: {
       transform: panZoomTransform
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 10,
+      columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$5.indicator, _defineProperty({}, styles$5.hidden, hidden)),
+    className: classNames(styles$5.indicator, {
+      [styles$5.hidden]: hidden
+    }),
     style: {
       '--color': areaColor(area),
-      left: "".concat(area.indicatorPosition[0], "%"),
-      top: "".concat(area.indicatorPosition[1], "%")
+      left: `${area.indicatorPosition[0]}%`,
+      top: `${area.indicatorPosition[1]}%`
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 11,
+      columnNumber: 7
     }
   }));
 }
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+const TooltipPortal = FloatingPortal;
 
-  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 TooltipPortal = FloatingPortal;
-
-var useTooltipTransitionStyles = useTransitionStyles;
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
+const useTooltipTransitionStyles = useTransitionStyles;
 
 function getBoundingRect(area) {
-  var xCoords = area.map(function (point) {
-    return point[0];
-  });
-  var yCoords = area.map(function (point) {
-    return point[1];
-  });
-  var minX = Math.min.apply(Math, _toConsumableArray(xCoords));
-  var maxX = Math.max.apply(Math, _toConsumableArray(xCoords));
-  var minY = Math.min.apply(Math, _toConsumableArray(yCoords));
-  var maxY = Math.max.apply(Math, _toConsumableArray(yCoords));
+  const xCoords = area.map(point => point[0]);
+  const yCoords = area.map(point => point[1]);
+  const minX = Math.min(...xCoords);
+  const maxX = Math.max(...xCoords);
+  const minY = Math.min(...yCoords);
+  const maxY = Math.max(...yCoords);
   return {
     left: minX,
     top: minY,
@@ -392,29 +387,31 @@ function getBoundingRect(area) {
   };
 }
 
-function getTooltipInlineStyles(_ref) {
-  var area = _ref.area,
-    panZoomTransform = _ref.panZoomTransform;
-  var referencePositionInPercent = getReferencePositionInPercent({
-    area: area
+function getTooltipInlineStyles({
+  area,
+  panZoomTransform
+}) {
+  const referencePositionInPercent = getReferencePositionInPercent({
+    area
   });
   return {
     reference: {
-      left: "".concat(referencePositionInPercent.left, "%"),
-      top: "".concat(referencePositionInPercent.top, "%"),
-      height: "".concat(referencePositionInPercent.height, "%")
+      left: `${referencePositionInPercent.left}%`,
+      top: `${referencePositionInPercent.top}%`,
+      height: `${referencePositionInPercent.height}%`
     },
     wrapper: {
       transform: panZoomTransform
     }
   };
 }
-function getReferencePositionInPercent(_ref2) {
-  var area = _ref2.area;
-  var referenceType = area.tooltipReference;
-  var indicatorRect = getIndicatorRect(area.indicatorPosition);
+function getReferencePositionInPercent({
+  area
+}) {
+  const referenceType = area.tooltipReference;
+  const indicatorRect = getIndicatorRect(area.indicatorPosition);
   if (referenceType === 'area') {
-    var boundingRect = getBoundingRect(area.outline);
+    const boundingRect = getBoundingRect(area.outline);
     return {
       top: boundingRect.top,
       height: boundingRect.height,
@@ -432,114 +429,144 @@ function getIndicatorRect(indicatorPosition) {
   };
 }
 
-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)","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))","compositeItem":"Tooltip-module_compositeItem__3QnpM","wrapper":"Tooltip-module_wrapper__3J6qG","reference":"Tooltip-module_reference__1qjnL","box":"Tooltip-module_box__2MGMl","paddingForScrollButtons":"Tooltip-module_paddingForScrollButtons__3wFKp","light":"Tooltip-module_light__3H6Ii scope-darkContent","dark":"Tooltip-module_dark__2nDMy scope-lightContent","maxWidth-wide":"Tooltip-module_maxWidth-wide__3Vik_","maxWidth-narrow":"Tooltip-module_maxWidth-narrow__foMG0","maxWidth-veryNarrow":"Tooltip-module_maxWidth-veryNarrow__1yS6L","align-center":"Tooltip-module_align-center__jRtdN","align-right":"Tooltip-module_align-right__2ezWZ","minWidth":"Tooltip-module_minWidth__2iAip","imageWrapper":"Tooltip-module_imageWrapper__1BCEJ","textWrapper":"Tooltip-module_textWrapper__Hc0qY","link":"Tooltip-module_link__1xE5O"};
+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)","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))","compositeItem":"Tooltip-module_compositeItem__3QnpM","wrapper":"Tooltip-module_wrapper__3J6qG","reference":"Tooltip-module_reference__1qjnL","box":"Tooltip-module_box__2MGMl","paddingForScrollButtons":"Tooltip-module_paddingForScrollButtons__3wFKp","light":"Tooltip-module_light__3H6Ii scope-darkContent","dark":"Tooltip-module_dark__2nDMy scope-lightContent","maxWidth-wide":"Tooltip-module_maxWidth-wide__3Vik_","maxWidth-narrow":"Tooltip-module_maxWidth-narrow__foMG0","maxWidth-veryNarrow":"Tooltip-module_maxWidth-veryNarrow__1yS6L","align-center":"Tooltip-module_align-center__jRtdN","align-right":"Tooltip-module_align-right__2ezWZ","minWidth":"Tooltip-module_minWidth__2iAip","imageWrapper":"Tooltip-module_imageWrapper__1BCEJ","link":"Tooltip-module_link__1xE5O","textWrapper":"Tooltip-module_textWrapper__Hc0qY"};
 
-var arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
-function Tooltip(_ref) {
+var _jsxFileName$6 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/Tooltip.js";
+const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+function Tooltip({
+  area,
+  panZoomTransform,
+  contentElementId,
+  configuration,
+  visible,
+  active,
+  imageFile,
+  containerRect,
+  keepInViewport,
+  floatingStrategy,
+  aboveNavigationWidgets,
+  wrapperRef,
+  onMouseEnter,
+  onMouseLeave,
+  onClick,
+  onDismiss,
+  onLinkClick
+}) {
   var _tooltipTexts$area$id6, _tooltipTexts$area$id7, _tooltipLinks$area$id, _tooltipLinks$area$id2, _tooltipTexts$area$id8;
-  var area = _ref.area,
-    panZoomTransform = _ref.panZoomTransform,
-    contentElementId = _ref.contentElementId,
-    configuration = _ref.configuration,
-    visible = _ref.visible,
-    active = _ref.active,
-    imageFile = _ref.imageFile,
-    containerRect = _ref.containerRect,
-    keepInViewport = _ref.keepInViewport,
-    floatingStrategy = _ref.floatingStrategy,
-    aboveNavigationWidgets = _ref.aboveNavigationWidgets,
-    wrapperRef = _ref.wrapperRef,
-    onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave,
-    onClick = _ref.onClick,
-    onDismiss = _ref.onDismiss;
-  var _useI18n = useI18n(),
-    translateWithEntryLocale = _useI18n.t;
-  var _useI18n2 = useI18n({
-      locale: 'ui'
-    }),
-    t = _useI18n2.t;
-  var updateConfiguration = useContentElementConfigurationUpdate();
-  var _useContentElementEdi = useContentElementEditorState(),
-    isEditable = _useContentElementEdi.isEditable;
-  var darkBackground = useDarkBackground();
-  var light = configuration.invertTooltips ? !darkBackground : darkBackground;
-  var tooltipImageFile = useFileWithInlineRights({
+  const {
+    t: translateWithEntryLocale
+  } = useI18n();
+  const {
+    t
+  } = useI18n({
+    locale: 'ui'
+  });
+  const updateConfiguration = useContentElementConfigurationUpdate();
+  const {
+    isEditable
+  } = useContentElementEditorState();
+  const storylineMode = useStorylineActivity();
+  const inBackground = useDelayedBoolean(storylineMode !== 'active', {
+    fromTrueToFalse: 200
+  });
+  const darkBackground = useDarkBackground();
+  const light = configuration.invertTooltips ? !darkBackground : darkBackground;
+  const tooltipImageFile = useFileWithInlineRights({
     configuration: area,
     collectionName: 'imageFiles',
     propertyName: 'tooltipImage'
   });
-  var inlineStyles = getTooltipInlineStyles({
-    area: area,
-    panZoomTransform: panZoomTransform
+  const inlineStyles = getTooltipInlineStyles({
+    area,
+    panZoomTransform
   });
-  var tooltipTexts = configuration.tooltipTexts || {};
-  var tooltipLinks = configuration.tooltipLinks || {};
-  var referenceType = area.tooltipReference;
-  var position = area.tooltipPosition;
-  var maxWidth = area.tooltipMaxWidth;
-  var arrowRef = useRef();
-  var _useFloating = useFloating({
-      open: containerRect.width > 0 && visible,
-      onOpenChange: function onOpenChange(open) {
-        return !open && onDismiss();
+  const tooltipTexts = configuration.tooltipTexts || {};
+  const tooltipLinks = configuration.tooltipLinks || {};
+  const referenceType = area.tooltipReference;
+  const position = area.tooltipPosition;
+  const maxWidth = area.tooltipMaxWidth;
+  const arrowRef = useRef();
+  const {
+    refs,
+    floatingStyles,
+    context
+  } = useFloating({
+    open: containerRect.width > 0 && visible && !inBackground,
+    onOpenChange: open => !open && onDismiss(),
+    strategy: floatingStrategy || 'absolute',
+    placement: position === 'above' ? 'top' : 'bottom',
+    middleware: [offset(referenceType === 'area' ? 7 : 20), shift(keepInViewport ? {
+      crossAxis: true,
+      padding: {
+        left: 40,
+        right: 40
+      }
+    } : {
+      padding: {
+        left: -5,
+        right: -5
       },
-      strategy: floatingStrategy || 'absolute',
-      placement: position === 'above' ? 'top' : 'bottom',
-      middleware: [offset(referenceType === 'area' ? 7 : 20), shift(keepInViewport ? {
-        crossAxis: true,
-        padding: {
-          left: 40,
-          right: 40
-        }
-      } : {
-        padding: {
-          left: -5,
-          right: -5
-        },
-        boundary: wrapperRef.current
-      }), keepInViewport && flip(), arrow({
-        element: arrowRef,
-        padding: 5
-      })],
-      whileElementsMounted: autoUpdate
-    }),
-    refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
-    context = _useFloating.context;
-  var role = useRole(context, {
+      boundary: wrapperRef.current
+    }), keepInViewport && flip(), arrow({
+      element: arrowRef,
+      padding: 5
+    })],
+    whileElementsMounted: autoUpdate
+  });
+  const role = useRole(context, {
     role: 'label'
   });
-  var dismiss = useDismiss(context, {
+  const dismiss = useDismiss(context, {
     outsidePressEvent: 'mousedown',
-    outsidePress: function outsidePress(event) {
-      return !insidePagerButton(event.target);
+    outsidePress: event => !insidePagerButton(event.target),
+    capture: {
+      outsidePress: false
     }
   });
-  var _useInteractions = useInteractions([role, dismiss]),
-    getReferenceProps = _useInteractions.getReferenceProps,
-    getFloatingProps = _useInteractions.getFloatingProps;
-  var _useTooltipTransition = useTooltipTransitionStyles(context),
-    isMounted = _useTooltipTransition.isMounted,
-    transitionStyles = _useTooltipTransition.styles;
-  var floatingPortalRoot = useFloatingPortalRoot();
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([role, dismiss]);
+  const {
+    isMounted,
+    styles: transitionStyles
+  } = useTooltipTransitionStyles(context);
+  const floatingPortalRoot = useFloatingPortalRoot();
   function handleTextChange(propertyName, value) {
     updateConfiguration({
-      tooltipTexts: _objectSpread2(_objectSpread2({}, tooltipTexts), {}, _defineProperty({}, area.id, _objectSpread2(_objectSpread2({}, tooltipTexts[area.id]), {}, _defineProperty({}, propertyName, value))))
+      tooltipTexts: {
+        ...tooltipTexts,
+        [area.id]: {
+          ...tooltipTexts[area.id],
+          [propertyName]: value
+        }
+      }
     });
   }
   function handleLinkChange(value) {
-    var _tooltipTexts$area$id;
-    if (utils.isBlankEditableTextValue((_tooltipTexts$area$id = tooltipTexts[area.id]) === null || _tooltipTexts$area$id === void 0 ? void 0 : _tooltipTexts$area$id.link)) {
+    if (value) {
+      var _tooltipTexts$area$id;
+      if (utils.isBlankEditableTextValue((_tooltipTexts$area$id = tooltipTexts[area.id]) === null || _tooltipTexts$area$id === void 0 ? void 0 : _tooltipTexts$area$id.link)) {
+        handleTextChange('link', [{
+          type: 'heading',
+          children: [{
+            text: translateWithEntryLocale('pageflow_scrolled.public.more')
+          }]
+        }]);
+      }
+    } else {
       handleTextChange('link', [{
         type: 'heading',
         children: [{
-          text: translateWithEntryLocale('pageflow_scrolled.public.more')
+          text: ''
         }]
       }]);
     }
     updateConfiguration({
-      tooltipLinks: _objectSpread2(_objectSpread2({}, tooltipLinks), {}, _defineProperty({}, area.id, value))
+      tooltipLinks: {
+        ...tooltipLinks,
+        [area.id]: value
+      }
     });
   }
   function handleKeyDown(event) {
@@ -554,119 +581,233 @@ function Tooltip(_ref) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CompositeItem, {
     render: /*#__PURE__*/React.createElement("div", {
-      className: styles$6.compositeItem
-    })
+      className: styles$6.compositeItem,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$6,
+        lineNumber: 181,
+        columnNumber: 30
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 181,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$6.wrapper,
-    style: inlineStyles.wrapper
+    style: inlineStyles.wrapper,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 182,
+      columnNumber: 9
+    }
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     ref: refs.setReference,
     className: styles$6.reference,
     style: inlineStyles.reference
-  }, getReferenceProps())))), isMounted && /*#__PURE__*/React.createElement(TooltipPortal, {
+  }, getReferenceProps(), {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 183,
+      columnNumber: 11
+    }
+  })))), isMounted && /*#__PURE__*/React.createElement(TooltipPortal, {
     id: aboveNavigationWidgets && 'floating-ui-above-navigation-widgets',
-    root: floatingPortalRoot
+    root: floatingPortalRoot,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 190,
+      columnNumber: 8
+    }
   }, /*#__PURE__*/React.createElement(FloatingFocusManager, {
     context: context,
     modal: false,
     initialFocus: -1,
-    returnFocus: false
+    returnFocus: false,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 192,
+      columnNumber: 10
+    }
   }, /*#__PURE__*/React.createElement("div", {
-    style: transitionStyles
+    style: transitionStyles,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 193,
+      columnNumber: 12
+    }
   }, /*#__PURE__*/React.createElement("div", Object.assign({
     ref: refs.setFloating,
     style: floatingStyles,
-    className: classNames(styles$6.box, styles$6["maxWidth-".concat(maxWidth)], styles$6["align-".concat(area.tooltipTextAlign)], light ? styles$6.light : styles$6.dark, _defineProperty(_defineProperty({}, styles$6.paddingForScrollButtons, keepInViewport), styles$6.minWidth, presentOrEditing('link'))),
-    onMouseEnter: onMouseEnter,
+    className: classNames(styles$6.box, styles$6[`maxWidth-${maxWidth}`], styles$6[`align-${area.tooltipTextAlign}`], configuration.linkButtonVariant && `scope-linkButton-${configuration.linkButtonVariant}`, light ? styles$6.light : styles$6.dark, {
+      [styles$6.paddingForScrollButtons]: keepInViewport,
+      [styles$6.minWidth]: presentOrEditing('link')
+    }),
+    onMouseEnter: () => storylineMode === 'active' && onMouseEnter(),
     onMouseLeave: onMouseLeave,
     onClick: onClick
-  }, getFloatingProps()), /*#__PURE__*/React.createElement(FloatingArrow, {
+  }, getFloatingProps(), {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 194,
+      columnNumber: 14
+    }
+  }), /*#__PURE__*/React.createElement(FloatingArrow, {
     ref: arrowRef,
     context: context,
-    strokeWidth: 1
+    strokeWidth: 1,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 208,
+      columnNumber: 16
+    }
   }), tooltipImageFile && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles$6.imageWrapper
+    className: styles$6.imageWrapper,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 211,
+      columnNumber: 19
+    }
   }, /*#__PURE__*/React.createElement(Image, {
     imageFile: tooltipImageFile,
     variant: 'medium',
     fill: false,
     width: tooltipImageFile.width,
     height: tooltipImageFile.height,
-    preferSvg: true
+    preferSvg: true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 212,
+      columnNumber: 21
+    }
   }), /*#__PURE__*/React.createElement(InlineFileRights, {
     context: "insideElement",
     items: [{
       file: tooltipImageFile,
       label: 'image'
-    }]
+    }],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 218,
+      columnNumber: 21
+    }
   }), /*#__PURE__*/React.createElement(InlineFileRights, {
     context: "afterElement",
     items: [{
       file: tooltipImageFile,
       label: 'image'
-    }]
+    }],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 219,
+      columnNumber: 21
+    }
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles$6.textWrapper,
-    onKeyDown: handleKeyDown
+    onKeyDown: handleKeyDown,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 222,
+      columnNumber: 16
+    }
   }, presentOrEditing('title') && /*#__PURE__*/React.createElement("h3", {
-    id: "hotspots-tooltip-title-".concat(contentElementId, "-").concat(area.id)
+    id: `hotspots-tooltip-title-${contentElementId}-${area.id}`,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 225,
+      columnNumber: 19
+    }
   }, /*#__PURE__*/React.createElement(Text, {
     inline: true,
-    scaleCategory: "hotspotsTooltipTitle"
+    scaleCategory: "hotspotsTooltipTitle",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 226,
+      columnNumber: 21
+    }
   }, /*#__PURE__*/React.createElement(EditableInlineText, {
     value: (_tooltipTexts$area$id6 = tooltipTexts[area.id]) === null || _tooltipTexts$area$id6 === void 0 ? void 0 : _tooltipTexts$area$id6.title,
-    onChange: function onChange(value) {
-      return handleTextChange('title', value);
-    },
-    placeholder: t('pageflow_scrolled.inline_editing.type_heading')
+    onChange: value => handleTextChange('title', value),
+    placeholder: t('pageflow_scrolled.inline_editing.type_heading'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 227,
+      columnNumber: 23
+    }
   }))), presentOrEditing('description') && /*#__PURE__*/React.createElement(EditableText, {
     value: (_tooltipTexts$area$id7 = tooltipTexts[area.id]) === null || _tooltipTexts$area$id7 === void 0 ? void 0 : _tooltipTexts$area$id7.description,
-    onChange: function onChange(value) {
-      return handleTextChange('description', value);
-    },
+    onChange: value => handleTextChange('description', value),
     scaleCategory: "hotspotsTooltipDescription",
-    placeholder: t('pageflow_scrolled.inline_editing.type_text')
+    placeholder: t('pageflow_scrolled.inline_editing.type_text'),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 233,
+      columnNumber: 19
+    }
   }), presentOrEditing('link') && /*#__PURE__*/React.createElement(LinkButton, {
     className: styles$6.link,
     scaleCategory: "hotspotsTooltipLink",
     href: (_tooltipLinks$area$id = tooltipLinks[area.id]) === null || _tooltipLinks$area$id === void 0 ? void 0 : _tooltipLinks$area$id.href,
     openInNewTab: (_tooltipLinks$area$id2 = tooltipLinks[area.id]) === null || _tooltipLinks$area$id2 === void 0 ? void 0 : _tooltipLinks$area$id2.openInNewTab,
     value: (_tooltipTexts$area$id8 = tooltipTexts[area.id]) === null || _tooltipTexts$area$id8 === void 0 ? void 0 : _tooltipTexts$area$id8.link,
-    onTextChange: function onTextChange(value) {
-      return handleTextChange('link', value);
-    },
-    onLinkChange: function onLinkChange(value) {
-      return handleLinkChange(value);
+    allowRemove: true,
+    onTextChange: value => handleTextChange('link', value),
+    onLinkChange: value => handleLinkChange(value),
+    onClick: onLinkClick,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 238,
+      columnNumber: 19
     }
   })))))));
 }
 
 function useHotspotsConfiguration(configuration) {
-  var defaultImageFile = useFileWithInlineRights({
-    configuration: configuration,
+  const defaultImageFile = useFileWithInlineRights({
+    configuration,
     collectionName: 'imageFiles',
     propertyName: 'image'
   });
-  var portraitImageFile = useFileWithInlineRights({
-    configuration: configuration,
+  const portraitImageFile = useFileWithInlineRights({
+    configuration,
     collectionName: 'imageFiles',
     propertyName: 'portraitImage'
   });
-  var portraitOrientation = usePortraitOrientation();
-  var portraitMode = !!(portraitOrientation && portraitImageFile);
-  var imageFile = portraitMode ? portraitImageFile : defaultImageFile;
+  const portraitOrientation = usePortraitOrientation();
+  const portraitMode = !!(portraitOrientation && portraitImageFile);
+  const imageFile = portraitMode ? portraitImageFile : defaultImageFile;
   return {
     panZoomEnabled: usePanZoomEnabled(configuration),
     areas: useAreas(configuration, portraitMode),
-    imageFile: imageFile,
-    portraitMode: portraitMode
+    imageFile,
+    portraitMode
   };
 }
 function useAreas(configuration, portraitMode) {
-  return useMemo(function () {
-    return (configuration.areas || []).map(function (area) {
+  return useMemo(() => {
+    return (configuration.areas || []).map(area => {
       if (portraitMode) {
-        return applyAreaDefaults(_objectSpread2(_objectSpread2({}, area), {}, {
+        return applyAreaDefaults({
+          ...area,
           outline: area.portraitOutline,
           zoom: area.portraitZoom,
           activeImage: area.portraitActiveImage,
@@ -676,7 +817,7 @@ function useAreas(configuration, portraitMode) {
           tooltipReference: area.portraitTooltipReference,
           tooltipPosition: area.portraitTooltipPosition,
           tooltipMaxWidth: area.portraitTooltipMaxWidth
-        }));
+        });
       } else {
         return applyAreaDefaults(area);
       }
@@ -685,21 +826,23 @@ function useAreas(configuration, portraitMode) {
 }
 function applyAreaDefaults(area) {
   var _area$outline;
-  return _objectSpread2(_objectSpread2({}, area), {}, {
+  return {
+    ...area,
     outline: ((_area$outline = area.outline) === null || _area$outline === void 0 ? void 0 : _area$outline.length) ? area.outline : [[50, 50]],
     zoom: area.zoom || 0,
     indicatorPosition: area.indicatorPosition || [50, 50]
-  });
+  };
 }
 function usePanZoomEnabled(configuration) {
-  var isPhonePlatform = usePhonePlatform();
+  const isPhonePlatform = usePhonePlatform();
   return configuration.enablePanZoom === 'always' || configuration.enablePanZoom === 'phonePlatform' && isPhonePlatform;
 }
 
-function useHotspotsEditorCommandSubscriptions(_ref) {
-  var setHighlightedIndex = _ref.setHighlightedIndex,
-    activateArea = _ref.activateArea;
-  useContentElementEditorCommandSubscription(function (command) {
+function useHotspotsEditorCommandSubscriptions({
+  setHighlightedIndex,
+  activateArea
+}) {
+  useContentElementEditorCommandSubscription(command => {
     if (command.type === 'HIGHLIGHT_AREA') {
       setHighlightedIndex(command.index);
     } else if (command.type === 'RESET_AREA_HIGHLIGHT') {
@@ -710,31 +853,24 @@ function useHotspotsEditorCommandSubscriptions(_ref) {
   });
 }
 
-function useHotspotsState(_ref) {
-  var areas = _ref.areas,
-    initialActiveArea = _ref.initialActiveArea;
-  var _useContentElementEdi = useContentElementEditorState(),
-    setTransientState = _useContentElementEdi.setTransientState,
-    select = _useContentElementEdi.select,
-    isSelected = _useContentElementEdi.isSelected;
-  var _useState = useState(typeof initialActiveArea === 'undefined' ? -1 : initialActiveArea),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeIndex = _useState2[0],
-    setActiveIndexState = _useState2[1];
-  var _useState3 = useState(-1),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hoveredIndex = _useState4[0],
-    setHoveredIndex = _useState4[1];
-  var _useState5 = useState(-1),
-    _useState6 = _slicedToArray(_useState5, 2),
-    highlightedIndex = _useState6[0],
-    setHighlightedIndex = _useState6[1];
-  var setActiveIndex = useCallback(function (index) {
+function useHotspotsState({
+  areas,
+  initialActiveArea
+}) {
+  const {
+    setTransientState,
+    select,
+    isSelected
+  } = useContentElementEditorState();
+  const [activeIndex, setActiveIndexState] = useState(typeof initialActiveArea === 'undefined' ? -1 : initialActiveArea);
+  const [hoveredIndex, setHoveredIndex] = useState(-1);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const setActiveIndex = useCallback(index => {
     var _areas$index;
     setTransientState({
       activeAreaId: (_areas$index = areas[index]) === null || _areas$index === void 0 ? void 0 : _areas$index.id
     });
-    setActiveIndexState(function (activeIndex) {
+    setActiveIndexState(activeIndex => {
       if (activeIndex !== index && index >= 0 && isSelected) {
         select();
       }
@@ -742,247 +878,235 @@ function useHotspotsState(_ref) {
     });
   }, [setActiveIndexState, setTransientState, areas, select, isSelected]);
   return {
-    activeIndex: activeIndex,
-    hoveredIndex: hoveredIndex,
-    highlightedIndex: highlightedIndex,
-    setActiveIndex: setActiveIndex,
-    setHoveredIndex: setHoveredIndex,
-    setHighlightedIndex: setHighlightedIndex
+    activeIndex,
+    hoveredIndex,
+    highlightedIndex,
+    setActiveIndex,
+    setHoveredIndex,
+    setHighlightedIndex
   };
 }
 
-function useContentRect(_ref) {
-  var enabled = _ref.enabled;
-  var _useState = useState({
-      width: 0,
-      height: 0
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    contentRect = _useState2[0],
-    setContentRect = _useState2[1];
-  var ref = useRef();
-  useEffect(function () {
+function useContentRect({
+  enabled
+}) {
+  const [contentRect, setContentRect] = useState({
+    width: 0,
+    height: 0
+  });
+  const ref = useRef();
+  useEffect(() => {
     if (!enabled) {
       return;
     }
-    var current = ref.current;
-    var resizeObserver = new ResizeObserver(function (entries) {
-      requestAnimationFrame(function () {
+    const current = ref.current;
+    const resizeObserver = new ResizeObserver(entries => {
+      requestAnimationFrame(() => {
         setContentRect(entries[entries.length - 1].contentRect);
       });
     });
     resizeObserver.observe(current);
-    return function () {
+    return () => {
       resizeObserver.unobserve(current);
     };
   }, [enabled]);
   return [contentRect, ref];
 }
 
-var fullRect = {
+const fullRect = {
   left: 0,
   top: 0,
   width: 100,
   height: 100
 };
-function getInitialTransform(_ref) {
-  var containerWidth = _ref.containerWidth,
-    containerHeight = _ref.containerHeight,
-    imageFileWidth = _ref.imageFileWidth,
-    imageFileHeight = _ref.imageFileHeight,
-    areasBoundingRect = _ref.areasBoundingRect,
-    _ref$indicatorPositio = _ref.indicatorPositions,
-    indicatorPositions = _ref$indicatorPositio === void 0 ? [] : _ref$indicatorPositio,
-    _ref$containerSafeAre = _ref.containerSafeAreaMargin,
-    containerSafeAreaMargin = _ref$containerSafeAre === void 0 ? 0 : _ref$containerSafeAre;
-  var baseImageWidth = imageFileWidth * containerHeight / imageFileHeight;
-  var baseImageHeight = containerHeight;
-  var scaleCover = getScaleToCoverContainerWithRect({
-    baseImageWidth: baseImageWidth,
-    baseImageHeight: baseImageHeight,
-    containerWidth: containerWidth,
-    containerHeight: containerHeight,
+function getInitialTransform({
+  containerWidth,
+  containerHeight,
+  imageFileWidth,
+  imageFileHeight,
+  areasBoundingRect,
+  indicatorPositions = [],
+  containerSafeAreaMargin = 0
+}) {
+  const baseImageWidth = imageFileWidth * containerHeight / imageFileHeight;
+  const baseImageHeight = containerHeight;
+  const scaleCover = getScaleToCoverContainerWithRect({
+    baseImageWidth,
+    baseImageHeight,
+    containerWidth,
+    containerHeight,
     rect: fullRect
   });
-  var scaleContainMotif = getScaleToContainRectInContainer({
-    baseImageWidth: baseImageWidth,
-    baseImageHeight: baseImageHeight,
+  const scaleContainMotif = getScaleToContainRectInContainer({
+    baseImageWidth,
+    baseImageHeight,
     containerWidth: containerWidth * (1 - 2 * containerSafeAreaMargin / 100),
-    containerHeight: containerHeight,
+    containerHeight,
+    rect: areasBoundingRect
+  });
+  const scale = Math.min(scaleCover, scaleContainMotif);
+  const [translateX, translateY] = center({
+    baseImageWidth,
+    baseImageHeight,
+    containerWidth,
+    containerHeight,
+    scale,
+    unbounded: scaleContainMotif < scaleCover,
     rect: areasBoundingRect
   });
-  var scale = Math.min(scaleCover, scaleContainMotif);
-  var _center = center({
-      baseImageWidth: baseImageWidth,
-      baseImageHeight: baseImageHeight,
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      scale: scale,
-      unbounded: scaleContainMotif < scaleCover,
-      rect: areasBoundingRect
-    }),
-    _center2 = _slicedToArray(_center, 2),
-    translateX = _center2[0],
-    translateY = _center2[1];
   return {
     wrapper: {
       x: translateX,
       y: translateY,
-      scale: scale
+      scale
     },
     indicators: transformIndicators({
-      indicatorPositions: indicatorPositions,
-      baseImageWidth: baseImageWidth,
-      baseImageHeight: baseImageHeight,
-      translateX: translateX,
-      translateY: translateY,
-      scale: scale
+      indicatorPositions,
+      baseImageWidth,
+      baseImageHeight,
+      translateX,
+      translateY,
+      scale
     })
   };
 }
-function getPanZoomStepTransform(_ref2) {
-  var containerWidth = _ref2.containerWidth,
-    containerHeight = _ref2.containerHeight,
-    imageFileWidth = _ref2.imageFileWidth,
-    imageFileHeight = _ref2.imageFileHeight,
-    areaOutline = _ref2.areaOutline,
-    areaZoom = _ref2.areaZoom,
-    _ref2$indicatorPositi = _ref2.indicatorPositions,
-    indicatorPositions = _ref2$indicatorPositi === void 0 ? [] : _ref2$indicatorPositi,
-    initialScale = _ref2.initialScale;
-  var areaRect = getBoundingRect(areaOutline);
-  var baseImageWidth = imageFileWidth * containerHeight / imageFileHeight;
-  var baseImageHeight = containerHeight;
-  var scale = getAreaScale({
-    baseImageWidth: baseImageWidth,
-    baseImageHeight: baseImageHeight,
-    containerWidth: containerWidth,
-    containerHeight: containerHeight,
-    areaRect: areaRect,
-    areaZoom: areaZoom,
-    initialScale: initialScale
+function getPanZoomStepTransform({
+  containerWidth,
+  containerHeight,
+  imageFileWidth,
+  imageFileHeight,
+  areaOutline,
+  areaZoom,
+  indicatorPositions = [],
+  initialScale
+}) {
+  const areaRect = getBoundingRect(areaOutline);
+  const baseImageWidth = imageFileWidth * containerHeight / imageFileHeight;
+  const baseImageHeight = containerHeight;
+  const scale = getAreaScale({
+    baseImageWidth,
+    baseImageHeight,
+    containerWidth,
+    containerHeight,
+    areaRect,
+    areaZoom,
+    initialScale
+  });
+  const [translateX, translateY] = center({
+    baseImageWidth,
+    baseImageHeight,
+    containerWidth,
+    containerHeight,
+    rect: areaRect,
+    scale
   });
-  var _center3 = center({
-      baseImageWidth: baseImageWidth,
-      baseImageHeight: baseImageHeight,
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      rect: areaRect,
-      scale: scale
-    }),
-    _center4 = _slicedToArray(_center3, 2),
-    translateX = _center4[0],
-    translateY = _center4[1];
   return {
     wrapper: {
       x: translateX,
       y: translateY,
-      scale: scale
+      scale
     },
     indicators: transformIndicators({
-      indicatorPositions: indicatorPositions,
-      baseImageWidth: baseImageWidth,
-      baseImageHeight: baseImageHeight,
-      translateX: translateX,
-      translateY: translateY,
-      scale: scale
+      indicatorPositions,
+      baseImageWidth,
+      baseImageHeight,
+      translateX,
+      translateY,
+      scale
     })
   };
 }
-function transformIndicators(_ref3) {
-  var indicatorPositions = _ref3.indicatorPositions,
-    baseImageWidth = _ref3.baseImageWidth,
-    baseImageHeight = _ref3.baseImageHeight,
-    translateX = _ref3.translateX,
-    translateY = _ref3.translateY,
-    scale = _ref3.scale;
-  return indicatorPositions.map(function (indicatorPosition) {
-    return {
-      x: translateX + baseImageWidth * indicatorPosition[0] / 100 * (scale - 1),
-      y: translateY + baseImageHeight * indicatorPosition[1] / 100 * (scale - 1)
-    };
-  });
+function transformIndicators({
+  indicatorPositions,
+  baseImageWidth,
+  baseImageHeight,
+  translateX,
+  translateY,
+  scale
+}) {
+  return indicatorPositions.map(indicatorPosition => ({
+    x: translateX + baseImageWidth * indicatorPosition[0] / 100 * (scale - 1),
+    y: translateY + baseImageHeight * indicatorPosition[1] / 100 * (scale - 1)
+  }));
 }
-function getAreaScale(_ref4) {
-  var containerWidth = _ref4.containerWidth,
-    containerHeight = _ref4.containerHeight,
-    baseImageWidth = _ref4.baseImageWidth,
-    baseImageHeight = _ref4.baseImageHeight,
-    areaRect = _ref4.areaRect,
-    areaZoom = _ref4.areaZoom,
-    _ref4$initialScale = _ref4.initialScale,
-    initialScale = _ref4$initialScale === void 0 ? 1 : _ref4$initialScale;
-  var scale = getScaleToContainRectInContainer({
-    containerWidth: containerWidth,
-    containerHeight: containerHeight,
-    baseImageWidth: baseImageWidth,
-    baseImageHeight: baseImageHeight,
+function getAreaScale({
+  containerWidth,
+  containerHeight,
+  baseImageWidth,
+  baseImageHeight,
+  areaRect,
+  areaZoom,
+  initialScale = 1
+}) {
+  const scale = getScaleToContainRectInContainer({
+    containerWidth,
+    containerHeight,
+    baseImageWidth,
+    baseImageHeight,
     rect: areaRect
   });
   return (100 - areaZoom) / 100 * initialScale + areaZoom / 100 * scale;
 }
-function getScaleToCoverContainerWithRect(_ref5) {
-  var containerWidth = _ref5.containerWidth,
-    containerHeight = _ref5.containerHeight,
-    baseImageWidth = _ref5.baseImageWidth,
-    baseImageHeight = _ref5.baseImageHeight,
-    rect = _ref5.rect;
-  var _getScalesToFit = getScalesToFit({
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      baseImageWidth: baseImageWidth,
-      baseImageHeight: baseImageHeight,
-      rect: rect
-    }),
-    _getScalesToFit2 = _slicedToArray(_getScalesToFit, 2),
-    scaleX = _getScalesToFit2[0],
-    scaleY = _getScalesToFit2[1];
+function getScaleToCoverContainerWithRect({
+  containerWidth,
+  containerHeight,
+  baseImageWidth,
+  baseImageHeight,
+  rect
+}) {
+  const [scaleX, scaleY] = getScalesToFit({
+    containerWidth,
+    containerHeight,
+    baseImageWidth,
+    baseImageHeight,
+    rect
+  });
   return Math.max(scaleX, scaleY);
 }
-function getScaleToContainRectInContainer(_ref6) {
-  var containerWidth = _ref6.containerWidth,
-    containerHeight = _ref6.containerHeight,
-    baseImageWidth = _ref6.baseImageWidth,
-    baseImageHeight = _ref6.baseImageHeight,
-    rect = _ref6.rect;
-  var _getScalesToFit3 = getScalesToFit({
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      baseImageWidth: baseImageWidth,
-      baseImageHeight: baseImageHeight,
-      rect: rect
-    }),
-    _getScalesToFit4 = _slicedToArray(_getScalesToFit3, 2),
-    scaleX = _getScalesToFit4[0],
-    scaleY = _getScalesToFit4[1];
+function getScaleToContainRectInContainer({
+  containerWidth,
+  containerHeight,
+  baseImageWidth,
+  baseImageHeight,
+  rect
+}) {
+  const [scaleX, scaleY] = getScalesToFit({
+    containerWidth,
+    containerHeight,
+    baseImageWidth,
+    baseImageHeight,
+    rect
+  });
   return Math.min(scaleX, scaleY);
 }
-function getScalesToFit(_ref7) {
-  var containerWidth = _ref7.containerWidth,
-    containerHeight = _ref7.containerHeight,
-    baseImageWidth = _ref7.baseImageWidth,
-    baseImageHeight = _ref7.baseImageHeight,
-    rect = _ref7.rect;
-  var baseRectWidth = rect.width / 100 * baseImageWidth;
-  var baseRectHeight = rect.height / 100 * baseImageHeight;
+function getScalesToFit({
+  containerWidth,
+  containerHeight,
+  baseImageWidth,
+  baseImageHeight,
+  rect
+}) {
+  const baseRectWidth = rect.width / 100 * baseImageWidth;
+  const baseRectHeight = rect.height / 100 * baseImageHeight;
   return [containerWidth / baseRectWidth, containerHeight / baseRectHeight];
 }
-function center(_ref8) {
-  var baseImageWidth = _ref8.baseImageWidth,
-    baseImageHeight = _ref8.baseImageHeight,
-    containerWidth = _ref8.containerWidth,
-    containerHeight = _ref8.containerHeight,
-    unbounded = _ref8.unbounded,
-    rect = _ref8.rect,
-    scale = _ref8.scale;
-  var displayImageWidth = baseImageWidth * scale;
-  var displayImageHeight = baseImageHeight * scale;
-  var displayRectWidth = rect.width / 100 * displayImageWidth;
-  var displayRectLeft = rect.left / 100 * displayImageWidth;
-  var displayRectHeight = rect.height / 100 * displayImageHeight;
-  var displayRectTop = rect.top / 100 * displayImageHeight;
-  var translateX;
-  var translateY;
+function center({
+  baseImageWidth,
+  baseImageHeight,
+  containerWidth,
+  containerHeight,
+  unbounded,
+  rect,
+  scale
+}) {
+  const displayImageWidth = baseImageWidth * scale;
+  const displayImageHeight = baseImageHeight * scale;
+  const displayRectWidth = rect.width / 100 * displayImageWidth;
+  const displayRectLeft = rect.left / 100 * displayImageWidth;
+  const displayRectHeight = rect.height / 100 * displayImageHeight;
+  const displayRectTop = rect.top / 100 * displayImageHeight;
+  let translateX;
+  let translateY;
   if (displayImageWidth < containerWidth) {
     translateX = (containerWidth - displayImageWidth) / 2;
   } else {
@@ -1002,55 +1126,52 @@ function center(_ref8) {
   return [translateX, translateY];
 }
 
-function usePanZoomTransforms(_ref) {
-  var containerRect = _ref.containerRect,
-    imageFile = _ref.imageFile,
-    areas = _ref.areas,
-    initialTransformEnabled = _ref.initialTransformEnabled,
-    panZoomEnabled = _ref.panZoomEnabled;
-  var imageFileWidth = imageFile === null || imageFile === void 0 ? void 0 : imageFile.width;
-  var imageFileHeight = imageFile === null || imageFile === void 0 ? void 0 : imageFile.height;
-  var containerWidth = containerRect.width;
-  var containerHeight = containerRect.height;
-  return useMemo(function () {
+function usePanZoomTransforms({
+  containerRect,
+  imageFile,
+  areas,
+  initialTransformEnabled,
+  panZoomEnabled
+}) {
+  const imageFileWidth = imageFile === null || imageFile === void 0 ? void 0 : imageFile.width;
+  const imageFileHeight = imageFile === null || imageFile === void 0 ? void 0 : imageFile.height;
+  const containerWidth = containerRect.width;
+  const containerHeight = containerRect.height;
+  return useMemo(() => {
     if (!panZoomEnabled && !initialTransformEnabled || !containerWidth || !containerHeight || !imageFileWidth || !imageFileHeight) {
       return nullTransforms;
     }
-    var indicatorPositions = areas.map(function (area) {
-      return area.indicatorPosition;
-    });
-    var areasBoundingRect = getBoundingRect(areas.flatMap(function (area) {
-      return area.outline;
-    }));
-    var initialTransform = initialTransformEnabled ? getInitialTransform({
-      areasBoundingRect: areasBoundingRect,
-      imageFileWidth: imageFileWidth,
-      imageFileHeight: imageFileHeight,
-      containerWidth: containerWidth,
-      containerHeight: containerHeight,
-      indicatorPositions: indicatorPositions,
+    const indicatorPositions = areas.map(area => area.indicatorPosition);
+    const areasBoundingRect = getBoundingRect(areas.flatMap(area => area.outline));
+    const initialTransform = initialTransformEnabled ? getInitialTransform({
+      areasBoundingRect,
+      imageFileWidth,
+      imageFileHeight,
+      containerWidth,
+      containerHeight,
+      indicatorPositions,
       containerSafeAreaMargin: getContainerSafeAreaMargin({
-        panZoomEnabled: panZoomEnabled,
-        areasBoundingRect: areasBoundingRect
+        panZoomEnabled,
+        areasBoundingRect
       })
     }) : nullTransform;
-    var initialTransformString = toString(initialTransform.wrapper);
-    var areaTransformStrings = [];
-    var tooltipTransformStrings = [];
-    areas.forEach(function (area, index) {
+    const initialTransformString = toString(initialTransform.wrapper);
+    const areaTransformStrings = [];
+    const tooltipTransformStrings = [];
+    areas.forEach((area, index) => {
       if (panZoomEnabled) {
         var _initialTransform$wra;
-        var transform = getPanZoomStepTransform({
+        const transform = getPanZoomStepTransform({
           areaOutline: area.outline,
           areaZoom: area.zoom,
           initialScale: ((_initialTransform$wra = initialTransform.wrapper) === null || _initialTransform$wra === void 0 ? void 0 : _initialTransform$wra.scale) || 1,
-          imageFileWidth: imageFileWidth,
-          imageFileHeight: imageFileHeight,
-          containerWidth: containerWidth,
-          containerHeight: containerHeight,
-          indicatorPositions: indicatorPositions
+          imageFileWidth,
+          imageFileHeight,
+          containerWidth,
+          containerHeight,
+          indicatorPositions
         });
-        var transformString = toString(transform.wrapper);
+        const transformString = toString(transform.wrapper);
         areaTransformStrings.push({
           wrapper: transformString,
           indicators: transform.indicators.map(toString)
@@ -1070,50 +1191,50 @@ function usePanZoomTransforms(_ref) {
     };
   }, [panZoomEnabled, initialTransformEnabled, containerWidth, containerHeight, imageFileWidth, imageFileHeight, areas]);
 }
-var pagerButtonsMargin = 8;
-function getContainerSafeAreaMargin(_ref2) {
-  var panZoomEnabled = _ref2.panZoomEnabled,
-    areasBoundingRect = _ref2.areasBoundingRect;
+const pagerButtonsMargin = 8;
+function getContainerSafeAreaMargin({
+  panZoomEnabled,
+  areasBoundingRect
+}) {
   return panZoomEnabled && insideSafeArea(areasBoundingRect) ? pagerButtonsMargin : 0;
 }
 function insideSafeArea(rect) {
   return rect.left >= pagerButtonsMargin && rect.left + rect.width <= 100 - pagerButtonsMargin;
 }
 function toString(transform) {
-  return transform && "translate(".concat(transform.x, "px, ").concat(transform.y, "px) scale(").concat(transform.scale || 1, ")");
+  return transform && `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale || 1})`;
 }
-var nullTransforms = {
+const nullTransforms = {
   initial: {
     indicators: [],
     tooltips: []
   },
   areas: []
 };
-var nullTransform = {
+const nullTransform = {
   indicators: []
 };
 
-function useIntersectionObserver(_ref) {
-  var threshold = _ref.threshold,
-    onVisibleIndexChange = _ref.onVisibleIndexChange,
-    enabled = _ref.enabled;
-  var containerRef = useRef();
-  var childRefs = useRef([]);
-  var observerRef = useRef();
-  useEffect(function () {
+function useIntersectionObserver({
+  threshold,
+  onVisibleIndexChange,
+  enabled
+}) {
+  const containerRef = useRef();
+  const childRefs = useRef([]);
+  const observerRef = useRef();
+  useEffect(() => {
     if (!enabled) {
       return;
     }
-    var observer = observerRef.current = new IntersectionObserver(function (entries) {
-      var containerElement = containerRef.current;
+    const observer = observerRef.current = new IntersectionObserver(entries => {
+      const containerElement = containerRef.current;
       if (!containerElement) {
         return;
       }
-      var found = false;
-      entries.forEach(function (entry) {
-        var entryIndex = Array.from(containerElement.children).findIndex(function (child) {
-          return child === entry.target;
-        });
+      let found = false;
+      entries.forEach(entry => {
+        const entryIndex = Array.from(containerElement.children).findIndex(child => child === entry.target);
         if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
           found = true;
           onVisibleIndexChange(entryIndex);
@@ -1124,59 +1245,53 @@ function useIntersectionObserver(_ref) {
       }
     }, {
       root: containerRef.current,
-      threshold: threshold
+      threshold
     });
-    childRefs.current.forEach(function (child) {
+    childRefs.current.forEach(child => {
       if (child) {
         observer.observe(child);
       }
     });
-    return function () {
+    return () => {
       observer.disconnect();
     };
   }, [enabled, 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]);
-        }
+  const setChildRef = index => ref => {
+    if (observerRef.current) {
+      if (ref) {
+        observerRef.current.observe(ref);
+      } else {
+        observerRef.current.unobserve(childRefs.current[index]);
       }
-      childRefs.current[index] = ref;
-    };
+    }
+    childRefs.current[index] = ref;
   };
   return [containerRef, setChildRef];
 }
 
-function useScrollPanZoom(_ref) {
-  var panZoomTransforms = _ref.panZoomTransforms,
-    enabled = _ref.enabled,
-    onChange = _ref.onChange;
-  var wrapperRef = useRef();
-  var scrollerAreasRef = useRef();
-  var indicatorRefs = useRef([]);
-  var onVisibleIndexChange = useCallback(function (index) {
-    return onChange(index - 1);
-  }, [onChange]);
-  var _useIntersectionObser = useIntersectionObserver({
-      enabled: enabled,
-      threshold: 0.7,
-      onVisibleIndexChange: onVisibleIndexChange
-    }),
-    _useIntersectionObser2 = _slicedToArray(_useIntersectionObser, 2),
-    scrollerRef = _useIntersectionObser2[0],
-    setStepRef = _useIntersectionObser2[1];
-  var steps = useMemo(function () {
+function useScrollPanZoom({
+  panZoomTransforms,
+  enabled,
+  onChange
+}) {
+  const wrapperRef = useRef();
+  const scrollerAreasRef = useRef();
+  const indicatorRefs = useRef([]);
+  const onVisibleIndexChange = useCallback(index => onChange(index - 1), [onChange]);
+  const [scrollerRef, setStepRef] = useIntersectionObserver({
+    enabled,
+    threshold: 0.7,
+    onVisibleIndexChange
+  });
+  const steps = useMemo(() => {
     if (!enabled || !panZoomTransforms.areas.length) {
       return;
     }
-    return [panZoomTransforms.initial].concat(_toConsumableArray(panZoomTransforms.areas), [panZoomTransforms.initial]);
+    return [panZoomTransforms.initial, ...panZoomTransforms.areas, panZoomTransforms.initial];
   }, [panZoomTransforms, enabled]);
-  var scrollFromToArea = useCallback(function (from, to) {
-    var scroller = scrollerRef.current;
-    var step = scroller.children[to + 1];
+  const scrollFromToArea = useCallback((from, to) => {
+    const scroller = scrollerRef.current;
+    const step = scroller.children[to + 1];
     scroller.scrollTo(Math.abs(scroller.offsetLeft - step.offsetLeft), 0);
     if (!steps) {
       return;
@@ -1184,47 +1299,35 @@ function useScrollPanZoom(_ref) {
     wrapperRef.current.animate([keyframe(steps[from + 1].wrapper), keyframe(steps[to + 1].wrapper)], {
       duration: 200
     });
-    panZoomTransforms.areas.forEach(function (_, index) {
+    panZoomTransforms.areas.forEach((_, index) => {
       indicatorRefs.current[index].animate([keyframe(steps[from + 1].indicators[index]), keyframe(steps[to + 1].indicators[index])], {
         duration: 200
       });
     });
   }, [scrollerRef, steps, panZoomTransforms]);
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     if (!steps) {
       return;
     }
-    var scrollTimeline = new window.ScrollTimeline({
+    const scrollTimeline = new window.ScrollTimeline({
       source: scrollerRef.current,
       axis: 'inline'
     });
-    var animations = [];
-    [wrapperRef.current, scrollerAreasRef.current].forEach(function (element) {
-      return animations.push(element.animate(steps.map(function (step) {
-        return keyframe(step.wrapper);
-      }), {
-        fill: 'both',
-        timeline: scrollTimeline
-      }));
-    });
-    panZoomTransforms.areas.forEach(function (_, index) {
-      animations.push(indicatorRefs.current[index].animate(steps.map(function (step) {
-        return keyframe(step.indicators[index]);
-      }), {
+    const animations = [];
+    [wrapperRef.current, scrollerAreasRef.current].forEach(element => animations.push(element.animate(steps.map(step => keyframe(step.wrapper)), {
+      fill: 'both',
+      timeline: scrollTimeline
+    })));
+    panZoomTransforms.areas.forEach((_, index) => {
+      animations.push(indicatorRefs.current[index].animate(steps.map(step => keyframe(step.indicators[index])), {
         fill: 'both',
         timeline: scrollTimeline
       }));
     });
-    return function () {
-      return animations.forEach(function (animation) {
-        return animation.cancel();
-      });
-    };
+    return () => animations.forEach(animation => animation.cancel());
   }, [panZoomTransforms, steps]);
-  var setIndicatorRef = function setIndicatorRef(index) {
-    return function (ref) {
-      indicatorRefs.current[index] = ref;
-    };
+  const setIndicatorRef = index => ref => {
+    indicatorRefs.current[index] = ref;
   };
   return {
     panZoomRefs: {
@@ -1234,7 +1337,7 @@ function useScrollPanZoom(_ref) {
       setStep: setStepRef,
       setIndicator: setIndicatorRef
     },
-    scrollFromToArea: scrollFromToArea
+    scrollFromToArea
   };
 }
 function keyframe(transform) {
@@ -1246,184 +1349,227 @@ function keyframe(transform) {
 
 var styles$7 = {"tooltipsWrapper":"Hotspots-module_tooltipsWrapper__3EEZA","clip":"Hotspots-module_clip__2wfxm","stack":"Hotspots-module_stack__3Vpw6","letterboxBackground":"Hotspots-module_letterboxBackground__3GNSI","wrapper":"Hotspots-module_wrapper__1TvVX","compositeItem":"Hotspots-module_compositeItem__BZtU-"};
 
-function Hotspots(_ref) {
-  var contentElementId = _ref.contentElementId,
-    contentElementWidth = _ref.contentElementWidth,
-    customMargin = _ref.customMargin,
-    configuration = _ref.configuration,
-    _ref$sectionProps = _ref.sectionProps,
-    sectionProps = _ref$sectionProps === void 0 ? {} : _ref$sectionProps;
+var _jsxFileName$7 = "/home/tfischbach/code/pageflow/entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js";
+function Hotspots({
+  contentElementId,
+  contentElementWidth,
+  customMargin,
+  configuration,
+  sectionProps = {}
+}) {
   return /*#__PURE__*/React.createElement(FullscreenViewer, {
     contentElementId: contentElementId,
-    renderChildren: function renderChildren(_ref2) {
-      var enterFullscreen = _ref2.enterFullscreen;
-      return /*#__PURE__*/React.createElement(HotspotsImage, {
-        contentElementId: contentElementId,
-        contentElementWidth: contentElementWidth,
-        customMargin: customMargin,
-        configuration: configuration,
-        isIntersecting: sectionProps.isIntersecting,
-        displayFullscreenToggle: contentElementWidth !== contentElementWidths.full && configuration.enableFullscreen,
-        keepTooltipsInViewport: configuration.position === 'backdrop',
-        onFullscreenEnter: enterFullscreen,
-        floatingStrategy: configuration.position === 'standAlone' || configuration.position === 'backdrop' ? 'fixed' : 'absolute'
-      }, function (children) {
-        return /*#__PURE__*/React.createElement(ContentElementBox, null, /*#__PURE__*/React.createElement(ContentElementFigure, {
-          configuration: configuration
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles$7.clip
-        }, children)));
-      });
-    },
-    renderFullscreenChildren: function renderFullscreenChildren() {
-      return /*#__PURE__*/React.createElement(HotspotsImage, {
-        contentElementId: contentElementId,
-        contentElementWidth: contentElementWidth,
-        configuration: configuration,
-        displayFullscreenToggle: false,
-        keepTooltipsInViewport: true,
-        tooltipsAboveNavigationWidgets: true
-      });
+    renderChildren: ({
+      enterFullscreen
+    }) => /*#__PURE__*/React.createElement(HotspotsImage, {
+      contentElementId: contentElementId,
+      contentElementWidth: contentElementWidth,
+      customMargin: customMargin,
+      configuration: configuration,
+      isIntersecting: sectionProps.isIntersecting,
+      displayFullscreenToggle: contentElementWidth !== contentElementWidths.full && configuration.enableFullscreen,
+      keepTooltipsInViewport: configuration.position === 'backdrop',
+      onFullscreenEnter: enterFullscreen,
+      floatingStrategy: configuration.position === 'standAlone' || configuration.position === 'backdrop' ? 'fixed' : 'absolute',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 41,
+        columnNumber: 9
+      }
+    }, children => /*#__PURE__*/React.createElement(ContentElementBox, {
+      configuration: configuration,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 54,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/React.createElement(ContentElementFigure, {
+      configuration: configuration,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 55,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$7.clip,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 56,
+        columnNumber: 17
+      }
+    }, children)))),
+    renderFullscreenChildren: () => /*#__PURE__*/React.createElement(HotspotsImage, {
+      contentElementId: contentElementId,
+      contentElementWidth: contentElementWidth,
+      configuration: configuration,
+      displayFullscreenToggle: false,
+      keepTooltipsInViewport: true,
+      tooltipsAboveNavigationWidgets: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 65,
+        columnNumber: 9
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 38,
+      columnNumber: 5
     }
   });
 }
-function HotspotsImage(_ref3) {
-  var contentElementId = _ref3.contentElementId,
-    contentElementWidth = _ref3.contentElementWidth,
-    customMargin = _ref3.customMargin,
-    configuration = _ref3.configuration,
-    keepTooltipsInViewport = _ref3.keepTooltipsInViewport,
-    floatingStrategy = _ref3.floatingStrategy,
-    tooltipsAboveNavigationWidgets = _ref3.tooltipsAboveNavigationWidgets,
-    isIntersecting = _ref3.isIntersecting,
-    displayFullscreenToggle = _ref3.displayFullscreenToggle,
-    onFullscreenEnter = _ref3.onFullscreenEnter,
-    _ref3$children = _ref3.children,
-    children = _ref3$children === void 0 ? function (children) {
-      return children;
-    } : _ref3$children;
-  var _useHotspotsConfigura = useHotspotsConfiguration(configuration),
-    imageFile = _useHotspotsConfigura.imageFile,
-    areas = _useHotspotsConfigura.areas,
-    panZoomEnabled = _useHotspotsConfigura.panZoomEnabled;
-  var _useHotspotsState = useHotspotsState({
-      areas: areas,
-      initialActiveArea: configuration.initialActiveArea
-    }),
-    activeIndex = _useHotspotsState.activeIndex,
-    hoveredIndex = _useHotspotsState.hoveredIndex,
-    highlightedIndex = _useHotspotsState.highlightedIndex,
-    setActiveIndex = _useHotspotsState.setActiveIndex,
-    setHoveredIndex = _useHotspotsState.setHoveredIndex,
-    setHighlightedIndex = _useHotspotsState.setHighlightedIndex;
-  var _useContentElementLif = useContentElementLifecycle(),
-    shouldLoad = _useContentElementLif.shouldLoad;
-  var _useContentElementEdi = useContentElementEditorState(),
-    isEditable = _useContentElementEdi.isEditable,
-    isSelected = _useContentElementEdi.isSelected;
-  var aspectRatio = imageFile ? "".concat(imageFile.width, " / ").concat(imageFile.height) : '3 / 4';
-  var _useContentRect = useContentRect({
-      enabled: shouldLoad
-    }),
-    _useContentRect2 = _slicedToArray(_useContentRect, 2),
-    containerRect = _useContentRect2[0],
-    containerRef = _useContentRect2[1];
-  var panZoomTransforms = usePanZoomTransforms({
-    containerRect: containerRect,
-    imageFile: imageFile,
-    areas: areas,
+function HotspotsImage({
+  contentElementId,
+  contentElementWidth,
+  customMargin,
+  configuration,
+  keepTooltipsInViewport,
+  floatingStrategy,
+  tooltipsAboveNavigationWidgets,
+  isIntersecting,
+  displayFullscreenToggle,
+  onFullscreenEnter,
+  children = children => children
+}) {
+  const {
+    imageFile,
+    areas,
+    panZoomEnabled
+  } = useHotspotsConfiguration(configuration);
+  const {
+    activeIndex,
+    hoveredIndex,
+    highlightedIndex,
+    setActiveIndex,
+    setHoveredIndex,
+    setHighlightedIndex
+  } = useHotspotsState({
+    areas,
+    initialActiveArea: configuration.initialActiveArea
+  });
+  const {
+    shouldLoad
+  } = useContentElementLifecycle();
+  const {
+    isEditable,
+    isSelected
+  } = useContentElementEditorState();
+  const aspectRatio = imageFile ? `${imageFile.width} / ${imageFile.height}` : '4 / 3';
+  const [containerRect, containerRef] = useContentRect({
+    enabled: shouldLoad
+  });
+  const panZoomTransforms = usePanZoomTransforms({
+    containerRect,
+    imageFile,
+    areas,
     initialTransformEnabled: configuration.position === 'backdrop',
-    panZoomEnabled: panZoomEnabled
+    panZoomEnabled
   });
-  var _useScrollPanZoom = useScrollPanZoom({
-      panZoomTransforms: panZoomTransforms,
-      enabled: shouldLoad,
-      onChange: setActiveIndex
-    }),
-    panZoomRefs = _useScrollPanZoom.panZoomRefs,
-    scrollFromToArea = _useScrollPanZoom.scrollFromToArea;
-  var scrollToArea = useCallback(function (index) {
+  const {
+    panZoomRefs,
+    scrollFromToArea
+  } = useScrollPanZoom({
+    panZoomTransforms,
+    enabled: shouldLoad,
+    onChange: setActiveIndex
+  });
+  const scrollToArea = useCallback(index => {
     scrollFromToArea(activeIndex, index);
   }, [scrollFromToArea, activeIndex]);
-  var activateArea = panZoomEnabled ? scrollToArea : setActiveIndex;
+  const activateArea = panZoomEnabled ? scrollToArea : setActiveIndex;
   useHotspotsEditorCommandSubscriptions({
-    setHighlightedIndex: setHighlightedIndex,
-    activateArea: activateArea
+    setHighlightedIndex,
+    activateArea
   });
   function renderVisibleAreas() {
-    return areas.map(function (area, index) {
-      return /*#__PURE__*/React.createElement(ImageArea, {
-        key: index,
-        area: area,
-        panZoomEnabled: panZoomEnabled,
-        activeImageVisible: activeIndex === index || !panZoomEnabled && activeIndex < 0 && hoveredIndex === index,
-        outlined: isEditable && isSelected,
-        outlineHidden: isIntersecting,
-        highlighted: hoveredIndex === index || highlightedIndex === index || activeIndex === index
-      });
-    });
+    return areas.map((area, index) => /*#__PURE__*/React.createElement(ImageArea, {
+      key: index,
+      area: area,
+      panZoomEnabled: panZoomEnabled,
+      activeImageVisible: activeIndex === index || !panZoomEnabled && activeIndex < 0 && hoveredIndex === index,
+      outlined: isEditable && isSelected,
+      outlineHidden: isIntersecting,
+      highlighted: hoveredIndex === index || highlightedIndex === index || activeIndex === index,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 131,
+        columnNumber: 7
+      }
+    }));
   }
   function renderClickableAreas() {
-    return areas.map(function (area, index) {
-      return /*#__PURE__*/React.createElement(Area, {
-        key: index,
-        area: area,
-        noPointerEvents: panZoomEnabled && activeIndex >= 0 && activeIndex < areas.length,
-        onMouseEnter: function onMouseEnter() {
-          return setHoveredIndex(index);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return setHoveredIndex(-1);
-        },
-        onClick: function onClick() {
-          if (!isEditable || isSelected) {
-            activateArea(index);
-          }
+    return areas.map((area, index) => /*#__PURE__*/React.createElement(Area, {
+      key: index,
+      area: area,
+      noPointerEvents: panZoomEnabled && activeIndex >= 0 && activeIndex < areas.length,
+      onMouseEnter: () => setHoveredIndex(index),
+      onMouseLeave: () => setHoveredIndex(-1),
+      onClick: () => {
+        if (!isEditable || isSelected) {
+          activateArea(index);
         }
-      });
-    });
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 148,
+        columnNumber: 7
+      }
+    }));
   }
   function renderIndicators() {
-    return areas.map(function (area, index) {
-      return /*#__PURE__*/React.createElement(Indicator, {
-        key: index,
-        area: area,
-        hidden: isIntersecting || panZoomEnabled && activeIndex >= 0 && activeIndex < areas.length && activeIndex !== index,
-        panZoomTransform: panZoomTransforms.initial.indicators[index],
-        outerRef: panZoomRefs.setIndicator(index)
-      });
-    });
+    return areas.map((area, index) => /*#__PURE__*/React.createElement(Indicator, {
+      key: index,
+      area: area,
+      hidden: isIntersecting || panZoomEnabled && activeIndex >= 0 && activeIndex < areas.length && activeIndex !== index,
+      panZoomTransform: panZoomTransforms.initial.indicators[index],
+      outerRef: panZoomRefs.setIndicator(index),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 165,
+        columnNumber: 7
+      }
+    }));
   }
   function renderTooltips() {
-    return areas.map(function (area, index) {
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        key: index,
-        area: area,
-        contentElementId: contentElementId,
-        containerRect: containerRect,
-        imageFile: imageFile,
-        panZoomTransform: panZoomTransforms.initial.tooltips[index],
-        configuration: configuration,
-        visible: !isIntersecting && (activeIndex === index || !panZoomEnabled && activeIndex < 0 && hoveredIndex === index),
-        active: activeIndex === index,
-        keepInViewport: keepTooltipsInViewport,
-        aboveNavigationWidgets: tooltipsAboveNavigationWidgets,
-        wrapperRef: containerRef,
-        floatingStrategy: floatingStrategy,
-        onMouseEnter: function onMouseEnter() {
-          return setHoveredIndex(index);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return setHoveredIndex(-1);
-        },
-        onClick: function onClick() {
-          return setActiveIndex(index);
-        },
-        onDismiss: function onDismiss() {
-          return activateArea(-1);
-        }
-      });
-    });
+    return areas.map((area, index) => /*#__PURE__*/React.createElement(Tooltip, {
+      key: index,
+      area: area,
+      contentElementId: contentElementId,
+      containerRect: containerRect,
+      imageFile: imageFile,
+      panZoomTransform: panZoomTransforms.initial.tooltips[index],
+      configuration: configuration,
+      visible: !isIntersecting && (activeIndex === index || !panZoomEnabled && activeIndex < 0 && hoveredIndex === index),
+      active: activeIndex === index,
+      keepInViewport: keepTooltipsInViewport,
+      aboveNavigationWidgets: tooltipsAboveNavigationWidgets,
+      wrapperRef: containerRef,
+      floatingStrategy: floatingStrategy,
+      onMouseEnter: () => setHoveredIndex(index),
+      onMouseLeave: () => setHoveredIndex(-1),
+      onClick: () => setActiveIndex(index),
+      onLinkClick: event => {
+        activateArea(-1);
+        setHoveredIndex(-1);
+        event.stopPropagation();
+      },
+      onDismiss: () => activateArea(-1),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 179,
+        columnNumber: 7
+      }
+    }));
   }
   function renderFullscreenToggle() {
     if (!displayFullscreenToggle) {
@@ -1431,7 +1577,13 @@ function HotspotsImage(_ref3) {
     }
     return /*#__PURE__*/React.createElement(ToggleFullscreenCornerButton, {
       isFullscreen: false,
-      onEnter: onFullscreenEnter
+      onEnter: onFullscreenEnter,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 212,
+        columnNumber: 7
+      }
     });
   }
   function renderLetterboxBackground() {
@@ -1439,11 +1591,23 @@ function HotspotsImage(_ref3) {
       return null;
     }
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$7.letterboxBackground
+      className: styles$7.letterboxBackground,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 223,
+        columnNumber: 7
+      }
     }, /*#__PURE__*/React.createElement(Image, {
       imageFile: imageFile,
       load: shouldLoad,
-      variant: 'medium'
+      variant: 'medium',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 224,
+        columnNumber: 9
+      }
     }));
   }
   return /*#__PURE__*/React.createElement(Pager, {
@@ -1452,32 +1616,80 @@ function HotspotsImage(_ref3) {
     panZoomEnabled: panZoomEnabled,
     hideButtons: isIntersecting,
     activeIndex: activeIndex,
-    activateArea: activateArea
+    activateArea: activateArea,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 232,
+      columnNumber: 5
+    }
   }, /*#__PURE__*/React.createElement(FitViewport, {
     file: imageFile,
-    aspectRatio: imageFile ? undefined : 0.75,
+    fallbackAspectRatio: 0.75,
     fill: configuration.position === 'backdrop',
-    opaque: !imageFile
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 238,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement(Composite, {
     activeIndex: activeIndex + 1,
     loop: false,
-    onNavigate: function onNavigate(index) {
-      return activateArea(index - 1);
+    onNavigate: index => activateArea(index - 1),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 241,
+      columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.tooltipsWrapper,
     style: {
       '--hotspots-image-aspect-ratio': aspectRatio,
-      '--hotspots-container-height': "".concat(containerRect.height, "px")
+      '--hotspots-container-height': `${containerRect.height}px`
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 244,
+      columnNumber: 11
+    }
+  }, children( /*#__PURE__*/React.createElement(FitViewport.Content, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 248,
+      columnNumber: 15
     }
-  }, children( /*#__PURE__*/React.createElement(FitViewport.Content, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.stack,
-    ref: containerRef
-  }, renderLetterboxBackground(), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 249,
+      columnNumber: 17
+    }
+  }, /*#__PURE__*/React.createElement(FilePlaceholder, {
+    file: imageFile,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 251,
+      columnNumber: 19
+    }
+  }), renderLetterboxBackground(), /*#__PURE__*/React.createElement("div", {
     className: styles$7.wrapper,
     ref: panZoomRefs.wrapper,
     style: {
       transform: panZoomTransforms.initial.wrapper
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 253,
+      columnNumber: 19
     }
   }, /*#__PURE__*/React.createElement(Image, {
     imageFile: imageFile,
@@ -1485,17 +1697,35 @@ function HotspotsImage(_ref3) {
     fill: false,
     structuredData: true,
     variant: panZoomEnabled ? 'ultra' : 'large',
-    preferSvg: true
+    preferSvg: true,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 256,
+      columnNumber: 21
+    }
   }), renderVisibleAreas()), /*#__PURE__*/React.createElement(Scroller, {
     disabled: !panZoomEnabled,
     areas: areas,
     ref: panZoomRefs.scroller,
-    setStepRef: panZoomRefs.setStep
+    setStepRef: panZoomRefs.setStep,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 264,
+      columnNumber: 19
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.wrapper,
     ref: panZoomRefs.scrollerAreas,
     style: {
       transform: panZoomTransforms.initial.wrapper
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 268,
+      columnNumber: 21
     }
   }, renderClickableAreas())), renderIndicators()), renderFullscreenToggle(), /*#__PURE__*/React.createElement(InlineFileRights, {
     configuration: configuration,
@@ -1503,22 +1733,58 @@ function HotspotsImage(_ref3) {
     items: [{
       file: imageFile,
       label: 'image'
-    }]
+    }],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 277,
+      columnNumber: 17
+    }
   }))), /*#__PURE__*/React.createElement(CompositeItem, {
     render: /*#__PURE__*/React.createElement("div", {
-      className: styles$7.compositeItem
-    })
+      className: styles$7.compositeItem,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 282,
+        columnNumber: 36
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 282,
+      columnNumber: 13
+    }
   }), renderTooltips(), /*#__PURE__*/React.createElement(CompositeItem, {
     render: /*#__PURE__*/React.createElement("div", {
-      className: styles$7.compositeItem
-    })
+      className: styles$7.compositeItem,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 284,
+        columnNumber: 36
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 284,
+      columnNumber: 13
+    }
   }))), /*#__PURE__*/React.createElement(InlineFileRights, {
     configuration: configuration,
     context: "afterElement",
     items: [{
       file: imageFile,
       label: 'image'
-    }]
+    }],
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 287,
+      columnNumber: 9
+    }
   })));
 }