@panneau/core 4.0.78 → 4.1.1

package/dist/hooks.js

@@ -1,5 +1,5 @@
 import { c } from 'react/compiler-runtime';
-import { useRef, useEffect, useCallback, useState, useMemo } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import { EventsManager, MediasParser } from '@panneau/core';
 import { createUseEvent, loadPackage } from '@panneau/core/utils';
 import { getCsrfToken, postJSON, getCSRFHeaders } from '@folklore/fetch';
@@ -8,13 +8,13 @@ import isArray from 'lodash-es/isArray';
 import isObject from 'lodash-es/isObject';
 import isString from 'lodash-es/isString';
 import { useFieldsManager, usePanneauResources, useResource, useUrlGenerator, useRoutes } from '@panneau/core/contexts';
-import { isString as isString$1 } from 'lodash';
+import isEqual from 'lodash-es/isEqual';
 import dayjs from 'dayjs';
 import { useIntl } from 'react-intl';
 import { match } from 'css-mediaquery';
 
 function useAnimationFrame(onFrame, t0) {
-  const $ = c(9);
+  const $ = c(8);
   let t1;
   if ($[0] !== t0) {
     t1 = t0 === undefined ? {} : t0;
@@ -29,91 +29,159 @@ function useAnimationFrame(onFrame, t0) {
   const disabled = t2 === undefined ? false : t2;
   const requestRef = useRef(null);
   const startTimeRef = useRef(null);
-  let callback;
+  const onFrameRef = useRef(onFrame);
+  let t3;
+  let t4;
   if ($[2] !== onFrame) {
-    callback = time => {
-      if (!startTimeRef.current) {
-        startTimeRef.current = time;
-      }
-      const progress = time - startTimeRef.current;
-      onFrame(progress);
-      requestRef.current = requestAnimationFrame(callback);
+    t3 = () => {
+      onFrameRef.current = onFrame;
     };
+    t4 = [onFrame];
     $[2] = onFrame;
-    $[3] = callback;
+    $[3] = t3;
+    $[4] = t4;
   } else {
-    callback = $[3];
+    t3 = $[3];
+    t4 = $[4];
   }
-  let t3;
-  if ($[4] !== callback || $[5] !== disabled) {
-    t3 = () => {
-      if (!disabled) {
-        requestRef.current = requestAnimationFrame(callback);
+  useEffect(t3, t4);
+  let t5;
+  let t6;
+  if ($[5] !== disabled) {
+    t5 = () => {
+      if (disabled) {
+        return _temp$2;
       }
+      startTimeRef.current = null;
+      const callback = time => {
+        if (startTimeRef.current === null) {
+          startTimeRef.current = time;
+        }
+        const progress = time - startTimeRef.current;
+        onFrameRef.current(progress);
+        requestRef.current = requestAnimationFrame(callback);
+      };
+      requestRef.current = requestAnimationFrame(callback);
       return () => {
         if (requestRef.current !== null) {
           cancelAnimationFrame(requestRef.current);
+          requestRef.current = null;
         }
       };
     };
-    $[4] = callback;
+    t6 = [disabled];
     $[5] = disabled;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  let t4;
-  if ($[7] !== disabled) {
-    t4 = [disabled];
-    $[7] = disabled;
-    $[8] = t4;
+    $[6] = t5;
+    $[7] = t6;
   } else {
-    t4 = $[8];
+    t5 = $[6];
+    t6 = $[7];
   }
-  useEffect(t3, t4);
+  useEffect(t5, t6);
 }
+function _temp$2() {}
 
-function useFormattedDate({
-  format = null,
-  showToday = true
-} = {}) {
+function useFormattedDate(t0) {
+  const $ = c(7);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    format: t2,
+    showToday: t3
+  } = t1;
+  const format = t2 === undefined ? null : t2;
+  const showToday = t3 === undefined ? true : t3;
   const intl = useIntl();
-  const today = dayjs();
-  return useCallback(date => {
-    const dateToFormat = isString(date) ? dayjs(date) : date;
-    if (showToday && dateToFormat.format('YYYY-MM-DD') === today.format('YYYY-MM-DD')) {
-      return intl.formatMessage({
-        id: "v4Qtl9"
+  let t4;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = dayjs();
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const today = t4;
+  let t5;
+  if ($[3] !== format || $[4] !== intl || $[5] !== showToday) {
+    t5 = date => {
+      const dateToFormat = dayjs(date);
+      if (showToday && dateToFormat.format("YYYY-MM-DD") === today.format("YYYY-MM-DD")) {
+        return intl.formatMessage({
+          id: "v4Qtl9"
+        });
+      }
+      return intl.formatDate(dateToFormat.toDate(), {
+        year: "numeric",
+        month: "long",
+        day: "2-digit",
+        ...format
       });
-    }
-    return intl.formatDate(dayjs(date).toDate(), {
-      year: 'numeric',
-      month: 'long',
-      day: '2-digit',
-      ...format
-    });
-  }, [today, showToday, format]);
+    };
+    $[3] = format;
+    $[4] = intl;
+    $[5] = showToday;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  return t5;
 }
-function useFormattedTime({
-  format = null,
-  showNow = true,
-  timeGap = 2
-} = {}) {
+function useFormattedTime(t0) {
+  const $ = c(8);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    format: t2,
+    showNow: t3,
+    timeGap: t4
+  } = t1;
+  const format = t2 === undefined ? null : t2;
+  const showNow = t3 === undefined ? true : t3;
+  const timeGap = t4 === undefined ? 2 : t4;
   const intl = useIntl();
-  const now = dayjs();
-  return useCallback(date => {
-    const dateToFormat = isString(date) ? dayjs(date) : date;
-    if (showNow && dateToFormat.format('YYYY-MM-DD') === now.format('YYYY-MM-DD') && dateToFormat.hour() === now.hour() && dateToFormat.minute() > now.minute() - timeGap && dateToFormat.minute() < now.minute() + timeGap) {
-      return intl.formatMessage({
-        id: "3na7F8"
+  let t5;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = dayjs();
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const now = t5;
+  let t6;
+  if ($[3] !== format || $[4] !== intl || $[5] !== showNow || $[6] !== timeGap) {
+    t6 = date => {
+      const dateToFormat = dayjs(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"
+        });
+      }
+      return intl.formatTime(dateToFormat.toDate(), {
+        hour: "numeric",
+        minute: "numeric",
+        ...format
       });
-    }
-    return intl.formatTime(dateToFormat.toDate(), {
-      hour: 'numeric',
-      minute: 'numeric',
-      ...format
-    });
-  }, [now, showNow, timeGap, format]);
+    };
+    $[3] = format;
+    $[4] = intl;
+    $[5] = showNow;
+    $[6] = timeGap;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  return t6;
 }
 
 const eventsManager$1 = typeof document !== 'undefined' ? new EventsManager(document) : null;
@@ -156,7 +224,7 @@ function getFieldsPropsFromFields(fields, {
       ...(isObject(field) ? field : null),
       name,
       component,
-      value: value !== null && name !== null ? value[name] || null : null,
+      value: value !== null && name !== null ? value[name] ?? null : null,
       errors: finalErrors.length > 0 ? finalErrors : null,
       onChange: fieldValue => onChange(name, fieldValue),
       fields: fieldFields !== null && isArray(fieldFields) ? getFieldsPropsFromFields(fieldFields, {
@@ -168,34 +236,84 @@ function getFieldsPropsFromFields(fields, {
     }];
   }, []);
 }
-function useForm(opts = {}) {
+function useForm(t0) {
+  const $ = c(51);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const opts = t1;
   const {
-    fields = [],
-    action = null,
-    postForm = null,
-    initialErrors = null,
-    errors: providedErrors = null,
-    setErrors: setProvidedErrors = null,
-    initialGeneralError = null,
-    generalError: providedGeneralError = null,
-    setGeneralError: setProvidedGeneralError = null,
-    initialValue = null,
-    value: providedValue = null,
-    setValue: setProvidedValue = null,
-    withoutDefault = true,
-    withoutPropagation = true,
-    onComplete = null,
-    onError = null,
-    locales = []
+    fields: t2,
+    action: t3,
+    postForm: t4,
+    initialErrors: t5,
+    errors: t6,
+    setErrors: t7,
+    initialGeneralError: t8,
+    generalError: t9,
+    setGeneralError: t10,
+    initialValue: t11,
+    value: t12,
+    setValue: t13,
+    withoutDefault: t14,
+    withoutPropagation: t15,
+    onComplete: t16,
+    onError: t17,
+    locales: t18
   } = opts;
+  let t19;
+  if ($[2] !== t2) {
+    t19 = t2 === undefined ? [] : t2;
+    $[2] = t2;
+    $[3] = t19;
+  } else {
+    t19 = $[3];
+  }
+  const fields = t19;
+  const action = t3 === undefined ? null : t3;
+  const postForm = t4 === undefined ? null : t4;
+  const initialErrors = t5 === undefined ? null : t5;
+  const providedErrors = t6 === undefined ? null : t6;
+  const setProvidedErrors = t7 === undefined ? null : t7;
+  const initialGeneralError = t8 === undefined ? null : t8;
+  const providedGeneralError = t9 === undefined ? null : t9;
+  const setProvidedGeneralError = t10 === undefined ? null : t10;
+  const initialValue = t11 === undefined ? null : t11;
+  const providedValue = t12 === undefined ? null : t12;
+  const setProvidedValue = t13 === undefined ? null : t13;
+  const withoutDefault = t14 === undefined ? true : t14;
+  const withoutPropagation = t15 === undefined ? true : t15;
+  const onComplete = t16 === undefined ? null : t16;
+  const onError = t17 === undefined ? null : t17;
+  let t20;
+  if ($[4] !== t18) {
+    t20 = t18 === undefined ? [] : t18;
+    $[4] = t18;
+    $[5] = t20;
+  } else {
+    t20 = $[5];
+  }
+  const locales = t20;
   const [stateValue, setStateValue] = useState(initialValue || providedValue);
   const [stateErrors, setStateErrors] = useState(initialErrors || providedErrors);
   const [stateGeneralError, setStateGeneralError] = useState(initialGeneralError || providedGeneralError);
-  const [requestState, setRequestState] = useState({
-    success: false,
-    loading: false,
-    error: false
-  });
+  let t21;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = {
+      success: false,
+      loading: false,
+      error: false
+    };
+    $[6] = t21;
+  } else {
+    t21 = $[6];
+  }
+  const [requestState, setRequestState] = useState(t21);
   const [response, setResponse] = useState(null);
   const hasProvidedValue = setProvidedValue !== null;
   const value = hasProvidedValue ? providedValue : stateValue;
@@ -206,127 +324,244 @@ function useForm(opts = {}) {
   const hasProvidedGeneralError = setProvidedGeneralError !== null;
   const generalError = hasProvidedGeneralError ? providedGeneralError : stateGeneralError;
   const setGeneralError = hasProvidedGeneralError ? setProvidedGeneralError : setStateGeneralError;
-  const onFieldChange = useCallback((fieldName, fieldValue) => {
-    const {
-      loading = false,
-      success = false,
-      error: requestError = false
-    } = requestState || {};
-    const fieldErrors = errors !== null ? errors[fieldName] || null : null;
-    if (fieldErrors !== null) {
-      setErrors({
-        ...errors,
-        [fieldName]: null
+  let t22;
+  if ($[7] !== errors || $[8] !== requestState || $[9] !== setErrors || $[10] !== setValue || $[11] !== value) {
+    t22 = (fieldName, fieldValue) => {
+      const {
+        loading: t23,
+        success: t24,
+        error: t25
+      } = requestState || {};
+      const loading = t23 === undefined ? false : t23;
+      const success = t24 === undefined ? false : t24;
+      const requestError = t25 === undefined ? false : t25;
+      const fieldErrors = errors !== null ? errors[fieldName] || null : null;
+      if (fieldErrors !== null) {
+        setErrors({
+          ...errors,
+          [fieldName]: null
+        });
+      }
+      if (!loading && (success !== false || requestError !== false)) {
+        setRequestState({
+          success: false,
+          loading: false,
+          error: false
+        });
+      }
+      setValue({
+        ...(value || {}),
+        [fieldName]: fieldValue
       });
-    }
-    if (!loading && (success !== false || requestError !== false)) {
+    };
+    $[7] = errors;
+    $[8] = requestState;
+    $[9] = setErrors;
+    $[10] = setValue;
+    $[11] = value;
+    $[12] = t22;
+  } else {
+    t22 = $[12];
+  }
+  const onFieldChange = t22;
+  let t23;
+  if ($[13] !== errors || $[14] !== fields || $[15] !== locales || $[16] !== onFieldChange || $[17] !== value) {
+    t23 = getFieldsPropsFromFields(fields, {
+      value,
+      errors,
+      onChange: onFieldChange
+    }, locales);
+    $[13] = errors;
+    $[14] = fields;
+    $[15] = locales;
+    $[16] = onFieldChange;
+    $[17] = value;
+    $[18] = t23;
+  } else {
+    t23 = $[18];
+  }
+  const fieldsProps = t23;
+  let t24;
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = getCsrfToken();
+    $[19] = t24;
+  } else {
+    t24 = $[19];
+  }
+  const csrfToken = t24;
+  let t25;
+  if ($[20] !== onError || $[21] !== setErrors || $[22] !== setGeneralError) {
+    t25 = error => {
       setRequestState({
         success: false,
         loading: false,
+        error: true
+      });
+      if (error.name === "ValidationError") {
+        const {
+          errors: t26
+        } = error.getResponseData();
+        const validationErrors = t26 === undefined ? null : t26;
+        setErrors(validationErrors || null);
+      } else {
+        setGeneralError(error.message);
+      }
+      if (onError !== null) {
+        onError(error);
+      }
+    };
+    $[20] = onError;
+    $[21] = setErrors;
+    $[22] = setGeneralError;
+    $[23] = t25;
+  } else {
+    t25 = $[23];
+  }
+  const onSubmitError = t25;
+  let t26;
+  if ($[24] !== onComplete) {
+    t26 = resp => {
+      setRequestState({
+        success: true,
+        loading: false,
         error: false
       });
-    }
-    setValue({
-      ...(value || {}),
-      [fieldName]: fieldValue
-    });
-  }, [value, errors, requestState, setErrors, setValue, ...fields]);
-  const fieldsProps = useMemo(() => getFieldsPropsFromFields(fields, {
-    value,
-    errors,
-    onChange: onFieldChange
-  }, locales), [value, errors, locales, fields, onFieldChange, ...fields]);
-  const csrfToken = useMemo(() => getCsrfToken(), []);
-  const onSubmitError = error => {
-    setRequestState({
-      success: false,
-      loading: false,
-      error: true
-    });
-    if (error.name === 'ValidationError') {
-      const {
-        errors: validationErrors = null
-      } = error.getResponseData();
-      setErrors(validationErrors || null);
-    } else {
-      setGeneralError(error.message);
-    }
-    if (onError !== null) {
-      onError(error);
-    }
-  };
-  const onSubmitSuccess = resp => {
-    setRequestState({
-      success: true,
-      loading: false,
-      error: false
-    });
-    setResponse(resp);
-    if (onComplete !== null) {
-      onComplete(resp);
-    }
-  };
-  const finalPostForm = useCallback((postAction, postData) => postForm !== null ? postForm(postAction, postData) : postJSON(postAction, postData, {
-    credentials: 'include',
-    headers: getCSRFHeaders()
-  }), [postForm]);
-  const submit = useCallback((submitValue = value) => {
-    setRequestState({
-      success: false,
-      loading: true,
-      error: false
+      setResponse(resp);
+      if (onComplete !== null) {
+        onComplete(resp);
+      }
+    };
+    $[24] = onComplete;
+    $[25] = t26;
+  } else {
+    t26 = $[25];
+  }
+  const onSubmitSuccess = t26;
+  let t27;
+  if ($[26] !== postForm) {
+    t27 = (postAction, postData) => postForm !== null ? postForm(postAction, postData) : postJSON(postAction, postData, {
+      credentials: "include",
+      headers: getCSRFHeaders()
     });
-    setGeneralError(null);
-    setErrors(null);
-    finalPostForm(action, {
-      ...(submitValue || {}),
-      _token: csrfToken
-    }).then(onSubmitSuccess).catch(onSubmitError);
-  }, [value, setGeneralError, setErrors, finalPostForm, action, csrfToken, onSubmitSuccess, onSubmitError]);
-  const onSubmit = useCallback(e => {
-    if (withoutDefault) {
-      e.preventDefault();
-    }
-    if (withoutPropagation) {
-      e.stopPropagation();
-    }
-    // This one is very important with multiple forms
-    // Nested forms (even in portals) will bubble the onSubmit event to the parent
-    submit();
-  }, [submit, withoutDefault, withoutPropagation]);
+    $[26] = postForm;
+    $[27] = t27;
+  } else {
+    t27 = $[27];
+  }
+  const finalPostForm = t27;
+  let t28;
+  if ($[28] !== action || $[29] !== finalPostForm || $[30] !== onSubmitError || $[31] !== onSubmitSuccess || $[32] !== setErrors || $[33] !== setGeneralError || $[34] !== value) {
+    t28 = t29 => {
+      const submitValue = t29 === undefined ? value : t29;
+      setRequestState({
+        success: false,
+        loading: true,
+        error: false
+      });
+      setGeneralError(null);
+      setErrors(null);
+      finalPostForm(action, {
+        ...(submitValue || {}),
+        _token: csrfToken
+      }).then(onSubmitSuccess).catch(onSubmitError);
+    };
+    $[28] = action;
+    $[29] = finalPostForm;
+    $[30] = onSubmitError;
+    $[31] = onSubmitSuccess;
+    $[32] = setErrors;
+    $[33] = setGeneralError;
+    $[34] = value;
+    $[35] = t28;
+  } else {
+    t28 = $[35];
+  }
+  const submit = t28;
+  let t29;
+  if ($[36] !== submit || $[37] !== withoutDefault || $[38] !== withoutPropagation) {
+    t29 = e => {
+      if (withoutDefault) {
+        e.preventDefault();
+      }
+      if (withoutPropagation) {
+        e.stopPropagation();
+      }
+      submit();
+    };
+    $[36] = submit;
+    $[37] = withoutDefault;
+    $[38] = withoutPropagation;
+    $[39] = t29;
+  } else {
+    t29 = $[39];
+  }
+  const onSubmit = t29;
   let status = null;
   if (requestState.loading) {
-    status = 'loading';
-  } else if (requestState.success) {
-    status = 'success';
-  } else if (requestState.error) {
-    status = 'error';
+    status = "loading";
+  } else {
+    if (requestState.success) {
+      status = "success";
+    } else {
+      if (requestState.error) {
+        status = "error";
+      }
+    }
   }
-  return {
-    value,
-    setValue,
-    csrfToken,
-    submit,
-    onSubmit,
-    ...requestState,
-    status,
-    response,
-    fields: fieldsProps,
-    errors,
-    generalError
-  };
+  let t30;
+  if ($[40] !== errors || $[41] !== fieldsProps || $[42] !== generalError || $[43] !== onSubmit || $[44] !== requestState || $[45] !== response || $[46] !== setValue || $[47] !== status || $[48] !== submit || $[49] !== value) {
+    t30 = {
+      value,
+      setValue,
+      csrfToken,
+      submit,
+      onSubmit,
+      ...requestState,
+      status,
+      response,
+      fields: fieldsProps,
+      errors,
+      generalError
+    };
+    $[40] = errors;
+    $[41] = fieldsProps;
+    $[42] = generalError;
+    $[43] = onSubmit;
+    $[44] = requestState;
+    $[45] = response;
+    $[46] = setValue;
+    $[47] = status;
+    $[48] = submit;
+    $[49] = value;
+    $[50] = t30;
+  } else {
+    t30 = $[50];
+  }
+  return t30;
 }
 
 function buildThresholdArray() {
   return [0, 1.0];
 }
 const observersCache = new Map();
+
+// Give each root element a unique id so observers with different roots are not shared
+const rootIds = new WeakMap();
+let lastRootId = 0;
+function getRootId(root) {
+  if (!rootIds.has(root)) {
+    lastRootId += 1;
+    rootIds.set(root, lastRootId);
+  }
+  return rootIds.get(root);
+}
 function getOptionsKey({
   root = null,
   rootMargin,
   threshold = null
 }) {
-  return `root_${root}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
+  const rootKey = root !== null ? getRootId(root) : null;
+  return `root_${rootKey}_rootMargin_${rootMargin || null}_threshold_${threshold}`;
 }
 function createObserver(Observer, options = {}) {
   let subscribers = [];
@@ -404,52 +639,127 @@ function getObserver(Observer, options = {}) {
   }
   return observers[observerKey];
 }
-function useObserver(Observer, opts = {}, initialEntry = {}) {
+function useObserver(Observer, t0, t1) {
+  const $ = c(14);
+  let t2;
+  if ($[0] !== t0) {
+    t2 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const opts = t2;
+  let t3;
+  if ($[2] !== t1) {
+    t3 = t1 === undefined ? {} : t1;
+    $[2] = t1;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const initialEntry = t3;
   const {
-    root = null,
-    rootMargin = null,
-    threshold = null,
-    disabled = false
+    root: t4,
+    rootMargin: t5,
+    threshold: t6,
+    disabled: t7
   } = opts;
+  const root = t4 === undefined ? null : t4;
+  const rootMargin = t5 === undefined ? null : t5;
+  const threshold = t6 === undefined ? null : t6;
+  const disabled = t7 === undefined ? false : t7;
   const [entry, setEntry] = useState(initialEntry);
   const nodeRef = useRef(null);
-  const currentElement = useRef(null);
-  const elementChanged = nodeRef.current !== currentElement.current;
-  useEffect(() => {
-    const {
-      current: nodeElement
-    } = nodeRef;
-    const callback = newEntry => setEntry(newEntry);
-    let unsubscribe = null;
-    if (nodeElement !== null && Observer !== null) {
-      const newOpts = {};
-      if (root !== null) {
-        newOpts.root = root;
+  const subscriptionRef = useRef(null);
+  let t8;
+  if ($[4] !== Observer || $[5] !== disabled || $[6] !== root || $[7] !== rootMargin || $[8] !== threshold) {
+    t8 = () => {
+      const {
+        current: nodeElement
+      } = nodeRef;
+      const {
+        current: currentSubscription
+      } = subscriptionRef;
+      if (currentSubscription !== null && currentSubscription.element === nodeElement && currentSubscription.Observer === Observer && currentSubscription.disabled === disabled && currentSubscription.root === root && currentSubscription.rootMargin === rootMargin && currentSubscription.threshold === threshold) {
+        return;
       }
-      if (rootMargin !== null) {
-        newOpts.rootMargin = rootMargin;
+      if (currentSubscription !== null && currentSubscription.unsubscribe !== null && currentSubscription.element !== null) {
+        currentSubscription.unsubscribe(currentSubscription.element, currentSubscription.callback);
       }
-      if (threshold !== null) {
-        newOpts.threshold = threshold;
+      const callback = newEntry => setEntry(newEntry);
+      let unsubscribe = null;
+      if (!disabled && nodeElement !== null && Observer !== null) {
+        const newOpts = {};
+        if (root !== null) {
+          newOpts.root = root;
+        }
+        if (rootMargin !== null) {
+          newOpts.rootMargin = rootMargin;
+        }
+        if (threshold !== null) {
+          newOpts.threshold = threshold;
+        }
+        const {
+          subscribe,
+          unsubscribe: localUnsubscribe
+        } = getObserver(Observer, newOpts);
+        unsubscribe = localUnsubscribe;
+        subscribe(nodeElement, callback);
       }
+      subscriptionRef.current = {
+        element: nodeElement,
+        Observer,
+        disabled,
+        root,
+        rootMargin,
+        threshold,
+        unsubscribe,
+        callback
+      };
+    };
+    $[4] = Observer;
+    $[5] = disabled;
+    $[6] = root;
+    $[7] = rootMargin;
+    $[8] = threshold;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  useEffect(t8);
+  let t10;
+  let t9;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => () => {
       const {
-        subscribe,
-        unsubscribe: localUnsubscribe
-      } = getObserver(Observer, newOpts);
-      unsubscribe = localUnsubscribe;
-      subscribe(nodeElement, callback);
-    }
-    currentElement.current = nodeElement;
-    return () => {
-      if (unsubscribe !== null && nodeElement !== null) {
-        unsubscribe(nodeElement, callback);
+        current: currentSubscription_0
+      } = subscriptionRef;
+      if (currentSubscription_0 !== null && currentSubscription_0.unsubscribe !== null && currentSubscription_0.element !== null) {
+        currentSubscription_0.unsubscribe(currentSubscription_0.element, currentSubscription_0.callback);
       }
+      subscriptionRef.current = null;
     };
-  }, [Observer, elementChanged, disabled, root, rootMargin, threshold]);
-  return {
-    ref: nodeRef,
-    entry
-  };
+    t10 = [];
+    $[10] = t10;
+    $[11] = t9;
+  } else {
+    t10 = $[10];
+    t9 = $[11];
+  }
+  useEffect(t9, t10);
+  let t11;
+  if ($[12] !== entry) {
+    t11 = {
+      ref: nodeRef,
+      entry
+    };
+    $[12] = entry;
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  return t11;
 }
 
 /**
@@ -542,29 +852,61 @@ function useResizeObserver(t0) {
   return useObserver(typeof window !== "undefined" ? ResizeObserver : null, t3, resizeObserverInitialEntry);
 }
 
-function useIsVisible({
-  rootMargin,
-  threshold = 1,
-  persist = false
-} = {}) {
+function useIsVisible(t0) {
+  const $ = c(8);
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === undefined ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
   const {
-    ref,
-    entry: {
-      isIntersecting
-    }
-  } = useIntersectionObserver({
     rootMargin,
-    threshold
-  });
-  const wasIntersecting = useRef(isIntersecting);
-  if (isIntersecting && !wasIntersecting.current) {
-    wasIntersecting.current = isIntersecting;
+    threshold: t2,
+    persist: t3
+  } = t1;
+  const threshold = t2 === undefined ? 1 : t2;
+  const persist = t3 === undefined ? false : t3;
+  let t4;
+  if ($[2] !== rootMargin || $[3] !== threshold) {
+    t4 = {
+      rootMargin,
+      threshold
+    };
+    $[2] = rootMargin;
+    $[3] = threshold;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
   }
-  const isVisible = !persist && isIntersecting || persist && wasIntersecting.current;
-  return {
+  const {
     ref,
-    visible: isVisible
-  };
+    entry: t5
+  } = useIntersectionObserver(t4);
+  const {
+    isIntersecting
+  } = t5;
+  const [wasIntersecting, setWasIntersecting] = useState(isIntersecting);
+  if (isIntersecting && !wasIntersecting) {
+    setWasIntersecting(true);
+  }
+  const hasIntersected = wasIntersecting || isIntersecting;
+  const isVisible = !persist && isIntersecting || persist && hasIntersected;
+  let t6;
+  if ($[5] !== isVisible || $[6] !== ref) {
+    t6 = {
+      ref,
+      visible: isVisible
+    };
+    $[5] = isVisible;
+    $[6] = ref;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  return t6;
 }
 
 const KEYCODES = {
@@ -652,6 +994,7 @@ function useKeyboardKeys(t0, t1) {
   useEffect(t7, t8);
 }
 
+const loadWebFontLoader = () => import('webfontloader');
 const fontsMap = {
   loading: [],
   active: []
@@ -674,50 +1017,84 @@ function addFontActive(name) {
   fontsMap.active = [...fontsMap.active, name];
 }
 function useLoadedFonts(fonts) {
+  const $ = c(5);
   const [loaded, setLoaded] = useState(false);
-  useEffect(() => {
-    const config = fonts.reduce((newConfig, font) => {
-      const {
-        type,
-        name
-      } = isObject(font) ? font : {
-        type: 'system',
-        name: font
-      };
-      if ((type === 'google' || type === 'custom') && !isFontLoading(name) && !isFontActive(name)) {
-        return {
-          ...newConfig,
-          [type]: {
-            families: [...(newConfig !== null ? (newConfig[type] || {}).families || [] : []), name]
-          }
-        };
+  let t0;
+  let t1;
+  if ($[0] !== fonts) {
+    t0 = () => {
+      const config = fonts.reduce(_temp$1, null);
+      const hasConfig = config !== null;
+      if (hasConfig && typeof window !== "undefined") {
+        loadPackage("webfontloader", loadWebFontLoader).then(t2 => {
+          const {
+            default: WebFont
+          } = t2;
+          return WebFont.load({
+            ...config,
+            timeout: 3000,
+            active: () => setLoaded(true),
+            fontloading: _temp2,
+            fontactive: _temp3,
+            fontinactive: _temp4
+          });
+        });
+      } else {
+        setLoaded(true);
       }
-      return newConfig;
-    }, null);
-    const hasConfig = config !== null;
-    if (hasConfig && typeof window !== 'undefined') {
-      loadPackage('webfontloader', () => import('webfontloader')).then(({
-        default: WebFont
-      }) => WebFont.load({
-        ...config,
-        timeout: 3000,
-        active: () => setLoaded(true),
-        fontloading: name_0 => addFontLoading(name_0),
-        fontactive: name_1 => addFontActive(name_1),
-        fontinactive: name_2 => removeFontLoading(name_2)
-      }));
-    } else {
-      setLoaded(true);
-    }
-  }, [fonts, setLoaded]);
-  return {
-    loaded
+    };
+    t1 = [fonts, setLoaded];
+    $[0] = fonts;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] !== loaded) {
+    t2 = {
+      loaded
+    };
+    $[3] = loaded;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
+}
+function _temp4(name_2) {
+  return removeFontLoading(name_2);
+}
+function _temp3(name_1) {
+  return addFontActive(name_1);
+}
+function _temp2(name_0) {
+  return addFontLoading(name_0);
+}
+function _temp$1(newConfig, font) {
+  const {
+    type,
+    name
+  } = isObject(font) ? font : {
+    type: "system",
+    name: font
   };
+  if ((type === "google" || type === "custom") && !isFontLoading(name) && !isFontActive(name)) {
+    return {
+      ...newConfig,
+      [type]: {
+        families: [...(newConfig !== null ? (newConfig[type] || {}).families || [] : []), name]
+      }
+    };
+  }
+  return newConfig;
 }
 
 const progressSteps = [0.1, 0.25, 0.5, 0.75, 0.9];
 function useMediaApi(t0) {
-  const $ = c(54);
+  const $ = c(66);
   let t1;
   if ($[0] !== t0) {
     t1 = t0 === undefined ? {} : t0;
@@ -1059,34 +1436,16 @@ function useMediaApi(t0) {
   const onCustomCanPlayThrough = t31;
   let t32;
   if ($[33] !== onCustomCanPlayThrough || $[34] !== onCustomDurationChange || $[35] !== onCustomEnded || $[36] !== onCustomLoadStart || $[37] !== onCustomPause || $[38] !== onCustomPlay || $[39] !== onCustomSeeked || $[40] !== onCustomTimeUpdate || $[41] !== onCustomVolumeChange) {
-    t32 = () => {
-      const {
-        current: media_13
-      } = ref;
-      if (media_13 !== null) {
-        media_13.addEventListener("timeupdate", onCustomTimeUpdate);
-        media_13.addEventListener("durationchange", onCustomDurationChange);
-        media_13.addEventListener("volumechange", onCustomVolumeChange);
-        media_13.addEventListener("play", onCustomPlay);
-        media_13.addEventListener("pause", onCustomPause);
-        media_13.addEventListener("ended", onCustomEnded);
-        media_13.addEventListener("seeked", onCustomSeeked);
-        media_13.addEventListener("loadstart", onCustomLoadStart);
-        media_13.addEventListener("canplaythrough", onCustomCanPlayThrough);
-      }
-      return () => {
-        if (media_13 !== null) {
-          media_13.removeEventListener("timeupdate", onCustomTimeUpdate);
-          media_13.removeEventListener("durationchange", onCustomDurationChange);
-          media_13.removeEventListener("volumechange", onCustomVolumeChange);
-          media_13.removeEventListener("play", onCustomPlay);
-          media_13.removeEventListener("pause", onCustomPause);
-          media_13.removeEventListener("ended", onCustomEnded);
-          media_13.removeEventListener("seeked", onCustomSeeked);
-          media_13.removeEventListener("loadstart", onCustomLoadStart);
-          media_13.removeEventListener("canplaythrough", onCustomCanPlayThrough);
-        }
-      };
+    t32 = {
+      timeupdate: onCustomTimeUpdate,
+      durationchange: onCustomDurationChange,
+      volumechange: onCustomVolumeChange,
+      play: onCustomPlay,
+      pause: onCustomPause,
+      ended: onCustomEnded,
+      seeked: onCustomSeeked,
+      loadstart: onCustomLoadStart,
+      canplaythrough: onCustomCanPlayThrough
     };
     $[33] = onCustomCanPlayThrough;
     $[34] = onCustomDurationChange;
@@ -1101,18 +1460,97 @@ function useMediaApi(t0) {
   } else {
     t32 = $[42];
   }
+  const handlersRef = useRef(t32);
   let t33;
-  if ($[43] !== url) {
-    t33 = [url];
-    $[43] = url;
-    $[44] = t33;
+  let t34;
+  if ($[43] !== onCustomCanPlayThrough || $[44] !== onCustomDurationChange || $[45] !== onCustomEnded || $[46] !== onCustomLoadStart || $[47] !== onCustomPause || $[48] !== onCustomPlay || $[49] !== onCustomSeeked || $[50] !== onCustomTimeUpdate || $[51] !== onCustomVolumeChange) {
+    t33 = () => {
+      handlersRef.current = {
+        timeupdate: onCustomTimeUpdate,
+        durationchange: onCustomDurationChange,
+        volumechange: onCustomVolumeChange,
+        play: onCustomPlay,
+        pause: onCustomPause,
+        ended: onCustomEnded,
+        seeked: onCustomSeeked,
+        loadstart: onCustomLoadStart,
+        canplaythrough: onCustomCanPlayThrough
+      };
+    };
+    t34 = [onCustomTimeUpdate, onCustomDurationChange, onCustomVolumeChange, onCustomPlay, onCustomPause, onCustomEnded, onCustomSeeked, onCustomLoadStart, onCustomCanPlayThrough];
+    $[43] = onCustomCanPlayThrough;
+    $[44] = onCustomDurationChange;
+    $[45] = onCustomEnded;
+    $[46] = onCustomLoadStart;
+    $[47] = onCustomPause;
+    $[48] = onCustomPlay;
+    $[49] = onCustomSeeked;
+    $[50] = onCustomTimeUpdate;
+    $[51] = onCustomVolumeChange;
+    $[52] = t33;
+    $[53] = t34;
   } else {
-    t33 = $[44];
+    t33 = $[52];
+    t34 = $[53];
   }
-  useEffect(t32, t33);
-  let t34;
-  if ($[45] !== currentTime || $[46] !== duration || $[47] !== muted || $[48] !== paused || $[49] !== playing || $[50] !== ready || $[51] !== toggleMute || $[52] !== togglePlay) {
-    t34 = {
+  useEffect(t33, t34);
+  let t35;
+  if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+    t35 = () => {
+      const {
+        current: media_13
+      } = ref;
+      progressStepsReached.current = {};
+      const onMediaTimeUpdate = () => handlersRef.current.timeupdate();
+      const onMediaDurationChange = () => handlersRef.current.durationchange();
+      const onMediaVolumeChange = () => handlersRef.current.volumechange();
+      const onMediaPlay = () => handlersRef.current.play();
+      const onMediaPause = () => handlersRef.current.pause();
+      const onMediaEnded = () => handlersRef.current.ended();
+      const onMediaSeeked = () => handlersRef.current.seeked();
+      const onMediaLoadStart = () => handlersRef.current.loadstart();
+      const onMediaCanPlayThrough = () => handlersRef.current.canplaythrough();
+      if (media_13 !== null) {
+        media_13.addEventListener("timeupdate", onMediaTimeUpdate);
+        media_13.addEventListener("durationchange", onMediaDurationChange);
+        media_13.addEventListener("volumechange", onMediaVolumeChange);
+        media_13.addEventListener("play", onMediaPlay);
+        media_13.addEventListener("pause", onMediaPause);
+        media_13.addEventListener("ended", onMediaEnded);
+        media_13.addEventListener("seeked", onMediaSeeked);
+        media_13.addEventListener("loadstart", onMediaLoadStart);
+        media_13.addEventListener("canplaythrough", onMediaCanPlayThrough);
+      }
+      return () => {
+        if (media_13 !== null) {
+          media_13.removeEventListener("timeupdate", onMediaTimeUpdate);
+          media_13.removeEventListener("durationchange", onMediaDurationChange);
+          media_13.removeEventListener("volumechange", onMediaVolumeChange);
+          media_13.removeEventListener("play", onMediaPlay);
+          media_13.removeEventListener("pause", onMediaPause);
+          media_13.removeEventListener("ended", onMediaEnded);
+          media_13.removeEventListener("seeked", onMediaSeeked);
+          media_13.removeEventListener("loadstart", onMediaLoadStart);
+          media_13.removeEventListener("canplaythrough", onMediaCanPlayThrough);
+        }
+      };
+    };
+    $[54] = t35;
+  } else {
+    t35 = $[54];
+  }
+  let t36;
+  if ($[55] !== url) {
+    t36 = [url];
+    $[55] = url;
+    $[56] = t36;
+  } else {
+    t36 = $[56];
+  }
+  useEffect(t35, t36);
+  let t37;
+  if ($[57] !== currentTime || $[58] !== duration || $[59] !== muted || $[60] !== paused || $[61] !== playing || $[62] !== ready || $[63] !== toggleMute || $[64] !== togglePlay) {
+    t37 = {
       ref,
       play,
       pause,
@@ -1129,19 +1567,19 @@ function useMediaApi(t0) {
       paused,
       ready
     };
-    $[45] = currentTime;
-    $[46] = duration;
-    $[47] = muted;
-    $[48] = paused;
-    $[49] = playing;
-    $[50] = ready;
-    $[51] = toggleMute;
-    $[52] = togglePlay;
-    $[53] = t34;
-  } else {
-    t34 = $[53];
-  }
-  return t34;
+    $[57] = currentTime;
+    $[58] = duration;
+    $[59] = muted;
+    $[60] = paused;
+    $[61] = playing;
+    $[62] = ready;
+    $[63] = toggleMute;
+    $[64] = togglePlay;
+    $[65] = t37;
+  } else {
+    t37 = $[65];
+  }
+  return t37;
 }
 
 function useMediasParser() {
@@ -1281,7 +1719,7 @@ function useResourceUrlGenerator(t0) {
     t2 = (routeResourceId, t3, t4) => {
       const routeName = t3 === undefined ? null : t3;
       const params = t4 === undefined ? null : t4;
-      const hasResourceId = isString$1(routeName);
+      const hasResourceId = isString(routeName);
       const finalRouteName = hasResourceId ? routeName : routeResourceId;
       const finalParams = hasResourceId ? params : routeName;
       const finalResource = hasResourceId ? getResource(resources, routeResourceId) : resource;
@@ -1313,15 +1751,19 @@ function useQuery(t0, t1) {
   const $ = c(15);
   const initialBaseQuery = t0 === undefined ? null : t0;
   const paginated = t1 === undefined ? true : t1;
+  const [stableBaseQuery, setStableBaseQuery] = useState(initialBaseQuery);
+  if (!isEqual(stableBaseQuery, initialBaseQuery)) {
+    setStableBaseQuery(initialBaseQuery);
+  }
   let t2;
-  if ($[0] !== initialBaseQuery || $[1] !== paginated) {
+  if ($[0] !== paginated || $[1] !== stableBaseQuery) {
     t2 = paginated ? {
       page: 1,
       count: 10,
-      ...(initialBaseQuery || {})
-    } : initialBaseQuery || null;
-    $[0] = initialBaseQuery;
-    $[1] = paginated;
+      ...(stableBaseQuery || {})
+    } : stableBaseQuery || null;
+    $[0] = paginated;
+    $[1] = stableBaseQuery;
     $[2] = t2;
   } else {
     t2 = $[2];