@micromag/core 0.3.311 → 0.3.322

package/lib/hooks.js

@@ -61,53 +61,42 @@ var clamp__default = /*#__PURE__*/_interopDefaultLegacy(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;
-
+    _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__default["default"](_useState, 2),
-      detected = _useState2[0],
-      setDetected = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_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;
-
+      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);
@@ -122,7 +111,6 @@ function useActivityDetector() {
         clearTimeout(timeout);
         timeout = null;
       }
-
       element.removeEventListener('keydown', onActivity);
       element.removeEventListener('mousedown', onActivity);
       element.removeEventListener('mousemove', onActivity);
@@ -142,27 +130,22 @@ function useActivityDetector() {
 
 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;
-
+    _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);
@@ -173,16 +156,14 @@ var useAnimationFrame = function useAnimationFrame(onFrame) {
 
 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;
-
+    _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__default["default"]();
   return react.useCallback(function (date) {
     var dateToFormat = isString__default["default"](date) ? dayjs__default["default"](date) : date;
-
     if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
       return intl.formatMessage({
         id: "v4Qtl9",
@@ -192,7 +173,6 @@ var useFormattedDate = function useFormattedDate() {
         }]
       });
     }
-
     return intl.formatDate(dayjs__default["default"](date).toDate(), _objectSpread__default["default"]({
       year: 'numeric',
       month: 'long',
@@ -202,18 +182,16 @@ var useFormattedDate = function useFormattedDate() {
 };
 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;
-
+    _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__default["default"]();
   return react.useCallback(function (date) {
     var dateToFormat = isString__default["default"](date) ? dayjs__default["default"](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",
@@ -223,7 +201,6 @@ var useFormattedTime = function useFormattedTime() {
         }]
       });
     }
-
     return intl.formatTime(dateToFormat.toDate(), _objectSpread__default["default"]({
       hour: 'numeric',
       minute: 'numeric'
@@ -250,74 +227,62 @@ 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$springParams = _ref.springParams,
-      springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
-      _ref$dragOptions = _ref.dragOptions,
-      dragOptions = _ref$dragOptions === void 0 ? {
-    filterTaps: true
-  } : _ref$dragOptions;
-
+    wantedProgress = _ref.progress,
+    _ref$onTap = _ref.onTap,
+    onTap = _ref$onTap === void 0 ? null : _ref$onTap,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$dragDisabled = _ref.dragDisabled,
+    dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled,
+    _ref$computeProgress = _ref.computeProgress,
+    computeProgress = _ref$computeProgress === void 0 ? null : _ref$computeProgress,
+    _ref$onProgress = _ref.onProgress,
+    onProgress = _ref$onProgress === void 0 ? null : _ref$onProgress,
+    _ref$springParams = _ref.springParams,
+    springParams = _ref$springParams === void 0 ? undefined : _ref$springParams,
+    _ref$dragOptions = _ref.dragOptions,
+    dragOptions = _ref$dragOptions === void 0 ? {
+      filterTaps: true
+    } : _ref$dragOptions;
   var refDragging = react.useRef(false);
   var refProgress = react.useRef(wantedProgress);
-
   var _useState = react.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      dragging = _useState2[0],
-      setDragging = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
   var spring = react.useCallback(function () {
     return _objectSpread__default["default"]({
       progress: wantedProgress,
       immediate: dragging || disabled
     }, springParams);
-  }, []);
-
+  }, [wantedProgress, disabled]);
   var _useSpring = core$1.useSpring(spring),
-      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
-      progress = _useSpring2[0].progress,
-      api = _useSpring2[1];
-
+    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+    progress = _useSpring2[0].progress,
+    api = _useSpring2[1];
   var onDrag = react.useCallback(function (gestureState) {
+    var active = gestureState.active,
+      tap = gestureState.tap;
     if (disabled) {
       return;
     }
-
-    var active = gestureState.active,
-        tap = gestureState.tap;
-
     if (tap) {
       if (onTap !== null) onTap(gestureState);
       return;
     }
-
     if (dragDisabled) {
       return;
     }
-
     var newProgress = computeProgress(gestureState);
     refDragging.current = active;
     refProgress.current = newProgress;
-
     if (active !== dragging) {
       setDragging(active);
     }
-
     api.start({
       progress: newProgress,
       immediate: active
     });
-
     if (onProgress !== null) {
       onProgress(newProgress, gestureState);
     }
@@ -340,29 +305,27 @@ function useDragProgress() {
 }
 
 var _excluded$3 = ["fields", "injectInFields"],
-    _excluded2 = ["fields"];
+  _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__default["default"](_ref, _excluded$3);
-
+    _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__default["default"](_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__default["default"]({
-    fields: fieldsNames
-  }, opts)),
-      fields = _useBaseForm.fields,
-      form = _objectWithoutProperties__default["default"](_useBaseForm, _excluded2);
-
+      fields: fieldsNames
+    }, opts)),
+    fields = _useBaseForm.fields,
+    form = _objectWithoutProperties__default["default"](_useBaseForm, _excluded2);
   return _objectSpread__default["default"](_objectSpread__default["default"]({}, form), {}, {
     fields: injectInFields ? providedFields.map(function (it) {
       return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), fields[it.name] || null);
@@ -376,18 +339,15 @@ var useFormTransition = function useFormTransition() {
   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 () {
     var _classNames, _classNames2, _classNames3;
-
     return {
       enter: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles.enterRight, direction === 'right'), _defineProperty__default["default"](_classNames, styles.enterLeft, direction === 'left'), _defineProperty__default["default"](_classNames, styles.enterTop, direction === 'top'), _defineProperty__default["default"](_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
       enterActive: classNames__default["default"]((_classNames2 = {}, _defineProperty__default["default"](_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty__default["default"](_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
@@ -404,12 +364,10 @@ var useFormTransition = function useFormTransition() {
 
 var useFullscreen = function useFullscreen(element) {
   var enabled = screenfull__default["default"].isEnabled;
-
   var _useState = react.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      active = _useState2[0],
-      setActive = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
   var fullscreen = react.useCallback(function () {
     if (screenfull__default["default"].isEnabled) {
       if (typeof element !== 'undefined' && element !== null) {
@@ -435,11 +393,9 @@ var useFullscreen = function useFullscreen(element) {
     var onChange = function onChange() {
       setActive(screenfull__default["default"].isFullscreen);
     };
-
     if (screenfull__default["default"].isEnabled) {
       screenfull__default["default"].on('change', onChange);
     }
-
     return function () {
       if (screenfull__default["default"].isEnabled) {
         screenfull__default["default"].off('change', onChange);
@@ -456,31 +412,25 @@ var useFullscreen = function useFullscreen(element) {
 };
 
 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;
+    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__default["default"](_objectSpread__default["default"]({}, it), {}, {
@@ -490,13 +440,11 @@ var createObserver = function createObserver(Observer) {
         return it.callbacks.length > 0;
       });
     }
-
     return [].concat(_toConsumableArray__default["default"](subscribers), [{
       element: element,
       callbacks: [callback]
     }]);
   };
-
   var removeSubscriber = function removeSubscriber(element, callback) {
     return subscribers.map(function (it) {
       return it.element === element ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
@@ -508,13 +456,11 @@ var createObserver = function createObserver(Observer) {
       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;
-
+          callbacks = _ref2.callbacks;
         if (element === entry.target) {
           callbacks.forEach(function (callback) {
             callback(entry);
@@ -523,13 +469,10 @@ var createObserver = function createObserver(Observer) {
       });
     });
   };
-
   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) {
@@ -537,103 +480,82 @@ var createObserver = function createObserver(Observer) {
       });
       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;
-
+    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__default["default"](_useState, 2),
-      entry = _useState2[0],
-      setEntry = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_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;
-
+        subscribe = _getObserver.subscribe,
+        localUnsubscribe = _getObserver.unsubscribe;
       unsubscribe = localUnsubscribe;
       subscribe(nodeElement, callback);
     }
-
     currentElement.current = nodeElement;
     return function () {
       if (unsubscribe !== null) {
@@ -646,10 +568,10 @@ var useObserver = function useObserver(Observer) {
     entry: entry
   };
 };
+
 /**
  * Intersection Observer
  */
-
 var thresholdArray = buildThresholdArray();
 var intersectionObserverInitialEntry = {
   target: null,
@@ -663,15 +585,14 @@ var intersectionObserverInitialEntry = {
 };
 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;
-
+    _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,
@@ -679,10 +600,10 @@ var useIntersectionObserver = function useIntersectionObserver() {
     disabled: disabled
   }, intersectionObserverInitialEntry);
 };
+
 /**
  * Resize Observer
  */
-
 var resizeObserverInitialEntry = {
   target: null,
   contentRect: null,
@@ -691,36 +612,31 @@ var resizeObserverInitialEntry = {
 };
 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;
-
+    _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__default["default"](_useResizeObserver, _excluded$2);
-
+    entry = _useResizeObserver.entry,
+    rest = _objectWithoutProperties__default["default"](_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;
-
+    _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;
-
+    _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__default["default"](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;
-
+    _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__default["default"](_objectSpread__default["default"]({}, rest), {}, {
     entry: entry,
     width: inlineSize || width,
@@ -730,25 +646,21 @@ var useDimensionObserver = function useDimensionObserver() {
 
 var useIsVisible = function useIsVisible() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      rootMargin = _ref.rootMargin,
-      _ref$threshold = _ref.threshold,
-      threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
-      _ref$persist = _ref.persist,
-      persist = _ref$persist === void 0 ? false : _ref$persist;
-
+    rootMargin = _ref.rootMargin,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
+    _ref$persist = _ref.persist,
+    persist = _ref$persist === void 0 ? false : _ref$persist;
   var _useIntersectionObser = useIntersectionObserver({
-    rootMargin: rootMargin,
-    threshold: threshold
-  }),
-      ref = _useIntersectionObser.ref,
-      isIntersecting = _useIntersectionObser.entry.isIntersecting;
-
+      rootMargin: rootMargin,
+      threshold: threshold
+    }),
+    ref = _useIntersectionObser.ref,
+    isIntersecting = _useIntersectionObser.entry.isIntersecting;
   var wasIntersecting = react.useRef(isIntersecting);
-
   if (isIntersecting && !wasIntersecting.current) {
     wasIntersecting.current = isIntersecting;
   }
-
   var isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
   return {
     ref: ref,
@@ -760,52 +672,44 @@ 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__default["default"](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__default["default"](fontsMap.active), [name]);
 };
-
 var useLoadedFonts = function useLoadedFonts(fonts) {
   var _useState = react.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      loaded = _useState2[0],
-      setLoaded = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    loaded = _useState2[0],
+    setLoaded = _useState2[1];
   react.useEffect(function () {
     var config = fonts.reduce(function (newConfig, font) {
       var _ref = isObject__default["default"](font) ? font : {
-        type: 'system',
-        name: font
-      },
-          type = _ref.type,
-          name = _ref.name,
-          _ref$variants = _ref.variants,
-          variants = _ref$variants === void 0 ? [] : _ref$variants;
-
+          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__default["default"](_objectSpread__default["default"]({}, newConfig), {}, _defineProperty__default["default"]({}, type, {
           families: [].concat(_toConsumableArray__default["default"](newConfig !== null ? (newConfig[type] || {}).families || [] : []), [type === 'google' ? [name, (variants || []).filter(function (it) {
@@ -816,11 +720,11 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
             fvd: 'n4'
           }].concat(_toConsumableArray__default["default"](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;
+              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) {
@@ -833,11 +737,9 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
           }).join(':')])
         }));
       }
-
       return newConfig;
     }, null);
     var hasConfig = config !== null;
-
     if (hasConfig && typeof window !== 'undefined') {
       Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); }).then(function (_ref3) {
         var WebFont = _ref3["default"];
@@ -869,73 +771,60 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
 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;
-
+    _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__default["default"](_useState, 2),
-      pressed = _useState2[0],
-      setPressed = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    pressed = _useState2[0],
+    setPressed = _useState2[1];
   var _useState3 = react.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      triggered = _useState4[0],
-      setTriggered = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_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, {
@@ -945,25 +834,20 @@ var useLongPress = function useLongPress() {
           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) {
@@ -973,15 +857,12 @@ var useLongPress = function useLongPress() {
         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 {
@@ -1002,7 +883,6 @@ var useLongPress = function useLongPress() {
       }
     };
   };
-
   return {
     bind: bind,
     pressed: pressed,
@@ -1011,97 +891,86 @@ var useLongPress = function useLongPress() {
 };
 
 var progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
-
 var useMediaApi = function useMediaApi() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$url = _ref.url,
-      url = _ref$url === void 0 ? null : _ref$url,
-      _ref$onTimeUpdate = _ref.onTimeUpdate,
-      onTimeUpdate = _ref$onTimeUpdate === void 0 ? null : _ref$onTimeUpdate,
-      _ref$onProgressStep = _ref.onProgressStep,
-      onProgressStep = _ref$onProgressStep === void 0 ? null : _ref$onProgressStep,
-      _ref$onDurationChange = _ref.onDurationChange,
-      onDurationChange = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
-      _ref$onVolumeChange = _ref.onVolumeChange,
-      onVolumeChange = _ref$onVolumeChange === void 0 ? null : _ref$onVolumeChange,
-      _ref$onPlay = _ref.onPlay,
-      onPlay = _ref$onPlay === void 0 ? null : _ref$onPlay,
-      _ref$onPause = _ref.onPause,
-      onPause = _ref$onPause === void 0 ? null : _ref$onPause,
-      _ref$onEnded = _ref.onEnded,
-      onEnded = _ref$onEnded === void 0 ? null : _ref$onEnded,
-      _ref$onSeeked = _ref.onSeeked,
-      onSeeked = _ref$onSeeked === void 0 ? null : _ref$onSeeked,
-      _ref$onSuspend = _ref.onSuspend,
-      onSuspend = _ref$onSuspend === void 0 ? null : _ref$onSuspend,
-      _ref$onLoadStart = _ref.onLoadStart,
-      onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
-      _ref$onCanPlayThough = _ref.onCanPlayThough,
-      onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough,
-      _ref$onCanPlay = _ref.onCanPlay,
-      onCanPlay = _ref$onCanPlay === void 0 ? null : _ref$onCanPlay,
-      _ref$onLoadedData = _ref.onLoadedData,
-      onLoadedData = _ref$onLoadedData === void 0 ? null : _ref$onLoadedData,
-      _ref$onLoadedMetadata = _ref.onLoadedMetadata,
-      onLoadedMetadata = _ref$onLoadedMetadata === void 0 ? null : _ref$onLoadedMetadata;
-
+    _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__default["default"](_useState, 2),
-      currentTime = _useState2[0],
-      setCurrentTime = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    currentTime = _useState2[0],
+    setCurrentTime = _useState2[1];
   var _useState3 = react.useState(null),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      duration = _useState4[0],
-      setDuration = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    duration = _useState4[0],
+    setDuration = _useState4[1];
   var _useState5 = react.useState(false),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      playing = _useState6[0],
-      setPlaying = _useState6[1];
-
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    playing = _useState6[0],
+    setPlaying = _useState6[1];
   var _useState7 = react.useState(false),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      ready = _useState8[0],
-      setReady = _useState8[1];
-
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    ready = _useState8[0],
+    setReady = _useState8[1];
   var _useState9 = react.useState(false),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      dataReady = _useState10[0],
-      setDataReady = _useState10[1];
-
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    dataReady = _useState10[0],
+    setDataReady = _useState10[1];
   var _useState11 = react.useState(true),
-      _useState12 = _slicedToArray__default["default"](_useState11, 2),
-      initialPlay = _useState12[0],
-      setInitialPlay = _useState12[1];
-
+    _useState12 = _slicedToArray__default["default"](_useState11, 2),
+    initialPlay = _useState12[0],
+    setInitialPlay = _useState12[1];
   var _useState13 = react.useState(false),
-      _useState14 = _slicedToArray__default["default"](_useState13, 2),
-      suspended = _useState14[0],
-      setSuspended = _useState14[1];
-
+    _useState14 = _slicedToArray__default["default"](_useState13, 2),
+    suspended = _useState14[0],
+    setSuspended = _useState14[1];
   var progressStepsReached = react.useRef({});
-  var paused = !playing; // Exposed methods
+  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;
@@ -1109,22 +978,25 @@ var useMediaApi = function useMediaApi() {
   }, []);
   var seek = react.useCallback(function (time) {
     var media = ref.current;
-
     if (media !== null) {
       media.currentTime = time;
     }
-  }, []); // const mute = useCallback(() => {
+  }, []);
+
+  // 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 () {
@@ -1133,18 +1005,15 @@ var useMediaApi = function useMediaApi() {
         initial: initialPlay
       });
     }
-
     if (initialPlay) {
       setInitialPlay(false);
     }
-
     setPlaying(true);
     setSuspended(false);
   }, [initialPlay, setPlaying, onPlay]);
   var onCustomPause = react.useCallback(function (e) {
     var eventMedia = e.currentTarget;
     setPlaying(false);
-
     if (onPause !== null) {
       onPause({
         midway: eventMedia.currentTime > 0 && eventMedia.currentTime < eventMedia.duration
@@ -1154,21 +1023,17 @@ var useMediaApi = function useMediaApi() {
   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) {
@@ -1178,28 +1043,26 @@ var useMediaApi = function useMediaApi() {
       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);
+    var eventMedia = e.currentTarget;
 
+    // setMuted(eventMedia.muted);
     if (onVolumeChange !== null) {
       onVolumeChange(eventMedia.volume);
     }
@@ -1211,49 +1074,47 @@ var useMediaApi = function useMediaApi() {
   }, [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);
+      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('pause', onCustomPause);
       media.addEventListener('ended', onCustomEnded);
-      media.addEventListener('seeked', onCustomSeeked); // media.addEventListener('loadstart', onCustomLoadStart);
+      media.addEventListener('seeked', onCustomSeeked);
+      // media.addEventListener('loadstart', onCustomLoadStart);
       // media.addEventListener('canplaythrough', onCustomCanPlayThrough);
       // media.addEventListener('canplay', onCustomCanPlay);
       // media.addEventListener('loadedmetadata', onCustomLoadedMetadata);
@@ -1266,21 +1127,23 @@ var useMediaApi = function useMediaApi() {
         media.removeEventListener('play', onCustomPlay);
         media.removeEventListener('pause', onCustomPause);
         media.removeEventListener('ended', onCustomEnded);
-        media.removeEventListener('seeked', onCustomSeeked); // media.removeEventListener('loadstart', onCustomLoadStart);
+        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,
+  }, [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;
-
+      media = _ref$current2 === void 0 ? null : _ref$current2;
     if (media !== null) {
       media.addEventListener('loadstart', onCustomLoadStart);
       media.addEventListener('canplaythrough', onCustomCanPlayThrough);
@@ -1289,7 +1152,6 @@ var useMediaApi = function useMediaApi() {
       media.addEventListener('loadeddata', onCustomLoadedData);
       media.addEventListener('suspend', onCustomSuspended);
     }
-
     return function () {
       if (media !== null) {
         media.removeEventListener('loadstart', onCustomLoadStart);
@@ -1299,31 +1161,30 @@ var useMediaApi = function useMediaApi() {
         media.removeEventListener('suspend', onCustomSuspended);
       }
     };
-  }, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]); // Duration
+  }, [url, onCustomLoadStart, onCustomCanPlayThrough, onCustomCanPlay, onCustomLoadedMetadata, onCustomSuspended]);
 
+  // Duration
   react.useEffect(function () {
     var _ref$current3 = ref.current,
-        media = _ref$current3 === void 0 ? null : _ref$current3;
-
+      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
+  }, [url, onCustomDurationChange]);
 
+  // Timeupdate
   react.useEffect(function () {
     var _ref$current4 = ref.current,
-        media = _ref$current4 === void 0 ? null : _ref$current4; // console.log('timeupdate', url);
-
+      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);
@@ -1332,14 +1193,12 @@ var useMediaApi = function useMediaApi() {
   }, [url, onCustomTimeUpdate, onCustomDurationChange]);
   react.useEffect(function () {
     var _ref$current5 = ref.current,
-        media = _ref$current5 === void 0 ? null : _ref$current5;
-
+      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 {
@@ -1364,75 +1223,63 @@ var useMediaApi = function useMediaApi() {
 
 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;
-
+    _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__default["default"](_useState, 2),
-      currentTime = _useState2[0],
-      setCurrentTime = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    currentTime = _useState2[0],
+    setCurrentTime = _useState2[1];
   var realCurrentTime = react.useRef(currentTime);
   var finalId = id || element;
   var lastIdRef = react.useRef(finalId);
   var idChanged = lastIdRef.current !== finalId;
   var disabledRef = react.useRef(disabled);
   var disabledChanged = disabledRef.current !== disabled;
-
   if (idChanged || disabledChanged) {
     realCurrentTime.current = element !== null ? element.currentTime || 0 : 0;
     lastIdRef.current = finalId;
     disabledRef.current = disabled;
-  } // Check time update
-
+  }
 
+  // Check time update
   react.useEffect(function () {
     if (element === null) {
       return function () {};
     }
-
     function updateTime() {
       var time = element.currentTime || 0;
-
       if (time !== realCurrentTime.current) {
         realCurrentTime.current = time;
         setCurrentTime(time);
-
         if (customOnUpdate !== null) {
           customOnUpdate(time);
         }
       }
-
       return time;
     }
-
     if (disabled) {
       updateTime();
       return function () {};
     }
-
     var timeout = null;
-
     function loop() {
       var _element$duration = element.duration,
-          duration = _element$duration === void 0 ? 0 : _element$duration;
+        duration = _element$duration === void 0 ? 0 : _element$duration;
       var time = updateTime();
       var remainingTime = Math.floor(((duration || 0) - time) * 1000);
       timeout = setTimeout(loop, Math.max(Math.min(updateInterval, remainingTime), updateInterval));
     }
-
     loop();
     return function () {
       if (element !== null) {
         realCurrentTime.current = element.currentTime;
       }
-
       if (timeout !== null) {
         clearInterval(timeout);
       }
@@ -1443,38 +1290,31 @@ function useMediaCurrentTime(element) {
 
 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;
-
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id;
   var _useState = react.useState(element !== null ? element.duration || 0 : 0),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      duration = _useState2[0],
-      setDuration = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    duration = _useState2[0],
+    setDuration = _useState2[1];
   var realDuration = react.useRef(duration);
   var finalId = id || element;
   var lastIdRef = react.useRef(finalId);
   var idChanged = lastIdRef.current !== finalId;
-
   if (idChanged) {
     realDuration.current = element !== null ? element.duration || 0 : 0;
     lastIdRef.current = finalId;
   }
-
   react.useEffect(function () {
     if (element === null) {
       return function () {};
     }
-
     function updateDuration() {
       var newDuration = element.duration || 0;
-
       if (newDuration !== realDuration.current) {
         realDuration.current = newDuration;
         setDuration(newDuration);
       }
     }
-
     updateDuration();
     element.addEventListener('canplay', updateDuration);
     element.addEventListener('loadedmetadata', updateDuration);
@@ -1490,11 +1330,10 @@ function useMediaDuration(element) {
 
 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;
-
+    _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);
@@ -1502,7 +1341,6 @@ function useMediaLoad(element) {
     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();
@@ -1511,31 +1349,28 @@ function useMediaLoad(element) {
 }
 
 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__default["default"](_ref, _excluded$1);
-
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
   var _useState = react.useState(!disabled),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      playing = _useState2[0],
-      setPlaying = _useState2[1]; // const currentTime = useMediaCurrentTime(media, {
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    playing = _useState2[0],
+    setPlaying = _useState2[1];
+
+  // const currentTime = useMediaCurrentTime(media, {
   //     disabled: disabled || !playing,
   //     ...props,
   // });
 
-
   var duration = useMediaDuration(media, _objectSpread__default["default"]({
     disabled: disabled || !playing
   }, props));
-
-  var _useState3 = react.useState(media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      progress = _useState4[0],
-      setProgress = _useState4[1];
-
+  var _useState3 = react.useState(0),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    progress = _useState4[0],
+    setProgress = _useState4[1];
   var realProgressRef = react.useRef(progress);
   var updateTimeRef = react.useRef(new Date().getTime());
   var updateProgress = react.useCallback(function (newProgress) {
@@ -1543,67 +1378,69 @@ function useMediaProgress(media) {
     realProgressRef.current = newProgress;
     setProgress(newProgress);
   }, [setProgress]);
+  react.useEffect(function () {
+    if (media !== null) {
+      var value = media !== null && (media.currentTime || 0) > 0 && duration > 0 ? media.currentTime / duration : 0;
+      updateProgress(value);
+    } else {
+      updateProgress(0);
+    }
+    setPlaying(!disabled);
+  }, [media, disabled, setPlaying]);
   react.useEffect(function () {
     if (media === null) {
       return function () {};
     }
-
     function onResume() {
       if (!playing) {
         setPlaying(true);
       }
-
       updateProgress(media.currentTime / media.duration);
     }
-
     function onPause() {
       if (playing) {
         setPlaying(false);
       }
-
       updateProgress(media.currentTime / media.duration);
     }
-
     media.addEventListener('play', onResume);
     media.addEventListener('seeked', onResume);
-    media.addEventListener('playing', onResume); // media.addEventListener('timeupdate', onResume);
-
+    media.addEventListener('playing', onResume);
+    // media.addEventListener('timeupdate', onResume);
     media.addEventListener('pause', onPause);
     media.addEventListener('ended', onPause);
     media.addEventListener('waiting', onPause);
     media.addEventListener('stalled', onPause);
-    media.addEventListener('seeking', onPause); // media.addEventListener('suspend', onPause);
+    media.addEventListener('seeking', onPause);
+    // media.addEventListener('suspend', onPause);
     // 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('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', onPause);
+      media.removeEventListener('seeking', onPause);
+      // media.removeEventListener('suspend', onPause);
     };
   }, [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 = new Date().getTime();
       var elapsed = newTime - updateTimeRef.current;
       updateTimeRef.current = newTime;
@@ -1612,7 +1449,6 @@ function useMediaProgress(media) {
       updateProgress(newProgress);
       handle = raf__default["default"](tick);
     }
-
     tick();
     return function () {
       canceled = true;
@@ -1624,31 +1460,25 @@ function useMediaProgress(media) {
 
 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;
-
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id;
   var _useState = react.useState(element !== null && element.readyState > 0),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      ready = _useState2[0],
-      setReady = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_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;
@@ -1656,19 +1486,15 @@ function useMediaReady(element) {
         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);
@@ -1682,8 +1508,9 @@ function useMediaReady(element) {
 
 var useMediasParser = function useMediasParser() {
   var screensManager = contexts.useScreensManager();
-  var fieldsManager = contexts.useFieldsManager(); // Convert medias object to path
+  var fieldsManager = contexts.useFieldsManager();
 
+  // Convert medias object to path
   var parser = react.useMemo(function () {
     return new core.MediasParser({
       screensManager: screensManager,
@@ -1709,28 +1536,23 @@ function useMediaThumbnail(media) {
     if (isObject__default["default"](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;
-
+      _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;
-
+      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;
-
+        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: {
@@ -1744,30 +1566,25 @@ function useMediaThumbnail(media) {
 
 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;
-
+    _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;
-
+    _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;
-
+    _ref3$waveform = _ref3.waveform,
+    waveform = _ref3$waveform === void 0 ? null : _ref3$waveform;
   var _useState = react.useState(null),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      audioLevels = _useState2[0],
-      setAudioLevels = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_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;
@@ -1784,18 +1601,15 @@ function useMediaWaveform(media) {
         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) {
@@ -1808,7 +1622,6 @@ function useMediaWaveform(media) {
         throw e;
       });
     }
-
     return function () {
       if (url === null) {
         canceled = true;
@@ -1818,17 +1631,18 @@ function useMediaWaveform(media) {
   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$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;
   var screensManager = contexts.useScreensManager();
   var fieldsManager = contexts.useFieldsManager();
   var parser = react.useMemo(function () {
@@ -1841,7 +1655,6 @@ var useParsedStory = function useParsedStory(story) {
     if (disabled) {
       return story;
     }
-
     return parser.parse(story, {
       withMedias: withMedias,
       withTheme: withTheme,
@@ -1853,21 +1666,19 @@ var useParsedStory = function useParsedStory(story) {
 
 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;
-
+    _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) {
@@ -1877,7 +1688,6 @@ function useProgressSteps() {
       if (onStep !== null) {
         onStep(step);
       }
-
       currentSteps[step] = true;
     });
   }, [duration, currentTime, disabled]);
@@ -1885,37 +1695,34 @@ function useProgressSteps() {
 
 var _excluded = ["width", "height"];
 var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-
 var useScreenSize = function useScreenSize(_ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? null : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? null : _ref$height,
-      _ref$landscape = _ref.landscape,
-      landscape = _ref$landscape === void 0 ? false : _ref$landscape,
-      _ref$menuOverScreen = _ref.menuOverScreen,
-      menuOverScreen = _ref$menuOverScreen === void 0 ? false : _ref$menuOverScreen,
-      _ref$screens = _ref.screens,
-      screens = _ref$screens === void 0 ? [] : _ref$screens,
-      _ref$mediaType = _ref.mediaType,
-      mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
-      _ref$media = _ref.media,
-      providedMedia = _ref$media === void 0 ? null : _ref$media,
-      _ref$scale = _ref.scale,
-      scale = _ref$scale === void 0 ? null : _ref$scale;
+    width = _ref$width === void 0 ? null : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? null : _ref$height,
+    _ref$landscape = _ref.landscape,
+    landscape = _ref$landscape === void 0 ? false : _ref$landscape,
+    _ref$menuOverScreen = _ref.menuOverScreen,
+    menuOverScreen = _ref$menuOverScreen === void 0 ? false : _ref$menuOverScreen,
+    _ref$screens = _ref.screens,
+    screens = _ref$screens === void 0 ? [] : _ref$screens,
+    _ref$mediaType = _ref.mediaType,
+    mediaType = _ref$mediaType === void 0 ? 'screen' : _ref$mediaType,
+    _ref$media = _ref.media,
+    providedMedia = _ref$media === void 0 ? null : _ref$media,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? null : _ref$scale;
   var screenSize = react.useMemo(function () {
     var media = providedMedia !== null ? providedMedia : {
       type: mediaType,
       width: "".concat(width, "px"),
       height: "".concat(height, "px")
     };
-
     var matchingScreens = _toConsumableArray__default["default"](screens).reverse().filter(function (_ref2) {
       var _ref2$mediaQuery = _ref2.mediaQuery,
-          mediaQuery = _ref2$mediaQuery === void 0 ? null : _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__default["default"](matchingScreens).reverse().map(function (_ref3) {
@@ -1931,41 +1738,36 @@ var useScreenSize = function useScreenSize(_ref) {
   }, [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__default["default"](_ref4, _excluded);
-
+    _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__default["default"](_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;
-
+    ref = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+    _useDimensionObserver3 = _useDimensionObserver.height,
+    calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
   var fullWidth = width !== null ? width : calculatedWidth;
   var fullHeight = height !== null ? height : calculatedHeight;
-
   var _ref5 = opts || {},
-      _ref5$screenWidth = _ref5.screenWidth,
-      screenWidth = _ref5$screenWidth === void 0 ? 320 : _ref5$screenWidth,
-      _ref5$screenHeight = _ref5.screenHeight,
-      screenHeight = _ref5$screenHeight === void 0 ? 480 : _ref5$screenHeight,
-      _ref5$withoutMaxSize = _ref5.withoutMaxSize,
-      withoutMaxSize = _ref5$withoutMaxSize === void 0 ? false : _ref5$withoutMaxSize,
-      _ref5$landscapeMinHei = _ref5.landscapeMinHeight,
-      landscapeMinHeight = _ref5$landscapeMinHei === void 0 ? 600 : _ref5$landscapeMinHei,
-      _ref5$menuAlwaysOverS = _ref5.menuAlwaysOverScreen,
-      menuAlwaysOverScreen = _ref5$menuAlwaysOverS === void 0 ? true : _ref5$menuAlwaysOverS,
-      _ref5$landscapeMinRat = _ref5.landscapeMinRatio,
-      landscapeMinRatio = _ref5$landscapeMinRat === void 0 ? 2 / 3 : _ref5$landscapeMinRat,
-      _ref5$withoutScale = _ref5.withoutScale,
-      withoutScale = _ref5$withoutScale === void 0 ? false : _ref5$withoutScale;
-
+    _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);
@@ -1973,25 +1775,20 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
   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__default["default"]({
     width: withoutScale || scale === null ? finalWidth : screenWidth,
@@ -2009,29 +1806,24 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     resolution: !withoutScale ? scale * devicePixelRatio : devicePixelRatio
   };
 };
-
 var getWindowSize = function getWindowSize() {
   return {
     width: typeof window !== 'undefined' ? window.innerWidth : null,
     height: typeof window !== 'undefined' ? window.innerHæeight : null
   };
 };
-
 var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
   var _useState = react.useState(getWindowSize()),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      windowSize = _useState2[0],
-      setWindowSize = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    windowSize = _useState2[0],
+    setWindowSize = _useState2[1];
   react.useEffect(function () {
     var onResize = function onResize() {
       return setWindowSize(getWindowSize());
     };
-
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', onResize);
     }
-
     return function () {
       if (typeof window !== 'undefined') {
         window.removeEventListener('resize', onResize);
@@ -2043,21 +1835,17 @@ var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
 
 var getValueFromSpring = function getValueFromSpring(s) {
   var _ref = s || {},
-      _ref$value = _ref.value,
-      v = _ref$value === void 0 ? null : _ref$value;
-
+    _ref$value = _ref.value,
+    v = _ref$value === void 0 ? null : _ref$value;
   var _ref2 = v || {},
-      p = _ref2.progress;
-
+    p = _ref2.progress;
   return p;
 };
-
 function useSpringValue(wantedProgress, immediate, params) {
   var _useState = react.useState(wantedProgress),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      progress = _useState2[0],
-      setProgress = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    progress = _useState2[0],
+    setProgress = _useState2[1];
   var onChange = react.useCallback(function (spring) {
     return setProgress(getValueFromSpring(spring));
   }, [setProgress]);
@@ -2071,29 +1859,28 @@ function useSpringValue(wantedProgress, immediate, params) {
 
 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;
-
+    _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);
@@ -2113,55 +1900,52 @@ var useSwipe = function useSwipe() {
   });
   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;
-
+      _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
+  }, [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__default["default"]({}, !withSpring ? {
-        duration: 1
-      } : null)
-    };
-  }),
-      _useSprings2 = _slicedToArray__default["default"](_useSprings, 2),
-      itemsWithProps = _useSprings2[0],
-      set = _useSprings2[1];
-
+      return {
+        x: disabled ? 0 : i * currentWidth,
+        y: 0,
+        zIndex: i,
+        config: _objectSpread__default["default"]({}, !withSpring ? {
+          duration: 1
+        } : null)
+      };
+    }),
+    _useSprings2 = _slicedToArray__default["default"](_useSprings, 2),
+    itemsWithProps = _useSprings2[0],
+    set = _useSprings2[1];
   var bind = react$1.useDrag(function (_ref3) {
     var down = _ref3.down,
-        _ref3$movement = _slicedToArray__default["default"](_ref3.movement, 2),
-        mx = _ref3$movement[0],
-        my = _ref3$movement[1],
-        _ref3$direction = _slicedToArray__default["default"](_ref3.direction, 1),
-        xDir = _ref3$direction[0],
-        cancel = _ref3.cancel,
-        tap = _ref3.tap;
-
+      _ref3$movement = _slicedToArray__default["default"](_ref3.movement, 2),
+      mx = _ref3$movement[0],
+      my = _ref3$movement[1],
+      _ref3$direction = _slicedToArray__default["default"](_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
+    }
 
+    // Block first and last moves
     /*
     if (down && index.current === items.length - 1 && xDir < 0) {
         cancel();
@@ -2173,55 +1957,48 @@ var useSwipe = function useSwipe() {
     }
     */
 
-
     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__default["default"](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
+    }));
 
+    // 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)
-
+    }
 
+    // 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
@@ -2232,8 +2009,9 @@ var useSwipe = function useSwipe() {
   var setIndex = react.useCallback(function (idx) {
     index.current = idx;
     reset();
-  }, [reset]); // Reset on resize or others
+  }, [reset]);
 
+  // Reset on resize or others
   react.useEffect(function () {
     set(getItems());
   }, [items, width, set, disabled]);
@@ -2260,20 +2038,17 @@ var useThemeParser = function useThemeParser() {
 
 var getScreenOptions = function getScreenOptions(screenContext, opts) {
   var _ref = screenContext || {},
-      _ref$data = _ref.data,
-      ctxData = _ref$data === void 0 ? null : _ref$data;
-
+    _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;
-
+    _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;
-
+    _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 {
@@ -2281,22 +2056,17 @@ var getScreenOptions = function getScreenOptions(screenContext, opts) {
     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);
     }
@@ -2305,22 +2075,17 @@ var useTrackScreenView = function useTrackScreenView() {
 var useTrackScreenEvent = function useTrackScreenEvent() {
   var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var tracking = contexts.useTracking();
-
   if (!hasTracking(tracking)) {
     return function () {};
   }
-
   var screenContext = contexts.useScreen();
-
   if (screenContext.renderContext !== 'view') {
     return function () {};
   }
-
   return react.useCallback(function () {
     var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var opts = arguments.length > 2 ? arguments[2] : undefined;
-
     if (type !== null && action !== null) {
       tracking.trackEvent("screen_".concat(type), action, label, _objectSpread__default["default"](_objectSpread__default["default"]({}, opts), getScreenOptions(screenContext, opts)));
     }
@@ -2329,22 +2094,17 @@ var useTrackScreenEvent = function useTrackScreenEvent() {
 var useTrackScreenMedia = function useTrackScreenMedia() {
   var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var tracking = contexts.useTracking();
-
   if (!hasTracking(tracking)) {
     return function () {};
   }
-
   var screenContext = contexts.useScreen();
-
   if (screenContext.renderContext !== 'view') {
     return function () {};
   }
-
   return react.useCallback(function () {
     var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var opts = arguments.length > 2 ? arguments[2] : undefined;
-
     if (type !== null && media !== null && action !== null) {
       tracking.trackMedia("screen_".concat(type), media, action, _objectSpread__default["default"](_objectSpread__default["default"]({}, opts), getScreenOptions(screenContext, opts)));
     }
@@ -2352,17 +2112,14 @@ var useTrackScreenMedia = function useTrackScreenMedia() {
 };
 var useTrackEvent = function useTrackEvent() {
   var tracking = contexts.useTracking();
-
   if (!hasTracking(tracking)) {
     return function () {};
   }
-
   return react.useCallback(function () {
     var category = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     var opts = arguments.length > 3 ? arguments[3] : undefined;
-
     if (category !== null && action !== null) {
       tracking.trackEvent(category, action, label, opts);
     }
@@ -2371,16 +2128,13 @@ var useTrackEvent = function useTrackEvent() {
 var useTrackMedia = function useTrackMedia() {
   var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var tracking = contexts.useTracking();
-
   if (!hasTracking(tracking)) {
     return function () {};
   }
-
   return react.useCallback(function () {
     var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var opts = arguments.length > 2 ? arguments[2] : undefined;
-
     if (type !== null && media !== null && action !== null) {
       tracking.trackMedia(type, media, action, opts);
     }