@micromag/core 0.3.541 → 0.3.547

package/lib/hooks.js

@@ -1,2402 +0,0 @@
-'use strict';
-
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var react = require('react');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var core$1 = require('@react-spring/core');
-var react$1 = require('@use-gesture/react');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var raf = require('raf');
-var isObject = require('lodash/isObject');
-var utils = require('@micromag/core/utils');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var core = require('@micromag/core');
-var forms = require('@folklore/forms');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var classNames = require('classnames');
-var screenfull = require('screenfull');
-var isArray = require('lodash/isArray');
-var createDebug = require('debug');
-var isString = require('lodash/isString');
-var contexts = require('@micromag/core/contexts');
-var reactIntl = require('react-intl');
-var dayjs = require('dayjs');
-var cssMediaquery = require('css-mediaquery');
-var clamp = require('lodash/clamp');
-
-function useActivityDetector() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$element = _ref.element,
-    providedElement = _ref$element === void 0 ? null : _ref$element,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$timeout = _ref.timeout,
-    timeoutDelay = _ref$timeout === void 0 ? 2000 : _ref$timeout;
-  var ref = react.useRef(providedElement);
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    detected = _useState2[0],
-    setDetected = _useState2[1];
-  var detectedRef = react.useRef(detected);
-  if (providedElement !== null && providedElement !== ref.current) {
-    ref.current = providedElement;
-  }
-  react.useEffect(function () {
-    var _ref$current = ref.current,
-      element = _ref$current === void 0 ? null : _ref$current;
-    if (element === null || disabled) {
-      return function () {};
-    }
-    var timeout = null;
-    function onActivity() {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-      if (!detectedRef.current) {
-        detectedRef.current = true;
-        setDetected(true);
-      }
-      timeout = setTimeout(function () {
-        detectedRef.current = false;
-        setDetected(false);
-      }, timeoutDelay);
-    }
-    element.addEventListener('keydown', onActivity);
-    element.addEventListener('mousedown', onActivity);
-    element.addEventListener('mousemove', onActivity);
-    element.addEventListener('mouseup', onActivity);
-    element.addEventListener('pointerdown', onActivity);
-    element.addEventListener('pointermove', onActivity);
-    element.addEventListener('pointerup', onActivity);
-    element.addEventListener('touchmove', onActivity);
-    element.addEventListener('touchstart', onActivity);
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-        timeout = null;
-      }
-      element.removeEventListener('keydown', onActivity);
-      element.removeEventListener('mousedown', onActivity);
-      element.removeEventListener('mousemove', onActivity);
-      element.removeEventListener('mouseup', onActivity);
-      element.removeEventListener('pointerdown', onActivity);
-      element.removeEventListener('pointermove', onActivity);
-      element.removeEventListener('pointerup', onActivity);
-      element.removeEventListener('touchmove', onActivity);
-      element.removeEventListener('touchstart', onActivity);
-    };
-  }, [providedElement, disabled, timeoutDelay]);
-  return {
-    ref: ref,
-    detected: detected
-  };
-}
-
-var useAnimationFrame = function useAnimationFrame(onFrame) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var requestRef = react.useRef(null);
-  var startTimeRef = react.useRef(null);
-  var callback = function callback(time) {
-    if (!startTimeRef.current) {
-      startTimeRef.current = time;
-    }
-    var progress = time - startTimeRef.current;
-    onFrame(progress);
-    requestRef.current = requestAnimationFrame(callback);
-  };
-  react.useEffect(function () {
-    if (!disabled) {
-      requestRef.current = requestAnimationFrame(callback);
-    }
-    return function () {
-      if (requestRef.current !== null) {
-        cancelAnimationFrame(requestRef.current);
-      }
-    };
-  }, [disabled]);
-};
-var useAnimationFrame$1 = useAnimationFrame;
-
-var useFormattedDate = function useFormattedDate() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$format = _ref.format,
-    format = _ref$format === void 0 ? null : _ref$format,
-    _ref$showToday = _ref.showToday,
-    showToday = _ref$showToday === void 0 ? true : _ref$showToday;
-  var intl = reactIntl.useIntl();
-  var today = dayjs();
-  return react.useCallback(function (date) {
-    var dateToFormat = isString(date) ? dayjs(date) : date;
-    if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
-      return intl.formatMessage({
-        id: "v4Qtl9",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Today"
-        }]
-      });
-    }
-    return intl.formatDate(dayjs(date).toDate(), _objectSpread({
-      year: 'numeric',
-      month: 'long',
-      day: '2-digit'
-    }, format));
-  }, [today, showToday, format]);
-};
-var useFormattedTime = function useFormattedTime() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref2$format = _ref2.format,
-    format = _ref2$format === void 0 ? null : _ref2$format,
-    _ref2$showNow = _ref2.showNow,
-    showNow = _ref2$showNow === void 0 ? true : _ref2$showNow,
-    _ref2$timeGap = _ref2.timeGap,
-    timeGap = _ref2$timeGap === void 0 ? 2 : _ref2$timeGap;
-  var intl = reactIntl.useIntl();
-  var now = dayjs();
-  return react.useCallback(function (date) {
-    var dateToFormat = isString(date) ? dayjs(date) : date;
-    if (showNow && dateToFormat.format('YYYY-MM-DD') === now.format('YYYY-MM-DD') && dateToFormat.hour() === now.hour() && dateToFormat.minute() > now.minute() - timeGap && dateToFormat.minute() < now.minute() + timeGap) {
-      return intl.formatMessage({
-        id: "3na7F8",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Now"
-        }]
-      });
-    }
-    return intl.formatTime(dateToFormat.toDate(), _objectSpread({
-      hour: 'numeric',
-      minute: 'numeric'
-    }, format));
-  }, [now, showNow, timeGap, format]);
-};
-
-var useDebounced = function useDebounced(handler, watchedValue) {
-  var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
-  react.useEffect(function () {
-    var timeoutHandler = setTimeout(function () {
-      if (handler !== null) {
-        handler(watchedValue);
-      }
-    }, delay);
-    return function () {
-      clearTimeout(timeoutHandler);
-    };
-  }, [watchedValue, delay]);
-};
-var useDebounced$1 = useDebounced;
-
-var eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
-var useDocumentEvent = utils.createUseEvent(eventsManager$1);
-var useDocumentEvent$1 = useDocumentEvent;
-
-function useDragProgress() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    wantedProgress = _ref.progress,
-    _ref$onTap = _ref.onTap,
-    onTap = _ref$onTap === void 0 ? null : _ref$onTap,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$dragDisabled = _ref.dragDisabled,
-    dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
-    _ref$computeProgress = _ref.computeProgress,
-    computeProgress = _ref$computeProgress === void 0 ? null : _ref$computeProgress,
-    _ref$onProgress = _ref.onProgress,
-    onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
-    _ref$springParams = _ref.springParams,
-    springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
-    _ref$dragOptions = _ref.dragOptions,
-    dragOptions = _ref$dragOptions === void 0 ? {
-      filterTaps: true
-    } : _ref$dragOptions;
-  var refDragging = react.useRef(false);
-  var refProgress = react.useRef(wantedProgress);
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    dragging = _useState2[0],
-    setDragging = _useState2[1];
-  var spring = react.useCallback(function () {
-    return _objectSpread({
-      progress: wantedProgress,
-      immediate: dragging || disabled
-    }, springParams);
-  }, [wantedProgress, disabled]);
-  var _useSpring = core$1.useSpring(spring),
-    _useSpring2 = _slicedToArray(_useSpring, 2),
-    progress = _useSpring2[0].progress,
-    api = _useSpring2[1];
-  var onDrag = react.useCallback(function (gestureState) {
-    var active = gestureState.active,
-      tap = gestureState.tap;
-    if (disabled) {
-      refDragging.current = false;
-      return;
-    }
-    if (tap) {
-      refDragging.current = false;
-      if (onTap !== null) onTap(gestureState);
-      return;
-    }
-    if (dragDisabled) {
-      refDragging.current = false;
-      return;
-    }
-    var newProgress = computeProgress(gestureState);
-    refDragging.current = active;
-    refProgress.current = newProgress;
-    if (active !== dragging) {
-      setDragging(active);
-    }
-    api.start({
-      progress: newProgress,
-      immediate: active
-    });
-    if (onProgress !== null) {
-      onProgress(newProgress, gestureState);
-    }
-  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
-  var bind = react$1.useDrag(onDrag, dragOptions);
-  react.useEffect(function () {
-    if (!refDragging.current && wantedProgress !== refProgress.current) {
-      refProgress.current = wantedProgress;
-      api.start({
-        progress: wantedProgress,
-        immediate: false
-      });
-    }
-  }, [wantedProgress]);
-  return {
-    bind: bind,
-    dragging: dragging,
-    progress: progress
-  };
-}
-
-var _excluded$3 = ["fields", "injectInFields"],
-  _excluded2 = ["fields"];
-
-// eslint-disable-next-line
-var useForm = function useForm() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$fields = _ref.fields,
-    providedFields = _ref$fields === void 0 ? [] : _ref$fields,
-    _ref$injectInFields = _ref.injectInFields,
-    injectInFields = _ref$injectInFields === void 0 ? false : _ref$injectInFields,
-    opts = _objectWithoutProperties(_ref, _excluded$3);
-  var fieldsNames = react.useMemo(function () {
-    return providedFields.length > 0 ? providedFields.map(function (_ref2) {
-      var name = _ref2.name;
-      return name;
-    }) : [];
-  }, [providedFields]);
-  var _useBaseForm = forms.useForm(_objectSpread({
-      fields: fieldsNames
-    }, opts)),
-    fields = _useBaseForm.fields,
-    form = _objectWithoutProperties(_useBaseForm, _excluded2);
-  return _objectSpread(_objectSpread({}, form), {}, {
-    fields: injectInFields ? providedFields.map(function (it) {
-      return _objectSpread(_objectSpread({}, it), fields[it.name] || null);
-    }) : providedFields
-  });
-};
-var useForm$1 = useForm;
-
-var useFormTransition = function useFormTransition() {
-  var paths = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var styles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var lastPageRef = react.useRef(paths || []);
-  var direction = react.useMemo(function () {
-    var currentPartsCount = paths.length;
-    if (lastPageRef.current) {
-      var previousPartsCount = lastPageRef.current.length;
-      lastPageRef.current = paths || [];
-      return currentPartsCount > previousPartsCount ? 'right' : 'left';
-    }
-    return null;
-  }, [paths]);
-  var name = react.useMemo(function () {
-    return {
-      enter: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.enterRight, direction === 'right'), styles.enterLeft, direction === 'left'), styles.enterTop, direction === 'top'), styles.enterBottom, direction === 'bottom')) || 'none',
-      enterActive: classNames(_defineProperty(_defineProperty({}, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), styles.enterActiveVertical, direction === 'top' || direction === 'bottom')) || 'none',
-      leave: styles.leave || 'none',
-      leaveActive: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.leaveActiveRight, direction === 'right'), styles.leaveActiveLeft, direction === 'left'), styles.leaveActiveTop, direction === 'top'), styles.leaveActiveBottom, direction === 'bottom')) || 'none'
-    };
-  }, [direction]);
-  return {
-    direction: direction,
-    name: name,
-    timeout: direction === 'left' || direction === 'right' ? 300 : 10
-  };
-};
-var useFormTransition$1 = useFormTransition;
-
-var useFullscreen = function useFullscreen(element) {
-  var enabled = screenfull.isEnabled;
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    active = _useState2[0],
-    setActive = _useState2[1];
-  var fullscreen = react.useCallback(function () {
-    if (screenfull.isEnabled) {
-      if (typeof element !== 'undefined' && element !== null) {
-        screenfull.request(element);
-      } else {
-        screenfull.request();
-      }
-    }
-  }, [element]);
-  var unFullscreen = react.useCallback(function () {
-    if (screenfull.isEnabled) {
-      screenfull.exit();
-    }
-  }, []);
-  var toggle = react.useCallback(function () {
-    if (!active) {
-      fullscreen();
-    } else {
-      unFullscreen();
-    }
-  }, [active, fullscreen, unFullscreen]);
-  react.useEffect(function () {
-    var onChange = function onChange() {
-      setActive(screenfull.isFullscreen);
-    };
-    if (screenfull.isEnabled) {
-      screenfull.on('change', onChange);
-    }
-    return function () {
-      if (screenfull.isEnabled) {
-        screenfull.off('change', onChange);
-      }
-    };
-  }, []);
-  return {
-    toggle: toggle,
-    fullscreen: fullscreen,
-    unFullscreen: unFullscreen,
-    active: active,
-    enabled: enabled
-  };
-};
-var useFullscreen$1 = useFullscreen;
-
-var _excluded$2 = ["entry"];
-var buildThresholdArray = function buildThresholdArray() {
-  return [0, 1.0];
-};
-var observersCache = new Map();
-var getOptionsKey = function getOptionsKey(_ref) {
-  var _ref$root = _ref.root,
-    root = _ref$root === void 0 ? null : _ref$root,
-    rootMargin = _ref.rootMargin,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? null : _ref$threshold;
-  return "root_".concat(root, "_rootMargin_").concat(rootMargin || null, "_threshold_").concat(threshold);
-};
-var createObserver = function createObserver(Observer) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var subscribers = [];
-  var addSubscriber = function addSubscriber(element, callback) {
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
-    if (currentSubscriber !== null) {
-      return subscribers.map(function (it) {
-        return it.element === element && it.callbacks.indexOf(callback) === -1 ? _objectSpread(_objectSpread({}, it), {}, {
-          callbacks: [].concat(_toConsumableArray(it.callbacks), [callback])
-        }) : it;
-      }).filter(function (it) {
-        return it.callbacks.length > 0;
-      });
-    }
-    return [].concat(_toConsumableArray(subscribers), [{
-      element: element,
-      callbacks: [callback]
-    }]);
-  };
-  var removeSubscriber = function removeSubscriber(element, callback) {
-    return subscribers.map(function (it) {
-      return it.element === element ? _objectSpread(_objectSpread({}, it), {}, {
-        callbacks: it.callbacks.filter(function (subCallback) {
-          return subCallback !== callback;
-        })
-      }) : it;
-    }).filter(function (it) {
-      return it.callbacks.length > 0;
-    });
-  };
-  var onUpdate = function onUpdate(entries) {
-    entries.forEach(function (entry) {
-      subscribers.forEach(function (_ref2) {
-        var element = _ref2.element,
-          callbacks = _ref2.callbacks;
-        if (element === entry.target) {
-          callbacks.forEach(function (callback) {
-            callback(entry);
-          });
-        }
-      });
-    });
-  };
-  var observer = new Observer(onUpdate, options);
-  var unsubscribe = function unsubscribe(element) {
-    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    subscribers = removeSubscriber(element, callback);
-    if (typeof observer.unobserve === 'undefined') {
-      observer.disconnect();
-      subscribers.forEach(function (subscriber) {
-        observer.observe(subscriber.element);
-      });
-      return;
-    }
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
-    if (currentSubscriber === null) {
-      observer.unobserve(element);
-    }
-  };
-  var subscribe = function subscribe(element, callback) {
-    var currentSubscriber = subscribers.find(function (it) {
-      return it.element === element;
-    }) || null;
-    subscribers = addSubscriber(element, callback);
-    if (currentSubscriber === null) {
-      observer.observe(element);
-    }
-  };
-  return {
-    subscribe: subscribe,
-    unsubscribe: unsubscribe,
-    observer: observer
-  };
-};
-var getObserver = function getObserver(Observer) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var observerKey = getOptionsKey(options);
-  if (!observersCache.has(Observer)) {
-    observersCache.set(Observer, {});
-  }
-  var observers = observersCache.get(Observer);
-  if (typeof observers[observerKey] === 'undefined') {
-    observers[observerKey] = createObserver(Observer, options);
-    observersCache.set(Observer, observers);
-  }
-  return observers[observerKey];
-};
-var useObserver = function useObserver(Observer) {
-  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var initialEntry = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _opts$root = opts.root,
-    root = _opts$root === void 0 ? null : _opts$root,
-    _opts$rootMargin = opts.rootMargin,
-    rootMargin = _opts$rootMargin === void 0 ? null : _opts$rootMargin,
-    _opts$threshold = opts.threshold,
-    threshold = _opts$threshold === void 0 ? null : _opts$threshold,
-    _opts$disabled = opts.disabled,
-    disabled = _opts$disabled === void 0 ? false : _opts$disabled;
-  var _useState = react.useState(initialEntry),
-    _useState2 = _slicedToArray(_useState, 2),
-    entry = _useState2[0],
-    setEntry = _useState2[1];
-  var nodeRef = react.useRef(null);
-  var currentElement = react.useRef(null);
-  var elementChanged = nodeRef.current !== currentElement.current;
-  react.useEffect(function () {
-    var nodeElement = nodeRef.current;
-    var callback = function callback(newEntry) {
-      return setEntry(newEntry);
-    };
-    var unsubscribe = null;
-    if (nodeElement !== null) {
-      var newOpts = {};
-      if (root !== null) {
-        newOpts.root = root;
-      }
-      if (rootMargin !== null) {
-        newOpts.rootMargin = rootMargin;
-      }
-      if (threshold !== null) {
-        newOpts.threshold = threshold;
-      }
-      var _getObserver = getObserver(Observer, newOpts),
-        subscribe = _getObserver.subscribe,
-        localUnsubscribe = _getObserver.unsubscribe;
-      unsubscribe = localUnsubscribe;
-      subscribe(nodeElement, callback);
-    }
-    currentElement.current = nodeElement;
-    return function () {
-      if (unsubscribe !== null) {
-        unsubscribe(nodeElement, callback);
-      }
-    };
-  }, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
-  return {
-    ref: nodeRef,
-    entry: entry
-  };
-};
-
-/**
- * Intersection Observer
- */
-var thresholdArray = buildThresholdArray();
-var intersectionObserverInitialEntry = {
-  target: null,
-  time: null,
-  isVisible: false,
-  isIntersecting: false,
-  intersectionRatio: 0,
-  intersectionRect: null,
-  boundingClientRect: null,
-  rootBounds: null
-};
-var useIntersectionObserver = function useIntersectionObserver() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref3$root = _ref3.root,
-    root = _ref3$root === void 0 ? null : _ref3$root,
-    _ref3$rootMargin = _ref3.rootMargin,
-    rootMargin = _ref3$rootMargin === void 0 ? '0px' : _ref3$rootMargin,
-    _ref3$threshold = _ref3.threshold,
-    threshold = _ref3$threshold === void 0 ? thresholdArray : _ref3$threshold,
-    _ref3$disabled = _ref3.disabled,
-    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled;
-  return useObserver(typeof window !== 'undefined' ? IntersectionObserver : null, {
-    root: root,
-    rootMargin: rootMargin,
-    threshold: threshold,
-    disabled: disabled
-  }, intersectionObserverInitialEntry);
-};
-
-/**
- * Resize Observer
- */
-var resizeObserverInitialEntry = {
-  target: null,
-  contentRect: null,
-  contentBoxSize: null,
-  borderBoxSize: null
-};
-var useResizeObserver = function useResizeObserver() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled;
-  return useObserver(typeof window !== 'undefined' ? ResizeObserver : null, {
-    disabled: disabled
-  }, resizeObserverInitialEntry);
-};
-var useDimensionObserver = function useDimensionObserver() {
-  var _useResizeObserver = useResizeObserver.apply(void 0, arguments),
-    entry = _useResizeObserver.entry,
-    rest = _objectWithoutProperties(_useResizeObserver, _excluded$2);
-  var _ref5 = entry || {},
-    _ref5$contentRect = _ref5.contentRect,
-    contentRect = _ref5$contentRect === void 0 ? null : _ref5$contentRect,
-    _ref5$borderBoxSize = _ref5.borderBoxSize,
-    borderBoxSize = _ref5$borderBoxSize === void 0 ? null : _ref5$borderBoxSize;
-  var _ref6 = contentRect || {},
-    _ref6$width = _ref6.width,
-    width = _ref6$width === void 0 ? 0 : _ref6$width,
-    _ref6$height = _ref6.height,
-    height = _ref6$height === void 0 ? 0 : _ref6$height;
-  var _ref7 = isArray(borderBoxSize) ? borderBoxSize[0] || {} : borderBoxSize || {},
-    _ref7$blockSize = _ref7.blockSize,
-    blockSize = _ref7$blockSize === void 0 ? null : _ref7$blockSize,
-    _ref7$inlineSize = _ref7.inlineSize,
-    inlineSize = _ref7$inlineSize === void 0 ? null : _ref7$inlineSize;
-  return _objectSpread(_objectSpread({}, rest), {}, {
-    entry: entry,
-    width: inlineSize || width,
-    height: blockSize || height
-  });
-};
-
-var useIsVisible = function useIsVisible() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    rootMargin = _ref.rootMargin,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
-    _ref$persist = _ref.persist,
-    persist = _ref$persist === void 0 ? false : _ref$persist;
-  var _useIntersectionObser = useIntersectionObserver({
-      rootMargin: rootMargin,
-      threshold: threshold
-    }),
-    ref = _useIntersectionObser.ref,
-    isIntersecting = _useIntersectionObser.entry.isIntersecting;
-  var wasIntersecting = react.useRef(isIntersecting);
-  if (isIntersecting && !wasIntersecting.current) {
-    wasIntersecting.current = isIntersecting;
-  }
-  var isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
-  return {
-    ref: ref,
-    visible: isVisible
-  };
-};
-var useIsVisible$1 = useIsVisible;
-
-var fontsMap = {
-  loading: [],
-  active: []
-};
-var isFontLoading = function isFontLoading(name) {
-  return fontsMap.loading.indexOf(name) !== -1;
-};
-var isFontActive = function isFontActive(name) {
-  return fontsMap.active.indexOf(name) !== -1;
-};
-var addFontLoading = function addFontLoading(name) {
-  fontsMap.active = fontsMap.active.filter(function (it) {
-    return it !== name;
-  });
-  fontsMap.loading = [].concat(_toConsumableArray(fontsMap.loading), [name]);
-};
-var removeFontLoading = function removeFontLoading(name) {
-  fontsMap.loading = fontsMap.loading.filter(function (it) {
-    return it !== name;
-  });
-};
-var addFontActive = function addFontActive(name) {
-  fontsMap.loading = fontsMap.loading.filter(function (it) {
-    return it !== name;
-  });
-  fontsMap.active = [].concat(_toConsumableArray(fontsMap.active), [name]);
-};
-var useLoadedFonts = function useLoadedFonts(fonts) {
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    loaded = _useState2[0],
-    setLoaded = _useState2[1];
-  react.useEffect(function () {
-    var config = fonts.reduce(function (newConfig, font) {
-      var _ref = isObject(font) ? font : {
-          type: 'system',
-          name: font
-        },
-        type = _ref.type,
-        name = _ref.name,
-        _ref$variants = _ref.variants,
-        variants = _ref$variants === void 0 ? [] : _ref$variants;
-      if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
-        return _objectSpread(_objectSpread({}, newConfig), {}, _defineProperty({}, type, {
-          families: [].concat(_toConsumableArray(newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? [name, (variants || []).filter(function (it) {
-            return it !== null;
-          }).join(',')].filter(function (it) {
-            return it !== null && it.length > 0;
-          }).join(':') : [name, (variants !== null ? [{
-            fvd: 'n4'
-          }].concat(_toConsumableArray(variants)) : []).map(function (_ref2) {
-            var _ref2$fvd = _ref2.fvd,
-              fvd = _ref2$fvd === void 0 ? null : _ref2$fvd,
-              _ref2$weight = _ref2.weight,
-              weight = _ref2$weight === void 0 ? null : _ref2$weight,
-              _ref2$style = _ref2.style,
-              style = _ref2$style === void 0 ? null : _ref2$style;
-            return fvd || [style, weight].filter(function (it) {
-              return it !== null;
-            }).map(function (it) {
-              return "".concat(it).substr(0, 1);
-            }).join('');
-          }).filter(function (it) {
-            return it !== null && it.length > 0;
-          }).join(',')].filter(function (it) {
-            return it !== null && it.length > 0;
-          }).join(':')])
-        }));
-      }
-      return newConfig;
-    }, null);
-    var hasConfig = config !== null;
-    if (hasConfig && typeof window !== 'undefined') {
-      import('webfontloader').then(function (_ref3) {
-        var WebFont = _ref3["default"];
-        return WebFont.load(_objectSpread(_objectSpread({}, config), {}, {
-          timeout: 3000,
-          active: function active() {
-            return setLoaded(true);
-          },
-          fontloading: function fontloading(name) {
-            return addFontLoading(name);
-          },
-          fontactive: function fontactive(name) {
-            return addFontActive(name);
-          },
-          fontinactive: function fontinactive(name) {
-            return removeFontLoading(name);
-          }
-        }));
-      });
-    } else {
-      setLoaded(true);
-    }
-  }, [fonts, setLoaded]);
-  return {
-    loaded: loaded
-  };
-};
-var useLoadedFonts$1 = useLoadedFonts;
-
-var isTouchEvent = function isTouchEvent(event) {
-  return 'touches' in event;
-};
-var preventDefault = function preventDefault(event) {
-  if (!isTouchEvent(event)) return false;
-  if (event.touches.length < 2 && event.preventDefault) {
-    event.preventDefault();
-  }
-  return false;
-};
-var preventClickDefault = function preventClickDefault(e) {
-  if (e.preventDefault) {
-    e.preventDefault();
-  }
-  if (e.stopPropagation) {
-    e.stopPropagation();
-  }
-};
-var useLongPress = function useLongPress() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$onLongPress = _ref.onLongPress,
-    onLongPress = _ref$onLongPress === void 0 ? null : _ref$onLongPress,
-    _ref$onLongPressStart = _ref.onLongPressStart,
-    onLongPressStart = _ref$onLongPressStart === void 0 ? null : _ref$onLongPressStart,
-    _ref$onLongPressEnd = _ref.onLongPressEnd,
-    onLongPressEnd = _ref$onLongPressEnd === void 0 ? null : _ref$onLongPressEnd,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
-    _ref$shouldPreventDef = _ref.shouldPreventDefault,
-    shouldPreventDefault = _ref$shouldPreventDef === void 0 ? true : _ref$shouldPreventDef,
-    _ref$shouldStopPropag = _ref.shouldStopPropagation,
-    shouldStopPropagation = _ref$shouldStopPropag === void 0 ? false : _ref$shouldStopPropag,
-    _ref$preventClick = _ref.preventClick,
-    preventClick = _ref$preventClick === void 0 ? false : _ref$preventClick,
-    _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? 350 : _ref$delay;
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    pressed = _useState2[0],
-    setPressed = _useState2[1];
-  var _useState3 = react.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    triggered = _useState4[0],
-    setTriggered = _useState4[1];
-  var timeout = react.useRef(null);
-  var target = react.useRef(null);
-  var start = react.useCallback(function (event, props) {
-    setPressed(true);
-    if (shouldStopPropagation) {
-      event.stopPropagation();
-    }
-    if (event.target !== null) {
-      target.current = event.target;
-    }
-    if (onLongPressStart !== null) {
-      onLongPressStart(event, props);
-    }
-    timeout.current = setTimeout(function () {
-      if (shouldPreventDefault && target.current !== null) {
-        target.current.addEventListener('touchend', preventDefault, {
-          passive: false
-        });
-        target.current.addEventListener('click', preventClickDefault, {
-          passive: false
-        });
-      }
-      setTriggered(true);
-      if (onLongPress !== null) {
-        onLongPress(event, props);
-        setPressed(false);
-      }
-      timeout.current = null;
-    }, delay);
-  }, [onLongPress, onLongPressStart, delay, setPressed, shouldPreventDefault]);
-  var clear = react.useCallback(function (event, props) {
-    var shouldTriggerClick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    setPressed(false);
-    if (preventClick && triggered) {
-      return;
-    }
-    if (timeout.current !== null) {
-      clearTimeout(timeout.current);
-    } else if (shouldPreventDefault && target.current !== null) {
-      preventDefault(event);
-      target.current.removeEventListener('touchend', preventDefault);
-      setTimeout(function () {
-        target.current.removeEventListener('click', preventClickDefault);
-      }, 10);
-    }
-    if (shouldTriggerClick && !triggered && onClick !== null) {
-      onClick(props);
-    }
-    onLongPressEnd(event, props, triggered);
-    setTriggered(false);
-  }, [shouldPreventDefault, onClick, onLongPressEnd, setPressed, triggered, preventClick]);
-  var bind = function bind() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    return {
-      onMouseDown: function onMouseDown(e) {
-        return start(e, props);
-      },
-      onTouchStart: function onTouchStart(e) {
-        return start(e, props);
-      },
-      onMouseUp: function onMouseUp(e) {
-        return clear(e, props);
-      },
-      onMouseLeave: function onMouseLeave(e) {
-        return clear(e, props, false);
-      },
-      onTouchEnd: function onTouchEnd(e) {
-        return clear(e, props);
-      }
-    };
-  };
-  return {
-    bind: bind,
-    pressed: pressed,
-    triggered: triggered
-  };
-};
-var useLongPress$1 = useLongPress;
-
-var progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
-var useMediaApi = function useMediaApi() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url,
-    _ref$onTimeUpdate = _ref.onTimeUpdate,
-    onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
-    _ref$onProgressStep = _ref.onProgressStep,
-    onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
-    _ref$onDurationChange = _ref.onDurationChange,
-    onDurationChange = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
-    _ref$onVolumeChange = _ref.onVolumeChange,
-    onVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
-    _ref$onPlay = _ref.onPlay,
-    onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
-    _ref$onPause = _ref.onPause,
-    onPause = _ref$onPause === void 0 ? null : _ref$onPause,
-    _ref$onEnded = _ref.onEnded,
-    onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
-    _ref$onSeeked = _ref.onSeeked,
-    onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
-    _ref$onSuspend = _ref.onSuspend,
-    onSuspend = _ref$onSuspend === void 0 ? null : _ref$onSuspend,
-    _ref$onLoadStart = _ref.onLoadStart,
-    onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
-    _ref$onCanPlayThough = _ref.onCanPlayThough,
-    onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough,
-    _ref$onCanPlay = _ref.onCanPlay,
-    onCanPlay = _ref$onCanPlay === void 0 ? null : _ref$onCanPlay,
-    _ref$onLoadedData = _ref.onLoadedData,
-    onLoadedData = _ref$onLoadedData === void 0 ? null : _ref$onLoadedData,
-    _ref$onLoadedMetadata = _ref.onLoadedMetadata,
-    onLoadedMetadata = _ref$onLoadedMetadata === void 0 ? null : _ref$onLoadedMetadata;
-  var ref = react.useRef(null);
-  var _useState = react.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentTime = _useState2[0],
-    setCurrentTime = _useState2[1];
-  var _useState3 = react.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    duration = _useState4[0],
-    setDuration = _useState4[1];
-  var _useState5 = react.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    playing = _useState6[0],
-    setPlaying = _useState6[1];
-  var _useState7 = react.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    ready = _useState8[0],
-    setReady = _useState8[1];
-  var _useState9 = react.useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    dataReady = _useState10[0],
-    setDataReady = _useState10[1];
-  var _useState11 = react.useState(true),
-    _useState12 = _slicedToArray(_useState11, 2),
-    initialPlay = _useState12[0],
-    setInitialPlay = _useState12[1];
-  var _useState13 = react.useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    suspended = _useState14[0],
-    setSuspended = _useState14[1];
-  var progressStepsReached = react.useRef({});
-  var paused = !playing;
-
-  // Exposed methods
-
-  var play = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.play();
-    }
-  }, []);
-  var pause = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.pause();
-    }
-  }, []);
-  var stop = react.useCallback(function () {
-    var media = ref.current;
-    if (media !== null) {
-      media.pause();
-      media.currentTime = 0;
-    }
-  }, []);
-  var seek = react.useCallback(function (time) {
-    var media = ref.current;
-    if (media !== null) {
-      media.currentTime = time;
-    }
-  }, []);
-
-  // const mute = useCallback(() => {
-  //     const { current: media } = ref;
-  //     if (media !== null) {
-  //         media.muted = true;
-  //     }
-  // }, []);
-
-  // const unMute = useCallback(() => {
-  //     const { current: media } = ref;
-  //     if (media !== null) {
-  //         media.muted = false;
-  //     }
-  // }, []);
-
-  // Media events callbacks
-
-  var onCustomPlay = react.useCallback(function () {
-    if (onPlay !== null) {
-      onPlay({
-        initial: initialPlay
-      });
-    }
-    if (initialPlay) {
-      setInitialPlay(false);
-    }
-    setPlaying(true);
-    setSuspended(false);
-  }, [initialPlay, setPlaying, onPlay]);
-  var onCustomPlaying = react.useCallback(function () {
-    setPlaying(true);
-    setSuspended(false);
-  }, []);
-  var onCustomPause = react.useCallback(function (e) {
-    var eventMedia = e.currentTarget;
-    setPlaying(false);
-    if (onPause !== null) {
-      onPause({
-        midway: eventMedia.currentTime > 0 && eventMedia.currentTime < eventMedia.duration
-      });
-    }
-  }, [setPlaying, onPause]);
-  var onCustomEnded = react.useCallback(function (e) {
-    var eventMedia = e.currentTarget;
-    eventMedia.currentTime = 0;
-    if (onEnded !== null) {
-      onEnded();
-    }
-    setInitialPlay(true);
-  }, [setInitialPlay, onEnded]);
-  var onCustomTimeUpdate = react.useCallback(function (e) {
-    var eventMedia = e.currentTarget;
-    setCurrentTime(eventMedia.currentTime);
-    if (onTimeUpdate !== null) {
-      onTimeUpdate(eventMedia.currentTime);
-    }
-    var progress = eventMedia.currentTime / eventMedia.duration;
-    var currentSteps = progressStepsReached.current;
-    var stepsToTrack = progressSteps.filter(function (step) {
-      return progress > step && typeof currentSteps[step] === 'undefined';
-    });
-    stepsToTrack.forEach(function (step) {
-      if (onProgressStep !== null) {
-        onProgressStep(step);
-      }
-      currentSteps[step] = true;
-    });
-  }, [setCurrentTime, onTimeUpdate, onProgressStep]);
-  var onCustomDurationChange = react.useCallback(function (e) {
-    var eventMedia = e.currentTarget;
-    setDuration(eventMedia.duration);
-    if (onDurationChange !== null) {
-      onDurationChange(eventMedia.duration);
-    }
-  }, [setDuration, onDurationChange]);
-  var onCustomSeeked = react.useCallback(function (e) {
-    var eventMedia = e.currentTarget;
-    if (onSeeked !== null) {
-      onSeeked(eventMedia.currentTime);
-    }
-  }, [onSeeked]);
-  var onCustomVolumeChange = react.useCallback(function (e) {
-    var eventMedia = e.currentTarget;
-
-    // setMuted(eventMedia.muted);
-    if (onVolumeChange !== null) {
-      onVolumeChange(eventMedia.volume);
-    }
-  }, [onVolumeChange]);
-  var onCustomLoadStart = react.useCallback(function () {
-    if (onLoadStart !== null) {
-      onLoadStart();
-    }
-  }, [setReady, onLoadStart]);
-  var onCustomCanPlayThrough = react.useCallback(function () {
-    setReady(true);
-    if (onCanPlayThough !== null) {
-      onCanPlayThough();
-    }
-  }, [setReady, onCanPlayThough]);
-  var onCustomCanPlay = react.useCallback(function () {
-    setReady(true);
-    if (onCanPlay !== null) {
-      onCanPlay();
-    }
-  }, [setReady, onCanPlay]);
-  var onCustomLoadedMetadata = react.useCallback(function () {
-    setReady(true);
-    if (onLoadedMetadata !== null) {
-      onLoadedMetadata();
-    }
-  }, [setReady, onLoadedMetadata]);
-  var onCustomLoadedData = react.useCallback(function () {
-    setDataReady(true);
-    if (onLoadedData !== null) {
-      onLoadedData();
-    }
-  }, [setDataReady, onLoadedData]);
-  var onCustomSuspended = react.useCallback(function () {
-    setSuspended(true);
-    if (onSuspend !== null) {
-      onSuspend();
-    }
-  }, [setSuspended, onSuspended]);
-  react.useEffect(function () {
-    var _ref$current = ref.current,
-      media = _ref$current === void 0 ? null : _ref$current;
-
-    // console.log('actions', url);
-
-    if (media !== null) {
-      media.addEventListener('volumechange', onCustomVolumeChange);
-      media.addEventListener('play', onCustomPlay);
-      media.addEventListener('playing', onCustomPlaying);
-      media.addEventListener('pause', onCustomPause);
-      media.addEventListener('ended', onCustomEnded);
-      media.addEventListener('seeked', onCustomSeeked);
-      // media.addEventListener('loadstart', onCustomLoadStart);
-      // media.addEventListener('canplaythrough', onCustomCanPlayThrough);
-      // media.addEventListener('canplay', onCustomCanPlay);
-      // media.addEventListener('loadedmetadata', onCustomLoadedMetadata);
-      // media.addEventListener('loadeddata', onCustomLoadedData);
-    }
-    return function () {
-      if (media !== null) {
-        media.removeEventListener('volumechange', onCustomVolumeChange);
-        media.removeEventListener('play', onCustomPlay);
-        media.removeEventListener('playing', onCustomPlaying);
-        media.removeEventListener('pause', onCustomPause);
-        media.removeEventListener('ended', onCustomEnded);
-        media.removeEventListener('seeked', onCustomSeeked);
-        // media.removeEventListener('loadstart', onCustomLoadStart);
-        // media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
-        // media.removeEventListener('canplay', onCustomCanPlay);
-        // media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
-      }
-    };
-  }, [url, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomSuspended
-  // onCustomLoadStart,
-  // onCustomCanPlayThrough,
-  // onCustomCanPlay,
-  // onCustomLoadedMetadata,
-  ]);
-  react.useEffect(function () {
-    var _ref$current2 = ref.current,
-      media = _ref$current2 === void 0 ? null : _ref$current2;
-    if (media !== null) {
-      media.addEventListener('loadstart', onCustomLoadStart);
-      media.addEventListener('canplaythrough', onCustomCanPlayThrough);
-      media.addEventListener('canplay', onCustomCanPlay);
-      media.addEventListener('loadedmetadata', onCustomLoadedMetadata);
-      media.addEventListener('loadeddata', onCustomLoadedData);
-      media.addEventListener('suspend', onCustomSuspended);
-    }
-    return function () {
-      if (media !== null) {
-        media.removeEventListener('loadstart', onCustomLoadStart);
-        media.removeEventListener('canplaythrough', onCustomCanPlayThrough);
-        media.removeEventListener('canplay', onCustomCanPlay);
-        media.removeEventListener('loadedmetadata', onCustomLoadedMetadata);
-        media.removeEventListener('suspend', onCustomSuspended);
-      }
-    };
-  }, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]);
-
-  // Duration
-  react.useEffect(function () {
-    var _ref$current3 = ref.current,
-      media = _ref$current3 === void 0 ? null : _ref$current3;
-    if (media !== null) {
-      media.addEventListener('durationchange', onCustomDurationChange);
-    }
-    return function () {
-      if (media !== null) {
-        media.removeEventListener('durationchange', onCustomDurationChange);
-      }
-    };
-  }, [url, onCustomDurationChange]);
-
-  // Timeupdate
-  react.useEffect(function () {
-    var _ref$current4 = ref.current,
-      media = _ref$current4 === void 0 ? null : _ref$current4;
-    // console.log('timeupdate', url);
-    if (media !== null) {
-      media.addEventListener('timeupdate', onCustomTimeUpdate);
-    }
-    return function () {
-      if (media !== null) {
-        media.removeEventListener('timeupdate', onCustomTimeUpdate);
-      }
-    };
-  }, [url, onCustomTimeUpdate, onCustomDurationChange]);
-  react.useEffect(function () {
-    var _ref$current5 = ref.current,
-      media = _ref$current5 === void 0 ? null : _ref$current5;
-    if (media !== null && media.readyState > 1) {
-      setDataReady(true);
-    } else {
-      setDataReady(false);
-    }
-    if (media !== null && media.readyState > 3) {
-      setReady(true);
-    } else {
-      setReady(false);
-    }
-  }, [url]);
-  return {
-    ref: ref,
-    play: play,
-    pause: pause,
-    stop: stop,
-    seek: seek,
-    currentTime: currentTime,
-    duration: duration,
-    playing: playing,
-    paused: paused,
-    ready: ready,
-    dataReady: dataReady,
-    suspended: suspended
-  };
-};
-var useMediaApi$1 = useMediaApi;
-
-var useMediaBuffering = function useMediaBuffering() {
-  var mediaElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var _useState = react.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    buffering = _useState2[0],
-    setBuffering = _useState2[1];
-  react.useEffect(function () {
-    if (mediaElement === null) {
-      return function () {};
-    }
-    function onBufferingEvent(e) {
-      // networkstate
-      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
-        // The user agent is actively trying to download data.
-        setBuffering(true);
-      }
-
-      // readystate
-      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
-        // There is not enough data to keep playing from this point
-        setBuffering(true);
-      }
-    }
-    function onPlay() {
-      setBuffering(false);
-    }
-    function onPlaying() {
-      setBuffering(false);
-    }
-    function onPause() {
-      setBuffering(false);
-    }
-    function onEnded() {
-      setBuffering(false);
-    }
-    mediaElement.addEventListener('waiting', onBufferingEvent);
-    mediaElement.addEventListener('stalled', onBufferingEvent);
-    mediaElement.addEventListener('play', onPlay);
-    mediaElement.addEventListener('playing', onPlaying);
-    mediaElement.addEventListener('pause', onPause);
-    mediaElement.addEventListener('ended', onEnded);
-    return function () {
-      mediaElement.removeEventListener('waiting', onBufferingEvent);
-      mediaElement.removeEventListener('stalled', onBufferingEvent);
-      mediaElement.removeEventListener('play', onPlay);
-      mediaElement.removeEventListener('playing', onPlaying);
-      mediaElement.removeEventListener('pause', onPause);
-      mediaElement.removeEventListener('ended', onEnded);
-    };
-  }, [mediaElement]);
-
-  // useEffect(() => {
-  //     if (mediaElement === null) {
-  //         return () => {};
-  //     }
-  //     let lastPlayPos = 0;
-  //     let currentPlayPos = 0;
-  //     let bufferingDetected = false;
-
-  //     function checkBuffering(player, checkInterval) {
-  //         currentPlayPos = player.currentTime;
-
-  //         // checking offset should be at most the check interval
-  //         // but allow for some margin
-  //         const offset = (checkInterval - 20) / 1000;
-
-  //         // if no buffering is currently detected,
-  //         // and the position does not seem to increase
-  //         // and the player isn't manually paused...
-  //         if (!bufferingDetected && currentPlayPos < lastPlayPos + offset && !player.paused) {
-  //             console.log('buffering!');
-  //             bufferingDetected = true;
-  //         }
-
-  //         // if we were buffering but the player has advanced,
-  //         // then there is no buffering
-  //         if (bufferingDetected && currentPlayPos > lastPlayPos + offset && !player.paused) {
-  //             console.log('not buffering anymore!');
-  //             bufferingDetected = false;
-  //         }
-  //         lastPlayPos = currentPlayPos;
-
-  //         return bufferingDetected;
-  //     }
-
-  //     const id = setInterval(() => {
-  //         setBuffering(checkBuffering(mediaElement, interval));
-  //     }, interval);
-
-  //     return () => {
-  //         clearInterval(id);
-  //     };
-  // }, [mediaElement, interval]);
-
-  return {
-    buffering: buffering
-  };
-};
-var useMediaBuffering$1 = useMediaBuffering;
-
-var useMediaState = function useMediaState() {
-  var mediaElement = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$playing = _ref.playing,
-    wantedPlaying = _ref$playing === void 0 ? false : _ref$playing,
-    _ref$muted = _ref.muted,
-    wantedMuted = _ref$muted === void 0 ? false : _ref$muted;
-  var debug = react.useMemo(function () {
-    var mediaKey = mediaElement !== null && isString(mediaElement.src) ? mediaElement.src.split('/')[mediaElement.src.split('/').length - 1].split('#')[0] || null : null;
-    return createDebug(mediaKey !== null ? "micromag:media:".concat(mediaKey) : 'micromag:media');
-  }, [mediaElement]);
-  var _useState = react.useState(wantedPlaying),
-    _useState2 = _slicedToArray(_useState, 2),
-    playing = _useState2[0],
-    setPlaying = _useState2[1];
-  var _useState3 = react.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    buffering = _useState4[0],
-    setBuffering = _useState4[1];
-  var _useState5 = react.useState(mediaElement !== null && (mediaElement.muted || mediaElement.volume === 0) || wantedMuted),
-    _useState6 = _slicedToArray(_useState5, 2),
-    muted = _useState6[0],
-    setMuted = _useState6[1];
-  react.useEffect(function () {
-    debug('State change %o', {
-      playing: playing,
-      buffering: buffering,
-      muted: muted
-    });
-  }, [playing, buffering, muted, debug]);
-  react.useEffect(function () {
-    if (mediaElement === null) {
-      setPlaying(wantedPlaying);
-      setBuffering(false);
-      setMuted(wantedMuted);
-      debug('Unset media: %o', {
-        wantedPlaying: wantedPlaying,
-        wantedMuted: wantedMuted
-      });
-    }
-  }, [mediaElement, debug, wantedPlaying, wantedMuted]);
-  react.useEffect(function () {
-    if (mediaElement === null) {
-      return function () {};
-    }
-    function onBufferingEvent(e) {
-      // networkstate
-      if (mediaElement.networkState === mediaElement.NETWORK_LOADING) {
-        debug('onBufferingEvent: NETWORK_LOADING');
-        setBuffering(true);
-      }
-
-      // readystate
-      if (mediaElement.readyState < mediaElement.HAVE_FUTURE_DATA) {
-        debug('onBufferingEvent: HAVE_FUTURE_DATA');
-        setBuffering(true);
-      }
-    }
-    function onPlay() {
-      debug('onPlay');
-      setPlaying(true);
-      setBuffering(false);
-    }
-    function onPlaying() {
-      debug('onPlaying');
-      setPlaying(true);
-      setBuffering(false);
-    }
-    function onTimeUpdate(e) {
-      debug('onTimeUpdate');
-      setPlaying(!e.currentTarget.paused && !e.currentTarget.ended);
-      setBuffering(false);
-    }
-    function onPause() {
-      debug('onPause');
-      setPlaying(false);
-      setBuffering(false);
-    }
-    function onEnded() {
-      debug('onEnded');
-      setPlaying(false);
-      setBuffering(false);
-    }
-    function onSuspend(e) {
-      debug('onSuspend');
-      setPlaying(!e.currentTarget.paused && !e.currentTarget.ended);
-      setBuffering(false);
-    }
-    function onVolumeChange() {
-      setMuted(mediaElement.muted || mediaElement.volume === 0);
-    }
-    if (mediaElement.paused || mediaElement.ended) {
-      setPlaying(false);
-    }
-    if (muted !== mediaElement.muted) {
-      setMuted(mediaElement.muted);
-    }
-    mediaElement.addEventListener('waiting', onBufferingEvent);
-    mediaElement.addEventListener('stalled', onBufferingEvent);
-    mediaElement.addEventListener('timeupdate', onTimeUpdate);
-    mediaElement.addEventListener('play', onPlay);
-    mediaElement.addEventListener('playing', onPlaying);
-    mediaElement.addEventListener('pause', onPause);
-    mediaElement.addEventListener('suspend', onSuspend);
-    mediaElement.addEventListener('ended', onEnded);
-    mediaElement.addEventListener('volumechange', onVolumeChange);
-    return function () {
-      mediaElement.removeEventListener('waiting', onBufferingEvent);
-      mediaElement.removeEventListener('stalled', onBufferingEvent);
-      mediaElement.removeEventListener('timeupdate', onTimeUpdate);
-      mediaElement.removeEventListener('play', onPlay);
-      mediaElement.removeEventListener('playing', onPlaying);
-      mediaElement.removeEventListener('pause', onPause);
-      mediaElement.removeEventListener('suspend', onSuspend);
-      mediaElement.removeEventListener('ended', onEnded);
-      mediaElement.removeEventListener('volumechange', onVolumeChange);
-    };
-  }, [mediaElement, debug]);
-  return {
-    playing: playing,
-    muted: muted,
-    buffering: buffering
-  };
-};
-var useMediaState$1 = useMediaState;
-
-function useMediaCurrentTime(element) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$updateInterval = _ref.updateInterval,
-    updateInterval = _ref$updateInterval === void 0 ? 1000 : _ref$updateInterval,
-    _ref$onUpdate = _ref.onUpdate,
-    customOnUpdate = _ref$onUpdate === void 0 ? null : _ref$onUpdate;
-  var _useState = react.useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentTime = _useState2[0],
-    setCurrentTime = _useState2[1];
-  var realCurrentTime = react.useRef(currentTime);
-  var finalId = id || element;
-  var lastIdRef = react.useRef(finalId);
-  var idChanged = lastIdRef.current !== finalId;
-  var disabledRef = react.useRef(disabled);
-  var disabledChanged = disabledRef.current !== disabled;
-  if (idChanged || disabledChanged) {
-    realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
-    lastIdRef.current = finalId;
-    disabledRef.current = disabled;
-  }
-
-  // Check time update
-  react.useEffect(function () {
-    if (element === null) {
-      return function () {};
-    }
-    function updateTime() {
-      var time = element.currentTime || 0;
-      if (time !== realCurrentTime.current) {
-        realCurrentTime.current = time;
-        setCurrentTime(time);
-        if (customOnUpdate !== null) {
-          customOnUpdate(time);
-        }
-      }
-      return time;
-    }
-    if (disabled) {
-      updateTime();
-      return function () {};
-    }
-    var timeout = null;
-    function loop() {
-      var _element$duration = element.duration,
-        duration = _element$duration === void 0 ? 0 : _element$duration;
-      var time = updateTime();
-      var remainingTime = Math.floor(((duration || 0) - time) * 1000);
-      timeout = setTimeout(loop, Math.max(Math.min(updateInterval, remainingTime), updateInterval));
-    }
-    loop();
-    return function () {
-      if (element !== null) {
-        realCurrentTime.current = element.currentTime;
-      }
-      if (timeout !== null) {
-        clearInterval(timeout);
-      }
-    };
-  }, [id, element, setCurrentTime, disabled, updateInterval]);
-  return realCurrentTime.current;
-}
-
-function useMediaDuration(element) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id;
-  var _useState = react.useState(element !== null ? element.duration || 0 : 0),
-    _useState2 = _slicedToArray(_useState, 2),
-    duration = _useState2[0],
-    setDuration = _useState2[1];
-  var realDuration = react.useRef(duration);
-  var finalId = id || element;
-  var lastIdRef = react.useRef(finalId);
-  var idChanged = lastIdRef.current !== finalId;
-  if (idChanged) {
-    realDuration.current = element !== null ? element.duration || 0 : 0;
-    lastIdRef.current = finalId;
-  }
-  react.useEffect(function () {
-    if (element === null) {
-      realDuration.current = 0;
-      setDuration(0);
-      return function () {};
-    }
-    function updateDuration() {
-      var newDuration = element.duration || 0;
-      if (newDuration !== realDuration.current) {
-        realDuration.current = newDuration;
-        setDuration(newDuration);
-      }
-    }
-    updateDuration();
-    element.addEventListener('canplay', updateDuration);
-    element.addEventListener('loadedmetadata', updateDuration);
-    element.addEventListener('durationchange', updateDuration);
-    return function () {
-      element.removeEventListener('canplay', updateDuration);
-      element.removeEventListener('loadedmetadata', updateDuration);
-      element.removeEventListener('durationchange', updateDuration);
-    };
-  }, [element, id, setDuration]);
-  return realDuration.current;
-}
-
-function useMediaLoad(element) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? 'auto' : _ref$preload,
-    _ref$shouldLoad = _ref.shouldLoad,
-    shouldLoad = _ref$shouldLoad === void 0 ? false : _ref$shouldLoad;
-  var firstPreloadRef = react.useRef(preload);
-  var firstShouldLoadRef = react.useRef(shouldLoad);
-  var hasLoadedRef = react.useRef(preload !== 'none' && preload !== 'metadata' && shouldLoad);
-  react.useEffect(function () {
-    var canLoad = preload !== 'none' && preload !== 'metadata' && shouldLoad;
-    var preloadHasChanged = firstPreloadRef.current !== preload;
-    var shouldLoadHasChanged = firstShouldLoadRef.current !== shouldLoad;
-    if (canLoad && (preloadHasChanged || shouldLoadHasChanged) && !hasLoadedRef.current && element !== null && typeof element.load !== 'undefined') {
-      hasLoadedRef.current = true;
-      element.load();
-    }
-  }, [element, shouldLoad, preload]);
-}
-
-var _excluded$1 = ["disabled"];
-function useMediaProgress(media) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  var _useState = react.useState(!disabled),
-    _useState2 = _slicedToArray(_useState, 2),
-    playing = _useState2[0],
-    setPlaying = _useState2[1];
-  var duration = useMediaDuration(media, _objectSpread({
-    disabled: disabled || !playing
-  }, props));
-  var _useState3 = react.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    progress = _useState4[0],
-    setProgress = _useState4[1];
-  var realProgressRef = react.useRef(progress);
-  var updateTimeRef = react.useRef(Date.now() / 1000);
-  var updateProgress = react.useCallback(function (newProgress) {
-    updateTimeRef.current = Date.now() / 1000;
-    realProgressRef.current = newProgress;
-    setProgress(newProgress);
-  }, [setProgress]);
-  react.useEffect(function () {
-    if (media !== null) {
-      var value = (media.currentTime || 0) > 0 && media.duration > 0 ? media.currentTime / media.duration : 0;
-      updateProgress(value);
-      setPlaying(!media.paused && media.readyState === 4);
-    } else {
-      updateProgress(0);
-      setPlaying(false);
-    }
-  }, [media, disabled, setPlaying]);
-  react.useEffect(function () {
-    if (media === null) {
-      return function () {};
-    }
-    function onResume(e) {
-      setPlaying(true);
-      var newProgress = media.currentTime / media.duration;
-      updateProgress(newProgress);
-    }
-    function onUpdate(e) {
-      setPlaying(!e.currentTarget.paused && !e.currentTarget.ended);
-      var newProgress = media.currentTime / media.duration;
-      updateProgress(newProgress);
-    }
-    function onPause() {
-      setPlaying(false);
-      var newProgress = media.currentTime / media.duration;
-      updateProgress(newProgress);
-    }
-    media.addEventListener('play', onResume);
-    media.addEventListener('playing', onResume);
-    media.addEventListener('seeked', onUpdate);
-    // media.addEventListener('timeupdate', onUpdate);
-    media.addEventListener('pause', onPause);
-    media.addEventListener('ended', onPause);
-    media.addEventListener('waiting', onPause);
-    media.addEventListener('stalled', onPause);
-    media.addEventListener('seeking', onPause);
-    media.addEventListener('suspend', onUpdate);
-    // if (media.paused) {
-    //     onPause();
-    // } else {
-    //     onResume();
-    // }
-    return function () {
-      media.removeEventListener('play', onResume);
-      media.removeEventListener('seeked', onResume);
-      media.removeEventListener('playing', onResume);
-      // media.removeEventListener('timeupdate', onResume);
-      media.removeEventListener('pause', onPause);
-      media.removeEventListener('ended', onPause);
-      media.removeEventListener('waiting', onPause);
-      media.removeEventListener('stalled', onPause);
-      media.removeEventListener('seeking', onPause);
-      media.removeEventListener('suspend', onUpdate);
-    };
-  }, [media, updateProgress, setPlaying, playing]);
-  react.useEffect(function () {
-    if (media === null || !playing || disabled) {
-      return function () {};
-    }
-    var handle;
-    var canceled = false;
-    function tick() {
-      if (canceled) {
-        return;
-      }
-      var newTime = Date.now() / 1000;
-      var elapsed = newTime - updateTimeRef.current;
-      var step = elapsed / duration;
-      var newProgress = realProgressRef.current < 0.1 ? media.currentTime / media.duration : realProgressRef.current + step;
-      updateProgress(newProgress);
-      handle = raf(tick);
-    }
-    tick();
-    return function () {
-      canceled = true;
-      raf.cancel(handle);
-    };
-  }, [media, playing, disabled, duration, updateProgress]);
-  return realProgressRef.current;
-}
-
-function useMediaReady(element) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id;
-  var _useState = react.useState(element !== null && element.readyState > 0),
-    _useState2 = _slicedToArray(_useState, 2),
-    ready = _useState2[0],
-    setReady = _useState2[1];
-  var realReady = react.useRef(ready);
-  var lastIdRef = react.useRef(id);
-  var idChanged = lastIdRef.current !== id;
-  if (idChanged) {
-    realReady.current = false;
-    lastIdRef.current = id;
-  }
-  react.useEffect(function () {
-    if (element === null) {
-      return function () {};
-    }
-    function updateReady() {
-      var currentReady = ready;
-      if (element.readyState > 0 && !ready) {
-        setReady(true);
-        currentReady = true;
-      } else if (ready && element.readyState === 0) {
-        setReady(false);
-        currentReady = false;
-      }
-      realReady.current = currentReady;
-      return currentReady;
-    }
-    var currentReady = updateReady();
-    if (!currentReady) {
-      element.addEventListener('loadedmetadata', updateReady);
-      element.addEventListener('canplay', updateReady);
-      element.addEventListener('canplaythrough', updateReady);
-    }
-    return function () {
-      if (!currentReady) {
-        element.removeEventListener('loadedmetadata', updateReady);
-        element.removeEventListener('canplay', updateReady);
-        element.removeEventListener('canplaythrough', updateReady);
-      }
-    };
-  }, [element, id]);
-  return realReady.current;
-}
-
-var useMediasParser = function useMediasParser() {
-  var screensManager = contexts.useScreensManager();
-  var fieldsManager = contexts.useFieldsManager();
-
-  // Convert medias object to path
-  var parser = react.useMemo(function () {
-    return new core.MediasParser({
-      screensManager: screensManager,
-      fieldsManager: fieldsManager
-    });
-  }, [screensManager, fieldsManager]);
-  var toPath = react.useCallback(function (story) {
-    return parser.toPath(story);
-  }, [parser]);
-  var fromPath = react.useCallback(function (story) {
-    return parser.fromPath(story);
-  }, [parser]);
-  return {
-    toPath: toPath,
-    fromPath: fromPath,
-    parser: parser
-  };
-};
-var useMediasParser$1 = useMediasParser;
-
-function useMediaThumbnail(media) {
-  var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var thumbnail = react.useMemo(function () {
-    if (isObject(file)) {
-      return file;
-    }
-    var _ref = media || {},
-      _ref$thumbnail_url = _ref.thumbnail_url,
-      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
-      _ref$files = _ref.files,
-      files = _ref$files === void 0 ? null : _ref$files,
-      _ref$metadata = _ref.metadata,
-      metadata = _ref$metadata === void 0 ? null : _ref$metadata;
-    var _ref2 = metadata || {},
-      mediaWidth = _ref2.width,
-      mediaHeight = _ref2.height;
-    var filesArray = utils.getMediaFilesAsArray(files) || [];
-    var _ref3 = (file !== null ? filesArray.find(function (_ref4) {
-        var handle = _ref4.handle;
-        return handle === file;
-      }) || null : null) || {},
-      _ref3$url = _ref3.url,
-      url = _ref3$url === void 0 ? null : _ref3$url;
-    return url !== null || defaultThumbnailUrl !== null ? {
-      url: url || defaultThumbnailUrl,
-      metadata: {
-        width: mediaWidth,
-        height: mediaHeight
-      }
-    } : null;
-  }, [media, file]);
-  return thumbnail;
-}
-
-function useMediaWaveform(media) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$fake = _ref.fake,
-    fake = _ref$fake === void 0 ? false : _ref$fake,
-    _ref$reduceBufferFact = _ref.reduceBufferFactor,
-    reduceBufferFactor = _ref$reduceBufferFact === void 0 ? 100 : _ref$reduceBufferFact;
-  var _ref2 = media || {},
-    _ref2$url = _ref2.url,
-    url = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$metadata = _ref2.metadata,
-    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-  var _ref3 = metadata || {},
-    _ref3$waveform = _ref3.waveform,
-    waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
-  var _useState = react.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    audioLevels = _useState2[0],
-    setAudioLevels = _useState2[1];
-  react.useEffect(function () {
-    var canceled = false;
-    var AudioContext = typeof window !== 'undefined' ? window.AudioContext || window.webkitAudioContext : null;
-    if (waveform !== null) {
-      setAudioLevels(waveform.map(function (it) {
-        return (it + 256 / 2) / 256;
-      }));
-    } else if (url !== null && fake) {
-      var fakeLength = 1000;
-      setAudioLevels(_toConsumableArray(new Array(fakeLength)).map(function () {
-        return Math.random();
-      }));
-    } else if (url !== null && AudioContext !== null) {
-      fetch(url, {
-        mode: 'cors'
-      }).then(function (response) {
-        if (canceled) {
-          throw new Error('Audio loading canceled');
-        }
-        return response.arrayBuffer();
-      }).then(function (arrayBuffer) {
-        if (canceled) {
-          throw new Error('Audio loading canceled');
-        }
-        var audioCtx = new AudioContext();
-        return audioCtx.decodeAudioData(arrayBuffer);
-      }).then(function (buffer) {
-        var channelsCount = buffer.numberOfChannels;
-        if (channelsCount > 0) {
-          var leftChannelData = buffer.getChannelData(0);
-          setAudioLevels(leftChannelData.reduce(function (newArray, level) {
-            // eslint-disable-next-line no-param-reassign
-            newArray[newArray.length] = Math.abs(level);
-            return newArray;
-          }, []));
-        }
-      })["catch"](function (e) {
-        throw e;
-      });
-    }
-    return function () {
-      if (url === null) {
-        canceled = true;
-      }
-    };
-  }, [url, waveform, setAudioLevels, reduceBufferFactor, fake]);
-  return audioLevels;
-}
-
-// const debug = createDebug('core:useParsedStory');
-
-var useParsedStory = function useParsedStory(story) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$withTheme = _ref.withTheme,
-    withTheme = _ref$withTheme === void 0 ? true : _ref$withTheme,
-    _ref$withMedias = _ref.withMedias,
-    withMedias = _ref$withMedias === void 0 ? true : _ref$withMedias,
-    _ref$withFonts = _ref.withFonts,
-    withFonts = _ref$withFonts === void 0 ? true : _ref$withFonts,
-    _ref$withMigrations = _ref.withMigrations,
-    withMigrations = _ref$withMigrations === void 0 ? true : _ref$withMigrations;
-  var screensManager = contexts.useScreensManager();
-  var fieldsManager = contexts.useFieldsManager();
-  var parser = react.useMemo(function () {
-    return new core.StoryParser({
-      screensManager: screensManager,
-      fieldsManager: fieldsManager,
-      fieldsPattern: screensManager.getFieldsPattern()
-    });
-  }, [screensManager, fieldsManager]);
-  var newStory = react.useMemo(function () {
-    if (disabled) {
-      return story;
-    }
-    return parser.parse(story, {
-      withMedias: withMedias,
-      withTheme: withTheme,
-      withFonts: withFonts,
-      withMigrations: withMigrations
-    });
-  }, [parser, disabled, withMedias, withTheme, withFonts, story]);
-  return newStory;
-};
-var useParsedStory$1 = useParsedStory;
-
-function useProgressSteps() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    currentTime = _ref.currentTime,
-    duration = _ref.duration,
-    _ref$onStep = _ref.onStep,
-    onStep = _ref$onStep === void 0 ? null : _ref$onStep,
-    _ref$steps = _ref.steps,
-    steps = _ref$steps === void 0 ? [0.1, 0.25, 0.5, 0.75, 0.9] : _ref$steps;
-  var progressStepsReached = react.useRef({});
-  react.useEffect(function () {
-    if (duration === 0 || disabled) {
-      return;
-    }
-    var progress = currentTime / duration;
-    var currentSteps = progressStepsReached.current;
-    var stepsToTrack = steps.filter(function (step) {
-      return progress > step && typeof currentSteps[step] === 'undefined';
-    });
-    stepsToTrack.forEach(function (step) {
-      if (onStep !== null) {
-        onStep(step);
-      }
-      currentSteps[step] = true;
-    });
-  }, [duration, currentTime, disabled]);
-}
-
-var _excluded = ["width", "height"];
-var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-var useScreenSize = function useScreenSize(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? null : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? null : _ref$height,
-    _ref$landscape = _ref.landscape,
-    landscape = _ref$landscape === void 0 ? false : _ref$landscape,
-    _ref$menuOverScreen = _ref.menuOverScreen,
-    menuOverScreen = _ref$menuOverScreen === void 0 ? false : _ref$menuOverScreen,
-    _ref$screens = _ref.screens,
-    screens = _ref$screens === void 0 ? [] : _ref$screens,
-    _ref$mediaType = _ref.mediaType,
-    mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
-    _ref$media = _ref.media,
-    providedMedia = _ref$media === void 0 ? null : _ref$media,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? null : _ref$scale;
-  var screenSize = react.useMemo(function () {
-    var media = providedMedia !== null ? providedMedia : {
-      type: mediaType,
-      width: "".concat(width, "px"),
-      height: "".concat(height, "px")
-    };
-    var matchingScreens = _toConsumableArray(screens).reverse().filter(function (_ref2) {
-      var _ref2$mediaQuery = _ref2.mediaQuery,
-        mediaQuery = _ref2$mediaQuery === void 0 ? null : _ref2$mediaQuery;
-      return mediaQuery === null || cssMediaquery.match(mediaQuery, media);
-    });
-    return {
-      screen: matchingScreens.length > 0 ? matchingScreens[0].name : null,
-      screens: _toConsumableArray(matchingScreens).reverse().map(function (_ref3) {
-        var name = _ref3.name;
-        return name;
-      }),
-      width: width,
-      height: height,
-      landscape: landscape,
-      menuOverScreen: menuOverScreen,
-      resolution: scale !== null ? scale * devicePixelRatio : devicePixelRatio
-    };
-  }, [screens, providedMedia, mediaType, width, height, landscape, menuOverScreen]);
-  return screenSize;
-};
-var useScreenSizeFromElement = function useScreenSizeFromElement() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref4$width = _ref4.width,
-    width = _ref4$width === void 0 ? null : _ref4$width,
-    _ref4$height = _ref4.height,
-    height = _ref4$height === void 0 ? null : _ref4$height,
-    opts = _objectWithoutProperties(_ref4, _excluded);
-  var _useDimensionObserver = useDimensionObserver(),
-    ref = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.width,
-    calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
-    _useDimensionObserver3 = _useDimensionObserver.height,
-    calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
-  var fullWidth = width !== null ? width : calculatedWidth;
-  var fullHeight = height !== null ? height : calculatedHeight;
-  var _ref5 = opts || {},
-    _ref5$screenWidth = _ref5.screenWidth,
-    screenWidth = _ref5$screenWidth === void 0 ? 320 : _ref5$screenWidth,
-    _ref5$screenHeight = _ref5.screenHeight,
-    screenHeight = _ref5$screenHeight === void 0 ? 480 : _ref5$screenHeight,
-    _ref5$withoutMaxSize = _ref5.withoutMaxSize,
-    withoutMaxSize = _ref5$withoutMaxSize === void 0 ? false : _ref5$withoutMaxSize,
-    _ref5$landscapeMinHei = _ref5.landscapeMinHeight,
-    landscapeMinHeight = _ref5$landscapeMinHei === void 0 ? 600 : _ref5$landscapeMinHei,
-    _ref5$menuAlwaysOverS = _ref5.menuAlwaysOverScreen,
-    menuAlwaysOverScreen = _ref5$menuAlwaysOverS === void 0 ? true : _ref5$menuAlwaysOverS,
-    _ref5$landscapeMinRat = _ref5.landscapeMinRatio,
-    landscapeMinRatio = _ref5$landscapeMinRat === void 0 ? 2 / 3 : _ref5$landscapeMinRat,
-    _ref5$withoutScale = _ref5.withoutScale,
-    withoutScale = _ref5$withoutScale === void 0 ? false : _ref5$withoutScale;
-  var screenRatio = screenWidth / screenHeight;
-  var elementRatio = fullWidth / fullHeight;
-  var landscape = fullHeight > 0 && elementRatio > (landscapeMinRatio || screenRatio);
-  var landscapeWithMaxSize = landscape && !withoutMaxSize;
-  var finalWidth = fullWidth;
-  var finalHeight = fullHeight;
-  var menuOverScreen = !landscape;
-  if (landscapeWithMaxSize) {
-    if (fullHeight < landscapeMinHeight || menuAlwaysOverScreen) {
-      menuOverScreen = true;
-    } else {
-      finalHeight = fullHeight - 100;
-    }
-    finalWidth = Math.round(finalHeight * screenRatio);
-  }
-  if (finalWidth % 2 === 1) {
-    finalWidth -= 1;
-  }
-  if (finalHeight % 2 === 1) {
-    finalHeight -= 1;
-  }
-  var scale = finalWidth > 0 ? finalWidth / screenWidth : null;
-  var screenSize = useScreenSize(_objectSpread({
-    width: withoutScale || scale === null ? finalWidth : screenWidth,
-    height: withoutScale || scale === null ? finalHeight : finalHeight / scale,
-    landscape: landscape,
-    menuOverScreen: menuOverScreen,
-    scale: !withoutScale ? scale : null
-  }, opts));
-  return {
-    ref: ref,
-    fullWidth: fullWidth,
-    fullHeight: fullHeight,
-    screenSize: screenSize,
-    scale: !withoutScale ? scale : null,
-    resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
-  };
-};
-var getWindowSize = function getWindowSize() {
-  return {
-    width: typeof window !== 'undefined' ? window.innerWidth : null,
-    height: typeof window !== 'undefined' ? window.innerHæeight : null
-  };
-};
-var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
-  var _useState = react.useState(getWindowSize()),
-    _useState2 = _slicedToArray(_useState, 2),
-    windowSize = _useState2[0],
-    setWindowSize = _useState2[1];
-  react.useEffect(function () {
-    var onResize = function onResize() {
-      return setWindowSize(getWindowSize());
-    };
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', onResize);
-    }
-    return function () {
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', onResize);
-      }
-    };
-  }, [setWindowSize]);
-  return useScreenSize(_objectSpread(_objectSpread({}, opts), windowSize));
-};
-
-var getValueFromSpring = function getValueFromSpring(s) {
-  var _ref = s || {},
-    _ref$value = _ref.value,
-    v = _ref$value === void 0 ? null : _ref$value;
-  var _ref2 = v || {},
-    p = _ref2.progress;
-  return p;
-};
-function useSpringValue(wantedProgress, immediate, params) {
-  var _useState = react.useState(wantedProgress),
-    _useState2 = _slicedToArray(_useState, 2),
-    progress = _useState2[0],
-    setProgress = _useState2[1];
-  var onChange = react.useCallback(function (spring) {
-    return setProgress(getValueFromSpring(spring));
-  }, [setProgress]);
-  core$1.useSpring(_objectSpread({
-    progress: wantedProgress,
-    onChange: onChange,
-    immediate: immediate
-  }, params));
-  return immediate ? wantedProgress : progress;
-}
-
-var useSwipe = function useSwipe() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? null : _ref$width,
-    _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    _ref$withSpring = _ref.withSpring,
-    withSpring = _ref$withSpring === void 0 ? true : _ref$withSpring,
-    _ref$swipeWidthThresh = _ref.swipeWidthThreshold,
-    swipeWidthThreshold = _ref$swipeWidthThresh === void 0 ? 3 : _ref$swipeWidthThresh,
-    _ref$animateScale = _ref.animateScale,
-    animateScale = _ref$animateScale === void 0 ? false : _ref$animateScale,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$lockAxis = _ref.lockAxis,
-    lockAxis = _ref$lockAxis === void 0 ? false : _ref$lockAxis,
-    _ref$onSwipeStart = _ref.onSwipeStart,
-    onSwipeStart = _ref$onSwipeStart === void 0 ? null : _ref$onSwipeStart,
-    _ref$onSwipeEnd = _ref.onSwipeEnd,
-    onSwipeEnd = _ref$onSwipeEnd === void 0 ? null : _ref$onSwipeEnd,
-    _ref$onSwipeCancel = _ref.onSwipeCancel,
-    onSwipeCancel = _ref$onSwipeCancel === void 0 ? null : _ref$onSwipeCancel,
-    _ref$onTap = _ref.onTap,
-    onTap = _ref$onTap === void 0 ? null : _ref$onTap;
-  var swipingIndex = react.useRef(null);
-  var index = react.useRef(0);
-  var lockedAxis = react.useRef(null);
-  var hasWidth = width !== null;
-  var windowWidth = typeof window !== 'undefined' && !hasWidth ? window.innerWidth : null;
-  var currentWidth = hasWidth ? width : windowWidth;
-  var count = items.length;
-  var getItem = react.useCallback(function () {
-    var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-    var idx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var scale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
-    return {
-      x: x,
-      zIndex: idx,
-      scale: scale
-    };
-  });
-  var getItems = react.useCallback(function () {
-    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref2$down = _ref2.down,
-      down = _ref2$down === void 0 ? false : _ref2$down,
-      _ref2$mx = _ref2.mx,
-      mx = _ref2$mx === void 0 ? 0 : _ref2$mx;
-    return items.map(function (item, i) {
-      var x = disabled ? 0 : (i - index.current) * currentWidth + (down ? mx : 0);
-      var scale = !animateScale || disabled || !down ? 1 : 1 - Math.abs(mx) / currentWidth / 2;
-      return getItem(x, i, scale);
-    });
-  }, [disabled, items, index, currentWidth, animateScale]);
-
-  // Initial items state
-  var _useSprings = core$1.useSprings(items.length, function (i) {
-      return {
-        x: disabled ? 0 : i * currentWidth,
-        y: 0,
-        zIndex: i,
-        config: _objectSpread({}, !withSpring ? {
-          duration: 1
-        } : null)
-      };
-    }),
-    _useSprings2 = _slicedToArray(_useSprings, 2),
-    itemsWithProps = _useSprings2[0],
-    set = _useSprings2[1];
-  var bind = react$1.useDrag(function (_ref3) {
-    var down = _ref3.down,
-      _ref3$movement = _slicedToArray(_ref3.movement, 2),
-      mx = _ref3$movement[0],
-      my = _ref3$movement[1],
-      _ref3$direction = _slicedToArray(_ref3.direction, 1),
-      xDir = _ref3$direction[0],
-      cancel = _ref3.cancel,
-      tap = _ref3.tap;
-    if (disabled) {
-      cancel();
-      return;
-    }
-    if (!down && swipingIndex.current === index.current) {
-      lockedAxis.current = null;
-      if (onSwipeCancel !== null) {
-        onSwipeCancel(index.current);
-      }
-    }
-
-    // Block first and last moves
-    /*
-    if (down && index.current === items.length - 1 && xDir < 0) {
-        cancel();
-        return;
-    }
-     if (down && index.current === 0 && xDir > 0) {
-        cancel();
-        return;
-    }
-    */
-
-    var movementX = !lockAxis || lockedAxis.current === 'x' ? mx : 0;
-    var movementY = !lockAxis || lockedAxis.current === 'y' ? my : 0;
-    if (down) {
-      // Snap to next slide
-      if (Math.abs(movementX) > currentWidth / swipeWidthThreshold) {
-        index.current = clamp(index.current + (xDir > 0 ? -1 : 1), 0, count - 1);
-        lockedAxis.current = null;
-        cancel();
-        if (onSwipeEnd !== null) {
-          onSwipeEnd(index.current);
-        }
-        return;
-      }
-    }
-    set(getItems({
-      down: down,
-      mx: movementX,
-      my: movementY
-    }));
-
-    // saving current swiping index in a ref in order to have a section called only once when swipe just started or a tap was detected
-    if (swipingIndex.current !== index.current) {
-      if (down && !tap) {
-        if (onSwipeStart !== null) {
-          onSwipeStart(index.current);
-        }
-      }
-      if (!down && tap) {
-        if (onTap !== null) {
-          onTap();
-        }
-      }
-    }
-
-    // lock swiping on axis from initial 3 pixels distance (Y axis requires to swipe down)
-    if (lockAxis && down && lockedAxis.current === null) {
-      var distanceX = Math.abs(mx);
-      var distanceY = Math.abs(my);
-      if (distanceX !== distanceY && (distanceY > 2 || distanceX > 2)) {
-        lockedAxis.current = distanceY > distanceX ? 'y' : 'x';
-      }
-    }
-    swipingIndex.current = down && !tap ? index.current : null;
-  }, {
-    filterTaps: true
-  });
-  var reset = react.useCallback(function () {
-    set(getItems());
-  }, [disabled, items, index, currentWidth]);
-  var setIndex = react.useCallback(function (idx) {
-    index.current = idx;
-    reset();
-  }, [reset]);
-
-  // Reset on resize or others
-  react.useEffect(function () {
-    set(getItems());
-  }, [items, width, set, disabled]);
-  return {
-    items: itemsWithProps,
-    bind: bind,
-    index: index.current,
-    setIndex: setIndex
-  };
-};
-
-var useThemeParser = function useThemeParser() {
-  var screensManager = contexts.useScreensManager();
-  var parser = react.useMemo(function () {
-    return new core.ThemeParser({
-      screensManager: screensManager
-    });
-  }, [screensManager]);
-  var parse = react.useCallback(function (story) {
-    return parser.parse(story);
-  }, [parser]);
-  return parse;
-};
-var useThemeParser$1 = useThemeParser;
-
-var getScreenOptions = function getScreenOptions(screenContext, opts) {
-  var _ref = screenContext || {},
-    _ref$data = _ref.data,
-    ctxData = _ref$data === void 0 ? null : _ref$data;
-  var _ref2 = ctxData || {},
-    _ref2$id = _ref2.id,
-    ctxScreenId = _ref2$id === void 0 ? null : _ref2$id,
-    ctxScreenType = _ref2.type;
-  var _ref3 = opts || {},
-    _ref3$screenId = _ref3.screenId,
-    optsScreenId = _ref3$screenId === void 0 ? null : _ref3$screenId,
-    _ref3$screenType = _ref3.screenType,
-    optsScreenType = _ref3$screenType === void 0 ? null : _ref3$screenType;
-  var screenId = ctxScreenId !== null ? ctxScreenId : optsScreenId;
-  var screenType = ctxScreenType !== null ? ctxScreenType : optsScreenType;
-  return {
-    screenId: screenId,
-    screenType: screenType
-  };
-};
-var hasTracking = function hasTracking(tracking) {
-  return typeof tracking !== 'undefined';
-};
-var useTrackScreenView = function useTrackScreenView() {
-  var tracking = contexts.useTracking();
-  if (!hasTracking(tracking)) {
-    return function () {};
-  }
-  return react.useCallback(function () {
-    var screen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    if (screen !== null && index !== null) {
-      tracking.trackScreenView(screen, index);
-    }
-  }, []);
-};
-var useTrackScreenEvent = function useTrackScreenEvent() {
-  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var tracking = contexts.useTracking();
-  if (!hasTracking(tracking)) {
-    return function () {};
-  }
-  var screenContext = contexts.useScreen();
-  if (screenContext.renderContext !== 'view') {
-    return function () {};
-  }
-  return react.useCallback(function () {
-    var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var opts = arguments.length > 2 ? arguments[2] : undefined;
-    if (type !== null && action !== null) {
-      tracking.trackEvent("screen_".concat(type), action, label, _objectSpread(_objectSpread({}, opts), getScreenOptions(screenContext, opts)));
-    }
-  }, [screenContext]);
-};
-var useTrackScreenMedia = function useTrackScreenMedia() {
-  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var tracking = contexts.useTracking();
-  if (!hasTracking(tracking)) {
-    return function () {};
-  }
-  var screenContext = contexts.useScreen();
-  if (screenContext.renderContext !== 'view') {
-    return function () {};
-  }
-  return react.useCallback(function () {
-    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var opts = arguments.length > 2 ? arguments[2] : undefined;
-    if (type !== null && media !== null && action !== null) {
-      tracking.trackMedia("screen_".concat(type), media, action, _objectSpread(_objectSpread({}, opts), getScreenOptions(screenContext, opts)));
-    }
-  }, [screenContext]);
-};
-var useTrackEvent = function useTrackEvent() {
-  var tracking = contexts.useTracking();
-  if (!hasTracking(tracking)) {
-    return function () {};
-  }
-  return react.useCallback(function () {
-    var category = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var opts = arguments.length > 3 ? arguments[3] : undefined;
-    if (category !== null && action !== null) {
-      tracking.trackEvent(category, action, label, opts);
-    }
-  }, []);
-};
-var useTrackMedia = function useTrackMedia() {
-  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var tracking = contexts.useTracking();
-  if (!hasTracking(tracking)) {
-    return function () {};
-  }
-  return react.useCallback(function () {
-    var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var opts = arguments.length > 2 ? arguments[2] : undefined;
-    if (type !== null && media !== null && action !== null) {
-      tracking.trackMedia(type, media, action, opts);
-    }
-  }, []);
-};
-
-var eventsManager = typeof window !== 'undefined' ? new core.EventsManager(window) : null;
-var useWindowEvent = utils.createUseEvent(eventsManager);
-var useWindowEvent$1 = useWindowEvent;
-
-exports.getObserver = getObserver;
-exports.useActivityDetector = useActivityDetector;
-exports.useAnimationFrame = useAnimationFrame$1;
-exports.useDebounce = useDebounced$1;
-exports.useDimensionObserver = useDimensionObserver;
-exports.useDocumentEvent = useDocumentEvent$1;
-exports.useDragProgress = useDragProgress;
-exports.useForm = useForm$1;
-exports.useFormTransition = useFormTransition$1;
-exports.useFormattedDate = useFormattedDate;
-exports.useFormattedTime = useFormattedTime;
-exports.useFullscreen = useFullscreen$1;
-exports.useIntersectionObserver = useIntersectionObserver;
-exports.useIsVisible = useIsVisible$1;
-exports.useLoadedFonts = useLoadedFonts$1;
-exports.useLongPress = useLongPress$1;
-exports.useMediaApi = useMediaApi$1;
-exports.useMediaBuffering = useMediaBuffering$1;
-exports.useMediaCurrentTime = useMediaCurrentTime;
-exports.useMediaDuration = useMediaDuration;
-exports.useMediaLoad = useMediaLoad;
-exports.useMediaProgress = useMediaProgress;
-exports.useMediaReady = useMediaReady;
-exports.useMediaState = useMediaState$1;
-exports.useMediaThumbnail = useMediaThumbnail;
-exports.useMediaWaveform = useMediaWaveform;
-exports.useMediasParser = useMediasParser$1;
-exports.useObserver = useObserver;
-exports.useParsedStory = useParsedStory$1;
-exports.useProgressSteps = useProgressSteps;
-exports.useResizeObserver = useResizeObserver;
-exports.useScreenSizeFromElement = useScreenSizeFromElement;
-exports.useScreenSizeFromWindow = useScreenSizeFromWindow;
-exports.useSpringValue = useSpringValue;
-exports.useSwipe = useSwipe;
-exports.useThemeParser = useThemeParser$1;
-exports.useTrackEvent = useTrackEvent;
-exports.useTrackMedia = useTrackMedia;
-exports.useTrackScreenEvent = useTrackScreenEvent;
-exports.useTrackScreenMedia = useTrackScreenMedia;
-exports.useTrackScreenView = useTrackScreenView;
-exports.useWindowEvent = useWindowEvent$1;