@vidispine/vdt-react-timeline 22.2.0

package/dist/index.es.js

@@ -0,0 +1,2752 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useState, useRef, useContext, createContext, useMemo, useEffect, memo, Children, cloneElement } from 'react';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import clamp from 'lodash.clamp';
+import { jsx, jsxs } 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';
+
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
+var propTypes = {exports: {}};
+
+var reactIs = {exports: {}};
+
+var reactIs_production_min = {};
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e$1=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n$1=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t$1=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e$1:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n$1:case t$1:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n$1;reactIs_production_min.Fragment=e$1;reactIs_production_min.Lazy=t$1;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n$1};reactIs_production_min.isFragment=function(a){return z(a)===e$1};reactIs_production_min.isLazy=function(a){return z(a)===t$1};
+reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e$1||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t$1||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n$1||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+
+var reactIs_development = {};
+
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+
+if (process.env.NODE_ENV !== "production") {
+  (function() {
+
+// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+// nor polyfill, then a plain number is used for performance.
+var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+// (unstable) APIs that have been removed. Can we remove the symbols?
+
+var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+
+function isValidElementType(type) {
+  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+}
+
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    var $$typeof = object.$$typeof;
+
+    switch ($$typeof) {
+      case REACT_ELEMENT_TYPE:
+        var type = object.type;
+
+        switch (type) {
+          case REACT_ASYNC_MODE_TYPE:
+          case REACT_CONCURRENT_MODE_TYPE:
+          case REACT_FRAGMENT_TYPE:
+          case REACT_PROFILER_TYPE:
+          case REACT_STRICT_MODE_TYPE:
+          case REACT_SUSPENSE_TYPE:
+            return type;
+
+          default:
+            var $$typeofType = type && type.$$typeof;
+
+            switch ($$typeofType) {
+              case REACT_CONTEXT_TYPE:
+              case REACT_FORWARD_REF_TYPE:
+              case REACT_LAZY_TYPE:
+              case REACT_MEMO_TYPE:
+              case REACT_PROVIDER_TYPE:
+                return $$typeofType;
+
+              default:
+                return $$typeof;
+            }
+
+        }
+
+      case REACT_PORTAL_TYPE:
+        return $$typeof;
+    }
+  }
+
+  return undefined;
+} // AsyncMode is deprecated along with isAsyncMode
+
+var AsyncMode = REACT_ASYNC_MODE_TYPE;
+var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+var ContextConsumer = REACT_CONTEXT_TYPE;
+var ContextProvider = REACT_PROVIDER_TYPE;
+var Element = REACT_ELEMENT_TYPE;
+var ForwardRef = REACT_FORWARD_REF_TYPE;
+var Fragment = REACT_FRAGMENT_TYPE;
+var Lazy = REACT_LAZY_TYPE;
+var Memo = REACT_MEMO_TYPE;
+var Portal = REACT_PORTAL_TYPE;
+var Profiler = REACT_PROFILER_TYPE;
+var StrictMode = REACT_STRICT_MODE_TYPE;
+var Suspense = REACT_SUSPENSE_TYPE;
+var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+
+function isAsyncMode(object) {
+  {
+    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+
+      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+    }
+  }
+
+  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+}
+function isConcurrentMode(object) {
+  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+}
+function isContextConsumer(object) {
+  return typeOf(object) === REACT_CONTEXT_TYPE;
+}
+function isContextProvider(object) {
+  return typeOf(object) === REACT_PROVIDER_TYPE;
+}
+function isElement(object) {
+  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+}
+function isForwardRef(object) {
+  return typeOf(object) === REACT_FORWARD_REF_TYPE;
+}
+function isFragment(object) {
+  return typeOf(object) === REACT_FRAGMENT_TYPE;
+}
+function isLazy(object) {
+  return typeOf(object) === REACT_LAZY_TYPE;
+}
+function isMemo(object) {
+  return typeOf(object) === REACT_MEMO_TYPE;
+}
+function isPortal(object) {
+  return typeOf(object) === REACT_PORTAL_TYPE;
+}
+function isProfiler(object) {
+  return typeOf(object) === REACT_PROFILER_TYPE;
+}
+function isStrictMode(object) {
+  return typeOf(object) === REACT_STRICT_MODE_TYPE;
+}
+function isSuspense(object) {
+  return typeOf(object) === REACT_SUSPENSE_TYPE;
+}
+
+reactIs_development.AsyncMode = AsyncMode;
+reactIs_development.ConcurrentMode = ConcurrentMode;
+reactIs_development.ContextConsumer = ContextConsumer;
+reactIs_development.ContextProvider = ContextProvider;
+reactIs_development.Element = Element;
+reactIs_development.ForwardRef = ForwardRef;
+reactIs_development.Fragment = Fragment;
+reactIs_development.Lazy = Lazy;
+reactIs_development.Memo = Memo;
+reactIs_development.Portal = Portal;
+reactIs_development.Profiler = Profiler;
+reactIs_development.StrictMode = StrictMode;
+reactIs_development.Suspense = Suspense;
+reactIs_development.isAsyncMode = isAsyncMode;
+reactIs_development.isConcurrentMode = isConcurrentMode;
+reactIs_development.isContextConsumer = isContextConsumer;
+reactIs_development.isContextProvider = isContextProvider;
+reactIs_development.isElement = isElement;
+reactIs_development.isForwardRef = isForwardRef;
+reactIs_development.isFragment = isFragment;
+reactIs_development.isLazy = isLazy;
+reactIs_development.isMemo = isMemo;
+reactIs_development.isPortal = isPortal;
+reactIs_development.isProfiler = isProfiler;
+reactIs_development.isStrictMode = isStrictMode;
+reactIs_development.isSuspense = isSuspense;
+reactIs_development.isValidElementType = isValidElementType;
+reactIs_development.typeOf = typeOf;
+  })();
+}
+
+if (process.env.NODE_ENV === 'production') {
+  reactIs.exports = reactIs_production_min;
+} else {
+  reactIs.exports = reactIs_development;
+}
+
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+/* eslint-disable no-unused-vars */
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+function toObject(val) {
+	if (val === null || val === undefined) {
+		throw new TypeError('Object.assign cannot be called with null or undefined');
+	}
+
+	return Object(val);
+}
+
+function shouldUseNative() {
+	try {
+		if (!Object.assign) {
+			return false;
+		}
+
+		// Detect buggy property enumeration order in older V8 versions.
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
+		test1[5] = 'de';
+		if (Object.getOwnPropertyNames(test1)[0] === '5') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test2 = {};
+		for (var i = 0; i < 10; i++) {
+			test2['_' + String.fromCharCode(i)] = i;
+		}
+		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+			return test2[n];
+		});
+		if (order2.join('') !== '0123456789') {
+			return false;
+		}
+
+		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+		var test3 = {};
+		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+			test3[letter] = letter;
+		});
+		if (Object.keys(Object.assign({}, test3)).join('') !==
+				'abcdefghijklmnopqrst') {
+			return false;
+		}
+
+		return true;
+	} catch (err) {
+		// We don't expect any of the above to throw, but better to be safe.
+		return false;
+	}
+}
+
+var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+	var from;
+	var to = toObject(target);
+	var symbols;
+
+	for (var s = 1; s < arguments.length; s++) {
+		from = Object(arguments[s]);
+
+		for (var key in from) {
+			if (hasOwnProperty.call(from, key)) {
+				to[key] = from[key];
+			}
+		}
+
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
+			for (var i = 0; i < symbols.length; i++) {
+				if (propIsEnumerable.call(from, symbols[i])) {
+					to[symbols[i]] = from[symbols[i]];
+				}
+			}
+		}
+	}
+
+	return to;
+};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactPropTypesSecret$3 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+var ReactPropTypesSecret_1 = ReactPropTypesSecret$3;
+
+var has$2 = Function.call.bind(Object.prototype.hasOwnProperty);
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var printWarning$1 = function() {};
+
+if (process.env.NODE_ENV !== 'production') {
+  var ReactPropTypesSecret$2 = ReactPropTypesSecret_1;
+  var loggedTypeFailures = {};
+  var has$1 = has$2;
+
+  printWarning$1 = function(text) {
+    var message = 'Warning: ' + text;
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) { /**/ }
+  };
+}
+
+/**
+ * Assert that the values match with the type specs.
+ * Error messages are memorized and will only be shown once.
+ *
+ * @param {object} typeSpecs Map of name to a ReactPropType
+ * @param {object} values Runtime values that need to be type-checked
+ * @param {string} location e.g. "prop", "context", "child context"
+ * @param {string} componentName Name of the component for error messages.
+ * @param {?Function} getStack Returns the component stack.
+ * @private
+ */
+function checkPropTypes$1(typeSpecs, values, location, componentName, getStack) {
+  if (process.env.NODE_ENV !== 'production') {
+    for (var typeSpecName in typeSpecs) {
+      if (has$1(typeSpecs, typeSpecName)) {
+        var error;
+        // Prop type validation may throw. In case they do, we don't want to
+        // fail the render phase where it didn't fail before. So we log it.
+        // After these have been cleaned up, we'll let them throw.
+        try {
+          // This is intentionally an invariant that gets caught. It's the same
+          // behavior as without this statement except with a better message.
+          if (typeof typeSpecs[typeSpecName] !== 'function') {
+            var err = Error(
+              (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
+              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
+              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
+            );
+            err.name = 'Invariant Violation';
+            throw err;
+          }
+          error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$2);
+        } catch (ex) {
+          error = ex;
+        }
+        if (error && !(error instanceof Error)) {
+          printWarning$1(
+            (componentName || 'React class') + ': type specification of ' +
+            location + ' `' + typeSpecName + '` is invalid; the type checker ' +
+            'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
+            'You may have forgotten to pass an argument to the type checker ' +
+            'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
+            'shape all require an argument).'
+          );
+        }
+        if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+          // Only monitor this failure once because there tends to be a lot of the
+          // same error.
+          loggedTypeFailures[error.message] = true;
+
+          var stack = getStack ? getStack() : '';
+
+          printWarning$1(
+            'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
+          );
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Resets warning cache when testing.
+ *
+ * @private
+ */
+checkPropTypes$1.resetWarningCache = function() {
+  if (process.env.NODE_ENV !== 'production') {
+    loggedTypeFailures = {};
+  }
+};
+
+var checkPropTypes_1 = checkPropTypes$1;
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactIs$1 = reactIs.exports;
+var assign = objectAssign;
+
+var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+var has = has$2;
+var checkPropTypes = checkPropTypes_1;
+
+var printWarning = function() {};
+
+if (process.env.NODE_ENV !== 'production') {
+  printWarning = function(text) {
+    var message = 'Warning: ' + text;
+    if (typeof console !== 'undefined') {
+      console.error(message);
+    }
+    try {
+      // --- Welcome to debugging React ---
+      // This error was thrown as a convenience so that you can use this stack
+      // to find the callsite that caused this warning to fire.
+      throw new Error(message);
+    } catch (x) {}
+  };
+}
+
+function emptyFunctionThatReturnsNull() {
+  return null;
+}
+
+var factoryWithTypeCheckers = function(isValidElement, throwOnDirectAccess) {
+  /* global Symbol */
+  var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+  var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+  /**
+   * Returns the iterator method function contained on the iterable object.
+   *
+   * Be sure to invoke the function with the iterable as context:
+   *
+   *     var iteratorFn = getIteratorFn(myIterable);
+   *     if (iteratorFn) {
+   *       var iterator = iteratorFn.call(myIterable);
+   *       ...
+   *     }
+   *
+   * @param {?object} maybeIterable
+   * @return {?function}
+   */
+  function getIteratorFn(maybeIterable) {
+    var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+    if (typeof iteratorFn === 'function') {
+      return iteratorFn;
+    }
+  }
+
+  /**
+   * Collection of methods that allow declaration and validation of props that are
+   * supplied to React components. Example usage:
+   *
+   *   var Props = require('ReactPropTypes');
+   *   var MyArticle = React.createClass({
+   *     propTypes: {
+   *       // An optional string prop named "description".
+   *       description: Props.string,
+   *
+   *       // A required enum prop named "category".
+   *       category: Props.oneOf(['News','Photos']).isRequired,
+   *
+   *       // A prop named "dialog" that requires an instance of Dialog.
+   *       dialog: Props.instanceOf(Dialog).isRequired
+   *     },
+   *     render: function() { ... }
+   *   });
+   *
+   * A more formal specification of how these methods are used:
+   *
+   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+   *   decl := ReactPropTypes.{type}(.isRequired)?
+   *
+   * Each and every declaration produces a function with the same signature. This
+   * allows the creation of custom validation functions. For example:
+   *
+   *  var MyLink = React.createClass({
+   *    propTypes: {
+   *      // An optional string or URI prop named "href".
+   *      href: function(props, propName, componentName) {
+   *        var propValue = props[propName];
+   *        if (propValue != null && typeof propValue !== 'string' &&
+   *            !(propValue instanceof URI)) {
+   *          return new Error(
+   *            'Expected a string or an URI for ' + propName + ' in ' +
+   *            componentName
+   *          );
+   *        }
+   *      }
+   *    },
+   *    render: function() {...}
+   *  });
+   *
+   * @internal
+   */
+
+  var ANONYMOUS = '<<anonymous>>';
+
+  // Important!
+  // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
+  var ReactPropTypes = {
+    array: createPrimitiveTypeChecker('array'),
+    bigint: createPrimitiveTypeChecker('bigint'),
+    bool: createPrimitiveTypeChecker('boolean'),
+    func: createPrimitiveTypeChecker('function'),
+    number: createPrimitiveTypeChecker('number'),
+    object: createPrimitiveTypeChecker('object'),
+    string: createPrimitiveTypeChecker('string'),
+    symbol: createPrimitiveTypeChecker('symbol'),
+
+    any: createAnyTypeChecker(),
+    arrayOf: createArrayOfTypeChecker,
+    element: createElementTypeChecker(),
+    elementType: createElementTypeTypeChecker(),
+    instanceOf: createInstanceTypeChecker,
+    node: createNodeChecker(),
+    objectOf: createObjectOfTypeChecker,
+    oneOf: createEnumTypeChecker,
+    oneOfType: createUnionTypeChecker,
+    shape: createShapeTypeChecker,
+    exact: createStrictShapeTypeChecker,
+  };
+
+  /**
+   * inlined Object.is polyfill to avoid requiring consumers ship their own
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+   */
+  /*eslint-disable no-self-compare*/
+  function is(x, y) {
+    // SameValue algorithm
+    if (x === y) {
+      // Steps 1-5, 7-10
+      // Steps 6.b-6.e: +0 != -0
+      return x !== 0 || 1 / x === 1 / y;
+    } else {
+      // Step 6.a: NaN == NaN
+      return x !== x && y !== y;
+    }
+  }
+  /*eslint-enable no-self-compare*/
+
+  /**
+   * We use an Error-like object for backward compatibility as people may call
+   * PropTypes directly and inspect their output. However, we don't use real
+   * Errors anymore. We don't inspect their stack anyway, and creating them
+   * is prohibitively expensive if they are created too often, such as what
+   * happens in oneOfType() for any type before the one that matched.
+   */
+  function PropTypeError(message, data) {
+    this.message = message;
+    this.data = data && typeof data === 'object' ? data: {};
+    this.stack = '';
+  }
+  // Make `instanceof Error` still work for returned errors.
+  PropTypeError.prototype = Error.prototype;
+
+  function createChainableTypeChecker(validate) {
+    if (process.env.NODE_ENV !== 'production') {
+      var manualPropTypeCallCache = {};
+      var manualPropTypeWarningCount = 0;
+    }
+    function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+      componentName = componentName || ANONYMOUS;
+      propFullName = propFullName || propName;
+
+      if (secret !== ReactPropTypesSecret$1) {
+        if (throwOnDirectAccess) {
+          // New behavior only for users of `prop-types` package
+          var err = 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'
+          );
+          err.name = 'Invariant Violation';
+          throw err;
+        } else if (process.env.NODE_ENV !== 'production' && typeof console !== 'undefined') {
+          // Old behavior for people using React.PropTypes
+          var cacheKey = componentName + ':' + propName;
+          if (
+            !manualPropTypeCallCache[cacheKey] &&
+            // Avoid spamming the console because they are often not actionable except for lib authors
+            manualPropTypeWarningCount < 3
+          ) {
+            printWarning(
+              'You are manually calling a React.PropTypes validation ' +
+              'function for the `' + propFullName + '` prop on `' + componentName + '`. 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.'
+            );
+            manualPropTypeCallCache[cacheKey] = true;
+            manualPropTypeWarningCount++;
+          }
+        }
+      }
+      if (props[propName] == null) {
+        if (isRequired) {
+          if (props[propName] === null) {
+            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+          }
+          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+        }
+        return null;
+      } else {
+        return validate(props, propName, componentName, location, propFullName);
+      }
+    }
+
+    var chainedCheckType = checkType.bind(null, false);
+    chainedCheckType.isRequired = checkType.bind(null, true);
+
+    return chainedCheckType;
+  }
+
+  function createPrimitiveTypeChecker(expectedType) {
+    function validate(props, propName, componentName, location, propFullName, secret) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== expectedType) {
+        // `propValue` being instance of, say, date/regexp, pass the 'object'
+        // check, but we can offer a more precise error message here rather than
+        // 'of type `object`'.
+        var preciseType = getPreciseType(propValue);
+
+        return new PropTypeError(
+          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
+          {expectedType: expectedType}
+        );
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createAnyTypeChecker() {
+    return createChainableTypeChecker(emptyFunctionThatReturnsNull);
+  }
+
+  function createArrayOfTypeChecker(typeChecker) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (typeof typeChecker !== 'function') {
+        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+      }
+      var propValue = props[propName];
+      if (!Array.isArray(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+      }
+      for (var i = 0; i < propValue.length; i++) {
+        var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret$1);
+        if (error instanceof Error) {
+          return error;
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createElementTypeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      if (!isValidElement(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createElementTypeTypeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      if (!ReactIs$1.isValidElementType(propValue)) {
+        var propType = getPropType(propValue);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement type.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createInstanceTypeChecker(expectedClass) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (!(props[propName] instanceof expectedClass)) {
+        var expectedClassName = expectedClass.name || ANONYMOUS;
+        var actualClassName = getClassName(props[propName]);
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createEnumTypeChecker(expectedValues) {
+    if (!Array.isArray(expectedValues)) {
+      if (process.env.NODE_ENV !== 'production') {
+        if (arguments.length > 1) {
+          printWarning(
+            '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]).'
+          );
+        } else {
+          printWarning('Invalid argument supplied to oneOf, expected an array.');
+        }
+      }
+      return emptyFunctionThatReturnsNull;
+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      for (var i = 0; i < expectedValues.length; i++) {
+        if (is(propValue, expectedValues[i])) {
+          return null;
+        }
+      }
+
+      var valuesString = JSON.stringify(expectedValues, function replacer(key, value) {
+        var type = getPreciseType(value);
+        if (type === 'symbol') {
+          return String(value);
+        }
+        return value;
+      });
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + String(propValue) + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createObjectOfTypeChecker(typeChecker) {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (typeof typeChecker !== 'function') {
+        return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+      }
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+      }
+      for (var key in propValue) {
+        if (has(propValue, key)) {
+          var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
+          if (error instanceof Error) {
+            return error;
+          }
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createUnionTypeChecker(arrayOfTypeCheckers) {
+    if (!Array.isArray(arrayOfTypeCheckers)) {
+      process.env.NODE_ENV !== 'production' ? printWarning('Invalid argument supplied to oneOfType, expected an instance of array.') : void 0;
+      return emptyFunctionThatReturnsNull;
+    }
+
+    for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+      var checker = arrayOfTypeCheckers[i];
+      if (typeof checker !== 'function') {
+        printWarning(
+          'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' +
+          'received ' + getPostfixForTypeWarning(checker) + ' at index ' + i + '.'
+        );
+        return emptyFunctionThatReturnsNull;
+      }
+    }
+
+    function validate(props, propName, componentName, location, propFullName) {
+      var expectedTypes = [];
+      for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+        var checker = arrayOfTypeCheckers[i];
+        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$1);
+        if (checkerResult == null) {
+          return null;
+        }
+        if (checkerResult.data && has(checkerResult.data, 'expectedType')) {
+          expectedTypes.push(checkerResult.data.expectedType);
+        }
+      }
+      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createNodeChecker() {
+    function validate(props, propName, componentName, location, propFullName) {
+      if (!isNode(props[propName])) {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function invalidValidatorError(componentName, location, propFullName, key, type) {
+    return new PropTypeError(
+      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
+      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
+    );
+  }
+
+  function createShapeTypeChecker(shapeTypes) {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+      }
+      for (var key in shapeTypes) {
+        var checker = shapeTypes[key];
+        if (typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
+        if (error) {
+          return error;
+        }
+      }
+      return null;
+    }
+    return createChainableTypeChecker(validate);
+  }
+
+  function createStrictShapeTypeChecker(shapeTypes) {
+    function validate(props, propName, componentName, location, propFullName) {
+      var propValue = props[propName];
+      var propType = getPropType(propValue);
+      if (propType !== 'object') {
+        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+      }
+      // We need to check all keys in case some are required but missing from props.
+      var allKeys = assign({}, props[propName], shapeTypes);
+      for (var key in allKeys) {
+        var checker = shapeTypes[key];
+        if (has(shapeTypes, key) && typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
+        if (!checker) {
+          return new PropTypeError(
+            'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
+            '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
+            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
+          );
+        }
+        var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$1);
+        if (error) {
+          return error;
+        }
+      }
+      return null;
+    }
+
+    return createChainableTypeChecker(validate);
+  }
+
+  function isNode(propValue) {
+    switch (typeof propValue) {
+      case 'number':
+      case 'string':
+      case 'undefined':
+        return true;
+      case 'boolean':
+        return !propValue;
+      case 'object':
+        if (Array.isArray(propValue)) {
+          return propValue.every(isNode);
+        }
+        if (propValue === null || isValidElement(propValue)) {
+          return true;
+        }
+
+        var iteratorFn = getIteratorFn(propValue);
+        if (iteratorFn) {
+          var iterator = iteratorFn.call(propValue);
+          var step;
+          if (iteratorFn !== propValue.entries) {
+            while (!(step = iterator.next()).done) {
+              if (!isNode(step.value)) {
+                return false;
+              }
+            }
+          } else {
+            // Iterator will provide entry [k,v] tuples rather than values.
+            while (!(step = iterator.next()).done) {
+              var entry = step.value;
+              if (entry) {
+                if (!isNode(entry[1])) {
+                  return false;
+                }
+              }
+            }
+          }
+        } else {
+          return false;
+        }
+
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  function isSymbol(propType, propValue) {
+    // Native Symbol.
+    if (propType === 'symbol') {
+      return true;
+    }
+
+    // falsy value can't be a Symbol
+    if (!propValue) {
+      return false;
+    }
+
+    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+    if (propValue['@@toStringTag'] === 'Symbol') {
+      return true;
+    }
+
+    // Fallback for non-spec compliant Symbols which are polyfilled.
+    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // Equivalent of `typeof` but with special handling for array and regexp.
+  function getPropType(propValue) {
+    var propType = typeof propValue;
+    if (Array.isArray(propValue)) {
+      return 'array';
+    }
+    if (propValue instanceof RegExp) {
+      // Old webkits (at least until Android 4.0) return 'function' rather than
+      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+      // passes PropTypes.object.
+      return 'object';
+    }
+    if (isSymbol(propType, propValue)) {
+      return 'symbol';
+    }
+    return propType;
+  }
+
+  // This handles more types than `getPropType`. Only used for error messages.
+  // See `createPrimitiveTypeChecker`.
+  function getPreciseType(propValue) {
+    if (typeof propValue === 'undefined' || propValue === null) {
+      return '' + propValue;
+    }
+    var propType = getPropType(propValue);
+    if (propType === 'object') {
+      if (propValue instanceof Date) {
+        return 'date';
+      } else if (propValue instanceof RegExp) {
+        return 'regexp';
+      }
+    }
+    return propType;
+  }
+
+  // Returns a string that is postfixed to a warning about an invalid type.
+  // For example, "undefined" or "of type array"
+  function getPostfixForTypeWarning(value) {
+    var type = getPreciseType(value);
+    switch (type) {
+      case 'array':
+      case 'object':
+        return 'an ' + type;
+      case 'boolean':
+      case 'date':
+      case 'regexp':
+        return 'a ' + type;
+      default:
+        return type;
+    }
+  }
+
+  // Returns class name of the object, if any.
+  function getClassName(propValue) {
+    if (!propValue.constructor || !propValue.constructor.name) {
+      return ANONYMOUS;
+    }
+    return propValue.constructor.name;
+  }
+
+  ReactPropTypes.checkPropTypes = checkPropTypes;
+  ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var ReactPropTypesSecret = ReactPropTypesSecret_1;
+
+function emptyFunction() {}
+function emptyFunctionWithReset() {}
+emptyFunctionWithReset.resetWarningCache = emptyFunction;
+
+var factoryWithThrowingShims = function() {
+  function shim(props, propName, componentName, location, propFullName, secret) {
+    if (secret === ReactPropTypesSecret) {
+      // It is still safe when called from React.
+      return;
+    }
+    var err = 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'
+    );
+    err.name = 'Invariant Violation';
+    throw err;
+  }  shim.isRequired = shim;
+  function getShim() {
+    return shim;
+  }  // Important!
+  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+  var ReactPropTypes = {
+    array: shim,
+    bigint: shim,
+    bool: shim,
+    func: shim,
+    number: shim,
+    object: shim,
+    string: shim,
+    symbol: shim,
+
+    any: shim,
+    arrayOf: getShim,
+    element: shim,
+    elementType: shim,
+    instanceOf: getShim,
+    node: shim,
+    objectOf: getShim,
+    oneOf: getShim,
+    oneOfType: getShim,
+    shape: getShim,
+    exact: getShim,
+
+    checkPropTypes: emptyFunctionWithReset,
+    resetWarningCache: emptyFunction
+  };
+
+  ReactPropTypes.PropTypes = ReactPropTypes;
+
+  return ReactPropTypes;
+};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+if (process.env.NODE_ENV !== 'production') {
+  var ReactIs = reactIs.exports;
+
+  // By explicitly using `prop-types` you are opting into new development behavior.
+  // http://fb.me/prop-types-in-prod
+  var throwOnDirectAccess = true;
+  propTypes.exports = factoryWithTypeCheckers(ReactIs.isElement, throwOnDirectAccess);
+} else {
+  // By explicitly using `prop-types` you are opting into new production behavior.
+  // http://fb.me/prop-types-in-prod
+  propTypes.exports = factoryWithThrowingShims();
+}
+
+var PropTypes = propTypes.exports;
+
+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$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; }
+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$9(_objectSpread$9({}, 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:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\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$8 = ["start", "end", "time", "onChangeTime", "children", "className", "perspective", "onChangePerspective", "defaultPerspective", "zoomMultiplier"];
+
+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; }
+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$8);
+
+  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$8(_objectSpread$8({
+      ref: timelineRef,
+      className: clsx('VdtTimeline-root', className) // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, props), {}, {
+      children: children
+    }))
+  });
+}
+Timeline.propTypes = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  start: PropTypes.number.isRequired,
+  end: PropTypes.number.isRequired,
+  time: PropTypes.number,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  onChangeTime: PropTypes.func,
+  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])
+};
+Timeline.defaultProps = {
+  className: undefined,
+  time: undefined,
+  children: undefined,
+  onChangeTime: undefined,
+  perspective: undefined,
+  onChangePerspective: undefined,
+  defaultPerspective: undefined,
+  zoomMultiplier: undefined
+};
+
+var DEFAULT_EVENT_HEIGHT = 15;
+var DEFAULT_PLAYHEAD_ZINDEX = 100;
+
+var css$6 = ":root {\n    --vdt-timeline-palette-primary:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\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$7 = ["className", "perspective", "time", "lineWidth", "headWidth", "headHeight", "style", "onDrag", "HeadProps"];
+
+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-secondary'),
+    _getStyleProperties2$3 = _slicedToArray(_getStyleProperties$3, 1),
+    paletteSecondary$1 = _getStyleProperties2$3[0];
+
+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$7);
+
+  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$7(_objectSpread$7({
+    ref: ref,
+    className: clsx('VdtTimelinePlayhead-root', className),
+    style: _objectSpread$7({
+      width: lineWidth,
+      left: markerLeft,
+      display: hide && 'none',
+      zIndex: DEFAULT_PLAYHEAD_ZINDEX
+    }, style),
+    draggable: true,
+    onDragStart: function onDragStart(e) {
+      setIsDragging(true);
+      e.dataTransfer.setDragImage(ref.current, -99999, -99999);
+    },
+    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);
+        }
+      }
+    } // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, props), {}, {
+    children: /*#__PURE__*/jsx("div", _objectSpread$7({
+      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%)'
+      } // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, HeadProps))
+  }));
+}
+TimelinePlayhead.propTypes = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  style: PropTypes.instanceOf(Object),
+  headHeight: PropTypes.number,
+  headWidth: PropTypes.number,
+  lineWidth: PropTypes.number,
+  perspective: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number
+  }),
+  time: PropTypes.number,
+  onDrag: PropTypes.func,
+  HeadProps: PropTypes.instanceOf(Object)
+};
+TimelinePlayhead.defaultProps = {
+  className: undefined,
+  style: {},
+  headHeight: 16,
+  headWidth: 12,
+  lineWidth: 2,
+  perspective: undefined,
+  time: 0,
+  onDrag: undefined,
+  HeadProps: {}
+};
+
+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:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\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$6 = ["amplitudeSegments", "pxPerTimeUnit", "start", "height"],
+    _excluded2$2 = ["className", "waveform", "start", "end", "perspective", "StageProps", "LayerProps", "RectProps", "WaveRectProps"];
+
+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'),
+    _getStyleProperties2$2 = _slicedToArray(_getStyleProperties$2, 1),
+    palettePrimary = _getStyleProperties2$2[0];
+
+var TimelineWaveFormRects = /*#__PURE__*/memo(function (_ref) {
+  var amplitudeSegments = _ref.amplitudeSegments,
+      pxPerTimeUnit = _ref.pxPerTimeUnit,
+      start = _ref.start,
+      height = _ref.height,
+      props = _objectWithoutProperties(_ref, _excluded$6);
+
+  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$6({
+      x: rectX,
+      y: centeredY,
+      height: rectHeight,
+      width: rectWidth,
+      fill: palettePrimary // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, 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$2);
+
+  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$6(_objectSpread$6({
+    ref: ref,
+    className: clsx('VdtTimelineWaveform-root', className) // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Stage, _objectSpread$6(_objectSpread$6({
+      height: height,
+      width: width,
+      x: -offsetX,
+      scaleX: scaleX // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, StageProps), {}, {
+      children: /*#__PURE__*/jsxs(Layer, _objectSpread$6(_objectSpread$6({
+        listening: false // eslint-disable-next-line react/jsx-props-no-spreading
+
+      }, LayerProps), {}, {
+        children: [/*#__PURE__*/jsx(Rect, _objectSpread$6({
+          x: 0,
+          y: 0,
+          width: width,
+          height: height // eslint-disable-next-line react/jsx-props-no-spreading
+
+        }, RectProps)), /*#__PURE__*/jsx(TimelineWaveFormRects, _objectSpread$6({
+          amplitudeSegments: amplitudeSegments,
+          pxPerTimeUnit: pxPerTimeUnit,
+          start: start,
+          height: height // eslint-disable-next-line react/jsx-props-no-spreading
+
+        }, WaveRectProps))]
+      }))
+    }))
+  }));
+}
+TimelineWaveform.propTypes = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  waveform: PropTypes.arrayOf(PropTypes.number),
+  start: PropTypes.number,
+  end: PropTypes.number,
+  perspective: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number
+  }),
+  StageProps: PropTypes.instanceOf(Object),
+  LayerProps: PropTypes.instanceOf(Object),
+  RectProps: PropTypes.instanceOf(Object),
+  WaveRectProps: PropTypes.instanceOf(Object)
+};
+TimelineWaveform.defaultProps = {
+  className: undefined,
+  waveform: [],
+  start: undefined,
+  end: undefined,
+  perspective: undefined,
+  StageProps: {},
+  LayerProps: {},
+  RectProps: {},
+  WaveRectProps: {}
+};
+
+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$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) // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Stage, _objectSpread$5(_objectSpread$5({
+      height: eventContainerHeight,
+      width: eventContainerWidth // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, StageProps), {}, {
+      children: /*#__PURE__*/jsx(Layer // eslint-disable-next-line react/jsx-props-no-spreading
+      , _objectSpread$5(_objectSpread$5({}, LayerProps), {}, {
+        children: /*#__PURE__*/jsxs(Group // eslint-disable-next-line react/jsx-props-no-spreading
+        , _objectSpread$5(_objectSpread$5({}, GroupProps), {}, {
+          children: [/*#__PURE__*/jsx(Rect, _objectSpread$5(_objectSpread$5({
+            x: 0,
+            y: 0,
+            width: eventContainerWidth,
+            height: eventContainerHeight,
+            onClick: onClick // eslint-disable-next-line react/jsx-props-no-spreading
+
+          }, hoverProps), RectProps)), Children.map(visibleChildren, cloneChild)]
+        }))
+      }))
+    }))
+  }));
+}
+TimelineTrack.propTypes = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  style: PropTypes.instanceOf(Object),
+
+  /**
+   * 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;
+  },
+  perspective: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number
+  }),
+  onClick: PropTypes.func,
+  onHover: PropTypes.func,
+  StageProps: PropTypes.instanceOf(Object),
+  LayerProps: PropTypes.instanceOf(Object),
+  GroupProps: PropTypes.instanceOf(Object),
+  RectProps: PropTypes.instanceOf(Object)
+};
+TimelineTrack.defaultProps = {
+  className: undefined,
+  style: {},
+  children: undefined,
+  perspective: undefined,
+  onClick: undefined,
+  onHover: undefined,
+  StageProps: {},
+  LayerProps: {},
+  GroupProps: {},
+  RectProps: {}
+};
+
+var css$3 = ":root {\n    --vdt-timeline-palette-primary:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\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: 100px;\n    padding: 0 8px;\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}\n\n.VdtTimelineRow-labelText {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    text-align: center;\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
+    }) // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, props), {}, {
+    children: [label && /*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4({
+      className: "VdtTimelineRow-label" // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, LabelProps), {}, {
+      children: /*#__PURE__*/jsx("span", _objectSpread$4(_objectSpread$4({
+        className: "VdtTimelineRow-labelText" // eslint-disable-next-line react/jsx-props-no-spreading
+
+      }, LabelTextProps), {}, {
+        children: label
+      }))
+    })), children]
+  }));
+}
+TimelineRow.propTypes = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  label: PropTypes.node,
+  LabelProps: PropTypes.instanceOf(Object),
+  LabelTextProps: PropTypes.instanceOf(Object)
+};
+TimelineRow.defaultProps = {
+  className: undefined,
+  children: undefined,
+  label: undefined,
+  LabelProps: {},
+  LabelTextProps: {}
+};
+
+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__*/
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    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 // eslint-disable-next-line react/jsx-props-no-spreading
+
+      }, TickTextProps)), /*#__PURE__*/jsx(Line, _objectSpread$3({
+        points: [x, y - tickSize, x, y],
+        stroke: color,
+        strokeWidth: tickWidth // eslint-disable-next-line react/jsx-props-no-spreading
+
+      }, 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) // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, 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 // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, StageProps), {}, {
+      children: /*#__PURE__*/jsx(Layer // eslint-disable-next-line react/jsx-props-no-spreading
+      , _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);
+            }
+          } // eslint-disable-next-line react/jsx-props-no-spreading
+
+        }, hoverProps), GroupProps), {}, {
+          children: [/*#__PURE__*/jsx(Rect, _objectSpread$3({
+            ref: trackRectRef,
+            x: 0,
+            y: 0,
+            width: width,
+            height: height // eslint-disable-next-line react/jsx-props-no-spreading
+
+          }, 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 = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+  onHover: PropTypes.func,
+  ticks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
+    time: PropTypes.number,
+    label: PropTypes.string
+  })), PropTypes.func]),
+  onWheel: PropTypes.func,
+  onDrag: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  start: PropTypes.number,
+  end: PropTypes.number,
+  perspective: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number
+  }),
+  timelineRef: PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  }),
+  StageProps: PropTypes.instanceOf(Object),
+  LayerProps: PropTypes.instanceOf(Object),
+  GroupProps: PropTypes.instanceOf(Object),
+  RectProps: PropTypes.instanceOf(Object),
+  TickGroupProps: PropTypes.instanceOf(Object),
+  TickTextProps: PropTypes.instanceOf(Object),
+  TickLineProps: PropTypes.instanceOf(Object)
+};
+TimelinePlayheadTrack.defaultProps = {
+  className: undefined,
+  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: {}
+};
+
+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; }
+
+/**
+ * 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:#ba67c8;;\n    --vdt-timeline-palette-primary-dark: rgb(130, 72, 140);\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 // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, 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);
+        }
+      } // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, StageProps), {}, {
+      children: /*#__PURE__*/jsx(Layer // eslint-disable-next-line react/jsx-props-no-spreading
+      , _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);
+          } // eslint-disable-next-line react/jsx-props-no-spreading
+
+        }, RectProps))
+      }))
+    }))
+  }));
+}
+TimelineScroll.propTypes = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  onScroll: PropTypes.func,
+  onClick: PropTypes.func,
+  start: PropTypes.number,
+  end: PropTypes.number,
+  perspective: PropTypes.shape({
+    start: PropTypes.number,
+    end: PropTypes.number
+  }),
+  style: PropTypes.instanceOf(Object),
+  StageProps: PropTypes.instanceOf(Object),
+  LayerProps: PropTypes.instanceOf(Object),
+  RectProps: PropTypes.instanceOf(Object)
+};
+TimelineScroll.defaultProps = {
+  className: undefined,
+  onScroll: undefined,
+  onClick: undefined,
+  start: undefined,
+  end: undefined,
+  perspective: undefined,
+  style: {},
+  StageProps: {},
+  LayerProps: {},
+  RectProps: {}
+};
+
+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);
+        }
+      }
+    } // eslint-disable-next-line react/jsx-props-no-spreading
+
+  }, props), {}, {
+    children: [children, /*#__PURE__*/jsx(TimelineRow, _objectSpread(_objectSpread({
+      className: clsx('VdtTimelineScrollContainer-timelineRow') // eslint-disable-next-line react/jsx-props-no-spreading
+
+    }, RowProps), {}, {
+      children: /*#__PURE__*/jsx(TimelineScroll // eslint-disable-next-line react/jsx-props-no-spreading
+      , _objectSpread({}, ScrollProps))
+    }))]
+  }));
+}
+TimelineScrollContainer.propTypes = {
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  getScrollDistance: PropTypes.func,
+  RowProps: PropTypes.instanceOf(Object),
+  ScrollProps: PropTypes.instanceOf(Object)
+};
+TimelineScrollContainer.defaultProps = {
+  className: undefined,
+  children: undefined,
+  getScrollDistance: defaultGetScrollDistance,
+  RowProps: {},
+  ScrollProps: {}
+};
+
+export { Timeline, TimelineContext, TimelinePlayhead, TimelinePlayheadTrack, TimelineProvider, TimelineRow, TimelineScroll, TimelineScrollContainer, TimelineTrack, TimelineWaveform, getStackOverlappingEventProps, useTimeline };