@vidispine/vdt-react-timeline 22.4.0-pre.9 → 23.1.0-pre.1

package/dist/index.es.js

@@ -14,46 +14,38 @@ import uniq from 'lodash.uniq';
 var interpolate = function interpolate(y0, y1, x0, x1, x) {
   return y0 + (x - x0) * (y1 - y0) / (x1 - x0);
 };
-
 var vLogImpl = function vLogImpl(component, msg, level) {
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
     console[level]("".concat(component ? "".concat(component, ": ") : '').concat(msg));
   }
 };
-
 var vLog = {
   error: function error() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     return vLogImpl.apply(void 0, args.concat(['error']));
   },
   warn: function warn() {
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-
     return vLogImpl.apply(void 0, args.concat(['warn']));
   }
 };
 function mapPairs(arr, func) {
   var result = [];
-
   for (var i = 0; i < arr.length - 1; i += 1) {
     result.push(func(arr[i], arr[i + 1]));
   }
-
   return result;
 }
 function getStyleProperties() {
   var style = getComputedStyle(document.body);
-
   for (var _len3 = arguments.length, properties = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
     properties[_key3] = arguments[_key3];
   }
-
   return properties.map(function (prop) {
     return style.getPropertyValue(prop);
   });
@@ -61,23 +53,20 @@ function getStyleProperties() {
 
 function useOptionallyControlledState(_ref) {
   var _ref$uncontrolledDefa = _ref.uncontrolledDefaultState,
-      uncontrolledDefaultState = _ref$uncontrolledDefa === void 0 ? undefined : _ref$uncontrolledDefa,
-      _ref$uncontrolledOnCh = _ref.uncontrolledOnChange,
-      uncontrolledOnChange = _ref$uncontrolledOnCh === void 0 ? undefined : _ref$uncontrolledOnCh,
-      _ref$controlledState = _ref.controlledState,
-      controlledState = _ref$controlledState === void 0 ? undefined : _ref$controlledState,
-      _ref$controlledOnChan = _ref.controlledOnChange,
-      controlledOnChange = _ref$controlledOnChan === void 0 ? undefined : _ref$controlledOnChan,
-      componentName = _ref.componentName,
-      stateName = _ref.stateName;
-
+    uncontrolledDefaultState = _ref$uncontrolledDefa === void 0 ? undefined : _ref$uncontrolledDefa,
+    _ref$uncontrolledOnCh = _ref.uncontrolledOnChange,
+    uncontrolledOnChange = _ref$uncontrolledOnCh === void 0 ? undefined : _ref$uncontrolledOnCh,
+    _ref$controlledState = _ref.controlledState,
+    controlledState = _ref$controlledState === void 0 ? undefined : _ref$controlledState,
+    _ref$controlledOnChan = _ref.controlledOnChange,
+    controlledOnChange = _ref$controlledOnChan === void 0 ? undefined : _ref$controlledOnChan,
+    componentName = _ref.componentName,
+    stateName = _ref.stateName;
   var _useState = useState(uncontrolledDefaultState),
-      _useState2 = _slicedToArray(_useState, 2),
-      uncontrolledState = _useState2[0],
-      setUncontrolledState = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    uncontrolledState = _useState2[0],
+    setUncontrolledState = _useState2[1];
   var isControlled = useRef(null);
-
   var setIsControlled = function setIsControlled(newValue) {
     if (isControlled.current !== null && isControlled.current !== newValue) {
       if (newValue) {
@@ -86,27 +75,22 @@ function useOptionallyControlledState(_ref) {
         vLog.warn(componentName, "".concat(stateName, " changed from controlled to uncontrolled"));
       }
     }
-
     isControlled.current = newValue;
   };
-
   if (controlledState !== undefined) {
     setIsControlled(true);
     return [controlledState, controlledOnChange];
   }
-
   setIsControlled(false);
   return [uncontrolledState, controlledOnChange ? function () {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     if (uncontrolledOnChange) {
       uncontrolledOnChange.apply(void 0, [setUncontrolledState].concat(args));
     } else {
       setUncontrolledState.apply(void 0, args);
     }
-
     controlledOnChange.apply(void 0, args);
   } : uncontrolledOnChange || setUncontrolledState];
 }
@@ -115,69 +99,57 @@ function defaultGetZoomMultiplier(direction, time, perspective) {
   var multiplier = perspective.end - perspective.start < 100 && direction === 'in' ? 1 : 2;
   return direction === 'in' ? 1 / multiplier : multiplier;
 }
-
 function useTimelinePerspective(_ref) {
   var start = _ref.start,
-      end = _ref.end,
-      propDefaultPerspective = _ref.defaultPerspective,
-      propPerspective = _ref.perspective,
-      propOnChangePerspective = _ref.onChangePerspective,
-      _ref$zoomMultiplier = _ref.zoomMultiplier,
-      zoomMultiplier = _ref$zoomMultiplier === void 0 ? defaultGetZoomMultiplier : _ref$zoomMultiplier;
-
+    end = _ref.end,
+    propDefaultPerspective = _ref.defaultPerspective,
+    propPerspective = _ref.perspective,
+    propOnChangePerspective = _ref.onChangePerspective,
+    _ref$zoomMultiplier = _ref.zoomMultiplier,
+    zoomMultiplier = _ref$zoomMultiplier === void 0 ? defaultGetZoomMultiplier : _ref$zoomMultiplier;
   var _useOptionallyControl = useOptionallyControlledState({
-    uncontrolledDefaultState: propDefaultPerspective || {
-      start: start,
-      end: end
-    },
-    controlledState: propPerspective,
-    controlledOnChange: propOnChangePerspective,
-    componentName: 'VdtTimeline',
-    stateName: 'perspective'
-  }),
-      _useOptionallyControl2 = _slicedToArray(_useOptionallyControl, 2),
-      perspective = _useOptionallyControl2[0],
-      setPerspective = _useOptionallyControl2[1];
-
+      uncontrolledDefaultState: propDefaultPerspective || {
+        start: start,
+        end: end
+      },
+      controlledState: propPerspective,
+      controlledOnChange: propOnChangePerspective,
+      componentName: 'VdtTimeline',
+      stateName: 'perspective'
+    }),
+    _useOptionallyControl2 = _slicedToArray(_useOptionallyControl, 2),
+    perspective = _useOptionallyControl2[0],
+    setPerspective = _useOptionallyControl2[1];
   var getZoomMultiplier = typeof zoomMultiplier === 'function' ? zoomMultiplier : function (direction) {
     return direction === 'in' ? 1 / zoomMultiplier : zoomMultiplier;
   };
-
   var checkedSetPerspective = function checkedSetPerspective(perspectiveStart, perspectiveEnd) {
     setPerspective({
       start: clamp(Number(perspectiveStart), start, end),
       end: clamp(Number(perspectiveEnd), start, end)
     });
   };
-
   var zoom = function zoom(direction, time) {
     var perspectiveDuration = perspective.end - perspective.start;
     var normalizedTimeOffset = (time - perspective.start) / perspectiveDuration;
     var currZoomMultiplier = getZoomMultiplier(direction, time, perspective);
-
     if (currZoomMultiplier === 1) {
       return;
     }
-
     var newPerspectiveDuration = (perspective.end - perspective.start) * currZoomMultiplier;
     var newPerspectiveStart = time - normalizedTimeOffset * newPerspectiveDuration;
     var newPerspectiveEnd = time + (1 - normalizedTimeOffset) * newPerspectiveDuration;
-
     var perspectiveMisalignmentCorrection = function () {
       if (start > newPerspectiveStart) {
         return start - newPerspectiveStart;
       }
-
       if (newPerspectiveEnd > end) {
         return end - newPerspectiveEnd;
       }
-
       return 0;
     }();
-
     checkedSetPerspective(newPerspectiveStart + perspectiveMisalignmentCorrection, newPerspectiveEnd + perspectiveMisalignmentCorrection);
   };
-
   return {
     perspective: perspective,
     setPerspective: checkedSetPerspective,
@@ -186,19 +158,18 @@ function useTimelinePerspective(_ref) {
 }
 
 function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TimelineContext = /*#__PURE__*/createContext();
 function TimelineProvider(_ref) {
   var start = _ref.start,
-      end = _ref.end,
-      time = _ref.time,
-      onChangeTime = _ref.onChangeTime,
-      timelineRef = _ref.timelineRef,
-      children = _ref.children,
-      perspective = _ref.perspective,
-      onChangePerspective = _ref.onChangePerspective,
-      defaultPerspective = _ref.defaultPerspective;
+    end = _ref.end,
+    time = _ref.time,
+    onChangeTime = _ref.onChangeTime,
+    timelineRef = _ref.timelineRef,
+    children = _ref.children,
+    perspective = _ref.perspective,
+    onChangePerspective = _ref.onChangePerspective,
+    defaultPerspective = _ref.defaultPerspective;
   var timelinePerspective = useTimelinePerspective({
     start: start,
     end: end,
@@ -260,23 +231,20 @@ var css$7 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-tim
 n(css$7,{});
 
 var _excluded$9 = ["start", "end", "time", "onChangeTime", "children", "className", "perspective", "onChangePerspective", "defaultPerspective", "zoomMultiplier"];
-
 function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Timeline(_ref) {
   var start = _ref.start,
-      end = _ref.end,
-      time = _ref.time,
-      onChangeTime = _ref.onChangeTime,
-      children = _ref.children,
-      className = _ref.className,
-      perspective = _ref.perspective,
-      onChangePerspective = _ref.onChangePerspective,
-      defaultPerspective = _ref.defaultPerspective,
-      zoomMultiplier = _ref.zoomMultiplier,
-      props = _objectWithoutProperties(_ref, _excluded$9);
-
+    end = _ref.end,
+    time = _ref.time,
+    onChangeTime = _ref.onChangeTime,
+    children = _ref.children,
+    className = _ref.className,
+    perspective = _ref.perspective,
+    onChangePerspective = _ref.onChangePerspective,
+    defaultPerspective = _ref.defaultPerspective,
+    zoomMultiplier = _ref.zoomMultiplier,
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var timelineRef = useRef();
   return /*#__PURE__*/jsx(TimelineProvider, {
     start: start,
@@ -301,27 +269,22 @@ Timeline.propTypes = {
    * Start of timeline.
    */
   start: PropTypes.number.isRequired,
-
   /**
    * End of timeline.
    */
   end: PropTypes.number.isRequired,
-
   /**
    * Place of timeline marker.
    */
   time: PropTypes.number,
-
   /**
    * Children components to render inside timeline.
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-
   /**
    * Callback to trigger when changing the value of time prop.
    */
   onChangeTime: PropTypes.func,
-
   /**
    * Zoom level of timeline: shows ticks between start and end values (if start and end of timeline are within this range).
    */
@@ -329,12 +292,10 @@ Timeline.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   }),
-
   /**
    * Callback to trigger when changing the value of perspective prop.
    */
   onChangePerspective: PropTypes.func,
-
   /**
    * Set default value for perspective when rendering component.
    */
@@ -342,12 +303,10 @@ Timeline.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   }),
-
   /**
    * Multiply by value when zooming in.
    */
   zoomMultiplier: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-
   /**
    * Override styles with className.
    */
@@ -371,78 +330,62 @@ var css$6 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-tim
 n(css$6,{});
 
 var _excluded$8 = ["className", "perspective", "time", "lineWidth", "headWidth", "headHeight", "style", "onDrag", "HeadProps"];
-
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _getStyleProperties$4 = getStyleProperties('--vdt-timeline-palette-secondary'),
-    _getStyleProperties2$4 = _slicedToArray(_getStyleProperties$4, 1),
-    paletteSecondary$1 = _getStyleProperties2$4[0];
-
+  _getStyleProperties2$4 = _slicedToArray(_getStyleProperties$4, 1),
+  paletteSecondary$1 = _getStyleProperties2$4[0];
 var EmptyImage = document.createElement('img');
 EmptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 function TimelinePlayhead(_ref) {
   var _ref$current;
-
   var className = _ref.className,
-      propPerspective = _ref.perspective,
-      propTime = _ref.time,
-      lineWidth = _ref.lineWidth,
-      headWidth = _ref.headWidth,
-      headHeight = _ref.headHeight,
-      style = _ref.style,
-      onDrag = _ref.onDrag,
-      HeadProps = _ref.HeadProps,
-      props = _objectWithoutProperties(_ref, _excluded$8);
-
+    propPerspective = _ref.perspective,
+    propTime = _ref.time,
+    lineWidth = _ref.lineWidth,
+    headWidth = _ref.headWidth,
+    headHeight = _ref.headHeight,
+    style = _ref.style,
+    onDrag = _ref.onDrag,
+    HeadProps = _ref.HeadProps,
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var _ref2 = useTimeline() || {
-    perspective: propPerspective,
-    time: propTime
-  },
-      perspective = _ref2.perspective,
-      time = _ref2.time,
-      onChangeTime = _ref2.onChangeTime;
-
+      perspective: propPerspective,
+      time: propTime
+    },
+    perspective = _ref2.perspective,
+    time = _ref2.time,
+    onChangeTime = _ref2.onChangeTime;
   if (perspective === undefined) {
     vLog.error('VdtTimelinePlayhead', "missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");
   }
-
   var ref = useRef();
   var containerEl = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
   var containerWidth = (containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth) || 0;
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isDragging = _useState2[0],
-      setIsDragging = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isDragging = _useState2[0],
+    setIsDragging = _useState2[1];
   var _useState3 = useState(time),
-      _useState4 = _slicedToArray(_useState3, 2),
-      localTime = _useState4[0],
-      setLocalTime = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    localTime = _useState4[0],
+    setLocalTime = _useState4[1];
   var markerLeft = interpolate(0, containerWidth, perspective.start, perspective.end, localTime);
-
   var isValidTime = function isValidTime(f) {
     return f <= perspective.end && f >= perspective.start;
   };
-
   var hide = !isValidTime(localTime);
   useEffect(function () {
     if (time !== undefined && !isDragging) {
       setLocalTime(time);
     }
   }, [time, isDragging]);
-
   var handleDrag = onDrag || onChangeTime && function (e) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return onChangeTime.apply(void 0, args);
   };
-
   return /*#__PURE__*/jsx("div", _objectSpread$8(_objectSpread$8({
     ref: ref,
     className: clsx('VdtTimelinePlayhead-root', className),
@@ -460,7 +403,6 @@ function TimelinePlayhead(_ref) {
     },
     onDragEnd: function onDragEnd() {
       setIsDragging(false);
-
       if (handleDrag !== null && handleDrag !== void 0 && handleDrag.flush) {
         handleDrag.flush();
       }
@@ -468,10 +410,8 @@ function TimelinePlayhead(_ref) {
     onDrag: function onDrag(e) {
       if (handleDrag) {
         var _ref$current$parentEl = ref.current.parentElement.getBoundingClientRect(),
-            containerX = _ref$current$parentEl.x;
-
+          containerX = _ref$current$parentEl.x;
         var newTime = interpolate(perspective.start, perspective.end, 0, containerWidth, e.clientX - containerX);
-
         if (isValidTime(newTime)) {
           var clampedNewTime = clamp(newTime, perspective.start, perspective.end);
           handleDrag(e, clampedNewTime);
@@ -499,22 +439,18 @@ TimelinePlayhead.propTypes = {
    * Apply inline CSS styling
    */
   style: PropTypes.instanceOf(Object),
-
   /**
    * Height of marker head in px
    */
   headHeight: PropTypes.number,
-
   /**
    * Width of marker head in px
    */
   headWidth: PropTypes.number,
-
   /**
    * Width/thickness of marker line in px
    */
   lineWidth: PropTypes.number,
-
   /**
    * Zoom level when looking at playhead.
    */
@@ -522,18 +458,15 @@ TimelinePlayhead.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   }),
-
   /**
    * Timeline placement of marker
    */
   time: PropTypes.number,
   onDrag: PropTypes.func,
-
   /**
    * Additional props for marker head
    */
   HeadProps: PropTypes.instanceOf(Object),
-
   /**
    * Override styles with className
    */
@@ -553,15 +486,12 @@ TimelinePlayhead.defaultProps = {
 
 function useResizeObserver(ref) {
   var _useState = useState({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      rect = _useState2[0],
-      setRect = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
   var observerRef = useRef(new ResizeObserver(function (entries) {
     var _entries$;
-
     var contentRect = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect;
-
     if (contentRect) {
       setRect(contentRect);
     }
@@ -569,11 +499,9 @@ function useResizeObserver(ref) {
   useEffect(function () {
     var observer = observerRef === null || observerRef === void 0 ? void 0 : observerRef.current;
     var el = ref === null || ref === void 0 ? void 0 : ref.current;
-
     if (el) {
       observer.observe(el);
     }
-
     return function () {
       if (el) {
         observer.unobserve(el);
@@ -590,32 +518,28 @@ var css$4 = ".VdtTimelineWaveform-root {\n    height: 40px;\n}";
 n(css$4,{});
 
 var _excluded$7 = ["amplitudeSegments", "pxPerTimeUnit", "start", "height"],
-    _excluded2$3 = ["className", "waveform", "start", "end", "perspective", "StageProps", "LayerProps", "RectProps", "WaveRectProps"];
-
+  _excluded2$3 = ["className", "waveform", "start", "end", "perspective", "StageProps", "LayerProps", "RectProps", "WaveRectProps"];
 function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _getStyleProperties$3 = getStyleProperties('--vdt-timeline-palette-primary'),
-    _getStyleProperties2$3 = _slicedToArray(_getStyleProperties$3, 1),
-    palettePrimary$1 = _getStyleProperties2$3[0];
-
+  _getStyleProperties2$3 = _slicedToArray(_getStyleProperties$3, 1),
+  palettePrimary$1 = _getStyleProperties2$3[0];
 var TimelineWaveFormRects = /*#__PURE__*/memo(function (_ref) {
   var amplitudeSegments = _ref.amplitudeSegments,
-      pxPerTimeUnit = _ref.pxPerTimeUnit,
-      start = _ref.start,
-      height = _ref.height,
-      props = _objectWithoutProperties(_ref, _excluded$7);
-
+    pxPerTimeUnit = _ref.pxPerTimeUnit,
+    start = _ref.start,
+    height = _ref.height,
+    props = _objectWithoutProperties(_ref, _excluded$7);
   return amplitudeSegments.map(function (_ref2, i) {
     var amplitude = _ref2.amplitude,
-        segmentStart = _ref2.start,
-        segmentEnd = _ref2.end;
+      segmentStart = _ref2.start,
+      segmentEnd = _ref2.end;
     var rectWidth = pxPerTimeUnit * (segmentEnd - segmentStart);
     var rectX = (segmentStart - start) * pxPerTimeUnit;
     var rectHeight = height * amplitude;
     var centeredY = (height - rectHeight) / 2;
-    return /*#__PURE__*/jsx(Rect // eslint-disable-next-line react/no-array-index-key
+    return /*#__PURE__*/jsx(Rect
+    // eslint-disable-next-line react/no-array-index-key
     , _objectSpread$7({
       x: rectX,
       y: centeredY,
@@ -625,40 +549,34 @@ var TimelineWaveFormRects = /*#__PURE__*/memo(function (_ref) {
     }, props), i);
   });
 });
-
 function TimelineWaveform(_ref3) {
   var className = _ref3.className,
-      waveform = _ref3.waveform,
-      propStart = _ref3.start,
-      propEnd = _ref3.end,
-      propPerspective = _ref3.perspective,
-      StageProps = _ref3.StageProps,
-      LayerProps = _ref3.LayerProps,
-      RectProps = _ref3.RectProps,
-      WaveRectProps = _ref3.WaveRectProps,
-      props = _objectWithoutProperties(_ref3, _excluded2$3);
-
+    waveform = _ref3.waveform,
+    propStart = _ref3.start,
+    propEnd = _ref3.end,
+    propPerspective = _ref3.perspective,
+    StageProps = _ref3.StageProps,
+    LayerProps = _ref3.LayerProps,
+    RectProps = _ref3.RectProps,
+    WaveRectProps = _ref3.WaveRectProps,
+    props = _objectWithoutProperties(_ref3, _excluded2$3);
   var _ref4 = useTimeline() || {
-    start: propStart,
-    end: propEnd,
-    perspective: propPerspective
-  },
-      start = _ref4.start,
-      end = _ref4.end,
-      perspective = _ref4.perspective;
-
+      start: propStart,
+      end: propEnd,
+      perspective: propPerspective
+    },
+    start = _ref4.start,
+    end = _ref4.end,
+    perspective = _ref4.perspective;
   if (start === undefined || end === undefined || perspective === undefined) {
     vLog.error('VdtTimelineWaveform', "missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' or 'perspective' must be passed explicitly");
   }
-
   var ref = useRef();
-
   var _useResizeObserver = useResizeObserver(ref),
-      _useResizeObserver$wi = _useResizeObserver.width,
-      width = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
-      _useResizeObserver$he = _useResizeObserver.height,
-      height = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;
-
+    _useResizeObserver$wi = _useResizeObserver.width,
+    width = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
+    _useResizeObserver$he = _useResizeObserver.height,
+    height = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;
   var amplitudeSegments = useMemo(function () {
     return waveform.map(function (amplitude, i) {
       return {
@@ -704,17 +622,14 @@ TimelineWaveform.propTypes = {
    * Array of integers to form the wave.
    */
   waveform: PropTypes.arrayOf(PropTypes.number),
-
   /**
    * Set starting point of the waveform. The value provided is the value of the respective data point in passed data.
    */
   start: PropTypes.number,
-
   /**
    * Set ending point of the waveform. The value provided is the value of the respective data point in passed data.
    */
   end: PropTypes.number,
-
   /**
    * Zoom level when looking at waveform.
    */
@@ -722,27 +637,22 @@ TimelineWaveform.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   }),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
    */
   StageProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Layer.html
    */
   LayerProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
    */
   RectProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
    */
   WaveRectProps: PropTypes.instanceOf(Object),
-
   /**
    * Override styles with className
    */
@@ -762,14 +672,12 @@ TimelineWaveform.defaultProps = {
 
 function useHover() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$hoverEffect = _ref.hoverEffect,
-      hoverEffect = _ref$hoverEffect === void 0 ? function () {} : _ref$hoverEffect;
-
+    _ref$hoverEffect = _ref.hoverEffect,
+    hoverEffect = _ref$hoverEffect === void 0 ? function () {} : _ref$hoverEffect;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isHovering = _useState2[0],
-      setIsHovering = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovering = _useState2[0],
+    setIsHovering = _useState2[1];
   var cleanupHover = useRef(null);
   return {
     isHovering: isHovering,
@@ -779,88 +687,75 @@ function useHover() {
     },
     onMouseLeave: function onMouseLeave() {
       setIsHovering(false);
-
       if (cleanupHover.current) {
         cleanupHover.current();
       }
-
       cleanupHover.current = null;
     }
   };
 }
 
 var _excluded$6 = ["onClick", "x", "width", "y", "height", "padding", "start", "end", "onHover", "onMove", "onMoveStart", "onMoveEnd", "onResize", "onResizeStart", "onResizeEnd"],
-    _excluded2$2 = ["isHovering"],
-    _excluded3 = ["isHovering"];
-
+  _excluded2$2 = ["isHovering"],
+  _excluded3 = ["isHovering"];
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _getStyleProperties$2 = getStyleProperties('--vdt-timeline-palette-primary', '--vdt-timeline-palette-primary-dark'),
-    _getStyleProperties2$2 = _slicedToArray(_getStyleProperties$2, 2),
-    palettePrimary = _getStyleProperties2$2[0],
-    palettePrimaryDark = _getStyleProperties2$2[1];
-
+  _getStyleProperties2$2 = _slicedToArray(_getStyleProperties$2, 2),
+  palettePrimary = _getStyleProperties2$2[0],
+  palettePrimaryDark = _getStyleProperties2$2[1];
 var EVENT_RESIZER_THUMB_WIDTH = 5;
 function TimelineEvent(_ref) {
   var onClick = _ref.onClick,
-      x = _ref.x,
-      width = _ref.width,
-      y = _ref.y,
-      height = _ref.height,
-      padding = _ref.padding,
-      start = _ref.start,
-      end = _ref.end,
-      onHover = _ref.onHover,
-      onMove = _ref.onMove,
-      onMoveStart = _ref.onMoveStart,
-      onMoveEnd = _ref.onMoveEnd,
-      onResize = _ref.onResize,
-      onResizeStart = _ref.onResizeStart,
-      onResizeEnd = _ref.onResizeEnd,
-      props = _objectWithoutProperties(_ref, _excluded$6);
-
+    x = _ref.x,
+    width = _ref.width,
+    y = _ref.y,
+    height = _ref.height,
+    padding = _ref.padding,
+    start = _ref.start,
+    end = _ref.end,
+    onHover = _ref.onHover,
+    onMove = _ref.onMove,
+    onMoveStart = _ref.onMoveStart,
+    onMoveEnd = _ref.onMoveEnd,
+    onResize = _ref.onResize,
+    onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd,
+    props = _objectWithoutProperties(_ref, _excluded$6);
   if ([x, width, y, height].some(function (v) {
     return v === undefined;
   })) {
     vLog.error('VdtTimelineEvent', "missing 'x', 'width', 'y', or 'height' props. If the component is not used as a direct child of VdtTimelineTrack, 'x', 'width', 'y', or 'height' must be passed explicitly");
   }
-
   var eventRef = useRef();
-
   var _useHover = useHover({
-    hoverEffect: function hoverEffect(e) {
-      if (onHover) onHover(e, true);
-      return function () {
-        if (onHover) onHover(e, false);
-      };
-    }
-  }),
-      isHovering = _useHover.isHovering,
-      hoverProps = _objectWithoutProperties(_useHover, _excluded2$2);
-
-  var _useHover2 = useHover({
-    hoverEffect: function hoverEffect(e) {
-      if (onResize) {
-        e.target.getStage().container().style.cursor = 'col-resize';
+      hoverEffect: function hoverEffect(e) {
+        if (onHover) onHover(e, true);
+        return function () {
+          if (onHover) onHover(e, false);
+        };
       }
-
-      return function () {
+    }),
+    isHovering = _useHover.isHovering,
+    hoverProps = _objectWithoutProperties(_useHover, _excluded2$2);
+  var _useHover2 = useHover({
+      hoverEffect: function hoverEffect(e) {
         if (onResize) {
-          e.target.getStage().container().style.cursor = 'default';
+          e.target.getStage().container().style.cursor = 'col-resize';
         }
-      };
-    }
-  }),
-      isHoveringResize = _useHover2.isHovering,
-      resizeHoverProps = _objectWithoutProperties(_useHover2, _excluded3);
-
+        return function () {
+          if (onResize) {
+            e.target.getStage().container().style.cursor = 'default';
+          }
+        };
+      }
+    }),
+    isHoveringResize = _useHover2.isHovering,
+    resizeHoverProps = _objectWithoutProperties(_useHover2, _excluded3);
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isMoving = _useState2[0],
-      setIsMoving = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isMoving = _useState2[0],
+    setIsMoving = _useState2[1];
   var hasOnClick = !!onClick;
   useEffect(function () {
     if (eventRef.current) {
@@ -869,7 +764,6 @@ function TimelineEvent(_ref) {
         if (isHovering && hasOnClick) return 'pointer';
         return 'default';
       }();
-
       eventRef.current.getStage().container().style.cursor = cursor;
     }
   }, [isMoving, isHovering, hasOnClick]);
@@ -884,7 +778,6 @@ function TimelineEvent(_ref) {
   var defaultHoverProps = isHovering || isHoveringResize ? {
     fill: palettePrimaryDark
   } : {};
-
   var resizerProps = function resizerProps(which) {
     var resizerX = which === 'start' ? x : x + width - EVENT_RESIZER_THUMB_WIDTH;
     return {
@@ -907,17 +800,14 @@ function TimelineEvent(_ref) {
       x: resizerX,
       onDragMove: function onDragMove(e) {
         if (!onResize) return;
-
         var _e$target$position = e.target.position(),
-            newX = _e$target$position.x;
-
+          newX = _e$target$position.x;
         e.target.x(resizerX);
         var newPos = Math.floor(interpolate(start, end, x, x + width, newX + (which === 'start' ? 0 : EVENT_RESIZER_THUMB_WIDTH)));
         onResize(e, which, newPos);
       }
     };
   };
-
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Rect, _objectSpread$6(_objectSpread$6(_objectSpread$6(_objectSpread$6({
       ref: eventRef,
@@ -931,7 +821,6 @@ function TimelineEvent(_ref) {
       onDragStart: function onDragStart(e) {
         if (!onMove) return;
         setIsMoving(true);
-
         if (onMoveStart) {
           onMoveStart(e);
         }
@@ -939,17 +828,14 @@ function TimelineEvent(_ref) {
       onDragEnd: function onDragEnd(e) {
         if (!onMove) return;
         setIsMoving(false);
-
         if (onMoveEnd) {
           onMoveEnd(e);
         }
       },
       onDragMove: function onDragMove(e) {
         if (!onMove) return;
-
         var _e$target$position2 = e.target.position(),
-            newX = _e$target$position2.x;
-
+          newX = _e$target$position2.x;
         e.target.x(x);
         var newStart = Math.floor(interpolate(start, end, x, x + width, newX));
         onMove(e, newStart);
@@ -964,77 +850,62 @@ TimelineEvent.propTypes = {
    * Callback to trigger on clicking on timeline event component.
    */
   onClick: PropTypes.func,
-
   /**
    * Callback to trigger on hovering over timeline event component.
    */
   onHover: PropTypes.func,
-
   /**
    * Callback to trigger on moving a timeline event component (when mousedown and dragging).
    */
   onMove: PropTypes.func,
-
   /**
    * Callback to trigger on moving a timeline event component only when mousedown and dragging.
    */
   onMoveStart: PropTypes.func,
-
   /**
    * Callback to trigger on moving a timeline event component only when mouseup and not dragging.
    */
   onMoveEnd: PropTypes.func,
-
   /**
    * Callback to trigger on resizing a timeline event component.
    */
   onResize: PropTypes.func,
-
   /**
    * Callback to trigger on resizing a timeline event component only when mousedown and dragging.
    */
   onResizeStart: PropTypes.func,
-
   /**
    * Callback to trigger on resizing a timeline event component only when mouseup and not dragging.
    */
   onResizeEnd: PropTypes.func,
-
   /**
    * Position of event bar in x-axis (px)
    */
   x: PropTypes.number,
-
   /**
    * Width of event bar in px
    */
   width: PropTypes.number,
-
   /**
    * Position of event bar in y-axis (px)
    */
   y: PropTypes.number,
-
   /**
    * Height of event bar in px
    */
   height: PropTypes.number,
-
   /**
    * Padding of event bar in px
    */
   padding: PropTypes.number,
-
   /**
    * Start of timeline event
    */
   start: PropTypes.number.isRequired,
-
   /**
    * End of timeline event
    */
   end: PropTypes.number.isRequired,
-
   /**
    * Override styles with className
    */
@@ -1058,63 +929,55 @@ TimelineEvent.defaultProps = {
 };
 
 var _excluded$5 = ["className", "children", "perspective", "onClick", "style", "onHover", "StageProps", "LayerProps", "GroupProps", "RectProps"],
-    _excluded2$1 = ["isHovering"];
-
+  _excluded2$1 = ["isHovering"];
 function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function TimelineTrack(_ref) {
   var className = _ref.className,
-      children = _ref.children,
-      propPerspective = _ref.perspective,
-      onClick = _ref.onClick,
-      style = _ref.style,
-      onHover = _ref.onHover,
-      StageProps = _ref.StageProps,
-      LayerProps = _ref.LayerProps,
-      GroupProps = _ref.GroupProps,
-      RectProps = _ref.RectProps,
-      props = _objectWithoutProperties(_ref, _excluded$5);
-
+    children = _ref.children,
+    propPerspective = _ref.perspective,
+    onClick = _ref.onClick,
+    style = _ref.style,
+    onHover = _ref.onHover,
+    StageProps = _ref.StageProps,
+    LayerProps = _ref.LayerProps,
+    GroupProps = _ref.GroupProps,
+    RectProps = _ref.RectProps,
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var _ref2 = useTimeline() || {
-    perspective: propPerspective
-  },
-      perspective = _ref2.perspective;
-
+      perspective: propPerspective
+    },
+    perspective = _ref2.perspective;
   if (perspective === undefined) {
     vLog.error('VdtTimelineTrack', "missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");
   }
-
   var visibleChildren = Children.toArray(children).filter(function (_ref3) {
     var _ref3$props = _ref3.props,
-        childProps = _ref3$props === void 0 ? {} : _ref3$props;
+      childProps = _ref3$props === void 0 ? {} : _ref3$props;
     var isOutsidePerspective = childProps.start > perspective.end || childProps.end < perspective.start;
     return !isOutsidePerspective;
   });
   var eventsContainerRef = useRef();
-
   var _useResizeObserver = useResizeObserver(eventsContainerRef),
-      _useResizeObserver$wi = _useResizeObserver.width,
-      eventContainerWidth = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
-      _useResizeObserver$he = _useResizeObserver.height,
-      eventContainerHeight = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he; // expect children to be passed 'y' and 'height' props so that we can calculate the track height
-
+    _useResizeObserver$wi = _useResizeObserver.width,
+    eventContainerWidth = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
+    _useResizeObserver$he = _useResizeObserver.height,
+    eventContainerHeight = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;
 
+  // expect children to be passed 'y' and 'height' props so that we can calculate the track height
   var eventsContainerHeight = Math.max.apply(Math, _toConsumableArray(Children.map(children, function (_ref4) {
     var _ref4$props = _ref4.props;
     _ref4$props = _ref4$props === void 0 ? {} : _ref4$props;
     var _ref4$props$y = _ref4$props.y,
-        y = _ref4$props$y === void 0 ? 0 : _ref4$props$y,
-        _ref4$props$height = _ref4$props.height,
-        height = _ref4$props$height === void 0 ? 0 : _ref4$props$height;
+      y = _ref4$props$y === void 0 ? 0 : _ref4$props$y,
+      _ref4$props$height = _ref4$props.height,
+      height = _ref4$props$height === void 0 ? 0 : _ref4$props$height;
     return y + height;
   }))) || DEFAULT_EVENT_HEIGHT;
-
   var cloneChild = function cloneChild(child) {
     var _ref5 = child.props || {},
-        childStart = _ref5.start,
-        childEnd = _ref5.end;
-
+      childStart = _ref5.start,
+      childEnd = _ref5.end;
     var xProps = function () {
       if (childStart !== undefined && childEnd !== undefined) {
         var childX = interpolate(0, eventContainerWidth, perspective.start, perspective.end, childStart);
@@ -1124,34 +987,27 @@ function TimelineTrack(_ref) {
           width: childWidth
         };
       }
-
       return {};
     }();
-
     return /*#__PURE__*/cloneElement(child, _objectSpread$5(_objectSpread$5({}, child.props), xProps));
   };
-
   var _useHover = useHover({
-    hoverEffect: function hoverEffect(e) {
-      if (onHover) onHover(e, true);
-      var container = e.target.getStage().container();
-
-      if (onClick) {
-        container.style.cursor = 'pointer';
-      }
-
-      return function () {
-        if (onHover) onHover(e, false);
-
+      hoverEffect: function hoverEffect(e) {
+        if (onHover) onHover(e, true);
+        var container = e.target.getStage().container();
         if (onClick) {
-          container.style.cursor = 'default';
+          container.style.cursor = 'pointer';
         }
-      };
-    }
-  });
-      _useHover.isHovering;
-      var hoverProps = _objectWithoutProperties(_useHover, _excluded2$1);
-
+        return function () {
+          if (onHover) onHover(e, false);
+          if (onClick) {
+            container.style.cursor = 'default';
+          }
+        };
+      }
+    });
+    _useHover.isHovering;
+    var hoverProps = _objectWithoutProperties(_useHover, _excluded2$1);
   return /*#__PURE__*/jsx("div", _objectSpread$5(_objectSpread$5({
     ref: eventsContainerRef,
     className: clsx('VdtTimelineTrack-root', className),
@@ -1189,15 +1045,13 @@ TimelineTrack.propTypes = {
       var _child$props = child.props;
       _child$props = _child$props === void 0 ? {} : _child$props;
       var start = _child$props.start,
-          end = _child$props.end;
-
+        end = _child$props.end;
       if (start === undefined || end === undefined) {
         err = new Error("children of ".concat(componentName, " must be passed a 'start' and 'end' prop. These props are used to position the child within the track."));
       }
     });
     return err;
   },
-
   /**
    * Start and end of timeline scroll, unzoomed
    */
@@ -1205,42 +1059,34 @@ TimelineTrack.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   }),
-
   /**
    * Callback to trigger on timeline track component click.
    */
   onClick: PropTypes.func,
-
   /**
    * Callback to trigger on mouse hover over timeline track component.
    */
   onHover: PropTypes.func,
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
    */
   StageProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Layer component. For more information: https://konvajs.org/api/Konva.Layer.html
    */
   LayerProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
    */
   GroupProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Rect component. For more information: https://konvajs.org/api/Konva.Rect.html
    */
   RectProps: PropTypes.instanceOf(Object),
-
   /**
    * Override styles with className
    */
   className: PropTypes.string,
-
   /**
    * Apply inline CSS styling
    */
@@ -1263,18 +1109,15 @@ var css$3 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-tim
 n(css$3,{});
 
 var _excluded$4 = ["className", "children", "label", "LabelProps", "LabelTextProps"];
-
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function TimelineRow(_ref) {
   var className = _ref.className,
-      children = _ref.children,
-      label = _ref.label,
-      LabelProps = _ref.LabelProps,
-      LabelTextProps = _ref.LabelTextProps,
-      props = _objectWithoutProperties(_ref, _excluded$4);
-
+    children = _ref.children,
+    label = _ref.label,
+    LabelProps = _ref.LabelProps,
+    LabelTextProps = _ref.LabelTextProps,
+    props = _objectWithoutProperties(_ref, _excluded$4);
   return /*#__PURE__*/jsxs("div", _objectSpread$4(_objectSpread$4({
     className: clsx('VdtTimelineRow-root', className, {
       'VdtTimelineRow-hasLabel': !!label
@@ -1296,27 +1139,22 @@ TimelineRow.propTypes = {
    * Children components to render inside row content container.
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-
   /**
    * Custom row label
    */
   label: PropTypes.node,
-
   /**
    * Props for Layer component. For more information: https://konvajs.org/api/Konva.Label.html
    */
   LabelProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Layer component. For more information: https://konvajs.org/api/Konva.Label.html
    */
   LabelTextProps: PropTypes.instanceOf(Object),
-
   /**
    * Override styles with className
    */
   className: PropTypes.string,
-
   /**
    * Apply inline CSS styling
    */
@@ -1335,47 +1173,40 @@ var css$2 = "\n.VdtTimelinePlayheadTrack-root {\n    height: 40px;\n    position
 n(css$2,{});
 
 var _excluded$3 = ["className", "children", "ticks", "onClick", "onHover", "onWheel", "onDrag", "start", "end", "perspective", "timelineRef", "StageProps", "LayerProps", "GroupProps", "RectProps", "TickGroupProps", "TickTextProps", "TickLineProps"],
-    _excluded2 = ["isHovering"];
-
+  _excluded2 = ["isHovering"];
 function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var LABEL_EDGE_MARGIN = 2;
-
 var _getStyleProperties$1 = getStyleProperties('--vdt-timeline-palette-text-primary', '--vdt-timeline-palette-text-secondary'),
-    _getStyleProperties2$1 = _slicedToArray(_getStyleProperties$1, 2),
-    paletteTextPrimary = _getStyleProperties2$1[0],
-    paletteTextSecondary = _getStyleProperties2$1[1];
-
+  _getStyleProperties2$1 = _slicedToArray(_getStyleProperties$1, 2),
+  paletteTextPrimary = _getStyleProperties2$1[0],
+  paletteTextSecondary = _getStyleProperties2$1[1];
 function TimelineTick(_ref) {
   var x = _ref.x,
-      y = _ref.y,
-      minX = _ref.minX,
-      maxX = _ref.maxX,
-      label = _ref.label,
-      TickGroupProps = _ref.TickGroupProps,
-      TickTextProps = _ref.TickTextProps,
-      TickLineProps = _ref.TickLineProps;
+    y = _ref.y,
+    minX = _ref.minX,
+    maxX = _ref.maxX,
+    label = _ref.label,
+    TickGroupProps = _ref.TickGroupProps,
+    TickTextProps = _ref.TickTextProps,
+    TickLineProps = _ref.TickLineProps;
   var hasLabel = label !== undefined;
-
   var _ref2 = hasLabel ? {
-    color: paletteTextPrimary,
-    tickWidth: 2,
-    tickSize: 8
-  } : {
-    color: paletteTextSecondary,
-    tickWidth: 1,
-    tickSize: 4
-  },
-      color = _ref2.color,
-      tickWidth = _ref2.tickWidth,
-      tickSize = _ref2.tickSize;
-
+      color: paletteTextPrimary,
+      tickWidth: 2,
+      tickSize: 8
+    } : {
+      color: paletteTextSecondary,
+      tickWidth: 1,
+      tickSize: 4
+    },
+    color = _ref2.color,
+    tickWidth = _ref2.tickWidth,
+    tickSize = _ref2.tickSize;
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      labelWidth = _useState2[0],
-      setLabelWidth = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    labelWidth = _useState2[0],
+    setLabelWidth = _useState2[1];
   var textRef = useRef();
   useEffect(function () {
     if (textRef.current) {
@@ -1383,11 +1214,9 @@ function TimelineTick(_ref) {
     }
   }, []);
   var textX = clamp(x - labelWidth / 2, minX + LABEL_EDGE_MARGIN, maxX - labelWidth - LABEL_EDGE_MARGIN) || undefined;
-
   if (x < minX || x > maxX) {
     return null;
   }
-
   return /*#__PURE__*/jsxs(Group, _objectSpread$3(_objectSpread$3({}, TickGroupProps), {}, {
     children: [/*#__PURE__*/jsx(Text, _objectSpread$3({
       ref: textRef,
@@ -1405,10 +1234,9 @@ function TimelineTick(_ref) {
     }, TickLineProps))]
   }));
 }
-
 function defaultTicks(_ref3) {
   var width = _ref3.width,
-      perspective = _ref3.perspective;
+    perspective = _ref3.perspective;
   var numTicks = Math.max(Math.floor(width / 90), 2);
   var labeledTicks = uniq(_toConsumableArray(Array(numTicks).keys()).map(function (i) {
     return interpolate(perspective.start, perspective.end, 0, numTicks - 1, i);
@@ -1428,84 +1256,70 @@ function defaultTicks(_ref3) {
   }).flat();
   return sortBy([].concat(_toConsumableArray(labeledTicks), _toConsumableArray(unlabeledTicks)), ['time']);
 }
-
 function TimelinePlayheadTrack(_ref4) {
   var _trackContainerRef$cu, _timelineRef$current;
-
   var className = _ref4.className,
-      children = _ref4.children,
-      propTicks = _ref4.ticks,
-      onClick = _ref4.onClick,
-      onHover = _ref4.onHover,
-      onWheel = _ref4.onWheel,
-      onDrag = _ref4.onDrag,
-      propStart = _ref4.start,
-      propEnd = _ref4.end,
-      propPerspective = _ref4.perspective,
-      propTimelineRef = _ref4.timelineRef,
-      StageProps = _ref4.StageProps,
-      LayerProps = _ref4.LayerProps,
-      GroupProps = _ref4.GroupProps,
-      RectProps = _ref4.RectProps,
-      TickGroupProps = _ref4.TickGroupProps,
-      TickTextProps = _ref4.TickTextProps,
-      TickLineProps = _ref4.TickLineProps,
-      props = _objectWithoutProperties(_ref4, _excluded$3);
-
+    children = _ref4.children,
+    propTicks = _ref4.ticks,
+    onClick = _ref4.onClick,
+    onHover = _ref4.onHover,
+    onWheel = _ref4.onWheel,
+    onDrag = _ref4.onDrag,
+    propStart = _ref4.start,
+    propEnd = _ref4.end,
+    propPerspective = _ref4.perspective,
+    propTimelineRef = _ref4.timelineRef,
+    StageProps = _ref4.StageProps,
+    LayerProps = _ref4.LayerProps,
+    GroupProps = _ref4.GroupProps,
+    RectProps = _ref4.RectProps,
+    TickGroupProps = _ref4.TickGroupProps,
+    TickTextProps = _ref4.TickTextProps,
+    TickLineProps = _ref4.TickLineProps,
+    props = _objectWithoutProperties(_ref4, _excluded$3);
   var _ref5 = useTimeline() || {
-    start: propStart,
-    end: propEnd,
-    perspective: propPerspective,
-    timelineRef: propTimelineRef
-  },
-      start = _ref5.start,
-      end = _ref5.end,
-      perspective = _ref5.perspective,
-      setPerspective = _ref5.setPerspective,
-      zoom = _ref5.zoom,
-      onChangeTime = _ref5.onChangeTime,
-      timelineRef = _ref5.timelineRef;
-
+      start: propStart,
+      end: propEnd,
+      perspective: propPerspective,
+      timelineRef: propTimelineRef
+    },
+    start = _ref5.start,
+    end = _ref5.end,
+    perspective = _ref5.perspective,
+    setPerspective = _ref5.setPerspective,
+    zoom = _ref5.zoom,
+    onChangeTime = _ref5.onChangeTime,
+    timelineRef = _ref5.timelineRef;
   if (start === undefined || end === undefined || perspective === undefined) {
     vLog.error('VdtTimelinePlayheadTrack', "missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly");
   }
-
   if (timelineRef === undefined && (children === null || children === void 0 ? void 0 : children.length) > 0) {
     vLog.warn('VdtTimelinePlayheadTrack', "missing 'timelineRef' prop. This ref is used to set the height of the playhead within the timeline.");
   }
-
   var handleWheel = onWheel || zoom && function (e) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return zoom.apply(void 0, args);
   };
-
   var handleClick = onClick || onChangeTime && function (e) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       args[_key2 - 1] = arguments[_key2];
     }
-
     return onChangeTime.apply(void 0, args);
   };
-
   var handleDrag = onDrag || setPerspective && function (e) {
     for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
       args[_key3 - 1] = arguments[_key3];
     }
-
     return setPerspective.apply(void 0, args);
   };
-
   var trackContainerRef = useRef();
-
   var _useResizeObserver = useResizeObserver(trackContainerRef),
-      _useResizeObserver$wi = _useResizeObserver.width,
-      width = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
-      _useResizeObserver$he = _useResizeObserver.height,
-      height = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;
-
+    _useResizeObserver$wi = _useResizeObserver.width,
+    width = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
+    _useResizeObserver$he = _useResizeObserver.height,
+    height = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;
   var getTicks = propTicks || defaultTicks;
   var timeTicks = typeof getTicks === 'function' ? getTicks({
     start: start,
@@ -1515,43 +1329,36 @@ function TimelinePlayheadTrack(_ref4) {
   }) : getTicks;
   var ticks = timeTicks.map(function (_ref6) {
     var label = _ref6.label,
-        time = _ref6.time;
+      time = _ref6.time;
     return {
       x: interpolate(0, width, perspective.start, perspective.end, time),
       label: label,
       time: time
     };
   });
-
   var _useResizeObserver2 = useResizeObserver(timelineRef),
-      timelineHeight = _useResizeObserver2.height;
-
+    timelineHeight = _useResizeObserver2.height;
   var timelineOffsetTop = ((trackContainerRef === null || trackContainerRef === void 0 ? void 0 : (_trackContainerRef$cu = trackContainerRef.current) === null || _trackContainerRef$cu === void 0 ? void 0 : _trackContainerRef$cu.offsetTop) || 0) - ((timelineRef === null || timelineRef === void 0 ? void 0 : (_timelineRef$current = timelineRef.current) === null || _timelineRef$current === void 0 ? void 0 : _timelineRef$current.offsetTop) || 0);
   var playheadTop = height;
   var playheadHeight = timelineHeight - height - timelineOffsetTop || undefined;
   var trackRectRef = useRef();
-
   var _useHover = useHover({
-    hoverEffect: function hoverEffect(e) {
-      if (onHover) onHover(e, true);
-      var container = e.target.getStage().container();
-
-      if (handleClick) {
-        container.style.cursor = 'pointer';
-      }
-
-      return function () {
-        if (onHover) onHover(e, false);
-
+      hoverEffect: function hoverEffect(e) {
+        if (onHover) onHover(e, true);
+        var container = e.target.getStage().container();
         if (handleClick) {
-          container.style.cursor = 'default';
+          container.style.cursor = 'pointer';
         }
-      };
-    }
-  });
-      _useHover.isHovering;
-      var hoverProps = _objectWithoutProperties(_useHover, _excluded2);
-
+        return function () {
+          if (onHover) onHover(e, false);
+          if (handleClick) {
+            container.style.cursor = 'default';
+          }
+        };
+      }
+    });
+    _useHover.isHovering;
+    var hoverProps = _objectWithoutProperties(_useHover, _excluded2);
   return /*#__PURE__*/jsxs("div", _objectSpread$3(_objectSpread$3({
     ref: trackContainerRef,
     className: clsx('VdtTimelinePlayheadTrack-root', className)
@@ -1572,16 +1379,14 @@ function TimelinePlayheadTrack(_ref4) {
           onClick: function onClick(e) {
             if (trackRectRef.current && handleClick) {
               var _trackRectRef$current = trackRectRef.current.getRelativePointerPosition(),
-                  x = _trackRectRef$current.x;
-
+                x = _trackRectRef$current.x;
               handleClick(e, interpolate(perspective.start, perspective.end, 0, width, x));
             }
           },
           onWheel: function onWheel(e) {
             if (trackRectRef.current && handleWheel) {
               var _trackRectRef$current2 = trackRectRef.current.getRelativePointerPosition(),
-                  x = _trackRectRef$current2.x;
-
+                x = _trackRectRef$current2.x;
               handleWheel(e, e.evt.deltaY < 0 ? 'in' : 'out', interpolate(perspective.start, perspective.end, 0, width, x));
             }
           },
@@ -1620,8 +1425,8 @@ function TimelinePlayheadTrack(_ref4) {
             height: height
           }, RectProps)), ticks.map(function (_ref7) {
             var x = _ref7.x,
-                label = _ref7.label,
-                time = _ref7.time;
+              label = _ref7.label,
+              time = _ref7.time;
             return /*#__PURE__*/jsx(TimelineTick, {
               minX: 0,
               maxX: width,
@@ -1643,12 +1448,10 @@ TimelinePlayheadTrack.propTypes = {
    * Callback to trigger on clicking on playhead track component.
    */
   onClick: PropTypes.func,
-
   /**
    * Callback to trigger on mouse hover over playhead track component.
    */
   onHover: PropTypes.func,
-
   /**
    * Array of (large) timeline tick objects. Set time and label.
    */
@@ -1656,32 +1459,26 @@ TimelinePlayheadTrack.propTypes = {
     time: PropTypes.number,
     label: PropTypes.string
   })), PropTypes.func]),
-
   /**
    * Callback to trigger on using the mouse wheel.
    */
   onWheel: PropTypes.func,
-
   /**
    * Callback to trigger on dragging playhead track component
    */
   onDrag: PropTypes.func,
-
   /**
    * Children components to render before/above the playhead track, according to top and height props passed to playhead track.
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-
   /**
    * Start of playhead track.
    */
   start: PropTypes.number,
-
   /**
    * End of playhead track.
    */
   end: PropTypes.number,
-
   /**
    * Zoom level when looking at track.
    */
@@ -1689,54 +1486,44 @@ TimelinePlayheadTrack.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   }),
-
   /**
    * Ref object to track timeline events.
    */
   timelineRef: PropTypes.shape({
     current: PropTypes.instanceOf(Element)
   }),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
    */
   StageProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Layer component. For more information: https://konvajs.org/api/Konva.Layer.html
    */
   LayerProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
    */
   GroupProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for React component. For more information: https://konvajs.org/api/Konva.Rect.html
    */
   RectProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
    */
   TickGroupProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Group component. For more information: https://konvajs.org/api/Konva.Text.html
    */
   TickTextProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Group component. For more information: https://konvajs.org/api/Konva.Line.html
    */
   TickLineProps: PropTypes.instanceOf(Object),
-
   /**
    * Override styles with className
    */
   className: PropTypes.string,
-
   /**
    * Apply inline CSS styling
    */
@@ -1765,11 +1552,11 @@ TimelinePlayheadTrack.defaultProps = {
 };
 
 var _excluded$2 = ["index"];
-
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+// NOTE: options.height default is hardcoded to what is set for DEFAULT_EVENT_HEIGHT
+
 /**
  * Extends events with height and y props to display them if they are overlapping
  * @param {Object[]} events - events to add overlapping info for
@@ -1777,14 +1564,11 @@ function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) {
  * @param {number} options.height=15 - height of events
  * @returns {Array} events with height and y position added
  */
-
 var getStackOverlappingEventProps = function getStackOverlappingEventProps(events) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
   var _ref = options || {},
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? DEFAULT_EVENT_HEIGHT : _ref$height;
-
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? DEFAULT_EVENT_HEIGHT : _ref$height;
   var sortedEvents = sortBy(events.map(function (e, index) {
     return _objectSpread$2(_objectSpread$2({}, e), {}, {
       index: index
@@ -1792,39 +1576,32 @@ var getStackOverlappingEventProps = function getStackOverlappingEventProps(event
   }), ['start', 'end']);
   var tracks = [0];
   var eventTracks = [];
-
   var _loop = function _loop(i) {
     var event = sortedEvents[i];
-
     var trackIndex = function () {
       for (var j = 0; j < tracks.length; j += 1) {
         var firstVacantFrame = tracks[j];
-
         if (event.start >= firstVacantFrame) {
           return j;
         }
       }
-
       tracks.push(0);
       return tracks.length - 1;
     }();
-
     tracks[trackIndex] = event.end;
     eventTracks.push(_objectSpread$2(_objectSpread$2({}, event), {}, {
       height: height,
       y: trackIndex * height
     }));
   };
-
   for (var i = 0; i < sortedEvents.length; i += 1) {
     _loop(i);
-  } // retain the original order of the events
-
+  }
 
+  // retain the original order of the events
   return sortBy(eventTracks, 'index').map(function (_ref2) {
     _ref2.index;
-        var event = _objectWithoutProperties(_ref2, _excluded$2);
-
+      var event = _objectWithoutProperties(_ref2, _excluded$2);
     return event;
   });
 };
@@ -1833,70 +1610,56 @@ var css$1 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-tim
 n(css$1,{});
 
 var _excluded$1 = ["className", "onScroll", "onClick", "start", "end", "perspective", "style", "StageProps", "LayerProps", "RectProps"];
-
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var _getStyleProperties = getStyleProperties('--vdt-timeline-palette-secondary'),
-    _getStyleProperties2 = _slicedToArray(_getStyleProperties, 1),
-    paletteSecondary = _getStyleProperties2[0];
-
+  _getStyleProperties2 = _slicedToArray(_getStyleProperties, 1),
+  paletteSecondary = _getStyleProperties2[0];
 function TimelineScroll(_ref) {
   var className = _ref.className,
-      onScroll = _ref.onScroll,
-      onClick = _ref.onClick,
-      propStart = _ref.start,
-      propEnd = _ref.end,
-      propPerspective = _ref.perspective,
-      style = _ref.style,
-      StageProps = _ref.StageProps,
-      LayerProps = _ref.LayerProps,
-      RectProps = _ref.RectProps,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-
+    onScroll = _ref.onScroll,
+    onClick = _ref.onClick,
+    propStart = _ref.start,
+    propEnd = _ref.end,
+    propPerspective = _ref.perspective,
+    style = _ref.style,
+    StageProps = _ref.StageProps,
+    LayerProps = _ref.LayerProps,
+    RectProps = _ref.RectProps,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   var _ref2 = useTimeline() || {
-    start: propStart,
-    end: propEnd,
-    perspective: propPerspective
-  },
-      start = _ref2.start,
-      end = _ref2.end,
-      perspective = _ref2.perspective,
-      setPerspective = _ref2.setPerspective;
-
+      start: propStart,
+      end: propEnd,
+      perspective: propPerspective
+    },
+    start = _ref2.start,
+    end = _ref2.end,
+    perspective = _ref2.perspective,
+    setPerspective = _ref2.setPerspective;
   if (start === undefined || end === undefined || perspective === undefined) {
     vLog.error('VdtTimelineScroll', "missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly");
   }
-
   var ref = useRef();
-
   var _useResizeObserver = useResizeObserver(ref),
-      _useResizeObserver$wi = _useResizeObserver.width,
-      scrollTrackWidth = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
-      _useResizeObserver$he = _useResizeObserver.height,
-      height = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;
-
+    _useResizeObserver$wi = _useResizeObserver.width,
+    scrollTrackWidth = _useResizeObserver$wi === void 0 ? 0 : _useResizeObserver$wi,
+    _useResizeObserver$he = _useResizeObserver.height,
+    height = _useResizeObserver$he === void 0 ? 0 : _useResizeObserver$he;
   var scrollLeft = interpolate(0, scrollTrackWidth, start, end, perspective.start);
   var perspectiveDuration = perspective.end - perspective.start;
   var scrollWidth = interpolate(0, scrollTrackWidth, 0, end - start, perspectiveDuration);
-
   var handleScroll = onScroll || setPerspective && function (e) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
       args[_key - 1] = arguments[_key];
     }
-
     return setPerspective.apply(void 0, args);
   };
-
   var handleClick = onClick || setPerspective && function (e) {
     for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       args[_key2 - 1] = arguments[_key2];
     }
-
     return setPerspective.apply(void 0, args);
   };
-
   var isZoomed = start !== perspective.start || end !== perspective.end;
   return /*#__PURE__*/jsx("div", _objectSpread$1(_objectSpread$1({
     className: clsx('VdtTimelineScroll-root', className),
@@ -1911,18 +1674,14 @@ function TimelineScroll(_ref) {
       width: scrollTrackWidth,
       onClick: function onClick(e) {
         if (!handleClick) return;
-
         var _e$currentTarget$getR = e.currentTarget.getRelativePointerPosition(),
-            x = _e$currentTarget$getR.x;
-
+          x = _e$currentTarget$getR.x;
         var newStart;
-
         if (x > scrollLeft + scrollWidth) {
           newStart = Math.floor(interpolate(start, end, 0, scrollTrackWidth, x - scrollWidth));
         } else if (x < scrollLeft) {
           newStart = Math.floor(interpolate(start, end, 0, scrollTrackWidth, x));
         }
-
         if (newStart !== undefined && newStart !== perspective.start) {
           handleClick(e, newStart, newStart + perspectiveDuration);
         }
@@ -1944,10 +1703,8 @@ function TimelineScroll(_ref) {
           },
           onDragMove: function onDragMove(e) {
             if (!handleScroll) return;
-
             var _e$target$position = e.target.position(),
-                x = _e$target$position.x;
-
+              x = _e$target$position.x;
             e.target.x(scrollLeft);
             var newStart = Math.floor(interpolate(start, end, 0, scrollTrackWidth, x));
             handleScroll(e, newStart, newStart + perspectiveDuration);
@@ -1962,22 +1719,18 @@ TimelineScroll.propTypes = {
    * Callback to trigger on timeline component scroll.
    */
   onScroll: PropTypes.func,
-
   /**
    * Callback to trigger on timeline component click.
    */
   onClick: PropTypes.func,
-
   /**
    * Start time of timeline scroll.
    */
   start: PropTypes.number,
-
   /**
    * End time of timeline scroll
    */
   end: PropTypes.number,
-
   /**
    * Zoom level of timeline scroll.
    */
@@ -1985,27 +1738,22 @@ TimelineScroll.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   }),
-
   /**
    * Apply inline CSS styling
    */
   style: PropTypes.instanceOf(Object),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
    */
   StageProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Layer.html
    */
   LayerProps: PropTypes.instanceOf(Object),
-
   /**
    * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
    */
   RectProps: PropTypes.instanceOf(Object),
-
   /**
    * Override styles with className
    */
@@ -2028,31 +1776,25 @@ var css = "\n\n.VdtTimelineScrollContainer-timelineRow > :not(.VdtTimelineRow-la
 n(css,{});
 
 var _excluded = ["className", "children", "getScrollDistance", "RowProps", "ScrollProps"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function defaultGetScrollDistance(e, _ref) {
   var start = _ref.start,
-      end = _ref.end;
+    end = _ref.end;
   return Math.floor(0.02 * (start - end));
 }
-
 function TimelineScrollContainer(_ref2) {
   var className = _ref2.className,
-      children = _ref2.children,
-      getScrollDistance = _ref2.getScrollDistance,
-      RowProps = _ref2.RowProps,
-      ScrollProps = _ref2.ScrollProps,
-      props = _objectWithoutProperties(_ref2, _excluded);
-
+    children = _ref2.children,
+    getScrollDistance = _ref2.getScrollDistance,
+    RowProps = _ref2.RowProps,
+    ScrollProps = _ref2.ScrollProps,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var _useTimeline = useTimeline(),
-      start = _useTimeline.start,
-      end = _useTimeline.end,
-      perspective = _useTimeline.perspective,
-      setPerspective = _useTimeline.setPerspective;
-
+    start = _useTimeline.start,
+    end = _useTimeline.end,
+    perspective = _useTimeline.perspective,
+    setPerspective = _useTimeline.setPerspective;
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     className: clsx('VdtTimelineScrollContainer-root', className),
     onWheel: function onWheel(e) {
@@ -2065,7 +1807,6 @@ function TimelineScrollContainer(_ref2) {
         var newPerspectiveStart = perspective.start + (e.deltaY > 0 ? -delta : delta);
         var perspectiveDuration = perspective.end - perspective.start;
         var newPerspectiveEnd = newPerspectiveStart + perspectiveDuration;
-
         if (newPerspectiveEnd > end) {
           setPerspective(end - perspectiveDuration, end);
         } else if (newPerspectiveStart < start) {
@@ -2088,22 +1829,18 @@ TimelineScrollContainer.propTypes = {
    * Override styles with className
    */
   className: PropTypes.string,
-
   /**
    * Children components to render
    */
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-
   /**
    * Get distance of scrolling
    */
   getScrollDistance: PropTypes.func,
-
   /**
    * Additional props for row component
    */
   RowProps: PropTypes.instanceOf(Object),
-
   /**
    * Additional props for scroll component
    */