@panneau/core 1.0.3-alpha.1 → 1.0.3

package/lib/hooks.js

@@ -53,27 +53,22 @@ var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 
 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);
@@ -84,16 +79,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",
@@ -103,7 +96,6 @@ var useFormattedDate = function useFormattedDate() {
         }]
       });
     }
-
     return intl.formatDate(dayjs__default["default"](date).toDate(), _objectSpread__default["default"]({
       year: 'numeric',
       month: 'long',
@@ -113,18 +105,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",
@@ -134,7 +124,6 @@ var useFormattedTime = function useFormattedTime() {
         }]
       });
     }
-
     return intl.formatTime(dateToFormat.toDate(), _objectSpread__default["default"]({
       hour: 'numeric',
       minute: 'numeric'
@@ -147,20 +136,19 @@ var useDocumentEvent = utils.createUseEvent(eventsManager$1);
 
 var _excluded$1 = ["value", "errors", "onChange"];
 
+// prettier-ignore
 var getFieldsPropsFromFields = function getFieldsPropsFromFields(fields, _ref) {
   var value = _ref.value,
-      errors = _ref.errors,
-      _onChange = _ref.onChange,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
-
+    errors = _ref.errors,
+    _onChange = _ref.onChange,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
   var locales = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   return fields.reduce(function (allFields, field) {
     var _ref2 = isObject__default["default"](field) ? field : {},
-        _ref2$name = _ref2.name,
-        name = _ref2$name === void 0 ? isString__default["default"](field) ? field : null : _ref2$name,
-        _ref2$component = _ref2.component,
-        component = _ref2$component === void 0 ? null : _ref2$component;
-
+      _ref2$name = _ref2.name,
+      name = _ref2$name === void 0 ? isString__default["default"](field) ? field : null : _ref2$name,
+      _ref2$component = _ref2.component,
+      component = _ref2$component === void 0 ? null : _ref2$component;
     var fieldErrors = errors !== null ? errors[name] || [] : [];
     var localizedErrors = component === 'localized' ? (locales || []).reduce(function (previousErrors, locale) {
       var items = errors !== null ? get__default["default"](errors, "".concat(name, ".").concat(locale), []) || [] : [];
@@ -179,67 +167,60 @@ var getFieldsPropsFromFields = function getFieldsPropsFromFields(fields, _ref) {
     }, props)]);
   }, []);
 };
-
 var useForm = function useForm() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _opts$fields = opts.fields,
-      fields = _opts$fields === void 0 ? [] : _opts$fields,
-      _opts$action = opts.action,
-      action = _opts$action === void 0 ? null : _opts$action,
-      _opts$postForm = opts.postForm,
-      postForm = _opts$postForm === void 0 ? null : _opts$postForm,
-      _opts$initialErrors = opts.initialErrors,
-      initialErrors = _opts$initialErrors === void 0 ? null : _opts$initialErrors,
-      _opts$errors = opts.errors,
-      providedErrors = _opts$errors === void 0 ? null : _opts$errors,
-      _opts$setErrors = opts.setErrors,
-      setProvidedErrors = _opts$setErrors === void 0 ? null : _opts$setErrors,
-      _opts$initialGeneralE = opts.initialGeneralError,
-      initialGeneralError = _opts$initialGeneralE === void 0 ? null : _opts$initialGeneralE,
-      _opts$generalError = opts.generalError,
-      providedGeneralError = _opts$generalError === void 0 ? null : _opts$generalError,
-      _opts$setGeneralError = opts.setGeneralError,
-      setProvidedGeneralError = _opts$setGeneralError === void 0 ? null : _opts$setGeneralError,
-      _opts$initialValue = opts.initialValue,
-      initialValue = _opts$initialValue === void 0 ? null : _opts$initialValue,
-      _opts$value = opts.value,
-      providedValue = _opts$value === void 0 ? null : _opts$value,
-      _opts$setValue = opts.setValue,
-      setProvidedValue = _opts$setValue === void 0 ? null : _opts$setValue,
-      _opts$onComplete = opts.onComplete,
-      onComplete = _opts$onComplete === void 0 ? null : _opts$onComplete,
-      _opts$locales = opts.locales,
-      locales = _opts$locales === void 0 ? [] : _opts$locales;
-
+    fields = _opts$fields === void 0 ? [] : _opts$fields,
+    _opts$action = opts.action,
+    action = _opts$action === void 0 ? null : _opts$action,
+    _opts$postForm = opts.postForm,
+    postForm = _opts$postForm === void 0 ? null : _opts$postForm,
+    _opts$initialErrors = opts.initialErrors,
+    initialErrors = _opts$initialErrors === void 0 ? null : _opts$initialErrors,
+    _opts$errors = opts.errors,
+    providedErrors = _opts$errors === void 0 ? null : _opts$errors,
+    _opts$setErrors = opts.setErrors,
+    setProvidedErrors = _opts$setErrors === void 0 ? null : _opts$setErrors,
+    _opts$initialGeneralE = opts.initialGeneralError,
+    initialGeneralError = _opts$initialGeneralE === void 0 ? null : _opts$initialGeneralE,
+    _opts$generalError = opts.generalError,
+    providedGeneralError = _opts$generalError === void 0 ? null : _opts$generalError,
+    _opts$setGeneralError = opts.setGeneralError,
+    setProvidedGeneralError = _opts$setGeneralError === void 0 ? null : _opts$setGeneralError,
+    _opts$initialValue = opts.initialValue,
+    initialValue = _opts$initialValue === void 0 ? null : _opts$initialValue,
+    _opts$value = opts.value,
+    providedValue = _opts$value === void 0 ? null : _opts$value,
+    _opts$setValue = opts.setValue,
+    setProvidedValue = _opts$setValue === void 0 ? null : _opts$setValue,
+    _opts$onComplete = opts.onComplete,
+    onComplete = _opts$onComplete === void 0 ? null : _opts$onComplete,
+    _opts$locales = opts.locales,
+    locales = _opts$locales === void 0 ? [] : _opts$locales;
   var _useState = react.useState(initialValue || providedValue),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      stateValue = _useState2[0],
-      setStateValue = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    stateValue = _useState2[0],
+    setStateValue = _useState2[1];
   var _useState3 = react.useState(initialErrors || providedErrors),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      stateErrors = _useState4[0],
-      setStateErrors = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    stateErrors = _useState4[0],
+    setStateErrors = _useState4[1];
   var _useState5 = react.useState(initialGeneralError || providedGeneralError),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      stateGeneralError = _useState6[0],
-      setStateGeneralError = _useState6[1];
-
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    stateGeneralError = _useState6[0],
+    setStateGeneralError = _useState6[1];
   var _useState7 = react.useState({
-    success: false,
-    loading: false,
-    error: false
-  }),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      requestState = _useState8[0],
-      setRequestState = _useState8[1];
-
+      success: false,
+      loading: false,
+      error: false
+    }),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    requestState = _useState8[0],
+    setRequestState = _useState8[1];
   var _useState9 = react.useState(null),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      response = _useState10[0],
-      setResponse = _useState10[1];
-
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    response = _useState10[0],
+    setResponse = _useState10[1];
   var hasProvidedValue = setProvidedValue !== null;
   var value = hasProvidedValue ? providedValue : stateValue;
   var setValue = hasProvidedValue ? setProvidedValue : setStateValue;
@@ -252,11 +233,9 @@ var useForm = function useForm() {
   var fieldsKey = [value, errors, locales].concat(fields);
   var onFieldChange = react.useCallback(function (fieldName, fieldValue) {
     var fieldErrors = errors !== null ? errors[fieldName] || null : null;
-
     if (fieldErrors !== null) {
       setErrors(_objectSpread__default["default"](_objectSpread__default["default"]({}, errors), {}, _defineProperty__default["default"]({}, fieldName, null)));
     }
-
     setValue(_objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, _defineProperty__default["default"]({}, fieldName, fieldValue)));
   }, fieldsKey);
   var fieldsProps = react.useMemo(function () {
@@ -269,25 +248,21 @@ var useForm = function useForm() {
   var csrfToken = react.useMemo(function () {
     return fetch.getCsrfToken();
   }, []);
-
   var onSubmitError = function onSubmitError(error) {
     setRequestState({
       success: false,
       loading: false,
       error: true
     });
-
     if (error.name === 'ValidationError') {
       var _error$getResponseDat = error.getResponseData(),
-          _error$getResponseDat2 = _error$getResponseDat.errors,
-          validationErrors = _error$getResponseDat2 === void 0 ? null : _error$getResponseDat2;
-
+        _error$getResponseDat2 = _error$getResponseDat.errors,
+        validationErrors = _error$getResponseDat2 === void 0 ? null : _error$getResponseDat2;
       setErrors(validationErrors);
     } else {
       setGeneralError(error.message);
     }
   };
-
   var onSubmitSuccess = function onSubmitSuccess(resp) {
     setRequestState({
       success: true,
@@ -295,12 +270,10 @@ var useForm = function useForm() {
       error: false
     });
     setResponse(resp);
-
     if (onComplete !== null) {
       onComplete(resp);
     }
   };
-
   var finalPostForm = react.useCallback(function (postAction, postData) {
     return postForm !== null ? postForm(postAction, postData) : fetch.postJSON(postAction, postData, {
       credentials: 'include',
@@ -325,7 +298,6 @@ var useForm = function useForm() {
     submit();
   }, [submit]);
   var status = null;
-
   if (requestState.loading) {
     status = 'loading';
   } else if (requestState.success) {
@@ -333,7 +305,6 @@ var useForm = function useForm() {
   } else if (requestState.error) {
     status = 'error';
   }
-
   return _objectSpread__default["default"](_objectSpread__default["default"]({
     value: value,
     setValue: setValue,
@@ -352,27 +323,22 @@ var useForm = function useForm() {
 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), {}, {
@@ -382,13 +348,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), {}, {
@@ -400,13 +364,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);
@@ -415,13 +377,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) {
@@ -429,103 +388,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) {
@@ -538,10 +476,10 @@ var useObserver = function useObserver(Observer) {
     entry: entry
   };
 };
+
 /**
  * Intersection Observer
  */
-
 var thresholdArray = buildThresholdArray();
 var intersectionObserverInitialEntry = {
   target: null,
@@ -555,15 +493,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,
@@ -571,10 +508,10 @@ var useIntersectionObserver = function useIntersectionObserver() {
     disabled: disabled
   }, intersectionObserverInitialEntry);
 };
+
 /**
  * Resize Observer
  */
-
 var resizeObserverInitialEntry = {
   target: null,
   contentRect: null,
@@ -583,9 +520,8 @@ 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);
@@ -593,25 +529,21 @@ var useResizeObserver = function useResizeObserver() {
 
 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,
@@ -623,62 +555,54 @@ 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;
-
+          type: 'system',
+          name: font
+        },
+        type = _ref.type,
+        name = _ref.name;
       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 || [] : []), [name])
         }));
       }
-
       return newConfig;
     }, null);
     var hasConfig = config !== null;
-
     if (hasConfig && typeof window !== 'undefined') {
-      Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); }).then(function (_ref2) {
+      utils.loadPackage('webfontloader', function () {
+        return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('webfontloader')); });
+      }).then(function (_ref2) {
         var WebFont = _ref2["default"];
         return WebFont.load(_objectSpread__default["default"](_objectSpread__default["default"]({}, config), {}, {
           timeout: 3000,
@@ -706,86 +630,76 @@ var useLoadedFonts = function useLoadedFonts(fonts) {
 };
 
 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$initialMuted = _ref.initialMuted,
-      initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
-      _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.onDurationChanged,
-      onDurationChanged = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
-      _ref$onVolumeChanged = _ref.onVolumeChanged,
-      onVolumeChanged = _ref$onVolumeChanged === void 0 ? null : _ref$onVolumeChanged,
-      _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$onLoadStart = _ref.onLoadStart,
-      onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
-      _ref$onCanPlayThough = _ref.onCanPlayThough,
-      onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough;
-
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? null : _ref$url,
+    _ref$initialMuted = _ref.initialMuted,
+    initialMuted = _ref$initialMuted === void 0 ? false : _ref$initialMuted,
+    _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.onDurationChanged,
+    onDurationChanged = _ref$onDurationChange === void 0 ? null : _ref$onDurationChange,
+    _ref$onVolumeChanged = _ref.onVolumeChanged,
+    onVolumeChanged = _ref$onVolumeChanged === void 0 ? null : _ref$onVolumeChanged,
+    _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$onLoadStart = _ref.onLoadStart,
+    onLoadStart = _ref$onLoadStart === void 0 ? null : _ref$onLoadStart,
+    _ref$onCanPlayThough = _ref.onCanPlayThough,
+    onCanPlayThough = _ref$onCanPlayThough === void 0 ? null : _ref$onCanPlayThough;
   var ref = react.useRef(null);
-
   var _useState = react.useState(initialMuted),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      muted = _useState2[0],
-      setMuted = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    muted = _useState2[0],
+    setMuted = _useState2[1];
   var _useState3 = react.useState(null),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      currentTime = _useState4[0],
-      setCurrentTime = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    currentTime = _useState4[0],
+    setCurrentTime = _useState4[1];
   var _useState5 = react.useState(null),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      duration = _useState6[0],
-      setDuration = _useState6[1];
-
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    duration = _useState6[0],
+    setDuration = _useState6[1];
   var _useState7 = react.useState(false),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      playing = _useState8[0],
-      setPlaying = _useState8[1];
-
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    playing = _useState8[0],
+    setPlaying = _useState8[1];
   var _useState9 = react.useState(false),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      ready = _useState10[0],
-      setReady = _useState10[1];
-
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    ready = _useState10[0],
+    setReady = _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 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 togglePlay = react.useCallback(function () {
     var media = ref.current;
-
     if (media !== null) {
       if (playing) {
         media.pause();
@@ -796,7 +710,6 @@ var useMediaApi = function useMediaApi() {
   }, [playing]);
   var stop = react.useCallback(function () {
     var media = ref.current;
-
     if (media !== null) {
       media.pause();
       media.currentTime = 0;
@@ -804,32 +717,30 @@ var useMediaApi = function useMediaApi() {
   }, []);
   var seek = react.useCallback(function (time) {
     var media = ref.current;
-
     if (media !== null) {
       media.currentTime = time;
     }
   }, []);
   var mute = react.useCallback(function () {
     var media = ref.current;
-
     if (media !== null) {
       media.muted = true;
     }
   }, []);
   var unMute = react.useCallback(function () {
     var media = ref.current;
-
     if (media !== null) {
       media.muted = false;
     }
   }, []);
   var toggleMute = react.useCallback(function () {
     var media = ref.current;
-
     if (media !== null) {
       media.muted = !muted;
     }
-  }, [muted]); // Media events callbacks
+  }, [muted]);
+
+  // Media events callbacks
 
   var onCustomPlay = react.useCallback(function () {
     if (onPlay !== null) {
@@ -837,17 +748,14 @@ var useMediaApi = function useMediaApi() {
         initial: initialPlay
       });
     }
-
     if (initialPlay) {
       setInitialPlay(false);
     }
-
     setPlaying(true);
   }, [initialPlay, setPlaying, onPlay]);
   var onCustomPause = react.useCallback(function () {
     var media = ref.current;
     setPlaying(false);
-
     if (onPause !== null) {
       onPause({
         midway: media.currentTime > 0 && media.currentTime < media.duration
@@ -857,21 +765,17 @@ var useMediaApi = function useMediaApi() {
   var onCustomEnded = react.useCallback(function () {
     var media = ref.current;
     media.currentTime = 0;
-
     if (onEnded !== null) {
       onEnded();
     }
-
     setInitialPlay(true);
   }, [setInitialPlay, onEnded]);
   var onCustomTimeUpdate = react.useCallback(function () {
     var media = ref.current;
     setCurrentTime(media.currentTime);
-
     if (onTimeUpdate !== null) {
       onTimeUpdate(media.currentTime);
     }
-
     var progress = media.currentTime / media.duration;
     var currentSteps = progressStepsReached.current;
     var stepsToTrack = progressSteps.filter(function (step) {
@@ -881,21 +785,18 @@ var useMediaApi = function useMediaApi() {
       if (onProgressStep !== null) {
         onProgressStep(step);
       }
-
       currentSteps[step] = true;
     });
   }, [setCurrentTime, onTimeUpdate, onProgressStep]);
   var onCustomDurationChange = react.useCallback(function () {
     var media = ref.current;
     setDuration(media.duration);
-
     if (onDurationChanged !== null) {
       onDurationChanged(media.duration);
     }
   }, [setDuration, onDurationChanged]);
   var onCustomSeeked = react.useCallback(function () {
     var media = ref.current;
-
     if (onSeeked !== null) {
       onSeeked(media.currentTime);
     }
@@ -903,28 +804,24 @@ var useMediaApi = function useMediaApi() {
   var onCustomVolumeChange = react.useCallback(function () {
     var media = ref.current;
     setMuted(media.muted);
-
     if (onVolumeChanged !== null) {
       onVolumeChanged(media.muted, media.volume);
     }
   }, [setMuted, onVolumeChanged]);
   var onCustomLoadStart = react.useCallback(function () {
     setReady(false);
-
     if (onLoadStart !== null) {
       onLoadStart();
     }
   }, [setReady, onLoadStart]);
   var onCustomCanPlayThrough = react.useCallback(function () {
     setReady(true);
-
     if (onCanPlayThough !== null) {
       onCanPlayThough();
     }
   }, [setReady, onCanPlayThough]);
   react.useEffect(function () {
     var media = ref.current;
-
     if (media !== null) {
       media.addEventListener('timeupdate', onCustomTimeUpdate);
       media.addEventListener('durationchange', onCustomDurationChange);
@@ -936,7 +833,6 @@ var useMediaApi = function useMediaApi() {
       media.addEventListener('loadstart', onCustomLoadStart);
       media.addEventListener('canplaythrough', onCustomCanPlayThrough);
     }
-
     return function () {
       if (media !== null) {
         media.removeEventListener('timeupdate', onCustomTimeUpdate);
@@ -972,8 +868,9 @@ var useMediaApi = function useMediaApi() {
 
 var useMediasParser = function useMediasParser() {
   // const screensManager = 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,
@@ -998,7 +895,6 @@ var getResource = function getResource(resources, resourceId) {
     return it.id === resourceId;
   }) || null : resourceId;
 };
-
 var useResourceUrlGenerator = function useResourceUrlGenerator() {
   var resourceId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var resources = contexts.usePanneauResources();
@@ -1011,15 +907,13 @@ var useResourceUrlGenerator = function useResourceUrlGenerator() {
     var finalRouteName = resourceId !== null ? routeResourceId : routeName;
     var finalParams = resourceId !== null ? routeName : params;
     var finalResource = getResource(resources, routeResourceId) || resource;
-
     var _ref = finalResource || {},
-        _ref$id = _ref.id,
-        id = _ref$id === void 0 ? null : _ref$id; // console.log('gen', finalRouteName, route(`resources.${finalRouteName}`, {
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? null : _ref$id;
+    // console.log('gen', finalRouteName, route(`resources.${finalRouteName}`, {
     //     ...finalParams,
     //     resource: id,
     // }));
-
-
     return id !== null ? route("resources.".concat(finalRouteName), _objectSpread__default["default"](_objectSpread__default["default"]({}, finalParams), {}, {
       resource: id
     })) : null;
@@ -1027,20 +921,19 @@ var useResourceUrlGenerator = function useResourceUrlGenerator() {
 };
 
 var _excluded = ["width", "height"];
-
 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$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;
+    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$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;
   // Get media
   var media = react.useMemo(function () {
     return providedMedia !== null ? providedMedia : {
@@ -1048,12 +941,13 @@ var useScreenSize = function useScreenSize(_ref) {
       width: "".concat(width, "px"),
       height: "".concat(height, "px")
     };
-  }, [providedMedia, mediaType, width, height]); // Get matching screens
+  }, [providedMedia, mediaType, width, height]);
 
+  // Get matching screens
   var matchingScreens = react.useMemo(function () {
     return _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);
     });
   }, [screens, media]);
@@ -1068,41 +962,34 @@ var useScreenSize = function useScreenSize(_ref) {
     landscape: landscape
   };
 };
-
 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 _useResizeObserver = useResizeObserver(),
-      ref = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
+    ref = _useResizeObserver.ref,
+    contentRect = _useResizeObserver.entry.contentRect;
   var _ref5 = contentRect || {},
-      _ref5$width = _ref5.width,
-      calculatedWidth = _ref5$width === void 0 ? 0 : _ref5$width,
-      _ref5$height = _ref5.height,
-      calculatedHeight = _ref5$height === void 0 ? 0 : _ref5$height;
-
+    _ref5$width = _ref5.width,
+    calculatedWidth = _ref5$width === void 0 ? 0 : _ref5$width,
+    _ref5$height = _ref5.height,
+    calculatedHeight = _ref5$height === void 0 ? 0 : _ref5$height;
   var semiFinalWidth = width !== null ? width : calculatedWidth;
   var semiFinalHeight = height !== null ? height : calculatedHeight;
   var landscape = semiFinalHeight > 0 && semiFinalWidth > semiFinalHeight;
   var _opts$withoutMaxSize = opts.withoutMaxSize,
-      withoutMaxSize = _opts$withoutMaxSize === void 0 ? false : _opts$withoutMaxSize;
+    withoutMaxSize = _opts$withoutMaxSize === void 0 ? false : _opts$withoutMaxSize;
   var finalWidth = landscape && !withoutMaxSize ? Math.round(Math.max(320, 0.45 * semiFinalHeight)) : semiFinalWidth;
   var finalHeight = landscape && !withoutMaxSize ? Math.round(Math.max(533, 0.75 * semiFinalHeight)) : semiFinalHeight;
-
   if (finalWidth % 2 === 1) {
     finalWidth -= 1;
   }
-
   if (finalHeight % 2 === 1) {
     finalHeight -= 1;
   }
-
   var screenSize = useScreenSize(_objectSpread__default["default"]({
     width: finalWidth,
     height: finalHeight,
@@ -1113,29 +1000,24 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     screenSize: screenSize
   };
 };
-
 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);