@micromag/core 0.3.767 → 0.3.779

package/lib/hooks.js

@@ -0,0 +1,2474 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var core = require('@micromag/core');
+var utils = require('@micromag/core/utils');
+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 forms = require('@folklore/forms');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var classNames = require('classnames');
+var screenfull = require('screenfull');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var isArray = require('lodash/isArray');
+var isObject = require('lodash/isObject');
+var createDebug = require('debug');
+var isString = require('lodash/isString');
+var raf = require('raf');
+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 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 eventsManager$1 = typeof document !== 'undefined' ? new core.EventsManager(document) : null;
+var useDocumentEvent = utils.createUseEvent(eventsManager$1);
+
+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$onPointerDown = _ref.onPointerDown,
+    onPointerDown = _ref$onPointerDown === void 0 ? null : _ref$onPointerDown,
+    _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 wantedProgressRef = react.useRef(wantedProgress);
+  if (wantedProgress !== wantedProgressRef.current) {
+    wantedProgressRef.current = wantedProgress;
+  }
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
+  var _useState3 = react.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    direction = _useState4[0],
+    setDirection = _useState4[1];
+  var spring = react.useCallback(function () {
+    return _objectSpread({
+      progress: wantedProgress,
+      immediate: dragging || disabled,
+      onResolve: function onResolve() {
+        setDirection(0);
+      }
+    }, 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;
+    setDirection(newProgress < wantedProgressRef.current ? -1 : 1);
+    refProgress.current = newProgress;
+    if (active !== dragging) {
+      setDragging(active);
+    }
+    api.start({
+      progress: newProgress,
+      immediate: active,
+      onResolve: !active ? function () {
+        setDirection(0);
+      } : function () {}
+    });
+    if (onProgress !== null) {
+      onProgress(newProgress, gestureState);
+    }
+  }, [setDragging, disabled, onTap, computeProgress, dragging, onProgress]);
+  var bind = react$1.useGesture({
+    onDrag: onDrag,
+    onPointerDown: onPointerDown !== null ? onPointerDown : function () {}
+  }, {
+    drag: dragOptions
+  });
+  react.useEffect(function () {
+    if (!refDragging.current && wantedProgress !== refProgress.current) {
+      setDirection(wantedProgress < refProgress.current ? -1 : 1);
+      refProgress.current = wantedProgress;
+      api.start({
+        progress: wantedProgress,
+        immediate: false,
+        onResolve: function onResolve() {
+          setDirection(0);
+        }
+      });
+    }
+  }, [wantedProgress]);
+  var transitioning = react.useMemo(function () {
+    return wantedProgress !== progress.get() || progress.isAnimating || dragging;
+  }, [wantedProgress, progress.isAnimating, dragging]);
+  return {
+    transitioning: transitioning,
+    bind: bind,
+    dragging: dragging,
+    progress: progress,
+    direction: direction
+  };
+}
+
+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 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 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 _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$persist = _ref.persist,
+    persist = _ref$persist === void 0 ? false : _ref$persist;
+  var _useIntersectionObser = useIntersectionObserver({
+      rootMargin: rootMargin
+    }),
+    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 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 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 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),
+    _useState0 = _slicedToArray(_useState9, 2),
+    dataReady = _useState0[0],
+    setDataReady = _useState0[1];
+  var _useState1 = react.useState(true),
+    _useState10 = _slicedToArray(_useState1, 2),
+    initialPlay = _useState10[0],
+    setInitialPlay = _useState10[1];
+  var _useState11 = react.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    suspended = _useState12[0],
+    setSuspended = _useState12[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 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 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
+  };
+};
+
+function useMediaTimestampOffset(element) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$attributeName = _ref.attributeName,
+    attributeName = _ref$attributeName === void 0 ? 'data-ts-offset' : _ref$attributeName;
+  var getTimestampOffset = function getTimestampOffset() {
+    return element !== null && element.hasAttribute(attributeName) ? parseFloat(element.getAttribute(attributeName)) : 0;
+  };
+  var _useState = react.useState(getTimestampOffset()),
+    _useState2 = _slicedToArray(_useState, 2),
+    timestampOffset = _useState2[0],
+    setTimestampOffset = _useState2[1];
+  var observerRef = react.useRef(null);
+  react.useEffect(function () {
+    if (element !== null) {
+      observerRef.current = new MutationObserver(function (mutations) {
+        mutations.forEach(function (_ref2) {
+          var mutationType = _ref2.type;
+          if (mutationType === 'attributes') {
+            setTimestampOffset(getTimestampOffset());
+          }
+        });
+      });
+      observerRef.current.observe(element, {
+        attributes: true,
+        attributeFilter: [attributeName]
+      });
+    }
+    return function () {
+      if (observerRef.current !== null) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [element]);
+  return timestampOffset;
+}
+
+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 tsOffset = useMediaTimestampOffset(element);
+  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 ? Math.max((element.currentTime || 0) - tsOffset, 0) : 0;
+    lastIdRef.current = finalId;
+    disabledRef.current = disabled;
+  }
+
+  // Check time update
+  react.useEffect(function () {
+    if (element === null) {
+      return function () {};
+    }
+    function updateTime() {
+      var time = Math.max((element.currentTime || 0) - tsOffset, 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 - tsOffset;
+      }
+      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 tsOffset = useMediaTimestampOffset(element);
+  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 ? Math.max((element.duration || 0) - tsOffset, 0) : 0;
+    lastIdRef.current = finalId;
+  }
+  react.useEffect(function () {
+    if (element === null) {
+      realDuration.current = 0;
+      setDuration(0);
+      return function () {};
+    }
+    function updateDuration() {
+      var newDuration = Math.max((element.duration || 0) - tsOffset, 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
+  };
+};
+
+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 usePlaceholderStyle = function usePlaceholderStyle(className, placeholderStyle) {
+  return "\n            .".concat(className, "::placeholder {\n                ").concat(placeholderStyle.color ? "color: ".concat(placeholderStyle.color, ";") : '', "\n                ").concat(placeholderStyle.fontSize ? "font-size: ".concat(placeholderStyle.fontSize, ";") : '', "\n                ").concat(placeholderStyle.fontStyle ? "font-style: ".concat(placeholderStyle.fontStyle, ";") : '', "\n                ").concat(placeholderStyle.fontWeight ? "font-weight: ".concat(placeholderStyle.fontWeight, ";") : '', "\n                ").concat(placeholderStyle.fontFamily ? "font-family: ".concat(placeholderStyle.fontFamily, ";") : '', "\n                ").concat(placeholderStyle.textAlign ? "text-align: ".concat(placeholderStyle.textAlign, ";") : '', "\n            }\n        ");
+};
+
+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, {
+          duration: duration,
+          currentTime: currentTime
+        });
+      }
+      currentSteps[step] = true;
+    });
+  }, [duration, currentTime, disabled]);
+}
+
+var _excluded = ["width", "height"];
+var useDevicePixelRatio = function useDevicePixelRatio() {
+  var _useState = react.useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    pixelRatio = _useState2[0],
+    setPixelRatio = _useState2[1];
+  react.useEffect(function () {
+    setPixelRatio(typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1);
+  }, [setPixelRatio]);
+  return pixelRatio;
+};
+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 devicePixelRatio = useDevicePixelRatio();
+  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,
+      imageResolution: scale !== null ? Math.max(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 devicePixelRatio = useDevicePixelRatio();
+  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 _useState3 = react.useState(getWindowSize()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    windowSize = _useState4[0],
+    setWindowSize = _useState4[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 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 ? arguments[2] : null;
+    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 ? arguments[2] : null;
+    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 ? arguments[3] : null;
+    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 ? arguments[2] : null;
+    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);
+
+exports.getObserver = getObserver;
+exports.useActivityDetector = useActivityDetector;
+exports.useAnimationFrame = useAnimationFrame;
+exports.useDebounce = useDebounced;
+exports.useDevicePixelRatio = useDevicePixelRatio;
+exports.useDimensionObserver = useDimensionObserver;
+exports.useDocumentEvent = useDocumentEvent;
+exports.useDragProgress = useDragProgress;
+exports.useForm = useForm;
+exports.useFormTransition = useFormTransition;
+exports.useFormattedDate = useFormattedDate;
+exports.useFormattedTime = useFormattedTime;
+exports.useFullscreen = useFullscreen;
+exports.useIntersectionObserver = useIntersectionObserver;
+exports.useIsVisible = useIsVisible;
+exports.useLoadedFonts = useLoadedFonts;
+exports.useLongPress = useLongPress;
+exports.useMediaApi = useMediaApi;
+exports.useMediaBuffering = useMediaBuffering;
+exports.useMediaCurrentTime = useMediaCurrentTime;
+exports.useMediaDuration = useMediaDuration;
+exports.useMediaLoad = useMediaLoad;
+exports.useMediaProgress = useMediaProgress;
+exports.useMediaReady = useMediaReady;
+exports.useMediaState = useMediaState;
+exports.useMediaThumbnail = useMediaThumbnail;
+exports.useMediaTimestampOffset = useMediaTimestampOffset;
+exports.useMediaWaveform = useMediaWaveform;
+exports.useMediasParser = useMediasParser;
+exports.useObserver = useObserver;
+exports.useParsedStory = useParsedStory;
+exports.usePlaceholderStyle = usePlaceholderStyle;
+exports.useProgressSteps = useProgressSteps;
+exports.useResizeObserver = useResizeObserver;
+exports.useScreenSizeFromElement = useScreenSizeFromElement;
+exports.useScreenSizeFromWindow = useScreenSizeFromWindow;
+exports.useSpringValue = useSpringValue;
+exports.useSwipe = useSwipe;
+exports.useThemeParser = useThemeParser;
+exports.useTrackEvent = useTrackEvent;
+exports.useTrackMedia = useTrackMedia;
+exports.useTrackScreenEvent = useTrackScreenEvent;
+exports.useTrackScreenMedia = useTrackScreenMedia;
+exports.useTrackScreenView = useTrackScreenView;
+exports.useWindowEvent = useWindowEvent;