@reactuses/core 1.0.1

package/index.cjs

@@ -0,0 +1,2215 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var lodash = require('lodash');
+
+function usePrevious(state) {
+  const ref = react.useRef();
+  react.useEffect(() => {
+    ref.current = state;
+  });
+  return ref.current;
+}
+
+var __async$1 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useMarkdown(filepath) {
+  const [content, setContent] = react.useState("");
+  react.useEffect(() => {
+    const getContent = () => __async$1(this, null, function* () {
+      const data = yield (yield fetch(filepath)).text();
+      setContent(data);
+    });
+    getContent();
+  }, [filepath]);
+  return content;
+}
+
+function useLatest(value) {
+  const ref = react.useRef(value);
+  react.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref;
+}
+
+function useFirstMountState() {
+  const isFirst = react.useRef(true);
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+  return isFirst.current;
+}
+
+const createUpdateEffect = (hook) => (effect, deps) => {
+  const isFirstMount = useFirstMountState();
+  hook(() => {
+    if (!isFirstMount) {
+      return effect();
+    }
+  }, deps);
+};
+
+var useUpdateEffect = createUpdateEffect(react.useEffect);
+
+var useUpdateLayoutEffect = createUpdateEffect(react.useLayoutEffect);
+
+var _a;
+const isFunction = (val) => typeof val === "function";
+const isDev = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test";
+const isBrowser = typeof window !== "undefined";
+const isNavigator = typeof navigator !== "undefined";
+const noop = () => {
+};
+const isIOS = isBrowser && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+
+function guessSerializerType(rawInit) {
+  return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : Array.isArray(rawInit) ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
+}
+
+const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
+
+function useEvent(fn) {
+  if (isDev) {
+    if (!isFunction(fn)) {
+      console.error(
+        `useEvent expected parameter is a function, got ${typeof fn}`
+      );
+    }
+  }
+  const handlerRef = react.useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    handlerRef.current = fn;
+  }, [fn]);
+  return react.useCallback((...args) => {
+    const fn2 = handlerRef.current;
+    return fn2(...args);
+  }, []);
+}
+
+const StorageSerializers = {
+  boolean: {
+    read: (v) => v === "true",
+    write: (v) => String(v)
+  },
+  object: {
+    read: (v) => JSON.parse(v),
+    write: (v) => JSON.stringify(v)
+  },
+  number: {
+    read: (v) => Number.parseFloat(v),
+    write: (v) => String(v)
+  },
+  any: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  string: {
+    read: (v) => v,
+    write: (v) => String(v)
+  },
+  map: {
+    read: (v) => new Map(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v.entries()))
+  },
+  set: {
+    read: (v) => new Set(JSON.parse(v)),
+    write: (v) => JSON.stringify(Array.from(v))
+  },
+  date: {
+    read: (v) => new Date(v),
+    write: (v) => v.toISOString()
+  }
+};
+function useStorage(key, defaults, getStorage, options = {}) {
+  var _a;
+  let storage;
+  const {
+    onError = (e) => {
+      console.error(e);
+    }
+  } = options;
+  const data = defaults;
+  try {
+    storage = getStorage();
+  } catch (err) {
+    console.error(err);
+  }
+  const type = guessSerializerType(defaults);
+  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  const getStoredValue = () => {
+    try {
+      const raw = storage == null ? void 0 : storage.getItem(key);
+      if (raw) {
+        return serializer.read(raw);
+      } else {
+        storage == null ? void 0 : storage.setItem(key, serializer.write(data));
+        return data;
+      }
+    } catch (e) {
+      onError(e);
+    }
+  };
+  const [state, setState] = react.useState(() => getStoredValue());
+  useUpdateEffect(() => {
+    setState(getStoredValue());
+  }, [key]);
+  const updateState = useEvent(
+    (valOrFunc) => {
+      const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
+      setState(currentState);
+      if (currentState === null) {
+        storage == null ? void 0 : storage.removeItem(key);
+      } else {
+        try {
+          storage == null ? void 0 : storage.setItem(key, serializer.write(currentState));
+        } catch (e) {
+          onError(e);
+        }
+      }
+    }
+  );
+  return [state, updateState];
+}
+
+function useLocalStorage(key, defaults, options = {}) {
+  return useStorage(
+    key,
+    defaults,
+    () => isBrowser ? localStorage : void 0,
+    options
+  );
+}
+
+function useSessionStorage(key, defaults, options = {}) {
+  return useStorage(
+    key,
+    defaults,
+    () => isBrowser ? sessionStorage : void 0,
+    options
+  );
+}
+
+const toggleReducer = (state, nextValue) => typeof nextValue === "boolean" ? nextValue : !state;
+function useToggle(initialValue) {
+  return react.useReducer(toggleReducer, initialValue);
+}
+
+function useInterval(callback, delay, options) {
+  const immediate = options == null ? void 0 : options.immediate;
+  const savedCallback = useLatest(callback);
+  react.useEffect(() => {
+    if (immediate) {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      const interval = setInterval(() => savedCallback.current(), delay || 0);
+      return () => clearInterval(interval);
+    }
+    return void 0;
+  }, [delay, immediate]);
+}
+
+const getInitialState = (query, defaultState) => {
+  if (isBrowser) {
+    return window.matchMedia(query).matches;
+  }
+  if (defaultState !== void 0) {
+    return defaultState;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."
+    );
+  }
+  return false;
+};
+function useMediaQuery(query, defaultState) {
+  const [state, setState] = react.useState(getInitialState(query, defaultState));
+  react.useEffect(() => {
+    let mounted = true;
+    const mql = window.matchMedia(query);
+    const onChange = () => {
+      if (!mounted) {
+        return;
+      }
+      setState(!!mql.matches);
+    };
+    if ("addEventListener" in mql) {
+      mql.addEventListener("change", onChange);
+    } else {
+      mql.addListener(onChange);
+    }
+    setState(mql.matches);
+    return () => {
+      mounted = false;
+      if ("removeEventListener" in mql) {
+        mql.removeEventListener("change", onChange);
+      } else {
+        mql.removeListener(onChange);
+      }
+    };
+  }, [query]);
+  return state;
+}
+
+function usePreferredDark(defaultState) {
+  return useMediaQuery("(prefers-color-scheme: dark)", defaultState);
+}
+
+function useDarkMode(options = {}) {
+  const {
+    selector = "html",
+    attribute = "class",
+    initialValue,
+    storageKey = "reactuses-color-scheme",
+    storage = () => isBrowser ? localStorage : void 0
+  } = options;
+  const prefersDarkMode = usePreferredDark();
+  const value = initialValue ? initialValue : prefersDarkMode ? "dark" : "light";
+  const [dark, setDark] = useStorage(storageKey, value, storage);
+  react.useEffect(() => {
+    const element = window == null ? void 0 : window.document.querySelector(selector);
+    if (!element) {
+      return;
+    }
+    if (attribute === "class") {
+      dark && element.classList.add(dark);
+    } else {
+      dark && element.setAttribute(attribute, dark);
+    }
+    return () => {
+      dark && (element == null ? void 0 : element.classList.remove(dark));
+    };
+  }, [attribute, dark, selector]);
+  return [dark, setDark];
+}
+
+function useMount(fn) {
+  if (isDev) {
+    if (!isFunction(fn)) {
+      console.error(
+        `useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`
+      );
+    }
+  }
+  react.useEffect(() => {
+    fn == null ? void 0 : fn();
+  }, []);
+}
+
+function useUnmount(fn) {
+  if (isDev) {
+    if (!isFunction(fn)) {
+      console.error(
+        `useUnmount expected parameter is a function, got ${typeof fn}`
+      );
+    }
+  }
+  const fnRef = useLatest(fn);
+  react.useEffect(
+    () => () => {
+      fnRef.current();
+    },
+    [fnRef]
+  );
+}
+
+function useThrottleFn(fn, wait, options) {
+  if (isDev) {
+    if (!isFunction(fn)) {
+      console.error(
+        `useThrottleFn expected parameter is a function, got ${typeof fn}`
+      );
+    }
+  }
+  const fnRef = useLatest(fn);
+  const throttled = react.useMemo(
+    () => lodash.throttle(
+      (...args) => {
+        return fnRef.current(...args);
+      },
+      wait,
+      options
+    ),
+    []
+  );
+  useUnmount(() => {
+    throttled.cancel();
+  });
+  return {
+    run: throttled,
+    cancel: throttled.cancel,
+    flush: throttled.flush
+  };
+}
+
+function useThrottle(value, wait, options) {
+  const [throttled, setThrottled] = react.useState(value);
+  const { run } = useThrottleFn(
+    () => {
+      setThrottled(value);
+    },
+    wait,
+    options
+  );
+  react.useEffect(() => {
+    run();
+  }, [run, value]);
+  return throttled;
+}
+
+function useDebounceFn(fn, wait, options) {
+  if (isDev) {
+    if (!isFunction(fn)) {
+      console.error(
+        `useDebounceFn expected parameter is a function, got ${typeof fn}`
+      );
+    }
+  }
+  const fnRef = useLatest(fn);
+  const debounced = react.useMemo(
+    () => lodash.debounce(
+      (...args) => {
+        return fnRef.current(...args);
+      },
+      wait,
+      options
+    ),
+    []
+  );
+  useUnmount(() => {
+    debounced.cancel();
+  });
+  return {
+    run: debounced,
+    cancel: debounced.cancel,
+    flush: debounced.flush
+  };
+}
+
+function useDebounce(value, wait, options) {
+  const [debounced, setDebounced] = react.useState(value);
+  const { run } = useDebounceFn(
+    () => {
+      setDebounced(value);
+    },
+    wait,
+    options
+  );
+  react.useEffect(() => {
+    run();
+  }, [run, value]);
+  return debounced;
+}
+
+function useRafState(initialState) {
+  const frame = react.useRef(0);
+  const [state, setState] = react.useState(initialState);
+  const setRafState = react.useCallback((value) => {
+    cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(() => {
+      setState(value);
+    });
+  }, []);
+  useUnmount(() => {
+    cancelAnimationFrame(frame.current);
+  });
+  return [state, setRafState];
+}
+
+const updateReducer = (num) => (num + 1) % 1e6;
+function useUpdate() {
+  const [, update] = react.useReducer(updateReducer, 0);
+  return update;
+}
+
+function useTimeoutFn(cb, interval, options = {}) {
+  const { immediate = true } = options;
+  const [pending, setPending] = react.useState(false);
+  const savedCallback = useLatest(cb);
+  const timer = react.useRef();
+  const stop = useEvent(() => {
+    setPending(false);
+    if (timer.current) {
+      clearTimeout(timer.current);
+    }
+  });
+  const start = useEvent((...args) => {
+    if (timer) {
+      clearTimeout(timer.current);
+    }
+    timer.current = setTimeout(() => {
+      setPending(false);
+      savedCallback.current(...args);
+    }, interval);
+    setPending(true);
+  });
+  react.useEffect(() => {
+    if (immediate) {
+      start();
+    }
+    return stop;
+  }, [stop, immediate, interval, start]);
+  return [pending, start, stop];
+}
+
+function useTimeout(ms = 0, options = {}) {
+  const update = useUpdate();
+  return useTimeoutFn(update, ms, options);
+}
+
+function useMountedState() {
+  const mountedRef = react.useRef(false);
+  const get = react.useCallback(() => mountedRef.current, []);
+  react.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return get;
+}
+
+function on(obj, ...args) {
+  if (obj && obj.addEventListener) {
+    obj.addEventListener(
+      ...args
+    );
+  }
+}
+function off(obj, ...args) {
+  if (obj && obj.removeEventListener) {
+    obj.removeEventListener(
+      ...args
+    );
+  }
+}
+
+function getTargetElement(target, defaultElement) {
+  if (!isBrowser) {
+    return void 0;
+  }
+  if (!target) {
+    return defaultElement;
+  }
+  let targetElement;
+  if (isFunction(target)) {
+    targetElement = target();
+  } else if ("current" in target) {
+    targetElement = target.current;
+  } else {
+    targetElement = target;
+  }
+  return targetElement;
+}
+
+const isPrimitive$1 = (val) => val !== Object(val);
+function useCustomCompareEffect(effect, deps, depsEqual) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        "`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead."
+      );
+    }
+    if (deps.every(isPrimitive$1)) {
+      console.warn(
+        "`useCustomCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead."
+      );
+    }
+    if (typeof depsEqual !== "function") {
+      console.warn(
+        "`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list"
+      );
+    }
+  }
+  const ref = react.useRef(void 0);
+  if (!ref.current || !depsEqual(deps, ref.current)) {
+    ref.current = deps;
+  }
+  react.useEffect(effect, ref.current);
+}
+
+const isPrimitive = (val) => val !== Object(val);
+function useDeepCompareEffect(effect, deps) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!(deps instanceof Array) || !deps.length) {
+      console.warn(
+        "`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead."
+      );
+    }
+    if (deps.every(isPrimitive)) {
+      console.warn(
+        "`useDeepCompareEffect` should not be used with dependencies that are all primitive values. Use React.useEffect instead."
+      );
+    }
+  }
+  useCustomCompareEffect(effect, deps, lodash.isEqual);
+}
+
+function useEventListener(eventName, handler, element, options) {
+  const savedHandler = useLatest(handler);
+  useDeepCompareEffect(() => {
+    const targetElement = getTargetElement(element, window);
+    if (!(targetElement && targetElement.addEventListener)) {
+      return;
+    }
+    const eventListener = (event) => savedHandler.current(event);
+    on(targetElement, eventName, eventListener, options);
+    return () => {
+      off(targetElement, eventName, eventListener);
+    };
+  }, [eventName, element, options, savedHandler]);
+}
+
+function useCounter(initialValue = 0, max = null, min = null) {
+  const initFunc = () => {
+    let init = typeof initialValue === "function" ? initialValue() : initialValue;
+    typeof init !== "number" && console.error(
+      "initialValue has to be a number, got " + typeof initialValue
+    );
+    if (typeof min === "number") {
+      init = Math.max(init, min);
+    } else if (min !== null) {
+      console.error("min has to be a number, got " + typeof min);
+    }
+    if (typeof max === "number") {
+      init = Math.min(init, max);
+    } else if (max !== null) {
+      console.error("max has to be a number, got " + typeof max);
+    }
+    return init;
+  };
+  const [value, setValue] = react.useState(initFunc);
+  const set = useEvent(
+    (newState) => {
+      setValue((v) => {
+        let nextValue = typeof newState === "function" ? newState(v) : newState;
+        if (typeof min === "number") {
+          nextValue = Math.max(nextValue, min);
+        }
+        if (typeof max === "number") {
+          nextValue = Math.min(nextValue, max);
+        }
+        return nextValue;
+      });
+    }
+  );
+  const inc = (delta = 1) => {
+    set((value2) => value2 + delta);
+  };
+  const dec = (delta = 1) => {
+    set((value2) => value2 - delta);
+  };
+  const reset = () => {
+    set(initFunc);
+  };
+  return [value, set, inc, dec, reset];
+}
+
+function useRafFn(callback, initiallyActive = true) {
+  const raf = react.useRef(null);
+  const rafActivity = react.useRef(false);
+  const rafCallback = useLatest(callback);
+  const step = react.useCallback(
+    (time) => {
+      if (rafActivity.current) {
+        rafCallback.current(time);
+        raf.current = requestAnimationFrame(step);
+      }
+    },
+    [rafCallback]
+  );
+  const result = react.useMemo(
+    () => [
+      () => {
+        if (rafActivity.current) {
+          rafActivity.current = false;
+          raf.current && cancelAnimationFrame(raf.current);
+        }
+      },
+      () => {
+        if (!rafActivity.current) {
+          rafActivity.current = true;
+          raf.current = requestAnimationFrame(step);
+        }
+      },
+      () => rafActivity.current
+    ],
+    [step]
+  );
+  react.useEffect(() => {
+    if (initiallyActive) {
+      result[1]();
+    }
+    return result[0];
+  }, [initiallyActive, result]);
+  return result;
+}
+
+function useEventEmitter() {
+  const listeners = react.useRef([]);
+  const _event = react.useRef((listener) => {
+    listeners.current.push(listener);
+    const disposable = {
+      dispose: () => {
+        if (!_disposed.current) {
+          for (let i = 0; i < listeners.current.length; i++) {
+            if (listeners.current[i] === listener) {
+              listeners.current.splice(i, 1);
+              return;
+            }
+          }
+        }
+      }
+    };
+    return disposable;
+  });
+  const _disposed = react.useRef(false);
+  const fire = (arg1, arg2) => {
+    const queue = [];
+    for (let i = 0; i < listeners.current.length; i++) {
+      queue.push(listeners.current[i]);
+    }
+    for (let i = 0; i < queue.length; i++) {
+      queue[i].call(void 0, arg1, arg2);
+    }
+  };
+  const dispose = () => {
+    if (listeners.current.length !== 0) {
+      listeners.current.length = 0;
+    }
+    _disposed.current = true;
+  };
+  return [_event.current, fire, dispose];
+}
+
+function useFavicon(href, baseUrl = "", rel = "icon") {
+  react.useEffect(() => {
+    const url = `${baseUrl}${href}`;
+    const element = document.head.querySelectorAll(
+      `link[rel*="${rel}"]`
+    );
+    element.forEach((el) => el.href = url);
+    if (element.length === 0) {
+      const link = document.createElement("link");
+      link.rel = rel;
+      link.href = url;
+      document.getElementsByTagName("head")[0].appendChild(link);
+    }
+  }, [baseUrl, href, rel]);
+}
+
+function useMutationObserver(callback, target, options = {}) {
+  const callbackRef = useLatest(callback);
+  const observerRef = react.useRef();
+  const stop = react.useCallback(() => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+  }, []);
+  useDeepCompareEffect(() => {
+    const element = getTargetElement(target);
+    if (!element) {
+      return;
+    }
+    observerRef.current = new MutationObserver(callbackRef.current);
+    observerRef.current.observe(element, options);
+    return stop;
+  }, [options]);
+  return stop;
+}
+
+function useTitle(title) {
+  react.useEffect(() => {
+    document.title = title;
+  }, [title]);
+}
+
+function useScriptTag(src, onLoaded = noop, options = {}) {
+  const {
+    immediate = true,
+    manual = false,
+    type = "text/javascript",
+    async = true,
+    crossOrigin,
+    referrerPolicy,
+    noModule,
+    defer,
+    attrs = {}
+  } = options;
+  const scriptTag = react.useRef(null);
+  const _promise = react.useRef(null);
+  const [status, setStatus] = react.useState(src ? "loading" : "idle");
+  const loadScript = (waitForScriptLoad) => new Promise((resolve, reject) => {
+    const resolveWithElement = (el2) => {
+      scriptTag.current = el2;
+      resolve(el2);
+      return el2;
+    };
+    if (!document) {
+      resolve(false);
+      return;
+    }
+    if (!src) {
+      setStatus("idle");
+      resolve(false);
+      return;
+    }
+    let shouldAppend = false;
+    let el = document.querySelector(
+      `script[src="${src}"]`
+    );
+    if (!el) {
+      el = document.createElement("script");
+      el.type = type;
+      el.async = async;
+      el.src = src;
+      if (defer) {
+        el.defer = defer;
+      }
+      if (crossOrigin) {
+        el.crossOrigin = crossOrigin;
+      }
+      if (noModule) {
+        el.noModule = noModule;
+      }
+      if (referrerPolicy) {
+        el.referrerPolicy = referrerPolicy;
+      }
+      Object.entries(attrs).forEach(
+        ([name, value]) => el == null ? void 0 : el.setAttribute(name, value)
+      );
+      shouldAppend = true;
+    } else if (el.hasAttribute("data-loaded")) {
+      setStatus(el.getAttribute("data-status"));
+      resolveWithElement(el);
+    }
+    el.addEventListener("error", (event) => {
+      setStatus(event.type === "load" ? "ready" : "error");
+      return reject(event);
+    });
+    el.addEventListener("abort", (event) => {
+      setStatus(event.type === "load" ? "ready" : "error");
+      return reject(event);
+    });
+    el.addEventListener("load", (event) => {
+      setStatus(event.type === "load" ? "ready" : "error");
+      el.setAttribute("data-loaded", "true");
+      onLoaded(el);
+      resolveWithElement(el);
+    });
+    if (shouldAppend) {
+      el = document.head.appendChild(el);
+    }
+    if (!waitForScriptLoad) {
+      resolveWithElement(el);
+    }
+  });
+  const load = (waitForScriptLoad = true) => {
+    if (!_promise.current) {
+      _promise.current = loadScript(waitForScriptLoad);
+    }
+    return _promise.current;
+  };
+  const unload = () => {
+    if (!document) {
+      return;
+    }
+    _promise.current = null;
+    if (scriptTag.current) {
+      scriptTag.current = null;
+    }
+    const el = document.querySelector(
+      `script[src="${src}"]`
+    );
+    if (el) {
+      document.head.removeChild(el);
+    }
+  };
+  useMount(() => {
+    if (immediate && !manual) {
+      load();
+    }
+  });
+  useUnmount(() => {
+    if (!manual) {
+      unload();
+    }
+  });
+  return [scriptTag.current, status, load, unload];
+}
+
+function usePermission(permissionDesc) {
+  const [state, setState] = react.useState("");
+  react.useEffect(() => {
+    const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
+    let mounted = true;
+    let permissionStatus = null;
+    const onChange = () => {
+      if (!mounted) {
+        return;
+      }
+      setState(() => {
+        var _a;
+        return (_a = permissionStatus == null ? void 0 : permissionStatus.state) != null ? _a : "";
+      });
+    };
+    navigator.permissions.query(desc).then((status) => {
+      permissionStatus = status;
+      on(permissionStatus, "change", onChange);
+      onChange();
+    }).catch(noop);
+    return () => {
+      permissionStatus && off(permissionStatus, "change", onChange);
+      mounted = false;
+      permissionStatus = null;
+    };
+  }, [permissionDesc]);
+  return state;
+}
+
+const isTouchEvent = (ev) => {
+  return "touches" in ev;
+};
+const preventDefault$1 = (ev) => {
+  if (!isTouchEvent(ev)) {
+    return;
+  }
+  if (ev.touches.length < 2 && ev.preventDefault) {
+    ev.preventDefault();
+  }
+};
+function useLongPress(callback, { isPreventDefault = true, delay = 300 } = {}) {
+  const timeout = react.useRef();
+  const target = react.useRef();
+  const start = react.useCallback(
+    (event) => {
+      if (isPreventDefault && event.target) {
+        on(event.target, "touchend", preventDefault$1, { passive: false });
+        target.current = event.target;
+      }
+      timeout.current = setTimeout(() => callback(event), delay);
+    },
+    [callback, delay, isPreventDefault]
+  );
+  const clear = react.useCallback(() => {
+    timeout.current && clearTimeout(timeout.current);
+    if (isPreventDefault && target.current) {
+      off(target.current, "touchend", preventDefault$1);
+    }
+  }, [isPreventDefault]);
+  return {
+    onMouseDown: (e) => start(e),
+    onTouchStart: (e) => start(e),
+    onMouseUp: clear,
+    onMouseLeave: clear,
+    onTouchEnd: clear
+  };
+}
+
+function useObjectUrl(object) {
+  const [url, setUrl] = react.useState();
+  react.useEffect(() => {
+    if (object) {
+      setUrl(URL.createObjectURL(object));
+    }
+    return () => {
+      if (url) {
+        URL.revokeObjectURL(url);
+      }
+    };
+  }, [object]);
+  return url;
+}
+
+const defaultEvents$1 = [
+  "mousemove",
+  "mousedown",
+  "resize",
+  "keydown",
+  "touchstart",
+  "wheel"
+];
+const oneMinute = 6e4;
+function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1) {
+  const [state, setState] = react.useState(initialState);
+  react.useEffect(() => {
+    let mounted = true;
+    let timeout;
+    let localState = state;
+    const set = (newState) => {
+      if (mounted) {
+        localState = newState;
+        setState(newState);
+      }
+    };
+    const onEvent = lodash.throttle(() => {
+      if (localState) {
+        set(false);
+      }
+      clearTimeout(timeout);
+      timeout = setTimeout(() => set(true), ms);
+    }, 50);
+    const onVisibility = () => {
+      if (!document.hidden) {
+        onEvent();
+      }
+    };
+    for (let i = 0; i < events.length; i++) {
+      on(window, events[i], onEvent);
+    }
+    on(document, "visibilitychange", onVisibility);
+    timeout = setTimeout(() => set(true), ms);
+    return () => {
+      mounted = false;
+      for (let i = 0; i < events.length; i++) {
+        off(window, events[i], onEvent);
+      }
+      off(document, "visibilitychange", onVisibility);
+    };
+  }, [ms, events]);
+  return state;
+}
+
+function useMediaDevices() {
+  const [state, setState] = react.useState({ devices: [] });
+  react.useEffect(() => {
+    let mounted = true;
+    const onChange = () => {
+      navigator.mediaDevices.enumerateDevices().then((devices) => {
+        if (mounted) {
+          setState({
+            devices: devices.map(({ deviceId, groupId, kind, label }) => ({
+              deviceId,
+              groupId,
+              kind,
+              label
+            }))
+          });
+        }
+      }).catch(noop);
+    };
+    on(navigator.mediaDevices, "devicechange", onChange);
+    onChange();
+    return () => {
+      mounted = false;
+      off(navigator.mediaDevices, "devicechange", onChange);
+    };
+  }, []);
+  return state;
+}
+const useMediaDevicesMock = () => ({});
+var useMediaDevices$1 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
+
+function useTextDirection(options = {}) {
+  const { selector = "html", initialValue = "ltr" } = options;
+  const getValue = () => {
+    var _a, _b;
+    if (isBrowser) {
+      return (_b = (_a = document == null ? void 0 : document.querySelector(selector)) == null ? void 0 : _a.getAttribute("dir")) != null ? _b : initialValue;
+    } else {
+      return initialValue;
+    }
+  };
+  const [value, setValue] = react.useState(getValue());
+  const set = (value2) => {
+    var _a, _b;
+    if (!isBrowser) {
+      return;
+    }
+    if (value2 !== null) {
+      (_a = document.querySelector(selector)) == null ? void 0 : _a.setAttribute("dir", value2);
+    } else {
+      (_b = document.querySelector(selector)) == null ? void 0 : _b.removeAttribute("dir");
+    }
+    setValue(value2);
+  };
+  return [value, set];
+}
+
+const initState = {
+  screenX: NaN,
+  screenY: NaN,
+  clientX: NaN,
+  clientY: NaN,
+  pageX: NaN,
+  pageY: NaN,
+  elementX: NaN,
+  elementY: NaN,
+  elementH: NaN,
+  elementW: NaN,
+  elementPosX: NaN,
+  elementPosY: NaN
+};
+function useMouse(target) {
+  const [state, setState] = useRafState(initState);
+  useEventListener(
+    "mousemove",
+    (event) => {
+      const { screenX, screenY, clientX, clientY, pageX, pageY } = event;
+      const newState = {
+        screenX,
+        screenY,
+        clientX,
+        clientY,
+        pageX,
+        pageY,
+        elementX: NaN,
+        elementY: NaN,
+        elementH: NaN,
+        elementW: NaN,
+        elementPosX: NaN,
+        elementPosY: NaN
+      };
+      const targetElement = getTargetElement(target);
+      if (targetElement) {
+        const { left, top, width, height } = targetElement.getBoundingClientRect();
+        newState.elementPosX = left + window.pageXOffset;
+        newState.elementPosY = top + window.pageYOffset;
+        newState.elementX = pageX - newState.elementPosX;
+        newState.elementY = pageY - newState.elementPosY;
+        newState.elementW = width;
+        newState.elementH = height;
+      }
+      setState(newState);
+    },
+    () => document
+  );
+  return state;
+}
+
+function useFps(options) {
+  var _a;
+  const [fps, setFps] = react.useState(0);
+  const every = (_a = options == null ? void 0 : options.every) != null ? _a : 10;
+  const last = react.useRef(performance.now());
+  const ticks = react.useRef(0);
+  useRafFn(() => {
+    ticks.current += 1;
+    if (ticks.current >= every) {
+      const now = performance.now();
+      const diff = now - last.current;
+      setFps(Math.round(1e3 / (diff / ticks.current)));
+      last.current = now;
+      ticks.current = 0;
+    }
+  });
+  return fps;
+}
+const useFpsMock = (options) => 0;
+var useFps$1 = typeof performance === "undefined" ? useFpsMock : useFps;
+
+const initCoord = {
+  accuracy: 0,
+  latitude: Infinity,
+  longitude: Infinity,
+  altitude: null,
+  altitudeAccuracy: null,
+  heading: null,
+  speed: null
+};
+function useGeolocation(options = {}) {
+  const {
+    enableHighAccuracy = true,
+    maximumAge = 3e4,
+    timeout = 27e3
+  } = options;
+  const [coordinates, setCoordinates] = react.useState(initCoord);
+  const [locatedAt, setLocatedAt] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const updatePosition = react.useCallback((position) => {
+    setCoordinates(position.coords);
+    setLocatedAt(position.timestamp);
+    setError(null);
+  }, []);
+  const updateError = react.useCallback((err) => {
+    setCoordinates(initCoord);
+    setLocatedAt(null);
+    setError(err);
+  }, []);
+  react.useEffect(() => {
+    navigator.geolocation.getCurrentPosition(updatePosition, updateError);
+    const watchId = navigator.geolocation.watchPosition(
+      updatePosition,
+      updateError,
+      {
+        enableHighAccuracy,
+        maximumAge,
+        timeout
+      }
+    );
+    return () => {
+      if (watchId) {
+        navigator.geolocation.clearWatch(watchId);
+      }
+    };
+  }, [enableHighAccuracy, maximumAge, timeout, updateError, updatePosition]);
+  return {
+    coordinates,
+    locatedAt,
+    error
+  };
+}
+
+var screenfull$1 = {exports: {}};
+
+/*!
+* screenfull
+* v5.2.0 - 2021-11-03
+* (c) Sindre Sorhus; MIT License
+*/
+
+(function (module) {
+	(function () {
+
+		var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
+		var isCommonjs = module.exports;
+
+		var fn = (function () {
+			var val;
+
+			var fnMap = [
+				[
+					'requestFullscreen',
+					'exitFullscreen',
+					'fullscreenElement',
+					'fullscreenEnabled',
+					'fullscreenchange',
+					'fullscreenerror'
+				],
+				// New WebKit
+				[
+					'webkitRequestFullscreen',
+					'webkitExitFullscreen',
+					'webkitFullscreenElement',
+					'webkitFullscreenEnabled',
+					'webkitfullscreenchange',
+					'webkitfullscreenerror'
+
+				],
+				// Old WebKit
+				[
+					'webkitRequestFullScreen',
+					'webkitCancelFullScreen',
+					'webkitCurrentFullScreenElement',
+					'webkitCancelFullScreen',
+					'webkitfullscreenchange',
+					'webkitfullscreenerror'
+
+				],
+				[
+					'mozRequestFullScreen',
+					'mozCancelFullScreen',
+					'mozFullScreenElement',
+					'mozFullScreenEnabled',
+					'mozfullscreenchange',
+					'mozfullscreenerror'
+				],
+				[
+					'msRequestFullscreen',
+					'msExitFullscreen',
+					'msFullscreenElement',
+					'msFullscreenEnabled',
+					'MSFullscreenChange',
+					'MSFullscreenError'
+				]
+			];
+
+			var i = 0;
+			var l = fnMap.length;
+			var ret = {};
+
+			for (; i < l; i++) {
+				val = fnMap[i];
+				if (val && val[1] in document) {
+					for (i = 0; i < val.length; i++) {
+						ret[fnMap[0][i]] = val[i];
+					}
+					return ret;
+				}
+			}
+
+			return false;
+		})();
+
+		var eventNameMap = {
+			change: fn.fullscreenchange,
+			error: fn.fullscreenerror
+		};
+
+		var screenfull = {
+			request: function (element, options) {
+				return new Promise(function (resolve, reject) {
+					var onFullScreenEntered = function () {
+						this.off('change', onFullScreenEntered);
+						resolve();
+					}.bind(this);
+
+					this.on('change', onFullScreenEntered);
+
+					element = element || document.documentElement;
+
+					var returnPromise = element[fn.requestFullscreen](options);
+
+					if (returnPromise instanceof Promise) {
+						returnPromise.then(onFullScreenEntered).catch(reject);
+					}
+				}.bind(this));
+			},
+			exit: function () {
+				return new Promise(function (resolve, reject) {
+					if (!this.isFullscreen) {
+						resolve();
+						return;
+					}
+
+					var onFullScreenExit = function () {
+						this.off('change', onFullScreenExit);
+						resolve();
+					}.bind(this);
+
+					this.on('change', onFullScreenExit);
+
+					var returnPromise = document[fn.exitFullscreen]();
+
+					if (returnPromise instanceof Promise) {
+						returnPromise.then(onFullScreenExit).catch(reject);
+					}
+				}.bind(this));
+			},
+			toggle: function (element, options) {
+				return this.isFullscreen ? this.exit() : this.request(element, options);
+			},
+			onchange: function (callback) {
+				this.on('change', callback);
+			},
+			onerror: function (callback) {
+				this.on('error', callback);
+			},
+			on: function (event, callback) {
+				var eventName = eventNameMap[event];
+				if (eventName) {
+					document.addEventListener(eventName, callback, false);
+				}
+			},
+			off: function (event, callback) {
+				var eventName = eventNameMap[event];
+				if (eventName) {
+					document.removeEventListener(eventName, callback, false);
+				}
+			},
+			raw: fn
+		};
+
+		if (!fn) {
+			if (isCommonjs) {
+				module.exports = {isEnabled: false};
+			} else {
+				window.screenfull = {isEnabled: false};
+			}
+
+			return;
+		}
+
+		Object.defineProperties(screenfull, {
+			isFullscreen: {
+				get: function () {
+					return Boolean(document[fn.fullscreenElement]);
+				}
+			},
+			element: {
+				enumerable: true,
+				get: function () {
+					return document[fn.fullscreenElement];
+				}
+			},
+			isEnabled: {
+				enumerable: true,
+				get: function () {
+					// Coerce to boolean in case of old WebKit
+					return Boolean(document[fn.fullscreenEnabled]);
+				}
+			}
+		});
+
+		if (isCommonjs) {
+			module.exports = screenfull;
+		} else {
+			window.screenfull = screenfull;
+		}
+	})();
+} (screenfull$1));
+
+var screenfull = screenfull$1.exports;
+
+function useFullscreen(target, options) {
+  const { onExit, onEnter } = options || {};
+  const onExitRef = useLatest(onExit);
+  const onEnterRef = useLatest(onEnter);
+  const [state, setState] = react.useState(false);
+  const onChange = () => {
+    var _a, _b;
+    if (screenfull.isEnabled) {
+      const { isFullscreen } = screenfull;
+      if (isFullscreen) {
+        (_a = onEnterRef.current) == null ? void 0 : _a.call(onEnterRef);
+      } else {
+        screenfull.off("change", onChange);
+        (_b = onExitRef.current) == null ? void 0 : _b.call(onExitRef);
+      }
+      setState(isFullscreen);
+    }
+  };
+  const enterFullscreen = () => {
+    const el = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+    if (screenfull.isEnabled) {
+      try {
+        screenfull.request(el);
+        screenfull.on("change", onChange);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  };
+  const exitFullscreen = () => {
+    if (screenfull.isEnabled) {
+      screenfull.exit();
+    }
+  };
+  const toggleFullscreen = () => {
+    if (state) {
+      exitFullscreen();
+    } else {
+      enterFullscreen();
+    }
+  };
+  useUnmount(() => {
+    if (screenfull.isEnabled) {
+      screenfull.off("change", onChange);
+    }
+  });
+  return [
+    state,
+    {
+      enterFullscreen: useEvent(enterFullscreen),
+      exitFullscreen: useEvent(exitFullscreen),
+      toggleFullscreen: useEvent(toggleFullscreen),
+      isEnabled: screenfull.isEnabled
+    }
+  ];
+}
+
+const nav = isNavigator ? navigator : void 0;
+const conn = nav && (nav.connection || nav.mozConnection || nav.webkitConnection);
+function getConnectionState(previousState) {
+  const online = nav == null ? void 0 : nav.onLine;
+  const previousOnline = previousState == null ? void 0 : previousState.online;
+  return {
+    online,
+    previous: previousOnline,
+    since: online !== previousOnline ? new Date() : previousState == null ? void 0 : previousState.since,
+    downlink: conn == null ? void 0 : conn.downlink,
+    downlinkMax: conn == null ? void 0 : conn.downlinkMax,
+    effectiveType: conn == null ? void 0 : conn.effectiveType,
+    rtt: conn == null ? void 0 : conn.rtt,
+    saveData: conn == null ? void 0 : conn.saveData,
+    type: conn == null ? void 0 : conn.type
+  };
+}
+function useNetwork() {
+  const [state, setState] = react.useState(getConnectionState);
+  react.useEffect(() => {
+    const handleStateChange = () => {
+      setState(getConnectionState);
+    };
+    on(window, "online", handleStateChange, { passive: true });
+    on(window, "offline", handleStateChange, { passive: true });
+    if (conn) {
+      on(conn, "change", handleStateChange, { passive: true });
+    }
+    return () => {
+      off(window, "online", handleStateChange);
+      off(window, "offline", handleStateChange);
+      if (conn) {
+        off(conn, "change", handleStateChange);
+      }
+    };
+  }, []);
+  return state;
+}
+
+function useOnline() {
+  const { online } = useNetwork();
+  return online;
+}
+
+const defaultState = {
+  angle: 0,
+  type: "landscape-primary"
+};
+function useOrientation(initialState = defaultState) {
+  const [state, setState] = react.useState(initialState);
+  react.useEffect(() => {
+    const screen = window.screen;
+    let mounted = true;
+    const onChange = () => {
+      if (mounted) {
+        const { orientation } = screen;
+        if (orientation) {
+          const { angle, type } = orientation;
+          setState({ angle, type });
+        } else if (window.orientation !== void 0) {
+          setState({
+            angle: typeof window.orientation === "number" ? window.orientation : 0,
+            type: ""
+          });
+        }
+      }
+    };
+    on(window, "orientationchange", onChange);
+    onChange();
+    return () => {
+      mounted = false;
+      off(window, "orientationchange", onChange);
+    };
+  }, []);
+  const lockOrientation = (type) => {
+    if (isBrowser) {
+      return;
+    }
+    if (!(window && "screen" in window && "orientation" in window.screen)) {
+      return Promise.reject(new Error("Not supported"));
+    }
+    return window.screen.orientation.lock(type);
+  };
+  const unlockOrientation = () => {
+    if (isBrowser) {
+      return;
+    }
+    if (!(window && "screen" in window && "orientation" in window.screen)) {
+      return;
+    }
+    return window.screen.orientation.unlock();
+  };
+  return [state, lockOrientation, unlockOrientation];
+}
+
+function useIntersectionObserver(target, callback, options = {}) {
+  const savedCallback = useLatest(callback);
+  const observerRef = react.useRef();
+  const stop = react.useCallback(() => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+  }, []);
+  useDeepCompareEffect(() => {
+    const element = getTargetElement(target);
+    if (!element) {
+      return;
+    }
+    observerRef.current = new IntersectionObserver(
+      savedCallback.current,
+      options
+    );
+    observerRef.current.observe(element);
+    return stop;
+  }, [options]);
+  return stop;
+}
+
+function usePageLeave() {
+  const [isLeft, setIsLeft] = react.useState(false);
+  const handler = (event) => {
+    if (!window)
+      return;
+    event = event || window.event;
+    const from = event.relatedTarget || event.toElement;
+    setIsLeft(!from);
+  };
+  useEventListener("mouseout", handler, window, { passive: true });
+  useEventListener("mouseleave", handler, document, { passive: true });
+  useEventListener("mouseenter", handler, document, { passive: true });
+  return isLeft;
+}
+
+function useDocumentVisibility() {
+  const [visible, setVisible] = react.useState(() => {
+    if (!document) {
+      return "visible";
+    } else {
+      return document.visibilityState;
+    }
+  });
+  useEventListener(
+    "visibilitychange",
+    () => {
+      setVisible(document.visibilityState);
+    },
+    document
+  );
+  return visible;
+}
+
+function useResizeObserver(target, callback, options = {}) {
+  const savedCallback = useLatest(callback);
+  const observerRef = react.useRef();
+  const stop = react.useCallback(() => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+    }
+  }, []);
+  useDeepCompareEffect(() => {
+    const element = getTargetElement(target);
+    if (!element) {
+      return;
+    }
+    observerRef.current = new ResizeObserver(savedCallback.current);
+    observerRef.current.observe(element, options);
+    return stop;
+  }, [options]);
+  return stop;
+}
+
+function useDropZone(target, onDrop) {
+  const [over, setOver] = react.useState(false);
+  const counter = react.useRef(0);
+  const element = getTargetElement(target);
+  useEventListener(
+    "dragenter",
+    (event) => {
+      event.preventDefault();
+      counter.current += 1;
+      setOver(true);
+    },
+    element
+  );
+  useEventListener(
+    "dragover",
+    (event) => {
+      event.preventDefault();
+    },
+    element
+  );
+  useEventListener(
+    "dragleave",
+    (event) => {
+      event.preventDefault();
+      counter.current -= 1;
+      if (counter.current === 0) {
+        setOver(false);
+      }
+    },
+    element
+  );
+  useEventListener(
+    "drop",
+    (event) => {
+      var _a, _b;
+      event.preventDefault();
+      counter.current = 0;
+      setOver(false);
+      const files = Array.from((_b = (_a = event.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
+      onDrop == null ? void 0 : onDrop(files.length === 0 ? null : files);
+    },
+    element
+  );
+  return over;
+}
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+const DEFAULT_OPTIONS = {
+  multiple: true,
+  accept: "*"
+};
+function useFileDialog(options = {}) {
+  const [files, setFiles] = react.useState(null);
+  const inputRef = react.useRef();
+  const initFn = react.useCallback(() => {
+    if (!document) {
+      return void 0;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.onchange = (event) => {
+      const result = event.target;
+      setFiles(result.files);
+    };
+    return input;
+  }, []);
+  inputRef.current = initFn();
+  const open = (localOptions) => {
+    if (!inputRef.current) {
+      return;
+    }
+    const _options = __spreadValues$1(__spreadValues$1(__spreadValues$1({}, DEFAULT_OPTIONS), options), localOptions);
+    inputRef.current.multiple = _options.multiple;
+    inputRef.current.accept = _options.accept;
+    inputRef.current.capture = _options.capture;
+    inputRef.current.click();
+  };
+  const reset = () => {
+    setFiles(null);
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+  };
+  return [files, open, reset];
+}
+
+const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+function useScroll(target, options = {}) {
+  const {
+    throttle = 0,
+    idle = 200,
+    onStop = noop,
+    onScroll = noop,
+    offset = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    eventListenerOptions = {
+      capture: false,
+      passive: true
+    }
+  } = options;
+  const [x, setX] = react.useState(0);
+  const [y, setY] = react.useState(0);
+  const [isScrolling, setIsScrolling] = react.useState(false);
+  const [arrivedState, setArrivedState] = react.useState({
+    left: true,
+    right: false,
+    top: true,
+    bottom: false
+  });
+  const [directions, setDirections] = react.useState({
+    left: false,
+    right: false,
+    top: false,
+    bottom: false
+  });
+  const { run: onScrollEnd } = useDebounceFn((e) => {
+    setIsScrolling(false);
+    setDirections({ left: false, right: false, top: false, bottom: false });
+    onStop(e);
+  }, throttle + idle);
+  const onScrollHandler = useEvent((e) => {
+    const eventTarget = e.target === document ? e.target.documentElement : e.target;
+    const scrollLeft = eventTarget.scrollLeft;
+    let scrollTop = eventTarget.scrollTop;
+    if (e.target === document && !scrollTop)
+      scrollTop = document.body.scrollTop;
+    setX(scrollLeft);
+    setY(scrollTop);
+    setDirections({
+      left: scrollLeft < x,
+      right: scrollLeft > x,
+      top: scrollTop < y,
+      bottom: scrollTop > y
+    });
+    setArrivedState({
+      left: scrollLeft <= 0 + (offset.left || 0),
+      right: scrollLeft + eventTarget.clientWidth >= eventTarget.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS,
+      top: scrollTop <= 0 + (offset.top || 0),
+      bottom: scrollTop + eventTarget.clientHeight >= eventTarget.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS
+    });
+    setIsScrolling(true);
+    onScrollEnd(e);
+    onScroll(e);
+  });
+  const { run: throttleOnScroll } = useThrottleFn(onScrollHandler, throttle);
+  useEventListener(
+    "scroll",
+    throttle ? throttleOnScroll : onScrollHandler,
+    target,
+    eventListenerOptions
+  );
+  return [x, y, isScrolling, arrivedState, directions];
+}
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useInfiniteScroll(target, onLoadMore, options = {}) {
+  var _a, _b;
+  const savedLoadMore = useLatest(onLoadMore);
+  const direction = (_a = options.direction) != null ? _a : "bottom";
+  const state = useScroll(target, __spreadProps(__spreadValues({}, options), {
+    offset: __spreadValues({
+      [direction]: (_b = options.distance) != null ? _b : 0
+    }, options.offset)
+  }));
+  const di = state[3][direction];
+  useUpdateEffect(() => {
+    const fn = () => __async(this, null, function* () {
+      var _a2, _b2;
+      const element = getTargetElement(target);
+      const previous = {
+        height: (_a2 = element == null ? void 0 : element.scrollHeight) != null ? _a2 : 0,
+        width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
+      };
+      yield savedLoadMore.current(state);
+      if (options.preserveScrollPosition && element) {
+        element.scrollTo({
+          top: element.scrollHeight - previous.height,
+          left: element.scrollWidth - previous.width
+        });
+      }
+    });
+    fn();
+  }, [di, options.preserveScrollPosition]);
+}
+
+const defaultEvents = [
+  "mousedown",
+  "mouseup",
+  "keydown",
+  "keyup"
+];
+function useKeyModifier(modifier, options = {}) {
+  const { events = defaultEvents, initial = false } = options;
+  const [state, setState] = react.useState(initial);
+  useMount(() => {
+    events.forEach((listenEvent) => {
+      on(document, listenEvent, (evt) => {
+        if (typeof evt.getModifierState === "function") {
+          setState(evt.getModifierState(modifier));
+        }
+      });
+    });
+    return () => {
+      events.forEach((listenerEvent) => {
+        off(document, listenerEvent, (evt) => {
+          if (typeof evt.getModifierState === "function") {
+            setState(evt.getModifierState(modifier));
+          }
+        });
+      });
+    };
+  });
+  return state;
+}
+
+function useMousePressed(target, options = {}) {
+  const { touch = true, drag = true, initialValue = false } = options;
+  const [pressed, setPressed] = react.useState(initialValue);
+  const [sourceType, setSourceType] = react.useState(null);
+  const onPressed = react.useCallback(
+    (srcType) => () => {
+      setPressed(true);
+      setSourceType(srcType);
+    },
+    []
+  );
+  const onReleased = react.useCallback(() => {
+    setPressed(false);
+    setSourceType(null);
+  }, []);
+  useEventListener("mousedown", onPressed("mouse"), target, { passive: true });
+  useEventListener("mouseleave", onReleased, window, { passive: true });
+  useEventListener("mouseup", onReleased, window, { passive: true });
+  useMount(() => {
+    const element = getTargetElement(target);
+    if (drag) {
+      element == null ? void 0 : element.addEventListener("dragstart", onPressed("mouse"), {
+        passive: true
+      });
+      element == null ? void 0 : element.addEventListener("drop", onReleased, {
+        passive: true
+      });
+      element == null ? void 0 : element.addEventListener("dragend", onReleased, {
+        passive: true
+      });
+    }
+    if (touch) {
+      element == null ? void 0 : element.addEventListener("touchstart", onPressed("touch"), {
+        passive: true
+      });
+      element == null ? void 0 : element.addEventListener("touchend", onReleased, {
+        passive: true
+      });
+      element == null ? void 0 : element.addEventListener("touchcancel", onReleased, {
+        passive: true
+      });
+    }
+    return () => {
+      if (drag) {
+        element == null ? void 0 : element.removeEventListener("dragstart", onPressed("mouse"));
+        element == null ? void 0 : element.removeEventListener("drop", onReleased);
+        element == null ? void 0 : element.removeEventListener("dragend", onReleased);
+      }
+      if (touch) {
+        element == null ? void 0 : element.removeEventListener("touchstart", onPressed("touch"));
+        element == null ? void 0 : element.removeEventListener("touchend", onReleased);
+        element == null ? void 0 : element.removeEventListener("touchcancel", onReleased);
+      }
+    };
+  });
+  return [pressed, sourceType];
+}
+
+function preventDefault(rawEvent) {
+  const e = rawEvent || window.event;
+  if (e.touches.length > 1) {
+    return true;
+  }
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  return false;
+}
+function useScrollLock(target, initialState = false) {
+  const [locked, setLocked] = react.useState(initialState);
+  const initialOverflowRef = react.useRef("scroll");
+  useMount(() => {
+    const element = getTargetElement(target);
+    if (element) {
+      initialOverflowRef.current = element.style.overflow;
+      if (locked) {
+        element.style.overflow = "hidden";
+      }
+    }
+  });
+  const lock = useEvent(() => {
+    const element = getTargetElement(target);
+    if (!element || locked) {
+      return;
+    }
+    if (isIOS) {
+      element.addEventListener("touchmove", preventDefault, { passive: false });
+    }
+    element.style.overflow = "hidden";
+    setLocked(true);
+  });
+  const unlock = useEvent(() => {
+    const element = getTargetElement(target);
+    if (!element || !locked) {
+      return;
+    }
+    if (isIOS) {
+      element.removeEventListener("touchmove", preventDefault);
+    }
+    element.style.overflow = initialOverflowRef.current;
+    setLocked(false);
+  });
+  const set = useEvent((flag) => {
+    if (flag) {
+      lock();
+    } else {
+      unlock();
+    }
+  });
+  return [locked, set];
+}
+
+function useElementSize(target, options = {}) {
+  const { box = "content-box" } = options;
+  const [width, setWidth] = react.useState(0);
+  const [height, setHeight] = react.useState(0);
+  useResizeObserver(
+    target,
+    ([entry]) => {
+      const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+      if (boxSize) {
+        setWidth(boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0));
+        setHeight(boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0));
+      } else {
+        setWidth(entry.contentRect.width);
+        setHeight(entry.contentRect.height);
+      }
+    },
+    options
+  );
+  return [width, height];
+}
+
+function useVirtualList(list = [], options) {
+  const containerRef = react.useRef(null);
+  const [width, height] = useElementSize(containerRef);
+  const [currentList, setCurrentList] = react.useState([]);
+  const { itemHeight, overscan = 5, containerHeight = 300 } = options;
+  const state = react.useRef({ start: 0, end: 10 });
+  const getViewCapacity = react.useCallback(
+    (containerHeight2) => {
+      if (typeof itemHeight === "number") {
+        return Math.ceil(containerHeight2 / itemHeight);
+      }
+      const { start = 0 } = state.current;
+      let sum = 0;
+      let capacity = 0;
+      for (let i = start; i < list.length; i++) {
+        const height2 = itemHeight(i);
+        sum += height2;
+        if (sum >= containerHeight2) {
+          capacity = i;
+          break;
+        }
+      }
+      return capacity - start;
+    },
+    [itemHeight, list]
+  );
+  const getOffset = react.useCallback(
+    (scrollTop) => {
+      if (typeof itemHeight === "number")
+        return Math.floor(scrollTop / itemHeight) + 1;
+      let sum = 0;
+      let offset = 0;
+      for (let i = 0; i < list.length; i++) {
+        const height2 = itemHeight(i);
+        sum += height2;
+        if (sum >= scrollTop) {
+          offset = i;
+          break;
+        }
+      }
+      return offset + 1;
+    },
+    [itemHeight, list]
+  );
+  const calculateRange = useEvent(() => {
+    const element = containerRef.current;
+    if (element != null) {
+      const offset = getOffset(element.scrollTop);
+      const viewCapacity = getViewCapacity(element.clientHeight);
+      const from = offset - overscan;
+      const to = offset + viewCapacity + overscan;
+      state.current = {
+        start: from < 0 ? 0 : from,
+        end: to > list.length ? list.length : to
+      };
+      setCurrentList(
+        list.slice(state.current.start, state.current.end).map((ele, index) => ({
+          data: ele,
+          index: index + state.current.start
+        }))
+      );
+    }
+  });
+  react.useEffect(() => {
+    calculateRange();
+  }, [width, height, list, calculateRange]);
+  const totalHeight = react.useMemo(() => {
+    if (typeof itemHeight === "number") {
+      return list.length * itemHeight;
+    }
+    return list.reduce((sum, _, index) => sum + itemHeight(index), 0);
+  }, [itemHeight, list]);
+  const getDistanceTop = react.useCallback(
+    (index) => {
+      if (typeof itemHeight === "number") {
+        const height3 = index * itemHeight;
+        return height3;
+      }
+      const height2 = list.slice(0, index).reduce((sum, _, i) => sum + itemHeight(i), 0);
+      return height2;
+    },
+    [itemHeight, list]
+  );
+  const scrollTo = useEvent((index) => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = getDistanceTop(index);
+      calculateRange();
+    }
+  });
+  const offsetTop = react.useMemo(
+    () => getDistanceTop(state.current.start),
+    [getDistanceTop]
+  );
+  const wrapperProps = react.useMemo(() => {
+    return {
+      style: {
+        width: "100%",
+        height: `${totalHeight - offsetTop}px`,
+        marginTop: `${offsetTop}px`
+      }
+    };
+  }, [offsetTop, totalHeight]);
+  const containerStyle = react.useMemo(() => {
+    return { overflowY: "auto", height: containerHeight };
+  }, [containerHeight]);
+  return {
+    list: currentList,
+    scrollTo,
+    containerProps: {
+      ref: containerRef,
+      onScroll: () => {
+        calculateRange();
+      },
+      style: containerStyle
+    },
+    wrapperProps
+  };
+}
+
+function usePreferredColorScheme(defaultState) {
+  const isLight = useMediaQuery("(prefers-color-scheme: light)");
+  const isDark = useMediaQuery("(prefers-color-scheme: dark)");
+  if (!isBrowser && defaultState) {
+    return defaultState;
+  }
+  return isDark ? "dark" : isLight ? "light" : "no-preference";
+}
+
+function usePreferredContrast(defaultState) {
+  const isMore = useMediaQuery("(prefers-contrast: more)");
+  const isLess = useMediaQuery("(prefers-contrast: less)");
+  const isCustom = useMediaQuery("(prefers-contrast: custom)");
+  if (!isBrowser && defaultState) {
+    return defaultState;
+  }
+  return isMore ? "more" : isLess ? "less" : isCustom ? "custom" : "no-preference";
+}
+
+function useActiveElement() {
+  const [active, setActive] = react.useState(null);
+  const listener = react.useCallback(() => {
+    setActive(window == null ? void 0 : window.document.activeElement);
+  }, []);
+  useEventListener("blur", listener, window, true);
+  useEventListener("focus", listener, window, true);
+  return active;
+}
+
+exports.useActiveElement = useActiveElement;
+exports.useCounter = useCounter;
+exports.useCustomCompareEffect = useCustomCompareEffect;
+exports.useDarkMode = useDarkMode;
+exports.useDebounce = useDebounce;
+exports.useDebounceFn = useDebounceFn;
+exports.useDeepCompareEffect = useDeepCompareEffect;
+exports.useDocumentVisibility = useDocumentVisibility;
+exports.useDropZone = useDropZone;
+exports.useElementSize = useElementSize;
+exports.useEvent = useEvent;
+exports.useEventEmitter = useEventEmitter;
+exports.useEventListener = useEventListener;
+exports.useFavicon = useFavicon;
+exports.useFileDialog = useFileDialog;
+exports.useFirstMountState = useFirstMountState;
+exports.useFps = useFps$1;
+exports.useFullscreen = useFullscreen;
+exports.useGeolocation = useGeolocation;
+exports.useIdle = useIdle;
+exports.useInfiniteScroll = useInfiniteScroll;
+exports.useIntersectionObserver = useIntersectionObserver;
+exports.useInterval = useInterval;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useKeyModifier = useKeyModifier;
+exports.useLatest = useLatest;
+exports.useLocalStorage = useLocalStorage;
+exports.useLongPress = useLongPress;
+exports.useMarkdown = useMarkdown;
+exports.useMediaDevices = useMediaDevices$1;
+exports.useMediaQuery = useMediaQuery;
+exports.useMount = useMount;
+exports.useMountedState = useMountedState;
+exports.useMouse = useMouse;
+exports.useMousePressed = useMousePressed;
+exports.useMutationObserver = useMutationObserver;
+exports.useNetwork = useNetwork;
+exports.useObjectUrl = useObjectUrl;
+exports.useOnline = useOnline;
+exports.useOrientation = useOrientation;
+exports.usePageLeave = usePageLeave;
+exports.usePermission = usePermission;
+exports.usePreferredColorScheme = usePreferredColorScheme;
+exports.usePreferredContrast = usePreferredContrast;
+exports.usePreferredDark = usePreferredDark;
+exports.usePrevious = usePrevious;
+exports.useRafFn = useRafFn;
+exports.useRafState = useRafState;
+exports.useResizeObserver = useResizeObserver;
+exports.useScriptTag = useScriptTag;
+exports.useScroll = useScroll;
+exports.useScrollLock = useScrollLock;
+exports.useSessionStorage = useSessionStorage;
+exports.useTextDirection = useTextDirection;
+exports.useThrottle = useThrottle;
+exports.useThrottleFn = useThrottleFn;
+exports.useTimeout = useTimeout;
+exports.useTimeoutFn = useTimeoutFn;
+exports.useTitle = useTitle;
+exports.useToggle = useToggle;
+exports.useUnmount = useUnmount;
+exports.useUpdate = useUpdate;
+exports.useUpdateEffect = useUpdateEffect;
+exports.useUpdateLayoutEffect = useUpdateLayoutEffect;
+exports.useVirtualList = useVirtualList;