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

package/dist/index.es.js

@@ -1,1857 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useRef, createContext, useMemo, useContext, useEffect, memo, Children, cloneElement } from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import clamp from 'lodash.clamp';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Stage, Layer, Rect, Group, Text, Line } from 'react-konva';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import sortBy from 'lodash.sortby';
-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);
-  });
-}
-
-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;
-  var _useState = useState(uncontrolledDefaultState),
-    _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) {
-        vLog.warn(componentName, "".concat(stateName, " changed from uncontrolled to controlled"));
-      } else {
-        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];
-}
-
-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;
-  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];
-  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,
-    zoom: zoom
-  };
-}
-
-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;
-  var timelinePerspective = useTimelinePerspective({
-    start: start,
-    end: end,
-    perspective: perspective,
-    onChangePerspective: onChangePerspective,
-    defaultPerspective: defaultPerspective
-  });
-  var contextValue = useMemo(function () {
-    return _objectSpread$a(_objectSpread$a({}, timelinePerspective), {}, {
-      start: start,
-      end: end,
-      time: time,
-      onChangeTime: onChangeTime,
-      timelineRef: timelineRef
-    });
-  }, [end, onChangeTime, start, time, timelinePerspective, timelineRef]);
-  return /*#__PURE__*/jsx(TimelineContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-function useTimeline() {
-  return useContext(TimelineContext);
-}
-TimelineContext.propTypes = {
-  start: PropTypes.number.isRequired,
-  end: PropTypes.number.isRequired,
-  time: PropTypes.number,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
-  onChangeTime: PropTypes.func,
-  timelineRef: PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  }),
-  perspective: PropTypes.shape({
-    start: PropTypes.number,
-    end: PropTypes.number
-  }),
-  onChangePerspective: PropTypes.func,
-  defaultPerspective: PropTypes.shape({
-    start: PropTypes.number,
-    end: PropTypes.number
-  }),
-  zoomMultiplier: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
-};
-TimelineContext.defaultProps = {
-  children: undefined,
-  time: undefined,
-  onChangeTime: undefined,
-  timelineRef: undefined,
-  perspective: undefined,
-  onChangePerspective: undefined,
-  defaultPerspective: undefined,
-  zoomMultiplier: undefined
-};
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css$7 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimeline-root {\n    display: flex;\n    flex-direction: column;\n    padding: 0 8px 8px 8px;\n    background-color: var(--vdt-timeline-palette-background-primary);\n}";
-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);
-  var timelineRef = useRef();
-  return /*#__PURE__*/jsx(TimelineProvider, {
-    start: start,
-    end: end,
-    time: time,
-    onChangeTime: onChangeTime,
-    timelineRef: timelineRef,
-    perspective: perspective,
-    onChangePerspective: onChangePerspective,
-    defaultPerspective: defaultPerspective,
-    zoomMultiplier: zoomMultiplier,
-    children: /*#__PURE__*/jsx("div", _objectSpread$9(_objectSpread$9({
-      ref: timelineRef,
-      className: clsx('VdtTimeline-root', className)
-    }, props), {}, {
-      children: children
-    }))
-  });
-}
-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).
-   */
-  perspective: PropTypes.shape({
-    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.
-   */
-  defaultPerspective: PropTypes.shape({
-    start: PropTypes.number,
-    end: PropTypes.number
-  }),
-  /**
-   * Multiply by value when zooming in.
-   */
-  zoomMultiplier: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-  /**
-   * Override styles with className.
-   */
-  className: PropTypes.string
-};
-Timeline.defaultProps = {
-  time: undefined,
-  children: undefined,
-  onChangeTime: undefined,
-  perspective: undefined,
-  onChangePerspective: undefined,
-  defaultPerspective: undefined,
-  zoomMultiplier: undefined,
-  className: undefined
-};
-
-var DEFAULT_EVENT_HEIGHT = 15;
-var DEFAULT_PLAYHEAD_ZINDEX = 100;
-
-var css$6 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelinePlayhead-root {\n    background-color: var(--vdt-timeline-palette-secondary);\n    position: absolute;\n}\n\n\n.VdtTimelinePlayhead-root:hover {\n    cursor: ew-resize;\n}";
-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];
-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);
-  var _ref2 = useTimeline() || {
-      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];
-  var _useState3 = useState(time),
-    _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),
-    style: _objectSpread$8({
-      width: lineWidth,
-      left: markerLeft,
-      display: hide && 'none',
-      zIndex: DEFAULT_PLAYHEAD_ZINDEX
-    }, style),
-    draggable: true,
-    onDragStart: function onDragStart(e) {
-      setIsDragging(true);
-      e.dataTransfer.setDragImage(EmptyImage, 0, 0);
-      return false;
-    },
-    onDragEnd: function onDragEnd() {
-      setIsDragging(false);
-      if (handleDrag !== null && handleDrag !== void 0 && handleDrag.flush) {
-        handleDrag.flush();
-      }
-    },
-    onDrag: function onDrag(e) {
-      if (handleDrag) {
-        var _ref$current$parentEl = ref.current.parentElement.getBoundingClientRect(),
-          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);
-          setLocalTime(clampedNewTime);
-        }
-      }
-    }
-  }, props), {}, {
-    children: /*#__PURE__*/jsx("div", _objectSpread$8({
-      className: "VdtTimelinePlayhead-head",
-      style: {
-        position: 'absolute',
-        height: headHeight,
-        width: headWidth,
-        backgroundColor: paletteSecondary$1,
-        left: -(headWidth / 2 - lineWidth / 2),
-        top: -headHeight + 1,
-        clipPath: 'polygon(0% 0%, 0% 70%, 50% 100%, 100% 70%, 100% 0%)'
-      }
-    }, HeadProps))
-  }));
-}
-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.
-   */
-  perspective: PropTypes.shape({
-    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
-   */
-  className: PropTypes.string
-};
-TimelinePlayhead.defaultProps = {
-  style: {},
-  headHeight: 16,
-  headWidth: 12,
-  lineWidth: 2,
-  perspective: undefined,
-  time: 0,
-  onDrag: undefined,
-  HeadProps: {},
-  className: undefined
-};
-
-function useResizeObserver(ref) {
-  var _useState = useState({}),
-    _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);
-    }
-  }));
-  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);
-      }
-    };
-  }, [ref]);
-  return rect;
-}
-
-var css$5 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}";
-n(css$5,{});
-
-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"];
-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];
-var TimelineWaveFormRects = /*#__PURE__*/memo(function (_ref) {
-  var amplitudeSegments = _ref.amplitudeSegments,
-    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;
-    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
-    , _objectSpread$7({
-      x: rectX,
-      y: centeredY,
-      height: rectHeight,
-      width: rectWidth,
-      fill: palettePrimary$1
-    }, 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);
-  var _ref4 = useTimeline() || {
-      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;
-  var amplitudeSegments = useMemo(function () {
-    return waveform.map(function (amplitude, i) {
-      return {
-        amplitude: amplitude,
-        start: interpolate(start, end, 0, waveform.length - 1, i),
-        end: interpolate(start, end, 0, waveform.length - 1, i + 1)
-      };
-    });
-  }, [waveform, start, end]);
-  var pxPerTimeUnit = width / (end - start);
-  var scaleX = (end - start) / (perspective.end - perspective.start);
-  var offsetX = interpolate(0, scaleX * width, start, end, perspective.start);
-  return /*#__PURE__*/jsx("div", _objectSpread$7(_objectSpread$7({
-    ref: ref,
-    className: clsx('VdtTimelineWaveform-root', className)
-  }, props), {}, {
-    children: /*#__PURE__*/jsx(Stage, _objectSpread$7(_objectSpread$7({
-      height: height,
-      width: width,
-      x: -offsetX,
-      scaleX: scaleX
-    }, StageProps), {}, {
-      children: /*#__PURE__*/jsxs(Layer, _objectSpread$7(_objectSpread$7({
-        listening: false
-      }, LayerProps), {}, {
-        children: [/*#__PURE__*/jsx(Rect, _objectSpread$7({
-          x: 0,
-          y: 0,
-          width: width,
-          height: height
-        }, RectProps)), /*#__PURE__*/jsx(TimelineWaveFormRects, _objectSpread$7({
-          amplitudeSegments: amplitudeSegments,
-          pxPerTimeUnit: pxPerTimeUnit,
-          start: start,
-          height: height
-        }, WaveRectProps))]
-      }))
-    }))
-  }));
-}
-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.
-   */
-  perspective: PropTypes.shape({
-    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
-   */
-  className: PropTypes.string
-};
-TimelineWaveform.defaultProps = {
-  waveform: [],
-  start: undefined,
-  end: undefined,
-  perspective: undefined,
-  StageProps: {},
-  LayerProps: {},
-  RectProps: {},
-  WaveRectProps: {},
-  className: undefined
-};
-
-function useHover() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _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];
-  var cleanupHover = useRef(null);
-  return {
-    isHovering: isHovering,
-    onMouseEnter: function onMouseEnter(e) {
-      setIsHovering(true);
-      cleanupHover.current = hoverEffect(e);
-    },
-    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"];
-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];
-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);
-  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';
-        }
-        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];
-  var hasOnClick = !!onClick;
-  useEffect(function () {
-    if (eventRef.current) {
-      var cursor = function () {
-        if (isMoving) return 'grabbing';
-        if (isHovering && hasOnClick) return 'pointer';
-        return 'default';
-      }();
-      eventRef.current.getStage().container().style.cursor = cursor;
-    }
-  }, [isMoving, isHovering, hasOnClick]);
-  var paddedY = y + padding;
-  var paddedHeight = height - 2 * padding;
-  var posProps = {
-    y: paddedY,
-    height: paddedHeight,
-    x: x,
-    width: width
-  };
-  var defaultHoverProps = isHovering || isHoveringResize ? {
-    fill: palettePrimaryDark
-  } : {};
-  var resizerProps = function resizerProps(which) {
-    var resizerX = which === 'start' ? x : x + width - EVENT_RESIZER_THUMB_WIDTH;
-    return {
-      onDragStart: function onDragStart() {
-        if (!onResizeStart) return;
-        onResizeStart(which);
-      },
-      draggable: !!onResize,
-      dragBoundFunc: function dragBoundFunc(pos) {
-        return {
-          x: pos.x,
-          y: paddedY
-        };
-      },
-      onDragEnd: function onDragEnd() {
-        if (!onResizeEnd) return;
-        onResizeEnd(which);
-      },
-      width: EVENT_RESIZER_THUMB_WIDTH,
-      x: resizerX,
-      onDragMove: function onDragMove(e) {
-        if (!onResize) return;
-        var _e$target$position = e.target.position(),
-          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,
-      draggable: !!onMove,
-      dragBoundFunc: function dragBoundFunc(pos) {
-        return {
-          x: pos.x,
-          y: paddedY
-        };
-      },
-      onDragStart: function onDragStart(e) {
-        if (!onMove) return;
-        setIsMoving(true);
-        if (onMoveStart) {
-          onMoveStart(e);
-        }
-      },
-      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;
-        e.target.x(x);
-        var newStart = Math.floor(interpolate(start, end, x, x + width, newX));
-        onMove(e, newStart);
-      },
-      fill: palettePrimary,
-      onClick: onClick
-    }, posProps), defaultHoverProps), hoverProps), props)), /*#__PURE__*/jsx(Rect, _objectSpread$6(_objectSpread$6(_objectSpread$6({}, posProps), resizeHoverProps), resizerProps('start'))), /*#__PURE__*/jsx(Rect, _objectSpread$6(_objectSpread$6(_objectSpread$6({}, posProps), resizeHoverProps), resizerProps('end')))]
-  });
-}
-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
-   */
-  className: PropTypes.string
-};
-TimelineEvent.defaultProps = {
-  onClick: undefined,
-  onHover: undefined,
-  onMove: undefined,
-  onMoveStart: undefined,
-  onMoveEnd: undefined,
-  onResize: undefined,
-  onResizeStart: undefined,
-  onResizeEnd: undefined,
-  x: undefined,
-  width: undefined,
-  y: 0,
-  height: DEFAULT_EVENT_HEIGHT,
-  padding: 1,
-  className: undefined
-};
-
-var _excluded$5 = ["className", "children", "perspective", "onClick", "style", "onHover", "StageProps", "LayerProps", "GroupProps", "RectProps"],
-  _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);
-  var _ref2 = useTimeline() || {
-      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;
-    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
-  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;
-    return y + height;
-  }))) || DEFAULT_EVENT_HEIGHT;
-  var cloneChild = function cloneChild(child) {
-    var _ref5 = child.props || {},
-      childStart = _ref5.start,
-      childEnd = _ref5.end;
-    var xProps = function () {
-      if (childStart !== undefined && childEnd !== undefined) {
-        var childX = interpolate(0, eventContainerWidth, perspective.start, perspective.end, childStart);
-        var childWidth = interpolate(0, eventContainerWidth, perspective.start, perspective.end, childEnd) - childX;
-        return {
-          x: childX,
-          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);
-          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),
-    style: _objectSpread$5({
-      height: eventsContainerHeight
-    }, style)
-  }, props), {}, {
-    children: /*#__PURE__*/jsx(Stage, _objectSpread$5(_objectSpread$5({
-      height: eventContainerHeight,
-      width: eventContainerWidth
-    }, StageProps), {}, {
-      children: /*#__PURE__*/jsx(Layer, _objectSpread$5(_objectSpread$5({}, LayerProps), {}, {
-        children: /*#__PURE__*/jsxs(Group, _objectSpread$5(_objectSpread$5({}, GroupProps), {}, {
-          children: [/*#__PURE__*/jsx(Rect, _objectSpread$5(_objectSpread$5({
-            x: 0,
-            y: 0,
-            width: eventContainerWidth,
-            height: eventContainerHeight,
-            onClick: onClick
-          }, hoverProps), RectProps)), Children.map(visibleChildren, cloneChild)]
-        }))
-      }))
-    }))
-  }));
-}
-TimelineTrack.propTypes = {
-  /**
-   * children are positioned within the track according to 'start' and 'end' props passed to them
-   */
-  // children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  children: function children(props, propName, componentName) {
-    var prop = props[propName];
-    var err;
-    Children.forEach(prop, function (child) {
-      var _child$props = child.props;
-      _child$props = _child$props === void 0 ? {} : _child$props;
-      var start = _child$props.start,
-        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
-   */
-  perspective: PropTypes.shape({
-    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
-   */
-  style: PropTypes.instanceOf(Object)
-};
-TimelineTrack.defaultProps = {
-  style: {},
-  children: undefined,
-  perspective: undefined,
-  onClick: undefined,
-  onHover: undefined,
-  StageProps: {},
-  LayerProps: {},
-  GroupProps: {},
-  RectProps: {},
-  className: undefined
-};
-
-var css$3 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelineRow-root {\n    display: flex;\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel:hover {\n    background-color: var(--vdt-timeline-palette-background-hover);\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel {\n    border-width: 2px 0 0 0;\n    border-style: solid;\n    border-color: var(--vdt-timeline-palette-background-secondary);\n}\n\n.VdtTimelineRow-root.VdtTimelineRow-hasLabel > :first-child {\n    width: 98px;\n    border-width: 0 2px 0 0;\n    border-style: solid;\n    border-color: var(--vdt-timeline-palette-background-secondary);\n}\n\n.VdtTimelineRow-root > :not(.VdtTimelineRow-label) {\n    flex-grow: 1;\n    margin: 4px 0;\n}\n\n.VdtTimelineRow-root:not(.VdtTimelineRow-hasLabel) > :first-child {\n    margin-left: 100px;\n}\n\n.VdtTimelineRow-label {\n    display: flex;\n    align-items: center;\n    flex-basis: 98px;\n}\n\n.VdtTimelineRow-labelText {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\n    padding: 0 8px;\n}";
-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);
-  return /*#__PURE__*/jsxs("div", _objectSpread$4(_objectSpread$4({
-    className: clsx('VdtTimelineRow-root', className, {
-      'VdtTimelineRow-hasLabel': !!label
-    })
-  }, props), {}, {
-    children: [label && /*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4({
-      className: "VdtTimelineRow-label"
-    }, LabelProps), {}, {
-      children: /*#__PURE__*/jsx("span", _objectSpread$4(_objectSpread$4({
-        className: "VdtTimelineRow-labelText"
-      }, LabelTextProps), {}, {
-        children: label
-      }))
-    })), children]
-  }));
-}
-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
-   */
-  style: PropTypes.instanceOf(Object)
-};
-TimelineRow.defaultProps = {
-  children: undefined,
-  label: undefined,
-  LabelProps: {},
-  LabelTextProps: {},
-  className: undefined,
-  style: {}
-};
-
-var css$2 = "\n.VdtTimelinePlayheadTrack-root {\n    height: 40px;\n    position: relative;\n}";
-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"];
-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];
-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;
-  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;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    labelWidth = _useState2[0],
-    setLabelWidth = _useState2[1];
-  var textRef = useRef();
-  useEffect(function () {
-    if (textRef.current) {
-      setLabelWidth(textRef.current.getTextWidth());
-    }
-  }, []);
-  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,
-      x: textX,
-      y: y - tickSize - 20,
-      fontFamily: "Helvetica",
-      text: label,
-      fontStyle: "bold",
-      fontSize: 10,
-      fill: color
-    }, TickTextProps)), /*#__PURE__*/jsx(Line, _objectSpread$3({
-      points: [x, y - tickSize, x, y],
-      stroke: color,
-      strokeWidth: tickWidth
-    }, TickLineProps))]
-  }));
-}
-function defaultTicks(_ref3) {
-  var width = _ref3.width,
-    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);
-  })).map(function (time) {
-    return {
-      time: time,
-      label: String(Math.round(time))
-    };
-  });
-  var unlabeledTicks = mapPairs(labeledTicks, function (curr, next) {
-    var tickDelta = (next.time - curr.time) / 10;
-    return _toConsumableArray(Array(9).keys()).map(function (i) {
-      return {
-        time: curr.time + (i + 1) * tickDelta
-      };
-    });
-  }).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);
-  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;
-  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;
-  var getTicks = propTicks || defaultTicks;
-  var timeTicks = typeof getTicks === 'function' ? getTicks({
-    start: start,
-    end: end,
-    width: width,
-    perspective: perspective
-  }) : getTicks;
-  var ticks = timeTicks.map(function (_ref6) {
-    var label = _ref6.label,
-      time = _ref6.time;
-    return {
-      x: interpolate(0, width, perspective.start, perspective.end, time),
-      label: label,
-      time: time
-    };
-  });
-  var _useResizeObserver2 = useResizeObserver(timelineRef),
-    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);
-          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)
-  }, props), {}, {
-    children: [Children.map(children, function (child) {
-      return /*#__PURE__*/cloneElement(child, {
-        style: {
-          top: playheadTop,
-          height: playheadHeight
-        }
-      });
-    }), /*#__PURE__*/jsx(Stage, _objectSpread$3(_objectSpread$3({
-      height: height,
-      width: width
-    }, StageProps), {}, {
-      children: /*#__PURE__*/jsx(Layer, _objectSpread$3(_objectSpread$3({}, LayerProps), {}, {
-        children: /*#__PURE__*/jsxs(Group, _objectSpread$3(_objectSpread$3(_objectSpread$3({
-          onClick: function onClick(e) {
-            if (trackRectRef.current && handleClick) {
-              var _trackRectRef$current = trackRectRef.current.getRelativePointerPosition(),
-                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;
-              handleWheel(e, e.evt.deltaY < 0 ? 'in' : 'out', interpolate(perspective.start, perspective.end, 0, width, x));
-            }
-          },
-          draggable: true,
-          dragBoundFunc: function dragBoundFunc() {
-            return {
-              x: 0,
-              y: 0
-            };
-          },
-          onDragStart: function onDragStart(e) {
-            var container = e.target.getStage().container();
-            container.style.cursor = 'grabbing';
-          },
-          onDragEnd: function onDragEnd(e) {
-            var container = e.target.getStage().container();
-            container.style.cursor = 'pointer';
-          },
-          onDragMove: function onDragMove(e) {
-            if (handleDrag) {
-              var movementX = e.evt.movementX;
-              if (movementX === 0) return;
-              var newStart = interpolate(perspective.start, perspective.end, 0, width, -movementX);
-              var perspectiveDuration = perspective.end - perspective.start;
-              var clampedNewStart = clamp(newStart, start, end - perspectiveDuration);
-              var newEnd = clampedNewStart + perspectiveDuration;
-              handleDrag(e, clampedNewStart, newEnd);
-            }
-          }
-        }, hoverProps), GroupProps), {}, {
-          children: [/*#__PURE__*/jsx(Rect, _objectSpread$3({
-            ref: trackRectRef,
-            x: 0,
-            y: 0,
-            width: width,
-            height: height
-          }, RectProps)), ticks.map(function (_ref7) {
-            var x = _ref7.x,
-              label = _ref7.label,
-              time = _ref7.time;
-            return /*#__PURE__*/jsx(TimelineTick, {
-              minX: 0,
-              maxX: width,
-              x: x,
-              label: label,
-              y: height,
-              TickGroupProps: TickGroupProps,
-              TickLineProps: TickLineProps,
-              TickTextProps: TickTextProps
-            }, time);
-          })]
-        }))
-      }))
-    }))]
-  }));
-}
-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.
-   */
-  ticks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
-    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.
-   */
-  perspective: PropTypes.shape({
-    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
-   */
-  style: PropTypes.instanceOf(Object)
-};
-TimelinePlayheadTrack.defaultProps = {
-  onClick: undefined,
-  onHover: undefined,
-  ticks: defaultTicks,
-  children: undefined,
-  start: undefined,
-  end: undefined,
-  perspective: undefined,
-  onWheel: undefined,
-  onDrag: undefined,
-  timelineRef: undefined,
-  StageProps: {},
-  LayerProps: {},
-  GroupProps: {},
-  RectProps: {},
-  TickGroupProps: {},
-  TickTextProps: {},
-  TickLineProps: {},
-  className: undefined,
-  style: {}
-};
-
-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
- * @param {Object} options - options for how to extend events
- * @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;
-  var sortedEvents = sortBy(events.map(function (e, index) {
-    return _objectSpread$2(_objectSpread$2({}, e), {}, {
-      index: index
-    });
-  }), ['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
-  return sortBy(eventTracks, 'index').map(function (_ref2) {
-    _ref2.index;
-      var event = _objectWithoutProperties(_ref2, _excluded$2);
-    return event;
-  });
-};
-
-var css$1 = ":root {\n    --vdt-timeline-palette-primary:#49a6dd;\n    --vdt-timeline-palette-primary-dark: #3c8bb8;\n    --vdt-timeline-palette-secondary:#f50057;\n    --vdt-timeline-palette-background-primary:#20232a;\n    --vdt-timeline-palette-background-secondary:#282c34;\n    --vdt-timeline-palette-background-hover: rgba(255, 255, 255, 0.08);\n    --vdt-timeline-palette-text-primary:#fff;\n    --vdt-timeline-palette-text-secondary:rgba(255, 255, 255, 0.7);\n}\n\n.VdtTimelineScroll-root {\n    height: 4px;\n    background-color: var(--vdt-timeline-palette-background-secondary);\n}";
-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];
-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);
-  var _ref2 = useTimeline() || {
-      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;
-  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),
-    style: _objectSpread$1({
-      display: !isZoomed && 'none',
-      zIndex: DEFAULT_PLAYHEAD_ZINDEX + 1
-    }, style),
-    ref: ref
-  }, props), {}, {
-    children: /*#__PURE__*/jsx(Stage, _objectSpread$1(_objectSpread$1({
-      height: height,
-      width: scrollTrackWidth,
-      onClick: function onClick(e) {
-        if (!handleClick) return;
-        var _e$currentTarget$getR = e.currentTarget.getRelativePointerPosition(),
-          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);
-        }
-      }
-    }, StageProps), {}, {
-      children: /*#__PURE__*/jsx(Layer, _objectSpread$1(_objectSpread$1({}, LayerProps), {}, {
-        children: /*#__PURE__*/jsx(Rect, _objectSpread$1({
-          x: scrollLeft,
-          y: 0,
-          width: scrollWidth,
-          height: height,
-          fill: paletteSecondary,
-          draggable: true,
-          dragBoundFunc: function dragBoundFunc(pos) {
-            return {
-              x: clamp(pos.x, 0, scrollTrackWidth - scrollWidth),
-              y: 0
-            };
-          },
-          onDragMove: function onDragMove(e) {
-            if (!handleScroll) return;
-            var _e$target$position = e.target.position(),
-              x = _e$target$position.x;
-            e.target.x(scrollLeft);
-            var newStart = Math.floor(interpolate(start, end, 0, scrollTrackWidth, x));
-            handleScroll(e, newStart, newStart + perspectiveDuration);
-          }
-        }, RectProps))
-      }))
-    }))
-  }));
-}
-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.
-   */
-  perspective: PropTypes.shape({
-    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
-   */
-  className: PropTypes.string
-};
-TimelineScroll.defaultProps = {
-  onScroll: undefined,
-  onClick: undefined,
-  start: undefined,
-  end: undefined,
-  perspective: undefined,
-  style: {},
-  StageProps: {},
-  LayerProps: {},
-  RectProps: {},
-  className: undefined
-};
-
-var css = "\n\n.VdtTimelineScrollContainer-timelineRow > :not(.VdtTimelineRow-label) {\n    /* margin messes with the playhead line alignment */\n    margin: 0;\n}";
-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;
-  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);
-  var _useTimeline = useTimeline(),
-    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) {
-      if (e.shiftKey) {
-        var delta = getScrollDistance(e, {
-          start: start,
-          end: end,
-          perspective: perspective
-        });
-        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) {
-          setPerspective(start, perspectiveDuration);
-        } else {
-          setPerspective(newPerspectiveStart, newPerspectiveEnd);
-        }
-      }
-    }
-  }, props), {}, {
-    children: [children, /*#__PURE__*/jsx(TimelineRow, _objectSpread(_objectSpread({
-      className: clsx('VdtTimelineScrollContainer-timelineRow')
-    }, RowProps), {}, {
-      children: /*#__PURE__*/jsx(TimelineScroll, _objectSpread({}, ScrollProps))
-    }))]
-  }));
-}
-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
-   */
-  ScrollProps: PropTypes.instanceOf(Object)
-};
-TimelineScrollContainer.defaultProps = {
-  children: undefined,
-  getScrollDistance: defaultGetScrollDistance,
-  RowProps: {},
-  ScrollProps: {},
-  className: undefined
-};
-
-export { Timeline, TimelineContext, TimelineEvent, TimelinePlayhead, TimelinePlayheadTrack, TimelineProvider, TimelineRow, TimelineScroll, TimelineScrollContainer, TimelineTrack, TimelineWaveform, getStackOverlappingEventProps, useTimeline };