@reactuses/core 3.0.3 → 4.0.0

package/dist/index.cjs

@@ -58,7 +58,7 @@ const isIOS = isBrowser && ((_a = window == null ? void 0 : window.navigator) ==
 !React__default["default"].useId;
 
 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";
+  return rawInit == null || rawInit === void 0 ? "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;
@@ -81,6 +81,283 @@ function useEvent(fn) {
   }, []);
 }
 
+const defaultOptions = {};
+const defaultOnError = (e) => {
+  console.error(e);
+};
+
+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()
+  }
+};
+const getInitialState$3 = (key, defaultValue, storage, serializer, onError) => {
+  if (defaultValue !== void 0) {
+    return defaultValue;
+  }
+  if (isBrowser) {
+    try {
+      const raw = storage == null ? void 0 : storage.getItem(key);
+      if (raw !== void 0 && raw !== null) {
+        return serializer == null ? void 0 : serializer.read(raw);
+      }
+    } catch (error) {
+      onError == null ? void 0 : onError(error);
+    }
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`createStorage` When server side rendering, defaultValue should be defined to prevent a hydration mismatches."
+    );
+  }
+  return null;
+};
+function useStorage(key, defaultValue, getStorage = () => isBrowser ? sessionStorage : void 0, options = defaultOptions) {
+  let storage;
+  const { onError = defaultOnError, csrData } = options;
+  try {
+    storage = getStorage();
+  } catch (err) {
+    onError(err);
+  }
+  const type = guessSerializerType(defaultValue);
+  const serializer = React.useMemo(() => {
+    var _a;
+    return (_a = options.serializer) != null ? _a : StorageSerializers[type];
+  }, [options.serializer, type]);
+  const [state, setState] = React.useState(
+    getInitialState$3(key, defaultValue, storage, serializer, onError)
+  );
+  React.useEffect(() => {
+    const data = csrData ? isFunction$1(csrData) ? csrData() : csrData : defaultValue;
+    const getStoredValue = () => {
+      try {
+        const raw = storage == null ? void 0 : storage.getItem(key);
+        if (raw !== void 0 && raw !== null) {
+          return serializer.read(raw);
+        } else {
+          storage == null ? void 0 : storage.setItem(key, serializer.write(data));
+          return data;
+        }
+      } catch (e) {
+        onError(e);
+      }
+    };
+    setState(getStoredValue());
+  }, [key, defaultValue, serializer, storage, onError, csrData]);
+  const updateState = useEvent(
+    (valOrFunc) => {
+      const currentState = isFunction$1(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, defaultValue, options = defaultOptions) {
+  return useStorage(
+    key,
+    defaultValue,
+    () => isBrowser ? localStorage : void 0,
+    options
+  );
+}
+
+function useSessionStorage(key, defaultValue, options = defaultOptions) {
+  return useStorage(
+    key,
+    defaultValue,
+    () => 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 = defaultOptions) {
+  const immediate = 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]);
+}
+
+function useDarkMode(options) {
+  const {
+    selector = "html",
+    attribute = "class",
+    classNameDark = "",
+    classNameLight = "",
+    storageKey = "reactuses-color-scheme",
+    storage = () => isBrowser ? localStorage : void 0,
+    defaultValue = false
+  } = options;
+  const value = () => {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  };
+  const [dark, setDark] = useStorage(
+    storageKey,
+    defaultValue,
+    storage,
+    {
+      csrData: value
+    }
+  );
+  React.useEffect(() => {
+    const element = window == null ? void 0 : window.document.querySelector(selector);
+    if (!element) {
+      return;
+    }
+    if (attribute === "class") {
+      dark && classNameDark && element.classList.add(classNameDark);
+      !dark && classNameLight && element.classList.add(classNameLight);
+    } else {
+      dark && classNameDark && element.setAttribute(attribute, classNameDark);
+      !dark && classNameLight && element.setAttribute(attribute, classNameLight);
+    }
+    return () => {
+      if (!element) {
+        return;
+      }
+      if (attribute === "class") {
+        dark && classNameDark && element.classList.remove(classNameDark);
+        !dark && classNameLight && element.classList.remove(classNameLight);
+      } else {
+        dark && classNameDark && element.removeAttribute(attribute);
+        !dark && classNameLight && element.removeAttribute(attribute);
+      }
+    };
+  }, [attribute, classNameDark, classNameLight, dark, selector]);
+  return [dark, () => setDark((dark2) => !dark2), setDark];
+}
+
+const getInitialState$2 = (query, defaultState) => {
+  if (defaultState !== void 0) {
+    return defaultState;
+  }
+  if (isBrowser) {
+    return window.matchMedia(query).matches;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`useMediaQuery` 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$2(query, defaultState));
+  React.useEffect(() => {
+    var _a;
+    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 {
+      (_a = mql.addListener) == null ? void 0 : _a.call(mql, onChange);
+    }
+    setState(mql.matches);
+    return () => {
+      var _a2;
+      mounted = false;
+      if ("removeEventListener" in mql) {
+        mql.removeEventListener("change", onChange);
+      } else {
+        (_a2 = mql.removeListener) == null ? void 0 : _a2.call(mql, onChange);
+      }
+    };
+  }, [query]);
+  return state;
+}
+
+function usePreferredDark(defaultState) {
+  return useMediaQuery("(prefers-color-scheme: dark)", defaultState);
+}
+
+function useMount(fn) {
+  if (isDev) {
+    if (!isFunction$1(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$1(fn)) {
+      console.error(
+        `useUnmount expected parameter is a function, got ${typeof fn}`
+      );
+    }
+  }
+  const fnRef = useLatest(fn);
+  React.useEffect(
+    () => () => {
+      fnRef.current();
+    },
+    [fnRef]
+  );
+}
+
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
 
@@ -2396,390 +2673,95 @@ function debounce(func, wait, options) {
  *
  * **Note:** This method supports comparing arrays, array buffers, booleans,
  * date objects, error objects, maps, numbers, `Object` objects, regexes,
- * sets, strings, symbols, and typed arrays. `Object` objects are compared
- * by their own, not inherited, enumerable properties. Functions and DOM
- * nodes are compared by strict equality, i.e. `===`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'a': 1 };
- * var other = { 'a': 1 };
- *
- * _.isEqual(object, other);
- * // => true
- *
- * object === other;
- * // => false
- */
-function isEqual(value, other) {
-  return baseIsEqual(value, other);
-}
-
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
-
-/**
- * Creates a throttled function that only invokes `func` at most once per
- * every `wait` milliseconds. The throttled function comes with a `cancel`
- * method to cancel delayed `func` invocations and a `flush` method to
- * immediately invoke them. Provide `options` to indicate whether `func`
- * should be invoked on the leading and/or trailing edge of the `wait`
- * timeout. The `func` is invoked with the last arguments provided to the
- * throttled function. Subsequent calls to the throttled function return the
- * result of the last `func` invocation.
- *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the throttled function
- * is invoked more than once during the `wait` timeout.
- *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
- *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.throttle` and `_.debounce`.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to throttle.
- * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=true]
- *  Specify invoking on the leading edge of the timeout.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new throttled function.
- * @example
- *
- * // Avoid excessively updating the position while scrolling.
- * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
- *
- * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
- * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
- * jQuery(element).on('click', throttled);
- *
- * // Cancel the trailing throttled invocation.
- * jQuery(window).on('popstate', throttled.cancel);
- */
-function throttle(func, wait, options) {
-  var leading = true,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  if (isObject(options)) {
-    leading = 'leading' in options ? !!options.leading : leading;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-  return debounce(func, wait, {
-    'leading': leading,
-    'maxWait': wait,
-    'trailing': trailing
-  });
-}
-
-const isPrimitive$1 = (val) => val !== Object(val);
-function useCustomCompareEffect(effect, deps, depsEqual) {
-  if (process.env.NODE_ENV !== "production") {
-    if (!Array.isArray(deps) || !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 (!Array.isArray(deps) || !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, isEqual);
-}
-
-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 = {}) {
-  const defaultOnError = React.useCallback((e) => {
-    console.error(e);
-  }, []);
-  let storage;
-  const { onError = defaultOnError, csrData } = options;
-  try {
-    storage = getStorage();
-  } catch (err) {
-    onError(err);
-  }
-  const type = guessSerializerType(defaults);
-  const serializer = React.useMemo(() => {
-    var _a;
-    return (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  }, [options.serializer, type]);
-  const [state, setState] = React.useState(defaults);
-  useDeepCompareEffect(() => {
-    const data = csrData ? isFunction$1(csrData) ? csrData() : csrData : defaults;
-    const getStoredValue = () => {
-      try {
-        const raw = storage == null ? void 0 : storage.getItem(key);
-        if (raw !== void 0 && raw !== null) {
-          return serializer.read(raw);
-        } else {
-          storage == null ? void 0 : storage.setItem(key, serializer.write(data));
-          return data;
-        }
-      } catch (e) {
-        onError(e);
-      }
-    };
-    setState(getStoredValue());
-  }, [key, defaults, serializer, storage, onError]);
-  const updateState = useEvent(
-    (valOrFunc) => {
-      const currentState = isFunction$1(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]);
-}
-
-function useDarkMode(options) {
-  const {
-    selector = "html",
-    attribute = "class",
-    classNameDark = "",
-    classNameLight = "",
-    storageKey = "reactuses-color-scheme",
-    storage = () => isBrowser ? localStorage : void 0,
-    defaultValue = false
-  } = options;
-  const value = () => {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  };
-  const [dark, setDark] = useStorage(
-    storageKey,
-    defaultValue,
-    storage,
-    {
-      csrData: value
-    }
-  );
-  React.useEffect(() => {
-    const element = window == null ? void 0 : window.document.querySelector(selector);
-    if (!element) {
-      return;
-    }
-    if (attribute === "class") {
-      dark && classNameDark && element.classList.add(classNameDark);
-      !dark && classNameLight && element.classList.add(classNameLight);
-    } else {
-      dark && classNameDark && element.setAttribute(attribute, classNameDark);
-      !dark && classNameLight && element.setAttribute(attribute, classNameLight);
-    }
-    return () => {
-      if (!element) {
-        return;
-      }
-      if (attribute === "class") {
-        dark && classNameDark && element.classList.remove(classNameDark);
-        !dark && classNameLight && element.classList.remove(classNameLight);
-      } else {
-        dark && classNameDark && element.removeAttribute(attribute);
-        !dark && classNameLight && element.removeAttribute(attribute);
-      }
-    };
-  }, [attribute, classNameDark, classNameLight, dark, selector]);
-  return [dark, () => setDark((dark2) => !dark2), setDark];
-}
-
-const getInitialState = (query, defaultState) => {
-  if (defaultState !== void 0) {
-    return defaultState;
-  }
-  if (isBrowser) {
-    return window.matchMedia(query).matches;
-  }
-  if (process.env.NODE_ENV !== "production") {
-    console.warn(
-      "`useMediaQuery` 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(() => {
-    var _a;
-    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 {
-      (_a = mql.addListener) == null ? void 0 : _a.call(mql, onChange);
-    }
-    setState(mql.matches);
-    return () => {
-      var _a2;
-      mounted = false;
-      if ("removeEventListener" in mql) {
-        mql.removeEventListener("change", onChange);
-      } else {
-        (_a2 = mql.removeListener) == null ? void 0 : _a2.call(mql, onChange);
-      }
-    };
-  }, [query]);
-  return state;
+ * sets, strings, symbols, and typed arrays. `Object` objects are compared
+ * by their own, not inherited, enumerable properties. Functions and DOM
+ * nodes are compared by strict equality, i.e. `===`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to compare.
+ * @param {*} other The other value to compare.
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ * var other = { 'a': 1 };
+ *
+ * _.isEqual(object, other);
+ * // => true
+ *
+ * object === other;
+ * // => false
+ */
+function isEqual(value, other) {
+  return baseIsEqual(value, other);
 }
 
-function usePreferredDark(defaultState) {
-  return useMediaQuery("(prefers-color-scheme: dark)", defaultState);
-}
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
 
-function useMount(fn) {
-  if (isDev) {
-    if (!isFunction$1(fn)) {
-      console.error(
-        `useMount: parameter \`fn\` expected to be a function, but got "${typeof fn}".`
-      );
-    }
-  }
-  React.useEffect(() => {
-    fn == null ? void 0 : fn();
-  }, []);
-}
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
 
-function useUnmount(fn) {
-  if (isDev) {
-    if (!isFunction$1(fn)) {
-      console.error(
-        `useUnmount expected parameter is a function, got ${typeof fn}`
-      );
-    }
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
   }
-  const fnRef = useLatest(fn);
-  React.useEffect(
-    () => () => {
-      fnRef.current();
-    },
-    [fnRef]
-  );
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
 }
 
 function useThrottleFn(fn, wait, options) {
@@ -2799,8 +2781,7 @@ function useThrottleFn(fn, wait, options) {
       wait,
       options
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [wait, options]
   );
   useUnmount(() => {
     throttled.cancel();
@@ -2844,8 +2825,7 @@ function useDebounceFn(fn, wait, options) {
       wait,
       options
     ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [options, wait]
   );
   useUnmount(() => {
     debounced.cancel();
@@ -2893,7 +2873,7 @@ function useUpdate() {
   return update;
 }
 
-function useTimeoutFn(cb, interval, options = {}) {
+function useTimeoutFn(cb, interval, options = defaultOptions) {
   const { immediate = true } = options;
   const [pending, setPending] = React.useState(false);
   const savedCallback = useLatest(cb);
@@ -2983,10 +2963,10 @@ function useLatestElement(target, defaultElement) {
   return latestElement;
 }
 
-function useEventListener(eventName, handler, element, options) {
+function useEventListener(eventName, handler, element, options = defaultOptions) {
   const savedHandler = useLatest(handler);
   const targetElement = useLatestElement(element, defaultWindow);
-  useDeepCompareEffect(() => {
+  React.useEffect(() => {
     if (!(targetElement && targetElement.addEventListener)) {
       return;
     }
@@ -3140,7 +3120,7 @@ function useFavicon(href, baseUrl = "", rel = "icon") {
   }, [baseUrl, href, rel]);
 }
 
-function useMutationObserver(callback, target, options = {}) {
+function useMutationObserver(callback, target, options = defaultOptions) {
   const callbackRef = useLatest(callback);
   const observerRef = React.useRef();
   const element = useLatestElement(target);
@@ -3149,7 +3129,7 @@ function useMutationObserver(callback, target, options = {}) {
       observerRef.current.disconnect();
     }
   }, []);
-  useDeepCompareEffect(() => {
+  React.useEffect(() => {
     if (!element) {
       return;
     }
@@ -3160,13 +3140,56 @@ function useMutationObserver(callback, target, options = {}) {
   return stop;
 }
 
+const isPrimitive$1 = (val) => val !== Object(val);
+function useCustomCompareEffect(effect, deps, depsEqual) {
+  if (process.env.NODE_ENV !== "production") {
+    if (!Array.isArray(deps) || !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 (!Array.isArray(deps) || !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, isEqual);
+}
+
 function useTitle(title) {
   React.useEffect(() => {
     document.title = title;
   }, [title]);
 }
 
-function useScriptTag(src, onLoaded = noop, options = {}) {
+function useScriptTag(src, onLoaded = noop, options = defaultOptions) {
   const {
     immediate = true,
     manual = false,
@@ -3320,7 +3343,7 @@ const preventDefault$1 = (ev) => {
     ev.preventDefault();
   }
 };
-function useLongPress(callback, { isPreventDefault = true, delay = 300 } = {}) {
+function useLongPress(callback, { isPreventDefault = true, delay = 300 } = defaultOptions) {
   const timeout = React.useRef();
   const target = React.useRef();
   const start = React.useCallback(
@@ -3506,7 +3529,7 @@ function useMediaDevices(options = {}) {
   return [state, ensurePermissions];
 }
 
-function useTextDirection(options = {}) {
+function useTextDirection(options = defaultOptions) {
   const { selector = "html", initialValue = "ltr" } = options;
   const getValue = () => {
     var _a, _b;
@@ -3583,10 +3606,10 @@ function useMouse(target) {
   return state;
 }
 
-function useFps(options) {
+function useFps(options = defaultOptions) {
   var _a;
   const [fps, setFps] = React.useState(0);
-  const every = (_a = options == null ? void 0 : options.every) != null ? _a : 10;
+  const every = (_a = options.every) != null ? _a : 10;
   const last = React.useRef(performance.now());
   const ticks = React.useRef(0);
   useRafFn(() => {
@@ -3613,7 +3636,7 @@ const initCoord = {
   heading: null,
   speed: null
 };
-function useGeolocation(options = {}) {
+function useGeolocation(options = defaultOptions) {
   const {
     enableHighAccuracy = true,
     maximumAge = 3e4,
@@ -3839,20 +3862,17 @@ var screenfull$1 = {exports: {}};
 
 var screenfull = screenfull$1.exports;
 
-function useFullscreen(target, options) {
-  const { onExit, onEnter } = options || {};
-  const onExitRef = useLatest(onExit);
-  const onEnterRef = useLatest(onEnter);
+function useFullscreen(target, options = defaultOptions) {
+  const { onExit, onEnter } = options;
   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);
+        onEnter == null ? void 0 : onEnter();
       } else {
         screenfull.off("change", onChange);
-        (_b = onExitRef.current) == null ? void 0 : _b.call(onExitRef);
+        onExit == null ? void 0 : onExit();
       }
       setState(isFullscreen);
     }
@@ -3994,7 +4014,7 @@ function useOrientation(initialState = defaultState$1) {
   return [state, lockOrientation, unlockOrientation];
 }
 
-function useIntersectionObserver(target, callback, options = {}) {
+function useIntersectionObserver(target, callback, options = defaultOptions) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
   const element = useLatestElement(target);
@@ -4003,7 +4023,7 @@ function useIntersectionObserver(target, callback, options = {}) {
       observerRef.current.disconnect();
     }
   }, []);
-  useDeepCompareEffect(() => {
+  React.useEffect(() => {
     if (!element) {
       return;
     }
@@ -4032,14 +4052,24 @@ function usePageLeave() {
   return isLeft;
 }
 
-function useDocumentVisibility() {
-  const [visible, setVisible] = React.useState(() => {
-    if (typeof document === "undefined") {
-      return "visible";
-    } else {
-      return document.visibilityState;
-    }
-  });
+const getInitialState$1 = (defaultValue) => {
+  if (defaultValue !== void 0) {
+    return defaultValue;
+  }
+  if (isBrowser) {
+    return document.visibilityState;
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`useDocumentVisibility` When server side rendering, defaultValue should be defined to prevent a hydration mismatches."
+    );
+  }
+  return "visible";
+};
+function useDocumentVisibility(defaultValue) {
+  const [visible, setVisible] = React.useState(
+    getInitialState$1(defaultValue)
+  );
   useEventListener(
     "visibilitychange",
     () => {
@@ -4050,7 +4080,7 @@ function useDocumentVisibility() {
   return visible;
 }
 
-function useResizeObserver(target, callback, options = {}) {
+function useResizeObserver(target, callback, options = defaultOptions) {
   const savedCallback = useLatest(callback);
   const observerRef = React.useRef();
   const element = useLatestElement(target);
@@ -4059,7 +4089,7 @@ function useResizeObserver(target, callback, options = {}) {
       observerRef.current.disconnect();
     }
   }, []);
-  useDeepCompareEffect(() => {
+  React.useEffect(() => {
     if (!element) {
       return;
     }
@@ -4116,17 +4146,17 @@ function useDropZone(target, onDrop) {
 }
 
 var __defProp$2 = Object.defineProperty;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
 var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues$2 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
+    if (__hasOwnProp$2.call(b, prop))
       __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
         __defNormalProp$2(a, prop, b[prop]);
     }
   return a;
@@ -4135,7 +4165,7 @@ const DEFAULT_OPTIONS = {
   multiple: true,
   accept: "*"
 };
-function useFileDialog(options = {}) {
+function useFileDialog(options = defaultOptions) {
   const [files, setFiles] = React.useState(null);
   const inputRef = React.useRef();
   const initFn = React.useCallback(() => {
@@ -4171,7 +4201,11 @@ function useFileDialog(options = {}) {
 }
 
 const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
-function useScroll(target, options = {}) {
+const defaultListerOptions = {
+  capture: false,
+  passive: true
+};
+function useScroll(target, options = defaultOptions) {
   const {
     throttle = 0,
     idle = 200,
@@ -4183,10 +4217,7 @@ function useScroll(target, options = {}) {
       top: 0,
       bottom: 0
     },
-    eventListenerOptions = {
-      capture: false,
-      passive: true
-    }
+    eventListenerOptions = defaultListerOptions
   } = options;
   const [x, setX] = React.useState(0);
   const [y, setY] = React.useState(0);
@@ -4245,17 +4276,17 @@ function useScroll(target, options = {}) {
 var __defProp$1 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+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$2.call(b, prop))
+    if (__hasOwnProp$1.call(b, prop))
       __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(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;
@@ -4281,7 +4312,7 @@ var __async$3 = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-function useInfiniteScroll(target, onLoadMore, options = {}) {
+function useInfiniteScroll(target, onLoadMore, options = defaultOptions) {
   var _a, _b;
   const savedLoadMore = useLatest(onLoadMore);
   const direction = (_a = options.direction) != null ? _a : "bottom";
@@ -4291,10 +4322,8 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
     }, options.offset)
   }));
   const element = useLatestElement(target);
-  const latestOptions = useLatest(options);
   const di = state[3][direction];
   useUpdateEffect(() => {
-    const opts = latestOptions.current;
     const fn = () => __async$3(this, null, function* () {
       var _a2, _b2;
       const previous = {
@@ -4302,7 +4331,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
         width: (_b2 = element == null ? void 0 : element.scrollWidth) != null ? _b2 : 0
       };
       yield savedLoadMore.current(state);
-      if (opts.preserveScrollPosition && element) {
+      if (options.preserveScrollPosition && element) {
         element.scrollTo({
           top: element.scrollHeight - previous.height,
           left: element.scrollWidth - previous.width
@@ -4310,7 +4339,7 @@ function useInfiniteScroll(target, onLoadMore, options = {}) {
       }
     });
     fn();
-  }, [di]);
+  }, [di, options.preserveScrollPosition]);
 }
 
 const defaultEvents = [
@@ -4319,7 +4348,7 @@ const defaultEvents = [
   "keydown",
   "keyup"
 ];
-function useKeyModifier(modifier, options = {}) {
+function useKeyModifier(modifier, options = defaultOptions) {
   const { events = defaultEvents, initial = false } = options;
   const [state, setState] = React.useState(initial);
   useMount(() => {
@@ -4343,7 +4372,8 @@ function useKeyModifier(modifier, options = {}) {
   return state;
 }
 
-function useMousePressed(target, options = {}) {
+const listenerOptions$2 = { passive: true };
+function useMousePressed(target, options = defaultOptions) {
   const { touch = true, drag = true, initialValue = false } = options;
   const [pressed, setPressed] = React.useState(initialValue);
   const [sourceType, setSourceType] = React.useState(null);
@@ -4359,31 +4389,27 @@ function useMousePressed(target, options = {}) {
     setPressed(false);
     setSourceType(null);
   }, []);
-  useEventListener("mousedown", onPressed("mouse"), target, { passive: true });
-  useEventListener("mouseleave", onReleased, () => window, { passive: true });
-  useEventListener("mouseup", onReleased, () => window, { passive: true });
+  useEventListener("mousedown", onPressed("mouse"), target, listenerOptions$2);
+  useEventListener("mouseleave", onReleased, () => window, listenerOptions$2);
+  useEventListener("mouseup", onReleased, () => window, listenerOptions$2);
   React.useEffect(() => {
     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
-      });
+      element == null ? void 0 : element.addEventListener(
+        "dragstart",
+        onPressed("mouse"),
+        listenerOptions$2
+      );
+      element == null ? void 0 : element.addEventListener("drop", onReleased, listenerOptions$2);
+      element == null ? void 0 : element.addEventListener("dragend", onReleased, listenerOptions$2);
     }
     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
-      });
+      element == null ? void 0 : element.addEventListener(
+        "touchstart",
+        onPressed("touch"),
+        listenerOptions$2
+      );
+      element == null ? void 0 : element.addEventListener("touchend", onReleased, listenerOptions$2);
+      element == null ? void 0 : element.addEventListener("touchcancel", onReleased, listenerOptions$2);
     }
     return () => {
       if (drag) {
@@ -4454,7 +4480,7 @@ function useScrollLock(target, initialState = false) {
   return [locked, set];
 }
 
-function useElementSize(target, options = {}) {
+function useElementSize(target, options = defaultOptions) {
   const { box = "content-box" } = options;
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
@@ -4481,44 +4507,38 @@ function useVirtualList(list = [], options) {
   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;
-        }
+  const getViewCapacity = (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 capacity - start;
+  };
+  const getOffset = (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]
-  );
+    }
+    return offset + 1;
+  };
   const calculateRange = useEvent(() => {
     const element = containerRef.current;
     if (element != null) {
@@ -4530,17 +4550,18 @@ function useVirtualList(list = [], options) {
         start: from < 0 ? 0 : from,
         end: to > list.length ? list.length : to
       };
+      const { start, end } = state.current;
       setCurrentList(
-        list.slice(state.current.start, state.current.end).map((ele, index) => ({
+        list.slice(start, end).map((ele, index) => ({
           data: ele,
-          index: index + state.current.start
+          index: index + start
         }))
       );
     }
   });
   React.useEffect(() => {
     calculateRange();
-  }, [width, height, list, calculateRange]);
+  }, [width, height, list]);
   const totalHeight = React.useMemo(() => {
     if (typeof itemHeight === "number") {
       return list.length * itemHeight;
@@ -4558,16 +4579,7 @@ function useVirtualList(list = [], options) {
     },
     [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 offsetTop = getDistanceTop(state.current.start);
   const wrapperProps = React.useMemo(() => {
     return {
       style: {
@@ -4576,7 +4588,13 @@ function useVirtualList(list = [], options) {
         marginTop: `${offsetTop}px`
       }
     };
-  }, [offsetTop, totalHeight]);
+  }, [totalHeight, offsetTop]);
+  const scrollTo = (index) => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = getDistanceTop(index);
+      calculateRange();
+    }
+  };
   const containerStyle = React.useMemo(() => {
     return { overflowY: "auto", height: containerHeight };
   }, [containerHeight]);
@@ -4702,7 +4720,7 @@ function useDraggable(target, options = {}) {
   return [position.x, position.y, !!pressedDelta];
 }
 
-function useElementBounding(target, options = {}) {
+function useElementBounding(target, options = defaultOptions) {
   const {
     reset = true,
     windowResize = true,
@@ -4777,7 +4795,7 @@ function useElementBounding(target, options = {}) {
   };
 }
 
-function useElementVisibility(target, options = {}) {
+function useElementVisibility(target, options = defaultOptions) {
   const [visible, setVisible] = React.useState(false);
   const callback = React.useCallback((entries) => {
     const rect = entries[0].boundingClientRect;
@@ -4789,13 +4807,11 @@ function useElementVisibility(target, options = {}) {
   return [visible, stop];
 }
 
-function useWindowsFocus() {
-  const [focused, setFocused] = React.useState(() => {
-    if (!isBrowser) {
-      return false;
-    }
-    return window.document.hasFocus();
-  });
+function useWindowsFocus(defauleValue = false) {
+  const [focused, setFocused] = React.useState(defauleValue);
+  React.useEffect(() => {
+    setFocused(window.document.hasFocus());
+  }, []);
   useEventListener("blur", () => {
     setFocused(false);
   });
@@ -4823,6 +4839,10 @@ function useWindowSize() {
   return windowSize;
 }
 
+const listenerOptions$1 = {
+  capture: false,
+  passive: true
+};
 function useWindowScroll() {
   const [state, setState] = useRafState(() => ({
     x: 0,
@@ -4831,10 +4851,7 @@ function useWindowScroll() {
   const handleScroll = () => {
     setState({ x: window.scrollX, y: window.scrollY });
   };
-  useEventListener("scroll", handleScroll, window, {
-    capture: false,
-    passive: true
-  });
+  useEventListener("scroll", handleScroll, window, listenerOptions$1);
   useIsomorphicLayoutEffect(() => {
     handleScroll();
   }, []);
@@ -5106,17 +5123,16 @@ const getRelativePosition = ({
   return 0;
 };
 
-function useScrollIntoView({
+const listenerOptions = { passive: true };
+function useScrollIntoView(targetElement, {
   duration = 1250,
   axis = "y",
   onScrollFinish,
   easing = easeInOutQuad,
   offset = 0,
   cancelable = true,
-  isList = false,
-  targetElement,
-  scrollElement
-}) {
+  isList = false
+} = defaultOptions, scrollElement) {
   const frameID = React.useRef(0);
   const startTime = React.useRef(0);
   const shouldStop = React.useRef(false);
@@ -5174,8 +5190,8 @@ function useScrollIntoView({
       shouldStop.current = true;
     }
   };
-  useEventListener("wheel", handleStop, null, { passive: true });
-  useEventListener("touchmove", handleStop, null, { passive: true });
+  useEventListener("wheel", handleStop, null, listenerOptions);
+  useEventListener("touchmove", handleStop, null, listenerOptions);
   React.useEffect(() => cancel, []);
   return {
     scrollIntoView,
@@ -5183,12 +5199,7 @@ function useScrollIntoView({
   };
 }
 
-const useSticky = ({
-  targetElement,
-  scrollElement,
-  axis = "y",
-  nav = 0
-}) => {
+const useSticky = (targetElement, { axis = "y", nav = 0 }, scrollElement) => {
   const [isSticky, setSticky] = React.useState(false);
   const element = useLatestElement(targetElement);
   const { run: scrollHandler } = useThrottleFn(() => {
@@ -5472,54 +5483,51 @@ function init (converter, defaultAttributes) {
 
 var api = init(defaultConverter, { path: '/' });
 
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$1.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$1.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
+const getInitialState = (key, defaultValue) => {
+  if (defaultValue !== void 0) {
+    return defaultValue;
+  }
+  if (isBrowser) {
+    return api.get(key);
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      "`useCookie` When server side rendering, defaultValue should be defined to prevent a hydration mismatches."
+    );
+  }
+  return "";
 };
-function useCookie(key, options = {
-  defaultValue: ""
-}) {
-  const _a = options, { defaultValue, csrData } = _a, cookieOptions = __objRest(_a, ["defaultValue", "csrData"]);
-  const [cookieValue, setCookieValue] = React.useState(defaultValue);
-  useDeepCompareEffect(() => {
-    const data = csrData ? isFunction$1(csrData) ? csrData() : csrData : isFunction$1(defaultValue) ? defaultValue() : defaultValue;
+function useCookie(key, options = defaultOptions, defaultValue) {
+  const [cookieValue, setCookieValue] = React.useState(
+    getInitialState(key, defaultValue)
+  );
+  React.useEffect(() => {
     const getStoredValue = () => {
       const raw = api.get(key);
       if (raw !== void 0 && raw !== null) {
         return raw;
       } else {
-        if (data === void 0) {
+        if (defaultValue === void 0) {
           api.remove(key);
         } else {
-          api.set(key, data, cookieOptions);
+          api.set(key, defaultValue, options);
         }
-        return data;
+        return defaultValue;
       }
     };
     setCookieValue(getStoredValue());
-  }, [csrData, defaultValue, key, cookieOptions]);
+  }, [defaultValue, key, options]);
   const updateCookie = React.useCallback(
     (newValue) => {
       const value = isFunction$1(newValue) ? newValue(cookieValue) : newValue;
       if (value === void 0) {
         api.remove(key);
       } else {
-        api.set(key, value, cookieOptions);
+        api.set(key, value, options);
       }
       setCookieValue(value);
     },
-    [key, cookieValue]
+    [key, cookieValue, options]
   );
   const refreshCookie = React.useCallback(() => {
     const cookieValue2 = api.get(key);
@@ -5527,7 +5535,7 @@ function useCookie(key, options = {
       setCookieValue(cookieValue2);
     }
   }, [key]);
-  return Object.freeze([cookieValue, updateCookie, refreshCookie]);
+  return [cookieValue, updateCookie, refreshCookie];
 }
 
 function useDoubleClick({
@@ -5601,7 +5609,7 @@ const defaultState = {
   bottom: 0,
   right: 0
 };
-function useMeasure(target, options = {}) {
+function useMeasure(target, options = defaultOptions) {
   const [rect, setRect] = React.useState(defaultState);
   const stop = useResizeObserver(
     target,