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

package/dist/index.js

@@ -1,10 +1,1846 @@
-export { TimelineContext, TimelineProvider, useTimeline } from './TimelineContext.js';
-export { default as Timeline } from './Timeline/Timeline.js';
-export { default as TimelinePlayhead } from './TimelinePlayhead/TimelinePlayhead.js';
-export { default as TimelineWaveform } from './TimelineWaveform/TimelineWaveform.js';
-export { default as TimelineEvent } from './TimelineEvent/TimelineEvent.js';
-export { default as TimelineTrack } from './TimelineTrack/TimelineTrack.js';
-export { default as TimelineRow } from './TimelineRow/TimelineRow.js';
-export { default as TimelinePlayheadTrack } from './TimelinePlayheadTrack/TimelinePlayheadTrack.js';
-export { default as TimelineScroll } from './TimelineScroll/TimelineScroll.js';
-export { default as TimelineScrollContainer } from './TimelineScrollContainer/TimelineScrollContainer.js';
+import { jsx as D, jsxs as te, Fragment as Fe } from "react/jsx-runtime";
+import { useState as re, useRef as U, createContext as Je, useMemo as We, useContext as Ke, useEffect as le, memo as Qe, Children as oe, cloneElement as Le } from "react";
+import ne from "lodash.clamp";
+import F from "clsx";
+import _e from "react-is";
+import { Rect as ee, Stage as ue, Layer as de, Group as Pe, Text as et, Line as tt } from "react-konva";
+import rt from "lodash.sortby";
+import nt from "lodash.uniq";
+const M = (r, i, s, n, l) => r + (l - s) * (i - r) / (n - s), we = (r, i, s) => {
+  process.env.NODE_ENV === "development" && console[s](`${r ? `${r}: ` : ""}${i}`);
+}, J = {
+  error: (...r) => we(...r, "error"),
+  warn: (...r) => we(...r, "warn")
+};
+function it(r, i) {
+  const s = [];
+  for (let n = 0; n < r.length - 1; n += 1)
+    s.push(i(r[n], r[n + 1]));
+  return s;
+}
+function ae(...r) {
+  const i = getComputedStyle(document.body);
+  return r.map((s) => i.getPropertyValue(s));
+}
+function ot({
+  uncontrolledDefaultState: r = void 0,
+  uncontrolledOnChange: i = void 0,
+  controlledState: s = void 0,
+  controlledOnChange: n = void 0,
+  componentName: l,
+  stateName: o
+}) {
+  const [f, d] = re(r), y = U(null), h = (a) => {
+    y.current !== null && y.current !== a && (a ? J.warn(l, `${o} changed from uncontrolled to controlled`) : J.warn(l, `${o} changed from controlled to uncontrolled`)), y.current = a;
+  };
+  return s !== void 0 ? (h(!0), [s, n]) : (h(!1), [
+    f,
+    n ? (...a) => {
+      i ? i(d, ...a) : d(...a), n(...a);
+    } : i || d
+  ]);
+}
+function st(r, i, s) {
+  const n = s.end - s.start < 100 && r === "in" ? 1 : 2;
+  return r === "in" ? 1 / n : n;
+}
+function at({
+  start: r,
+  end: i,
+  defaultPerspective: s,
+  perspective: n,
+  onChangePerspective: l,
+  zoomMultiplier: o = st
+}) {
+  const [f, d] = ot({
+    uncontrolledDefaultState: s || {
+      start: r,
+      end: i
+    },
+    controlledState: n,
+    controlledOnChange: l,
+    componentName: "VdtTimeline",
+    stateName: "perspective"
+  }), y = typeof o == "function" ? o : (c) => c === "in" ? 1 / o : o, h = (c, p) => {
+    d({
+      start: ne(Number(c), r, i),
+      end: ne(Number(p), r, i)
+    });
+  };
+  return {
+    perspective: f,
+    setPerspective: h,
+    zoom: (c, p) => {
+      const b = f.end - f.start, E = (p - f.start) / b, g = y(c, p, f);
+      if (g === 1)
+        return;
+      const w = (f.end - f.start) * g, W = p - E * w, V = p + (1 - E) * w, N = (() => r > W ? r - W : V > i ? i - V : 0)();
+      h(
+        W + N,
+        V + N
+      );
+    }
+  };
+}
+const Ve = Je();
+function ct({
+  start: r,
+  end: i,
+  time: s,
+  onChangeTime: n,
+  timelineRef: l,
+  children: o,
+  perspective: f,
+  onChangePerspective: d,
+  defaultPerspective: y
+}) {
+  const h = at({
+    start: r,
+    end: i,
+    perspective: f,
+    onChangePerspective: d,
+    defaultPerspective: y
+  }), a = We(
+    () => ({
+      ...h,
+      start: r,
+      end: i,
+      time: s,
+      onChangeTime: n,
+      timelineRef: l
+    }),
+    [i, n, r, s, h, l]
+  );
+  return /* @__PURE__ */ D(Ve.Provider, { value: a, children: o });
+}
+function ie() {
+  return Ke(Ve);
+}
+var e = {}, xe = {
+  get exports() {
+    return e;
+  },
+  set exports(r) {
+    e = r;
+  }
+};
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+var ve, Re;
+function lt() {
+  if (Re)
+    return ve;
+  Re = 1;
+  var r = Object.getOwnPropertySymbols, i = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
+  function n(o) {
+    if (o == null)
+      throw new TypeError("Object.assign cannot be called with null or undefined");
+    return Object(o);
+  }
+  function l() {
+    try {
+      if (!Object.assign)
+        return !1;
+      var o = new String("abc");
+      if (o[5] = "de", Object.getOwnPropertyNames(o)[0] === "5")
+        return !1;
+      for (var f = {}, d = 0; d < 10; d++)
+        f["_" + String.fromCharCode(d)] = d;
+      var y = Object.getOwnPropertyNames(f).map(function(a) {
+        return f[a];
+      });
+      if (y.join("") !== "0123456789")
+        return !1;
+      var h = {};
+      return "abcdefghijklmnopqrst".split("").forEach(function(a) {
+        h[a] = a;
+      }), Object.keys(Object.assign({}, h)).join("") === "abcdefghijklmnopqrst";
+    } catch {
+      return !1;
+    }
+  }
+  return ve = l() ? Object.assign : function(o, f) {
+    for (var d, y = n(o), h, a = 1; a < arguments.length; a++) {
+      d = Object(arguments[a]);
+      for (var c in d)
+        i.call(d, c) && (y[c] = d[c]);
+      if (r) {
+        h = r(d);
+        for (var p = 0; p < h.length; p++)
+          s.call(d, h[p]) && (y[h[p]] = d[h[p]]);
+      }
+    }
+    return y;
+  }, ve;
+}
+var he, ke;
+function Oe() {
+  if (ke)
+    return he;
+  ke = 1;
+  var r = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
+  return he = r, he;
+}
+var me, je;
+function Ne() {
+  return je || (je = 1, me = Function.call.bind(Object.prototype.hasOwnProperty)), me;
+}
+var ye, Ae;
+function ut() {
+  if (Ae)
+    return ye;
+  Ae = 1;
+  var r = function() {
+  };
+  if (process.env.NODE_ENV !== "production") {
+    var i = Oe(), s = {}, n = Ne();
+    r = function(o) {
+      var f = "Warning: " + o;
+      typeof console < "u" && console.error(f);
+      try {
+        throw new Error(f);
+      } catch {
+      }
+    };
+  }
+  function l(o, f, d, y, h) {
+    if (process.env.NODE_ENV !== "production") {
+      for (var a in o)
+        if (n(o, a)) {
+          var c;
+          try {
+            if (typeof o[a] != "function") {
+              var p = Error(
+                (y || "React class") + ": " + d + " type `" + a + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof o[a] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
+              );
+              throw p.name = "Invariant Violation", p;
+            }
+            c = o[a](f, a, y, d, null, i);
+          } catch (E) {
+            c = E;
+          }
+          if (c && !(c instanceof Error) && r(
+            (y || "React class") + ": type specification of " + d + " `" + a + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof c + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
+          ), c instanceof Error && !(c.message in s)) {
+            s[c.message] = !0;
+            var b = h ? h() : "";
+            r(
+              "Failed " + d + " type: " + c.message + (b ?? "")
+            );
+          }
+        }
+    }
+  }
+  return l.resetWarningCache = function() {
+    process.env.NODE_ENV !== "production" && (s = {});
+  }, ye = l, ye;
+}
+var ge, Ce;
+function dt() {
+  if (Ce)
+    return ge;
+  Ce = 1;
+  var r = _e, i = lt(), s = Oe(), n = Ne(), l = ut(), o = function() {
+  };
+  process.env.NODE_ENV !== "production" && (o = function(d) {
+    var y = "Warning: " + d;
+    typeof console < "u" && console.error(y);
+    try {
+      throw new Error(y);
+    } catch {
+    }
+  });
+  function f() {
+    return null;
+  }
+  return ge = function(d, y) {
+    var h = typeof Symbol == "function" && Symbol.iterator, a = "@@iterator";
+    function c(t) {
+      var u = t && (h && t[h] || t[a]);
+      if (typeof u == "function")
+        return u;
+    }
+    var p = "<<anonymous>>", b = {
+      array: W("array"),
+      bigint: W("bigint"),
+      bool: W("boolean"),
+      func: W("function"),
+      number: W("number"),
+      object: W("object"),
+      string: W("string"),
+      symbol: W("symbol"),
+      any: V(),
+      arrayOf: N,
+      element: I(),
+      elementType: x(),
+      instanceOf: $,
+      node: _(),
+      objectOf: L,
+      oneOf: H,
+      oneOfType: C,
+      shape: Z,
+      exact: j
+    };
+    function E(t, u) {
+      return t === u ? t !== 0 || 1 / t === 1 / u : t !== t && u !== u;
+    }
+    function g(t, u) {
+      this.message = t, this.data = u && typeof u == "object" ? u : {}, this.stack = "";
+    }
+    g.prototype = Error.prototype;
+    function w(t) {
+      if (process.env.NODE_ENV !== "production")
+        var u = {}, R = 0;
+      function T(A, O, S, v, m, k, G) {
+        if (v = v || p, k = k || S, G !== s) {
+          if (y) {
+            var z = new Error(
+              "Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types"
+            );
+            throw z.name = "Invariant Violation", z;
+          } else if (process.env.NODE_ENV !== "production" && typeof console < "u") {
+            var Q = v + ":" + S;
+            !u[Q] && // Avoid spamming the console because they are often not actionable except for lib authors
+            R < 3 && (o(
+              "You are manually calling a React.PropTypes validation function for the `" + k + "` prop on `" + v + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."
+            ), u[Q] = !0, R++);
+          }
+        }
+        return O[S] == null ? A ? O[S] === null ? new g("The " + m + " `" + k + "` is marked as required " + ("in `" + v + "`, but its value is `null`.")) : new g("The " + m + " `" + k + "` is marked as required in " + ("`" + v + "`, but its value is `undefined`.")) : null : t(O, S, v, m, k);
+      }
+      var P = T.bind(null, !1);
+      return P.isRequired = T.bind(null, !0), P;
+    }
+    function W(t) {
+      function u(R, T, P, A, O, S) {
+        var v = R[T], m = X(v);
+        if (m !== t) {
+          var k = K(v);
+          return new g(
+            "Invalid " + A + " `" + O + "` of type " + ("`" + k + "` supplied to `" + P + "`, expected ") + ("`" + t + "`."),
+            { expectedType: t }
+          );
+        }
+        return null;
+      }
+      return w(u);
+    }
+    function V() {
+      return w(f);
+    }
+    function N(t) {
+      function u(R, T, P, A, O) {
+        if (typeof t != "function")
+          return new g("Property `" + O + "` of component `" + P + "` has invalid PropType notation inside arrayOf.");
+        var S = R[T];
+        if (!Array.isArray(S)) {
+          var v = X(S);
+          return new g("Invalid " + A + " `" + O + "` of type " + ("`" + v + "` supplied to `" + P + "`, expected an array."));
+        }
+        for (var m = 0; m < S.length; m++) {
+          var k = t(S, m, P, A, O + "[" + m + "]", s);
+          if (k instanceof Error)
+            return k;
+        }
+        return null;
+      }
+      return w(u);
+    }
+    function I() {
+      function t(u, R, T, P, A) {
+        var O = u[R];
+        if (!d(O)) {
+          var S = X(O);
+          return new g("Invalid " + P + " `" + A + "` of type " + ("`" + S + "` supplied to `" + T + "`, expected a single ReactElement."));
+        }
+        return null;
+      }
+      return w(t);
+    }
+    function x() {
+      function t(u, R, T, P, A) {
+        var O = u[R];
+        if (!r.isValidElementType(O)) {
+          var S = X(O);
+          return new g("Invalid " + P + " `" + A + "` of type " + ("`" + S + "` supplied to `" + T + "`, expected a single ReactElement type."));
+        }
+        return null;
+      }
+      return w(t);
+    }
+    function $(t) {
+      function u(R, T, P, A, O) {
+        if (!(R[T] instanceof t)) {
+          var S = t.name || p, v = pe(R[T]);
+          return new g("Invalid " + A + " `" + O + "` of type " + ("`" + v + "` supplied to `" + P + "`, expected ") + ("instance of `" + S + "`."));
+        }
+        return null;
+      }
+      return w(u);
+    }
+    function H(t) {
+      if (!Array.isArray(t))
+        return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? o(
+          "Invalid arguments supplied to oneOf, expected an array, got " + arguments.length + " arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."
+        ) : o("Invalid argument supplied to oneOf, expected an array.")), f;
+      function u(R, T, P, A, O) {
+        for (var S = R[T], v = 0; v < t.length; v++)
+          if (E(S, t[v]))
+            return null;
+        var m = JSON.stringify(t, function(G, z) {
+          var Q = K(z);
+          return Q === "symbol" ? String(z) : z;
+        });
+        return new g("Invalid " + A + " `" + O + "` of value `" + String(S) + "` " + ("supplied to `" + P + "`, expected one of " + m + "."));
+      }
+      return w(u);
+    }
+    function L(t) {
+      function u(R, T, P, A, O) {
+        if (typeof t != "function")
+          return new g("Property `" + O + "` of component `" + P + "` has invalid PropType notation inside objectOf.");
+        var S = R[T], v = X(S);
+        if (v !== "object")
+          return new g("Invalid " + A + " `" + O + "` of type " + ("`" + v + "` supplied to `" + P + "`, expected an object."));
+        for (var m in S)
+          if (n(S, m)) {
+            var k = t(S, m, P, A, O + "." + m, s);
+            if (k instanceof Error)
+              return k;
+          }
+        return null;
+      }
+      return w(u);
+    }
+    function C(t) {
+      if (!Array.isArray(t))
+        return process.env.NODE_ENV !== "production" && o("Invalid argument supplied to oneOfType, expected an instance of array."), f;
+      for (var u = 0; u < t.length; u++) {
+        var R = t[u];
+        if (typeof R != "function")
+          return o(
+            "Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + fe(R) + " at index " + u + "."
+          ), f;
+      }
+      function T(P, A, O, S, v) {
+        for (var m = [], k = 0; k < t.length; k++) {
+          var G = t[k], z = G(P, A, O, S, v, s);
+          if (z == null)
+            return null;
+          z.data && n(z.data, "expectedType") && m.push(z.data.expectedType);
+        }
+        var Q = m.length > 0 ? ", expected one of type [" + m.join(", ") + "]" : "";
+        return new g("Invalid " + S + " `" + v + "` supplied to " + ("`" + O + "`" + Q + "."));
+      }
+      return w(T);
+    }
+    function _() {
+      function t(u, R, T, P, A) {
+        return q(u[R]) ? null : new g("Invalid " + P + " `" + A + "` supplied to " + ("`" + T + "`, expected a ReactNode."));
+      }
+      return w(t);
+    }
+    function Y(t, u, R, T, P) {
+      return new g(
+        (t || "React class") + ": " + u + " type `" + R + "." + T + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + P + "`."
+      );
+    }
+    function Z(t) {
+      function u(R, T, P, A, O) {
+        var S = R[T], v = X(S);
+        if (v !== "object")
+          return new g("Invalid " + A + " `" + O + "` of type `" + v + "` " + ("supplied to `" + P + "`, expected `object`."));
+        for (var m in t) {
+          var k = t[m];
+          if (typeof k != "function")
+            return Y(P, A, O, m, K(k));
+          var G = k(S, m, P, A, O + "." + m, s);
+          if (G)
+            return G;
+        }
+        return null;
+      }
+      return w(u);
+    }
+    function j(t) {
+      function u(R, T, P, A, O) {
+        var S = R[T], v = X(S);
+        if (v !== "object")
+          return new g("Invalid " + A + " `" + O + "` of type `" + v + "` " + ("supplied to `" + P + "`, expected `object`."));
+        var m = i({}, R[T], t);
+        for (var k in m) {
+          var G = t[k];
+          if (n(t, k) && typeof G != "function")
+            return Y(P, A, O, k, K(G));
+          if (!G)
+            return new g(
+              "Invalid " + A + " `" + O + "` key `" + k + "` supplied to `" + P + "`.\nBad object: " + JSON.stringify(R[T], null, "  ") + `
+Valid keys: ` + JSON.stringify(Object.keys(t), null, "  ")
+            );
+          var z = G(S, k, P, A, O + "." + k, s);
+          if (z)
+            return z;
+        }
+        return null;
+      }
+      return w(u);
+    }
+    function q(t) {
+      switch (typeof t) {
+        case "number":
+        case "string":
+        case "undefined":
+          return !0;
+        case "boolean":
+          return !t;
+        case "object":
+          if (Array.isArray(t))
+            return t.every(q);
+          if (t === null || d(t))
+            return !0;
+          var u = c(t);
+          if (u) {
+            var R = u.call(t), T;
+            if (u !== t.entries) {
+              for (; !(T = R.next()).done; )
+                if (!q(T.value))
+                  return !1;
+            } else
+              for (; !(T = R.next()).done; ) {
+                var P = T.value;
+                if (P && !q(P[1]))
+                  return !1;
+              }
+          } else
+            return !1;
+          return !0;
+        default:
+          return !1;
+      }
+    }
+    function B(t, u) {
+      return t === "symbol" ? !0 : u ? u["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && u instanceof Symbol : !1;
+    }
+    function X(t) {
+      var u = typeof t;
+      return Array.isArray(t) ? "array" : t instanceof RegExp ? "object" : B(u, t) ? "symbol" : u;
+    }
+    function K(t) {
+      if (typeof t > "u" || t === null)
+        return "" + t;
+      var u = X(t);
+      if (u === "object") {
+        if (t instanceof Date)
+          return "date";
+        if (t instanceof RegExp)
+          return "regexp";
+      }
+      return u;
+    }
+    function fe(t) {
+      var u = K(t);
+      switch (u) {
+        case "array":
+        case "object":
+          return "an " + u;
+        case "boolean":
+        case "date":
+        case "regexp":
+          return "a " + u;
+        default:
+          return u;
+      }
+    }
+    function pe(t) {
+      return !t.constructor || !t.constructor.name ? p : t.constructor.name;
+    }
+    return b.checkPropTypes = l, b.resetWarningCache = l.resetWarningCache, b.PropTypes = b, b;
+  }, ge;
+}
+var Te, De;
+function ft() {
+  if (De)
+    return Te;
+  De = 1;
+  var r = Oe();
+  function i() {
+  }
+  function s() {
+  }
+  return s.resetWarningCache = i, Te = function() {
+    function n(f, d, y, h, a, c) {
+      if (c !== r) {
+        var p = new Error(
+          "Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
+        );
+        throw p.name = "Invariant Violation", p;
+      }
+    }
+    n.isRequired = n;
+    function l() {
+      return n;
+    }
+    var o = {
+      array: n,
+      bigint: n,
+      bool: n,
+      func: n,
+      number: n,
+      object: n,
+      string: n,
+      symbol: n,
+      any: n,
+      arrayOf: l,
+      element: n,
+      elementType: n,
+      instanceOf: l,
+      node: n,
+      objectOf: l,
+      oneOf: l,
+      oneOfType: l,
+      shape: l,
+      exact: l,
+      checkPropTypes: s,
+      resetWarningCache: i
+    };
+    return o.PropTypes = o, o;
+  }, Te;
+}
+if (process.env.NODE_ENV !== "production") {
+  var pt = _e, vt = !0;
+  xe.exports = dt()(pt.isElement, vt);
+} else
+  xe.exports = ft()();
+function Me({
+  start: r,
+  end: i,
+  time: s,
+  onChangeTime: n,
+  children: l,
+  className: o,
+  perspective: f,
+  onChangePerspective: d,
+  defaultPerspective: y,
+  zoomMultiplier: h,
+  ...a
+}) {
+  const c = U();
+  return /* @__PURE__ */ D(
+    ct,
+    {
+      start: r,
+      end: i,
+      time: s,
+      onChangeTime: n,
+      timelineRef: c,
+      perspective: f,
+      onChangePerspective: d,
+      defaultPerspective: y,
+      zoomMultiplier: h,
+      children: /* @__PURE__ */ D("div", { ref: c, className: F("VdtTimeline-root", o), ...a, children: l })
+    }
+  );
+}
+Me.propTypes = {
+  /**
+   * Start of timeline.
+   */
+  start: e.number.isRequired,
+  /**
+   * End of timeline.
+   */
+  end: e.number.isRequired,
+  /**
+   * Place of timeline marker.
+   */
+  time: e.number,
+  /**
+   * Children components to render inside timeline.
+   */
+  children: e.oneOfType([e.arrayOf(e.node), e.node]),
+  /**
+   * Callback to trigger when changing the value of time prop.
+   */
+  onChangeTime: e.func,
+  /**
+   * Zoom level of timeline: shows ticks between start and end values (if start and end of timeline are within this range).
+   */
+  perspective: e.shape({ start: e.number, end: e.number }),
+  /**
+   * Callback to trigger when changing the value of perspective prop.
+   */
+  onChangePerspective: e.func,
+  /**
+   * Set default value for perspective when rendering component.
+   */
+  defaultPerspective: e.shape({ start: e.number, end: e.number }),
+  /**
+   * Multiply by value when zooming in.
+   */
+  zoomMultiplier: e.oneOfType([e.number, e.func]),
+  /**
+   * Override styles with className.
+   */
+  className: e.string
+};
+Me.defaultProps = {
+  time: void 0,
+  children: void 0,
+  onChangeTime: void 0,
+  perspective: void 0,
+  onChangePerspective: void 0,
+  defaultPerspective: void 0,
+  zoomMultiplier: void 0,
+  className: void 0
+};
+const He = 15, qe = 100;
+const [ht] = ae("--vdt-timeline-palette-secondary"), ze = document.createElement("img");
+ze.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+function $e({
+  className: r,
+  perspective: i,
+  time: s,
+  lineWidth: n,
+  headWidth: l,
+  headHeight: o,
+  style: f,
+  onDrag: d,
+  HeadProps: y,
+  ...h
+}) {
+  var L;
+  const { perspective: a, time: c, onChangeTime: p } = ie() || {
+    perspective: i,
+    time: s
+  };
+  a === void 0 && J.error(
+    "VdtTimelinePlayhead",
+    "missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly"
+  );
+  const b = U(), E = (L = b.current) == null ? void 0 : L.parentElement, g = (E == null ? void 0 : E.clientWidth) || 0, [w, W] = re(!1), [V, N] = re(c), I = M(0, g, a.start, a.end, V), x = (C) => C <= a.end && C >= a.start, $ = !x(V);
+  le(() => {
+    c !== void 0 && !w && N(c);
+  }, [c, w]);
+  const H = d || p && ((C, ..._) => p(..._));
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      ref: b,
+      className: F("VdtTimelinePlayhead-root", r),
+      style: {
+        width: n,
+        left: I,
+        display: $ && "none",
+        zIndex: qe,
+        ...f
+      },
+      draggable: !0,
+      onDragStart: (C) => (W(!0), C.dataTransfer.setDragImage(ze, 0, 0), !1),
+      onDragEnd: () => {
+        W(!1), H != null && H.flush && H.flush();
+      },
+      onDrag: (C) => {
+        if (H) {
+          const { x: _ } = b.current.parentElement.getBoundingClientRect(), Y = M(
+            a.start,
+            a.end,
+            0,
+            g,
+            C.clientX - _
+          );
+          if (x(Y)) {
+            const Z = ne(Y, a.start, a.end);
+            H(C, Z), N(Z);
+          }
+        }
+      },
+      ...h,
+      children: /* @__PURE__ */ D(
+        "div",
+        {
+          className: "VdtTimelinePlayhead-head",
+          style: {
+            position: "absolute",
+            height: o,
+            width: l,
+            backgroundColor: ht,
+            left: -(l / 2 - n / 2),
+            top: -o + 1,
+            clipPath: "polygon(0% 0%, 0% 70%, 50% 100%, 100% 70%, 100% 0%)"
+          },
+          ...y
+        }
+      )
+    }
+  );
+}
+$e.propTypes = {
+  /**
+   * Apply inline CSS styling
+   */
+  style: e.instanceOf(Object),
+  /**
+   * Height of marker head in px
+   */
+  headHeight: e.number,
+  /**
+   * Width of marker head in px
+   */
+  headWidth: e.number,
+  /**
+   * Width/thickness of marker line in px
+   */
+  lineWidth: e.number,
+  /**
+   * Zoom level when looking at playhead.
+   */
+  perspective: e.shape({ start: e.number, end: e.number }),
+  /**
+   * Timeline placement of marker
+   */
+  time: e.number,
+  onDrag: e.func,
+  /**
+   * Additional props for marker head
+   */
+  HeadProps: e.instanceOf(Object),
+  /**
+   * Override styles with className
+   */
+  className: e.string
+};
+$e.defaultProps = {
+  style: {},
+  headHeight: 16,
+  headWidth: 12,
+  lineWidth: 2,
+  perspective: void 0,
+  time: 0,
+  onDrag: void 0,
+  HeadProps: {},
+  className: void 0
+};
+function se(r) {
+  const [i, s] = re({}), n = U(
+    new ResizeObserver((l) => {
+      var f;
+      const o = (f = l[0]) == null ? void 0 : f.contentRect;
+      o && s(o);
+    })
+  );
+  return le(() => {
+    const l = n == null ? void 0 : n.current, o = r == null ? void 0 : r.current;
+    return o && l.observe(o), () => {
+      o && l.unobserve(o);
+    };
+  }, [r]), i;
+}
+const [mt] = ae("--vdt-timeline-palette-primary"), yt = Qe(
+  ({ amplitudeSegments: r, pxPerTimeUnit: i, start: s, height: n, ...l }) => r.map(({ amplitude: o, start: f, end: d }, y) => {
+    const h = i * (d - f), a = (f - s) * i, c = n * o, p = (n - c) / 2;
+    return /* @__PURE__ */ D(
+      ee,
+      {
+        x: a,
+        y: p,
+        height: c,
+        width: h,
+        fill: mt,
+        ...l
+      },
+      y
+    );
+  })
+);
+function Be({
+  className: r,
+  waveform: i,
+  start: s,
+  end: n,
+  perspective: l,
+  StageProps: o,
+  LayerProps: f,
+  RectProps: d,
+  WaveRectProps: y,
+  ...h
+}) {
+  const { start: a, end: c, perspective: p } = ie() || {
+    start: s,
+    end: n,
+    perspective: l
+  };
+  (a === void 0 || c === void 0 || p === void 0) && J.error(
+    "VdtTimelineWaveform",
+    "missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' or 'perspective' must be passed explicitly"
+  );
+  const b = U(), { width: E = 0, height: g = 0 } = se(b), w = We(
+    () => i.map((I, x) => ({
+      amplitude: I,
+      start: M(a, c, 0, i.length - 1, x),
+      end: M(a, c, 0, i.length - 1, x + 1)
+    })),
+    [i, a, c]
+  ), W = E / (c - a), V = (c - a) / (p.end - p.start), N = M(0, V * E, a, c, p.start);
+  return /* @__PURE__ */ D("div", { ref: b, className: F("VdtTimelineWaveform-root", r), ...h, children: /* @__PURE__ */ D(ue, { height: g, width: E, x: -N, scaleX: V, ...o, children: /* @__PURE__ */ te(de, { listening: !1, ...f, children: [
+    /* @__PURE__ */ D(ee, { x: 0, y: 0, width: E, height: g, ...d }),
+    /* @__PURE__ */ D(
+      yt,
+      {
+        amplitudeSegments: w,
+        pxPerTimeUnit: W,
+        start: a,
+        height: g,
+        ...y
+      }
+    )
+  ] }) }) });
+}
+Be.propTypes = {
+  /**
+   * Array of integers to form the wave.
+   */
+  waveform: e.arrayOf(e.number),
+  /**
+   * Set starting point of the waveform. The value provided is the value of the respective data point in passed data.
+   */
+  start: e.number,
+  /**
+   * Set ending point of the waveform. The value provided is the value of the respective data point in passed data.
+   */
+  end: e.number,
+  /**
+   * Zoom level when looking at waveform.
+   */
+  perspective: e.shape({ start: e.number, end: e.number }),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
+  StageProps: e.instanceOf(Object),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
+  LayerProps: e.instanceOf(Object),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
+  RectProps: e.instanceOf(Object),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
+  WaveRectProps: e.instanceOf(Object),
+  /**
+   * Override styles with className
+   */
+  className: e.string
+};
+Be.defaultProps = {
+  waveform: [],
+  start: void 0,
+  end: void 0,
+  perspective: void 0,
+  StageProps: {},
+  LayerProps: {},
+  RectProps: {},
+  WaveRectProps: {},
+  className: void 0
+};
+function ce({ hoverEffect: r = () => {
+} } = {}) {
+  const [i, s] = re(!1), n = U(null);
+  return {
+    isHovering: i,
+    onMouseEnter: (l) => {
+      s(!0), n.current = r(l);
+    },
+    onMouseLeave: () => {
+      s(!1), n.current && n.current(), n.current = null;
+    }
+  };
+}
+const [gt, Tt] = ae(
+  "--vdt-timeline-palette-primary",
+  "--vdt-timeline-palette-primary-dark"
+), be = 5;
+function Ge({
+  onClick: r,
+  x: i,
+  width: s,
+  y: n,
+  height: l,
+  padding: o,
+  start: f,
+  end: d,
+  onHover: y,
+  onMove: h,
+  onMoveStart: a,
+  onMoveEnd: c,
+  onResize: p,
+  onResizeStart: b,
+  onResizeEnd: E,
+  ...g
+}) {
+  [i, s, n, l].some((j) => j === void 0) && J.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"
+  );
+  const w = U(), { isHovering: W, ...V } = ce({
+    hoverEffect: (j) => (y && y(j, !0), () => {
+      y && y(j, !1);
+    })
+  }), { isHovering: N, ...I } = ce({
+    hoverEffect: (j) => (p && (j.target.getStage().container().style.cursor = "col-resize"), () => {
+      p && (j.target.getStage().container().style.cursor = "default");
+    })
+  }), [x, $] = re(!1), H = !!r;
+  le(() => {
+    if (w.current) {
+      const j = (() => x ? "grabbing" : W && H ? "pointer" : "default")();
+      w.current.getStage().container().style.cursor = j;
+    }
+  }, [x, W, H]);
+  const L = n + o, C = l - 2 * o, _ = {
+    y: L,
+    height: C,
+    x: i,
+    width: s
+  }, Y = W || N ? {
+    fill: Tt
+  } : {}, Z = (j) => {
+    const q = j === "start" ? i : i + s - be;
+    return {
+      onDragStart: () => {
+        b && b(j);
+      },
+      draggable: !!p,
+      dragBoundFunc: (B) => ({ x: B.x, y: L }),
+      onDragEnd: () => {
+        E && E(j);
+      },
+      width: be,
+      x: q,
+      onDragMove: (B) => {
+        if (!p)
+          return;
+        const { x: X } = B.target.position();
+        B.target.x(q);
+        const K = Math.floor(
+          M(
+            f,
+            d,
+            i,
+            i + s,
+            X + (j === "start" ? 0 : be)
+          )
+        );
+        p(B, j, K);
+      }
+    };
+  };
+  return /* @__PURE__ */ te(Fe, { children: [
+    /* @__PURE__ */ D(
+      ee,
+      {
+        ref: w,
+        draggable: !!h,
+        dragBoundFunc: (j) => ({ x: j.x, y: L }),
+        onDragStart: (j) => {
+          h && ($(!0), a && a(j));
+        },
+        onDragEnd: (j) => {
+          h && ($(!1), c && c(j));
+        },
+        onDragMove: (j) => {
+          if (!h)
+            return;
+          const { x: q } = j.target.position();
+          j.target.x(i);
+          const B = Math.floor(M(f, d, i, i + s, q));
+          h(j, B);
+        },
+        fill: gt,
+        onClick: r,
+        ..._,
+        ...Y,
+        ...V,
+        ...g
+      }
+    ),
+    /* @__PURE__ */ D(ee, { ..._, ...I, ...Z("start") }),
+    /* @__PURE__ */ D(ee, { ..._, ...I, ...Z("end") })
+  ] });
+}
+Ge.propTypes = {
+  /**
+   * Callback to trigger on clicking on timeline event component.
+   */
+  onClick: e.func,
+  /**
+   * Callback to trigger on hovering over timeline event component.
+   */
+  onHover: e.func,
+  /**
+   * Callback to trigger on moving a timeline event component (when mousedown and dragging).
+   */
+  onMove: e.func,
+  /**
+   * Callback to trigger on moving a timeline event component only when mousedown and dragging.
+   */
+  onMoveStart: e.func,
+  /**
+   * Callback to trigger on moving a timeline event component only when mouseup and not dragging.
+   */
+  onMoveEnd: e.func,
+  /**
+   * Callback to trigger on resizing a timeline event component.
+   */
+  onResize: e.func,
+  /**
+   * Callback to trigger on resizing a timeline event component only when mousedown and dragging.
+   */
+  onResizeStart: e.func,
+  /**
+   * Callback to trigger on resizing a timeline event component only when mouseup and not dragging.
+   */
+  onResizeEnd: e.func,
+  /**
+   * Position of event bar in x-axis (px)
+   */
+  x: e.number,
+  /**
+   * Width of event bar in px
+   */
+  width: e.number,
+  /**
+   * Position of event bar in y-axis (px)
+   */
+  y: e.number,
+  /**
+   * Height of event bar in px
+   */
+  height: e.number,
+  /**
+   * Padding of event bar in px
+   */
+  padding: e.number,
+  /**
+   * Start of timeline event
+   */
+  start: e.number.isRequired,
+  /**
+   * End of timeline event
+   */
+  end: e.number.isRequired,
+  /**
+   * Override styles with className
+   */
+  className: e.string
+};
+Ge.defaultProps = {
+  onClick: void 0,
+  onHover: void 0,
+  onMove: void 0,
+  onMoveStart: void 0,
+  onMoveEnd: void 0,
+  onResize: void 0,
+  onResizeStart: void 0,
+  onResizeEnd: void 0,
+  x: void 0,
+  width: void 0,
+  y: 0,
+  height: He,
+  padding: 1,
+  className: void 0
+};
+function Xe({
+  className: r,
+  children: i,
+  perspective: s,
+  onClick: n,
+  style: l,
+  onHover: o,
+  StageProps: f,
+  LayerProps: d,
+  GroupProps: y,
+  RectProps: h,
+  ...a
+}) {
+  const { perspective: c } = ie() || {
+    perspective: s
+  };
+  c === void 0 && J.error(
+    "VdtTimelineTrack",
+    "missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly"
+  );
+  const p = oe.toArray(i).filter(({ props: I = {} }) => !(I.start > c.end || I.end < c.start)), b = U(), { width: E = 0, height: g = 0 } = se(b), w = Math.max(...oe.map(i, ({ props: { y: I = 0, height: x = 0 } = {} }) => I + x)) || He, W = (I) => {
+    const { start: x, end: $ } = I.props || {}, H = (() => {
+      if (x !== void 0 && $ !== void 0) {
+        const L = M(
+          0,
+          E,
+          c.start,
+          c.end,
+          x
+        ), C = M(0, E, c.start, c.end, $) - L;
+        return {
+          x: L,
+          width: C
+        };
+      }
+      return {};
+    })();
+    return Le(I, {
+      ...I.props,
+      ...H
+    });
+  }, { isHovering: V, ...N } = ce({
+    hoverEffect: (I) => {
+      o && o(I, !0);
+      const x = I.target.getStage().container();
+      return n && (x.style.cursor = "pointer"), () => {
+        o && o(I, !1), n && (x.style.cursor = "default");
+      };
+    }
+  });
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      ref: b,
+      className: F("VdtTimelineTrack-root", r),
+      style: { height: w, ...l },
+      ...a,
+      children: /* @__PURE__ */ D(ue, { height: g, width: E, ...f, children: /* @__PURE__ */ D(de, { ...d, children: /* @__PURE__ */ te(Pe, { ...y, children: [
+        /* @__PURE__ */ D(
+          ee,
+          {
+            x: 0,
+            y: 0,
+            width: E,
+            height: g,
+            onClick: n,
+            ...N,
+            ...h
+          }
+        ),
+        oe.map(p, W)
+      ] }) }) })
+    }
+  );
+}
+Xe.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(r, i, s) {
+    const n = r[i];
+    let l;
+    return oe.forEach(n, (o) => {
+      const { props: { start: f, end: d } = {} } = o;
+      (f === void 0 || d === void 0) && (l = new Error(
+        `children of ${s} must be passed a 'start' and 'end' prop. These props are used to position the child within the track.`
+      ));
+    }), l;
+  },
+  /**
+   * Start and end of timeline scroll, unzoomed
+   */
+  perspective: e.shape({ start: e.number, end: e.number }),
+  /**
+   * Callback to trigger on timeline track component click.
+   */
+  onClick: e.func,
+  /**
+   * Callback to trigger on mouse hover over timeline track component.
+   */
+  onHover: e.func,
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
+  StageProps: e.instanceOf(Object),
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
+  LayerProps: e.instanceOf(Object),
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
+   */
+  GroupProps: e.instanceOf(Object),
+  /**
+   * Props for Rect component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
+  RectProps: e.instanceOf(Object),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Apply inline CSS styling
+   */
+  style: e.instanceOf(Object)
+};
+Xe.defaultProps = {
+  style: {},
+  children: void 0,
+  perspective: void 0,
+  onClick: void 0,
+  onHover: void 0,
+  StageProps: {},
+  LayerProps: {},
+  GroupProps: {},
+  RectProps: {},
+  className: void 0
+};
+function Ee({
+  className: r,
+  children: i,
+  label: s,
+  LabelProps: n,
+  LabelTextProps: l,
+  ...o
+}) {
+  return /* @__PURE__ */ te(
+    "div",
+    {
+      className: F("VdtTimelineRow-root", r, {
+        "VdtTimelineRow-hasLabel": !!s
+      }),
+      ...o,
+      children: [
+        s && /* @__PURE__ */ D("div", { className: "VdtTimelineRow-label", ...n, children: /* @__PURE__ */ D("span", { className: "VdtTimelineRow-labelText", ...l, children: s }) }),
+        i
+      ]
+    }
+  );
+}
+Ee.propTypes = {
+  /**
+   * Children components to render inside row content container.
+   */
+  children: e.oneOfType([e.arrayOf(e.node), e.node]),
+  /**
+   * Custom row label
+   */
+  label: e.node,
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Label.html
+   */
+  LabelProps: e.instanceOf(Object),
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Label.html
+   */
+  LabelTextProps: e.instanceOf(Object),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Apply inline CSS styling
+   */
+  style: e.instanceOf(Object)
+};
+Ee.defaultProps = {
+  children: void 0,
+  label: void 0,
+  LabelProps: {},
+  LabelTextProps: {},
+  className: void 0,
+  style: {}
+};
+const Ie = 2, [bt, Pt] = ae(
+  "--vdt-timeline-palette-text-primary",
+  "--vdt-timeline-palette-text-secondary"
+);
+function Ot({ x: r, y: i, minX: s, maxX: n, label: l, TickGroupProps: o, TickTextProps: f, TickLineProps: d }) {
+  const y = l !== void 0, { color: h, tickWidth: a, tickSize: c } = y ? {
+    color: bt,
+    tickWidth: 2,
+    tickSize: 8
+  } : {
+    color: Pt,
+    tickWidth: 1,
+    tickSize: 4
+  }, [p, b] = re(), E = U();
+  le(() => {
+    E.current && b(E.current.getTextWidth());
+  }, []);
+  const g = ne(r - p / 2, s + Ie, n - p - Ie) || void 0;
+  return r < s || r > n ? null : /* @__PURE__ */ te(Pe, { ...o, children: [
+    /* @__PURE__ */ D(
+      et,
+      {
+        ref: E,
+        x: g,
+        y: i - c - 20,
+        fontFamily: "Helvetica",
+        text: l,
+        fontStyle: "bold",
+        fontSize: 10,
+        fill: h,
+        ...f
+      }
+    ),
+    /* @__PURE__ */ D(
+      tt,
+      {
+        points: [r, i - c, r, i],
+        stroke: h,
+        strokeWidth: a,
+        ...d
+      }
+    )
+  ] });
+}
+function Ye({ width: r, perspective: i }) {
+  const s = Math.max(Math.floor(r / 90), 2), n = nt(
+    [...Array(s).keys()].map(
+      (o) => M(i.start, i.end, 0, s - 1, o)
+    )
+  ).map((o) => ({
+    time: o,
+    label: String(Math.round(o))
+  })), l = it(n, (o, f) => {
+    const d = (f.time - o.time) / 10;
+    return [...Array(9).keys()].map((y) => ({ time: o.time + (y + 1) * d }));
+  }).flat();
+  return rt([...n, ...l], ["time"]);
+}
+function Ue({
+  className: r,
+  children: i,
+  ticks: s,
+  onClick: n,
+  onHover: l,
+  onWheel: o,
+  onDrag: f,
+  start: d,
+  end: y,
+  perspective: h,
+  timelineRef: a,
+  StageProps: c,
+  LayerProps: p,
+  GroupProps: b,
+  RectProps: E,
+  TickGroupProps: g,
+  TickTextProps: w,
+  TickLineProps: W,
+  ...V
+}) {
+  var O, S;
+  const { start: N, end: I, perspective: x, setPerspective: $, zoom: H, onChangeTime: L, timelineRef: C } = ie() || {
+    start: d,
+    end: y,
+    perspective: h,
+    timelineRef: a
+  };
+  (N === void 0 || I === void 0 || x === void 0) && J.error(
+    "VdtTimelinePlayheadTrack",
+    "missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly"
+  ), C === void 0 && (i == null ? void 0 : i.length) > 0 && J.warn(
+    "VdtTimelinePlayheadTrack",
+    "missing 'timelineRef' prop. This ref is used to set the height of the playhead within the timeline."
+  );
+  const _ = o || H && ((v, ...m) => H(...m)), Y = n || L && ((v, ...m) => L(...m)), Z = f || $ && ((v, ...m) => $(...m)), j = U(), { width: q = 0, height: B = 0 } = se(j), X = s || Ye, fe = (typeof X == "function" ? X({ start: N, end: I, width: q, perspective: x }) : X).map(({ label: v, time: m }) => ({
+    x: M(0, q, x.start, x.end, m),
+    label: v,
+    time: m
+  })), { height: pe } = se(C), t = (((O = j == null ? void 0 : j.current) == null ? void 0 : O.offsetTop) || 0) - (((S = C == null ? void 0 : C.current) == null ? void 0 : S.offsetTop) || 0), u = B, R = pe - B - t || void 0, T = U(), { isHovering: P, ...A } = ce({
+    hoverEffect: (v) => {
+      l && l(v, !0);
+      const m = v.target.getStage().container();
+      return Y && (m.style.cursor = "pointer"), () => {
+        l && l(v, !1), Y && (m.style.cursor = "default");
+      };
+    }
+  });
+  return /* @__PURE__ */ te(
+    "div",
+    {
+      ref: j,
+      className: F("VdtTimelinePlayheadTrack-root", r),
+      ...V,
+      children: [
+        oe.map(
+          i,
+          (v) => Le(v, {
+            style: {
+              top: u,
+              height: R
+            }
+          })
+        ),
+        /* @__PURE__ */ D(ue, { height: B, width: q, ...c, children: /* @__PURE__ */ D(de, { ...p, children: /* @__PURE__ */ te(
+          Pe,
+          {
+            onClick: (v) => {
+              if (T.current && Y) {
+                const { x: m } = T.current.getRelativePointerPosition();
+                Y(v, M(x.start, x.end, 0, q, m));
+              }
+            },
+            onWheel: (v) => {
+              if (T.current && _) {
+                const { x: m } = T.current.getRelativePointerPosition();
+                _(
+                  v,
+                  v.evt.deltaY < 0 ? "in" : "out",
+                  M(x.start, x.end, 0, q, m)
+                );
+              }
+            },
+            draggable: !0,
+            dragBoundFunc: () => ({ x: 0, y: 0 }),
+            onDragStart: (v) => {
+              const m = v.target.getStage().container();
+              m.style.cursor = "grabbing";
+            },
+            onDragEnd: (v) => {
+              const m = v.target.getStage().container();
+              m.style.cursor = "pointer";
+            },
+            onDragMove: (v) => {
+              if (Z) {
+                const { movementX: m } = v.evt;
+                if (m === 0)
+                  return;
+                const k = M(
+                  x.start,
+                  x.end,
+                  0,
+                  q,
+                  -m
+                ), G = x.end - x.start, z = ne(k, N, I - G), Q = z + G;
+                Z(v, z, Q);
+              }
+            },
+            ...A,
+            ...b,
+            children: [
+              /* @__PURE__ */ D(ee, { ref: T, x: 0, y: 0, width: q, height: B, ...E }),
+              fe.map(({ x: v, label: m, time: k }) => /* @__PURE__ */ D(
+                Ot,
+                {
+                  minX: 0,
+                  maxX: q,
+                  x: v,
+                  label: m,
+                  y: B,
+                  TickGroupProps: g,
+                  TickLineProps: W,
+                  TickTextProps: w
+                },
+                k
+              ))
+            ]
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+Ue.propTypes = {
+  /**
+   * Callback to trigger on clicking on playhead track component.
+   */
+  onClick: e.func,
+  /**
+   * Callback to trigger on mouse hover over playhead track component.
+   */
+  onHover: e.func,
+  /**
+   * Array of (large) timeline tick objects. Set time and label.
+   */
+  ticks: e.oneOfType([
+    e.arrayOf(
+      e.shape({
+        time: e.number,
+        label: e.string
+      })
+    ),
+    e.func
+  ]),
+  /**
+   * Callback to trigger on using the mouse wheel.
+   */
+  onWheel: e.func,
+  /**
+   * Callback to trigger on dragging playhead track component
+   */
+  onDrag: e.func,
+  /**
+   * Children components to render before/above the playhead track, according to top and height props passed to playhead track.
+   */
+  children: e.oneOfType([e.arrayOf(e.node), e.node]),
+  /**
+   * Start of playhead track.
+   */
+  start: e.number,
+  /**
+   * End of playhead track.
+   */
+  end: e.number,
+  /**
+   * Zoom level when looking at track.
+   */
+  perspective: e.shape({ start: e.number, end: e.number }),
+  /**
+   * Ref object to track timeline events.
+   */
+  timelineRef: e.shape({ current: e.instanceOf(Element) }),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
+  StageProps: e.instanceOf(Object),
+  /**
+   * Props for Layer component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
+  LayerProps: e.instanceOf(Object),
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
+   */
+  GroupProps: e.instanceOf(Object),
+  /**
+   * Props for React component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
+  RectProps: e.instanceOf(Object),
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Group.html
+   */
+  TickGroupProps: e.instanceOf(Object),
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Text.html
+   */
+  TickTextProps: e.instanceOf(Object),
+  /**
+   * Props for Group component. For more information: https://konvajs.org/api/Konva.Line.html
+   */
+  TickLineProps: e.instanceOf(Object),
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Apply inline CSS styling
+   */
+  style: e.instanceOf(Object)
+};
+Ue.defaultProps = {
+  onClick: void 0,
+  onHover: void 0,
+  ticks: Ye,
+  children: void 0,
+  start: void 0,
+  end: void 0,
+  perspective: void 0,
+  onWheel: void 0,
+  onDrag: void 0,
+  timelineRef: void 0,
+  StageProps: {},
+  LayerProps: {},
+  GroupProps: {},
+  RectProps: {},
+  TickGroupProps: {},
+  TickTextProps: {},
+  TickLineProps: {},
+  className: void 0,
+  style: {}
+};
+const [Et] = ae("--vdt-timeline-palette-secondary");
+function Se({
+  className: r,
+  onScroll: i,
+  onClick: s,
+  start: n,
+  end: l,
+  perspective: o,
+  style: f,
+  StageProps: d,
+  LayerProps: y,
+  RectProps: h,
+  ...a
+}) {
+  const { start: c, end: p, perspective: b, setPerspective: E } = ie() || {
+    start: n,
+    end: l,
+    perspective: o
+  };
+  (c === void 0 || p === void 0 || b === void 0) && J.error(
+    "VdtTimelineScroll",
+    "missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly"
+  );
+  const g = U(), { width: w = 0, height: W = 0 } = se(g), V = M(0, w, c, p, b.start), N = b.end - b.start, I = M(0, w, 0, p - c, N), x = i || E && ((L, ...C) => E(...C)), $ = s || E && ((L, ...C) => E(...C)), H = c !== b.start || p !== b.end;
+  return /* @__PURE__ */ D(
+    "div",
+    {
+      className: F("VdtTimelineScroll-root", r),
+      style: { display: !H && "none", zIndex: qe + 1, ...f },
+      ref: g,
+      ...a,
+      children: /* @__PURE__ */ D(
+        ue,
+        {
+          height: W,
+          width: w,
+          onClick: (L) => {
+            if (!$)
+              return;
+            const { x: C } = L.currentTarget.getRelativePointerPosition();
+            let _;
+            C > V + I ? _ = Math.floor(M(c, p, 0, w, C - I)) : C < V && (_ = Math.floor(M(c, p, 0, w, C))), _ !== void 0 && _ !== b.start && $(L, _, _ + N);
+          },
+          ...d,
+          children: /* @__PURE__ */ D(de, { ...y, children: /* @__PURE__ */ D(
+            ee,
+            {
+              x: V,
+              y: 0,
+              width: I,
+              height: W,
+              fill: Et,
+              draggable: !0,
+              dragBoundFunc: (L) => ({ x: ne(L.x, 0, w - I), y: 0 }),
+              onDragMove: (L) => {
+                if (!x)
+                  return;
+                const { x: C } = L.target.position();
+                L.target.x(V);
+                const _ = Math.floor(M(c, p, 0, w, C));
+                x(L, _, _ + N);
+              },
+              ...h
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+Se.propTypes = {
+  /**
+   * Callback to trigger on timeline component scroll.
+   */
+  onScroll: e.func,
+  /**
+   * Callback to trigger on timeline component click.
+   */
+  onClick: e.func,
+  /**
+   * Start time of timeline scroll.
+   */
+  start: e.number,
+  /**
+   * End time of timeline scroll
+   */
+  end: e.number,
+  /**
+   * Zoom level of timeline scroll.
+   */
+  perspective: e.shape({ start: e.number, end: e.number }),
+  /**
+   * Apply inline CSS styling
+   */
+  style: e.instanceOf(Object),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Stage.html
+   */
+  StageProps: e.instanceOf(Object),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Layer.html
+   */
+  LayerProps: e.instanceOf(Object),
+  /**
+   * Props for Stage component. For more information: https://konvajs.org/api/Konva.Rect.html
+   */
+  RectProps: e.instanceOf(Object),
+  /**
+   * Override styles with className
+   */
+  className: e.string
+};
+Se.defaultProps = {
+  onScroll: void 0,
+  onClick: void 0,
+  start: void 0,
+  end: void 0,
+  perspective: void 0,
+  style: {},
+  StageProps: {},
+  LayerProps: {},
+  RectProps: {},
+  className: void 0
+};
+function St(r, { start: i, end: s }) {
+  return Math.floor(0.02 * (i - s));
+}
+function Ze({
+  className: r,
+  children: i,
+  getScrollDistance: s,
+  RowProps: n,
+  ScrollProps: l,
+  ...o
+}) {
+  const { start: f, end: d, perspective: y, setPerspective: h } = ie();
+  return /* @__PURE__ */ te(
+    "div",
+    {
+      className: F("VdtTimelineScrollContainer-root", r),
+      onWheel: (a) => {
+        if (a.shiftKey) {
+          const c = s(a, { start: f, end: d, perspective: y }), p = y.start + (a.deltaY > 0 ? -c : c), b = y.end - y.start, E = p + b;
+          E > d ? h(d - b, d) : p < f ? h(f, b) : h(p, E);
+        }
+      },
+      ...o,
+      children: [
+        i,
+        /* @__PURE__ */ D(Ee, { className: F("VdtTimelineScrollContainer-timelineRow"), ...n, children: /* @__PURE__ */ D(Se, { ...l }) })
+      ]
+    }
+  );
+}
+Ze.propTypes = {
+  /**
+   * Override styles with className
+   */
+  className: e.string,
+  /**
+   * Children components to render
+   */
+  children: e.oneOfType([e.arrayOf(e.node), e.node]),
+  /**
+   * Get distance of scrolling
+   */
+  getScrollDistance: e.func,
+  /**
+   * Additional props for row component
+   */
+  RowProps: e.instanceOf(Object),
+  /**
+   * Additional props for scroll component
+   */
+  ScrollProps: e.instanceOf(Object)
+};
+Ze.defaultProps = {
+  children: void 0,
+  getScrollDistance: St,
+  RowProps: {},
+  ScrollProps: {},
+  className: void 0
+};
+export {
+  Me as Timeline,
+  Ve as TimelineContext,
+  Ge as TimelineEvent,
+  $e as TimelinePlayhead,
+  Ue as TimelinePlayheadTrack,
+  ct as TimelineProvider,
+  Ee as TimelineRow,
+  Se as TimelineScroll,
+  Ze as TimelineScrollContainer,
+  Xe as TimelineTrack,
+  Be as TimelineWaveform,
+  ie as useTimeline
+};