@rotki/ui-library 3.0.0-beta.1 → 3.0.0-beta.3

package/dist/vendor/@vueuse/core/dist/index.js

@@ -0,0 +1,1577 @@
+import { bypassFilter, clamp, createFilterWrapper, createSharedComposable, createSingletonPromise, debounceFilter, get, getLifeCycleTarget, increaseWithUnit, injectLocal, isClient, isDefined, isIOS, isObject, noop, notNullish, objectOmit, objectPick, pausableFilter, pxValue, refDebounced, set, throttleFilter, toArray, toRef as toRef$1, tryOnMounted, tryOnScopeDispose, useArrayMap, useDebounceFn, useThrottleFn, useTimeoutFn, watchDebounced, watchIgnorable, watchImmediate, watchPausable, watchWithFilter, whenever } from "../../shared/dist/index.js";
+import { computed, getCurrentInstance, hasInjectionContext, nextTick, onMounted, reactive, ref, shallowReadonly, shallowRef, toRaw, toValue, unref, watch, watchEffect } from "vue";
+//#region vendor/@vueuse/core/dist/index.js
+var defaultWindow = isClient ? window : void 0;
+isClient && window.document;
+var defaultNavigator = isClient ? window.navigator : void 0;
+isClient && window.location;
+/**
+* Get the dom element of a ref of element or Vue component instance
+*
+* @param elRef
+*/
+function unrefElement(elRef) {
+	var _$el;
+	const plain = toValue(elRef);
+	return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
+}
+function useEventListener(...args) {
+	const register = (el, event, listener, options) => {
+		el.addEventListener(event, listener, options);
+		return () => el.removeEventListener(event, listener, options);
+	};
+	const firstParamTargets = computed(() => {
+		const test = toArray(toValue(args[0])).filter((e) => e != null);
+		return test.every((e) => typeof e !== "string") ? test : void 0;
+	});
+	return watchImmediate(() => {
+		var _firstParamTargets$va, _firstParamTargets$va2;
+		return [
+			(_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
+			toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
+			toArray(unref(firstParamTargets.value ? args[2] : args[1])),
+			toValue(firstParamTargets.value ? args[3] : args[2])
+		];
+	}, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
+		if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
+		const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
+		const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
+		onCleanup(() => {
+			cleanups.forEach((fn) => fn());
+		});
+	}, { flush: "post" });
+}
+var _iOSWorkaround = false;
+function onClickOutside(target, handler, options = {}) {
+	const { window = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
+	if (!window) return controls ? {
+		stop: noop,
+		cancel: noop,
+		trigger: noop
+	} : noop;
+	if (isIOS && !_iOSWorkaround) {
+		_iOSWorkaround = true;
+		const listenerOptions = { passive: true };
+		Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", noop, listenerOptions));
+		window.document.documentElement.addEventListener("click", noop, listenerOptions);
+	}
+	let shouldListen = true;
+	const shouldIgnore = (event) => {
+		return toValue(ignore).some((target) => {
+			if (typeof target === "string") return Array.from(window.document.querySelectorAll(target)).some((el) => el === event.target || event.composedPath().includes(el));
+			else {
+				const el = unrefElement(target);
+				return el && (event.target === el || event.composedPath().includes(el));
+			}
+		});
+	};
+	/**
+	* Determines if the given target has multiple root elements.
+	* Referenced from: https://github.com/vuejs/test-utils/blob/ccb460be55f9f6be05ab708500a41ec8adf6f4bc/src/vue-wrapper.ts#L21
+	*/
+	function hasMultipleRoots(target) {
+		const vm = toValue(target);
+		return vm && vm.$.subTree.shapeFlag === 16;
+	}
+	function checkMultipleRoots(target, event) {
+		const vm = toValue(target);
+		const children = vm.$.subTree && vm.$.subTree.children;
+		if (children == null || !Array.isArray(children)) return false;
+		return children.some((child) => child.el === event.target || event.composedPath().includes(child.el));
+	}
+	const listener = (event) => {
+		const el = unrefElement(target);
+		if (event.target == null) return;
+		if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event)) return;
+		if (!el || el === event.target || event.composedPath().includes(el)) return;
+		if ("detail" in event && event.detail === 0) shouldListen = !shouldIgnore(event);
+		if (!shouldListen) {
+			shouldListen = true;
+			return;
+		}
+		handler(event);
+	};
+	let isProcessingClick = false;
+	const cleanup = [
+		useEventListener(window, "click", (event) => {
+			if (!isProcessingClick) {
+				isProcessingClick = true;
+				setTimeout(() => {
+					isProcessingClick = false;
+				}, 0);
+				listener(event);
+			}
+		}, {
+			passive: true,
+			capture
+		}),
+		useEventListener(window, "pointerdown", (e) => {
+			const el = unrefElement(target);
+			shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
+		}, { passive: true }),
+		detectIframe && useEventListener(window, "blur", (event) => {
+			setTimeout(() => {
+				const el = unrefElement(target);
+				let activeEl = window.document.activeElement;
+				while (activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) activeEl = activeEl.shadowRoot.activeElement;
+				if ((activeEl === null || activeEl === void 0 ? void 0 : activeEl.tagName) === "IFRAME" && !(el === null || el === void 0 ? void 0 : el.contains(window.document.activeElement))) handler(event);
+			}, 0);
+		}, { passive: true })
+	].filter(Boolean);
+	const stop = () => cleanup.forEach((fn) => fn());
+	if (controls) return {
+		stop,
+		cancel: () => {
+			shouldListen = false;
+		},
+		trigger: (event) => {
+			shouldListen = true;
+			listener(event);
+			shouldListen = false;
+		}
+	};
+	return stop;
+}
+/**
+* Mounted state in ref.
+*
+* @see https://vueuse.org/useMounted
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useMounted() {
+	const isMounted = shallowRef(false);
+	const instance = getCurrentInstance();
+	if (instance) onMounted(() => {
+		isMounted.value = true;
+	}, instance);
+	return isMounted;
+}
+/* @__NO_SIDE_EFFECTS__ */
+function useSupported(callback) {
+	const isMounted = useMounted();
+	return computed(() => {
+		isMounted.value;
+		return Boolean(callback());
+	});
+}
+/**
+* Watch for changes being made to the DOM tree.
+*
+* @see https://vueuse.org/useMutationObserver
+* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
+* @param target
+* @param callback
+* @param options
+*/
+function useMutationObserver(target, callback, options = {}) {
+	const { window = defaultWindow, ...mutationOptions } = options;
+	let observer;
+	const isSupported = /* @__PURE__ */ useSupported(() => window && "MutationObserver" in window);
+	const cleanup = () => {
+		if (observer) {
+			observer.disconnect();
+			observer = void 0;
+		}
+	};
+	const stopWatch = watch(computed(() => {
+		const items = toArray(toValue(target)).map(unrefElement).filter(notNullish);
+		return new Set(items);
+	}), (newTargets) => {
+		cleanup();
+		if (isSupported.value && newTargets.size) {
+			observer = new MutationObserver(callback);
+			newTargets.forEach((el) => observer.observe(el, mutationOptions));
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	const takeRecords = () => {
+		return observer === null || observer === void 0 ? void 0 : observer.takeRecords();
+	};
+	const stop = () => {
+		stopWatch();
+		cleanup();
+	};
+	tryOnScopeDispose(stop);
+	return {
+		isSupported,
+		stop,
+		takeRecords
+	};
+}
+/**
+* Fires when the element or any element containing it is removed.
+*
+* @param target
+* @param callback
+* @param options
+*/
+function onElementRemoval(target, callback, options = {}) {
+	const { window = defaultWindow, document = window === null || window === void 0 ? void 0 : window.document, flush = "sync" } = options;
+	if (!window || !document) return noop;
+	let stopFn;
+	const cleanupAndUpdate = (fn) => {
+		stopFn === null || stopFn === void 0 || stopFn();
+		stopFn = fn;
+	};
+	const stopWatch = watchEffect(() => {
+		const el = unrefElement(target);
+		if (el) {
+			const { stop } = useMutationObserver(document, (mutationsList) => {
+				if (mutationsList.map((mutation) => [...mutation.removedNodes]).flat().some((node) => node === el || node.contains(el))) callback(mutationsList);
+			}, {
+				window,
+				childList: true,
+				subtree: true
+			});
+			cleanupAndUpdate(stop);
+		}
+	}, { flush });
+	const stopHandle = () => {
+		stopWatch();
+		cleanupAndUpdate();
+	};
+	tryOnScopeDispose(stopHandle);
+	return stopHandle;
+}
+/**
+* Reactive `document.activeElement`
+*
+* @see https://vueuse.org/useActiveElement
+* @param options
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useActiveElement(options = {}) {
+	var _options$document;
+	const { window = defaultWindow, deep = true, triggerOnRemoval = false } = options;
+	const document = (_options$document = options.document) !== null && _options$document !== void 0 ? _options$document : window === null || window === void 0 ? void 0 : window.document;
+	const getDeepActiveElement = () => {
+		let element = document === null || document === void 0 ? void 0 : document.activeElement;
+		if (deep) {
+			var _element$shadowRoot;
+			while (element === null || element === void 0 ? void 0 : element.shadowRoot) element = element === null || element === void 0 || (_element$shadowRoot = element.shadowRoot) === null || _element$shadowRoot === void 0 ? void 0 : _element$shadowRoot.activeElement;
+		}
+		return element;
+	};
+	const activeElement = shallowRef();
+	const trigger = () => {
+		activeElement.value = getDeepActiveElement();
+	};
+	if (window) {
+		const listenerOptions = {
+			capture: true,
+			passive: true
+		};
+		useEventListener(window, "blur", (event) => {
+			if (event.relatedTarget !== null) return;
+			trigger();
+		}, listenerOptions);
+		useEventListener(window, "focus", trigger, listenerOptions);
+	}
+	if (triggerOnRemoval) onElementRemoval(activeElement, trigger, { document });
+	trigger();
+	return activeElement;
+}
+var ssrWidthSymbol = Symbol("vueuse-ssr-width");
+/* @__NO_SIDE_EFFECTS__ */
+function useSSRWidth() {
+	const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
+	return typeof ssrWidth === "number" ? ssrWidth : void 0;
+}
+/**
+* Reactive Media Query.
+*
+* @see https://vueuse.org/useMediaQuery
+* @param query
+* @param options
+*/
+function useMediaQuery(query, options = {}) {
+	const { window = defaultWindow, ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
+	const isSupported = /* @__PURE__ */ useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+	const ssrSupport = shallowRef(typeof ssrWidth === "number");
+	const mediaQuery = shallowRef();
+	const matches = shallowRef(false);
+	const handler = (event) => {
+		matches.value = event.matches;
+	};
+	watchEffect(() => {
+		if (ssrSupport.value) {
+			ssrSupport.value = !isSupported.value;
+			const queryStrings = toValue(query).split(",");
+			matches.value = queryStrings.some((queryString) => {
+				const not = queryString.includes("not all");
+				const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+				const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+				let res = Boolean(minWidth || maxWidth);
+				if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);
+				if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);
+				return not ? !res : res;
+			});
+			return;
+		}
+		if (!isSupported.value) return;
+		mediaQuery.value = window.matchMedia(toValue(query));
+		matches.value = mediaQuery.value.matches;
+	});
+	useEventListener(mediaQuery, "change", handler, { passive: true });
+	return computed(() => matches.value);
+}
+/**
+* Breakpoints from Tailwind V2
+*
+* @see https://tailwindcss.com/docs/breakpoints
+*/
+var breakpointsTailwind = {
+	"sm": 640,
+	"md": 768,
+	"lg": 1024,
+	"xl": 1280,
+	"2xl": 1536
+};
+/**
+* Reactively viewport breakpoints
+*
+* @see https://vueuse.org/useBreakpoints
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useBreakpoints(breakpoints, options = {}) {
+	function getValue(k, delta) {
+		let v = toValue(breakpoints[toValue(k)]);
+		if (delta != null) v = increaseWithUnit(v, delta);
+		if (typeof v === "number") v = `${v}px`;
+		return v;
+	}
+	const { window = defaultWindow, strategy = "min-width", ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
+	const ssrSupport = typeof ssrWidth === "number";
+	const mounted = ssrSupport ? shallowRef(false) : { value: true };
+	if (ssrSupport) tryOnMounted(() => mounted.value = !!window);
+	function match(query, size) {
+		if (!mounted.value && ssrSupport) return query === "min" ? ssrWidth >= pxValue(size) : ssrWidth <= pxValue(size);
+		if (!window) return false;
+		return window.matchMedia(`(${query}-width: ${size})`).matches;
+	}
+	const greaterOrEqual = (k) => {
+		return useMediaQuery(() => `(min-width: ${getValue(k)})`, options);
+	};
+	const smallerOrEqual = (k) => {
+		return useMediaQuery(() => `(max-width: ${getValue(k)})`, options);
+	};
+	const shortcutMethods = Object.keys(breakpoints).reduce((shortcuts, k) => {
+		Object.defineProperty(shortcuts, k, {
+			get: () => strategy === "min-width" ? greaterOrEqual(k) : smallerOrEqual(k),
+			enumerable: true,
+			configurable: true
+		});
+		return shortcuts;
+	}, {});
+	function current() {
+		const points = Object.keys(breakpoints).map((k) => [
+			k,
+			shortcutMethods[k],
+			pxValue(getValue(k))
+		]).sort((a, b) => a[2] - b[2]);
+		return computed(() => points.filter(([, v]) => v.value).map(([k]) => k));
+	}
+	return Object.assign(shortcutMethods, {
+		greaterOrEqual,
+		smallerOrEqual,
+		greater(k) {
+			return useMediaQuery(() => `(min-width: ${getValue(k, .1)})`, options);
+		},
+		smaller(k) {
+			return useMediaQuery(() => `(max-width: ${getValue(k, -.1)})`, options);
+		},
+		between(a, b) {
+			return useMediaQuery(() => `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -.1)})`, options);
+		},
+		isGreater(k) {
+			return match("min", getValue(k, .1));
+		},
+		isGreaterOrEqual(k) {
+			return match("min", getValue(k));
+		},
+		isSmaller(k) {
+			return match("max", getValue(k, -.1));
+		},
+		isSmallerOrEqual(k) {
+			return match("max", getValue(k));
+		},
+		isInBetween(a, b) {
+			return match("min", getValue(a)) && match("max", getValue(b, -.1));
+		},
+		current,
+		active() {
+			const bps = current();
+			return computed(() => bps.value.length === 0 ? "" : bps.value.at(strategy === "min-width" ? -1 : 0));
+		}
+	});
+}
+/**
+* Reactive Permissions API.
+*
+* @see https://vueuse.org/usePermission
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function usePermission(permissionDesc, options = {}) {
+	const { controls = false, navigator = defaultNavigator } = options;
+	const isSupported = /* @__PURE__ */ useSupported(() => navigator && "permissions" in navigator);
+	const permissionStatus = shallowRef();
+	const desc = typeof permissionDesc === "string" ? { name: permissionDesc } : permissionDesc;
+	const state = shallowRef();
+	const update = () => {
+		var _permissionStatus$val, _permissionStatus$val2;
+		state.value = (_permissionStatus$val = (_permissionStatus$val2 = permissionStatus.value) === null || _permissionStatus$val2 === void 0 ? void 0 : _permissionStatus$val2.state) !== null && _permissionStatus$val !== void 0 ? _permissionStatus$val : "prompt";
+	};
+	useEventListener(permissionStatus, "change", update, { passive: true });
+	const query = createSingletonPromise(async () => {
+		if (!isSupported.value) return;
+		if (!permissionStatus.value) try {
+			permissionStatus.value = await navigator.permissions.query(desc);
+		} catch (_unused) {
+			permissionStatus.value = void 0;
+		} finally {
+			update();
+		}
+		if (controls) return toRaw(permissionStatus.value);
+	});
+	query();
+	if (controls) return {
+		state,
+		isSupported,
+		query
+	};
+	else return state;
+}
+function useClipboard(options = {}) {
+	const { navigator = defaultNavigator, read = false, source, copiedDuring = 1500, legacy = false } = options;
+	const isClipboardApiSupported = /* @__PURE__ */ useSupported(() => navigator && "clipboard" in navigator);
+	const permissionRead = usePermission("clipboard-read");
+	const permissionWrite = usePermission("clipboard-write");
+	const isSupported = computed(() => isClipboardApiSupported.value || legacy);
+	const text = shallowRef("");
+	const copied = shallowRef(false);
+	const copyPending = shallowRef(false);
+	const timeout = useTimeoutFn(() => copied.value = false, copiedDuring, { immediate: false });
+	let lastLegacyId = 0;
+	async function updateText() {
+		let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionRead.value));
+		if (!useLegacy) try {
+			text.value = await navigator.clipboard.readText();
+		} catch (_unused) {
+			useLegacy = true;
+		}
+		if (useLegacy) text.value = legacyRead();
+	}
+	if (isSupported.value && read) useEventListener(["copy", "cut"], updateText, { passive: true });
+	async function copy(value) {
+		const resolvedValue = value !== null && value !== void 0 ? value : toValue(source);
+		if (isSupported.value && resolvedValue != null) {
+			copyPending.value = true;
+			let useLegacy = !(isClipboardApiSupported.value && isAllowed(permissionWrite.value));
+			if (!useLegacy) try {
+				const clipboardItem = createClipboardItem(resolvedValue);
+				await navigator.clipboard.write([clipboardItem]);
+			} catch (_unused2) {
+				useLegacy = true;
+			}
+			if (useLegacy) if (typeof resolvedValue === "string") {
+				text.value = resolvedValue;
+				legacyCopy(resolvedValue);
+			} else {
+				const currentId = ++lastLegacyId;
+				const resolvedText = await resolvedValue();
+				if (resolvedText != null && currentId === lastLegacyId) {
+					text.value = resolvedText;
+					legacyCopy(resolvedText);
+				}
+			}
+			copied.value = true;
+			timeout.start();
+			copyPending.value = false;
+		}
+	}
+	function createClipboardItem(value) {
+		if (typeof value === "string") {
+			text.value = value;
+			return new ClipboardItem({ "text/plain": value });
+		} else return new ClipboardItem({ "text/plain": value().then((resolvedText = "") => {
+			text.value = resolvedText;
+			return new Blob([resolvedText], { type: "text/plain" });
+		}) });
+	}
+	function legacyCopy(value) {
+		const ta = document.createElement("textarea");
+		ta.value = value;
+		ta.style.position = "absolute";
+		ta.style.opacity = "0";
+		ta.setAttribute("readonly", "");
+		document.body.appendChild(ta);
+		ta.select();
+		document.execCommand("copy");
+		ta.remove();
+	}
+	function legacyRead() {
+		var _document$getSelectio, _document, _document$getSelectio2;
+		return (_document$getSelectio = (_document = document) === null || _document === void 0 || (_document$getSelectio2 = _document.getSelection) === null || _document$getSelectio2 === void 0 || (_document$getSelectio2 = _document$getSelectio2.call(_document)) === null || _document$getSelectio2 === void 0 ? void 0 : _document$getSelectio2.toString()) !== null && _document$getSelectio !== void 0 ? _document$getSelectio : "";
+	}
+	function isAllowed(status) {
+		return status === "granted" || status === "prompt";
+	}
+	return {
+		copyPending: shallowReadonly(copyPending),
+		isSupported,
+		text: shallowReadonly(text),
+		copied: shallowReadonly(copied),
+		copy
+	};
+}
+var _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+var globalKey = "__vueuse_ssr_handlers__";
+var handlers = /* #__PURE__ */ getHandlers();
+function getHandlers() {
+	if (!(globalKey in _global)) _global[globalKey] = _global[globalKey] || {};
+	return _global[globalKey];
+}
+function getSSRHandler(key, fallback) {
+	return handlers[key] || fallback;
+}
+/**
+* Reactive dark theme preference.
+*
+* @see https://vueuse.org/usePreferredDark
+* @param [options]
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function usePreferredDark(options) {
+	return useMediaQuery("(prefers-color-scheme: dark)", options);
+}
+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" : !Number.isNaN(rawInit) ? "number" : "any";
+}
+var 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()
+	}
+};
+var customStorageEventName = "vueuse-storage";
+/**
+* Reactive LocalStorage/SessionStorage.
+*
+* @see https://vueuse.org/useStorage
+*/
+function useStorage(key, defaults, storage, options = {}) {
+	var _options$serializer;
+	const { flush = "pre", deep = true, listenToStorageChanges = true, writeDefaults = true, mergeDefaults = false, shallow, window = defaultWindow, eventFilter, onError = (e) => {
+		console.error(e);
+	}, initOnMounted } = options;
+	const data = (shallow ? shallowRef : ref)(typeof defaults === "function" ? defaults() : defaults);
+	const keyComputed = computed(() => toValue(key));
+	if (!storage) try {
+		storage = getSSRHandler("getDefaultStorage", () => defaultWindow === null || defaultWindow === void 0 ? void 0 : defaultWindow.localStorage)();
+	} catch (e) {
+		onError(e);
+	}
+	if (!storage) return data;
+	const rawInit = toValue(defaults);
+	const type = guessSerializerType(rawInit);
+	const serializer = (_options$serializer = options.serializer) !== null && _options$serializer !== void 0 ? _options$serializer : StorageSerializers[type];
+	const { pause: pauseWatch, resume: resumeWatch } = watchPausable(data, (newValue) => write(newValue), {
+		flush,
+		deep,
+		eventFilter
+	});
+	watch(keyComputed, () => update(), { flush });
+	let firstMounted = false;
+	const onStorageEvent = (ev) => {
+		if (initOnMounted && !firstMounted) return;
+		update(ev);
+	};
+	const onStorageCustomEvent = (ev) => {
+		if (initOnMounted && !firstMounted) return;
+		updateFromCustomEvent(ev);
+	};
+	/**
+	* The custom event is needed for same-document syncing when using custom
+	* storage backends, but it doesn't work across different documents.
+	*
+	* TODO: Consider implementing a BroadcastChannel-based solution that fixes this.
+	*/
+	if (window && listenToStorageChanges) if (storage instanceof Storage) useEventListener(window, "storage", onStorageEvent, { passive: true });
+	else useEventListener(window, customStorageEventName, onStorageCustomEvent);
+	if (initOnMounted) tryOnMounted(() => {
+		firstMounted = true;
+		update();
+	});
+	else update();
+	function dispatchWriteEvent(oldValue, newValue) {
+		if (window) {
+			const payload = {
+				key: keyComputed.value,
+				oldValue,
+				newValue,
+				storageArea: storage
+			};
+			window.dispatchEvent(storage instanceof Storage ? new StorageEvent("storage", payload) : new CustomEvent(customStorageEventName, { detail: payload }));
+		}
+	}
+	function write(v) {
+		try {
+			const oldValue = storage.getItem(keyComputed.value);
+			if (v == null) {
+				dispatchWriteEvent(oldValue, null);
+				storage.removeItem(keyComputed.value);
+			} else {
+				const serialized = serializer.write(v);
+				if (oldValue !== serialized) {
+					storage.setItem(keyComputed.value, serialized);
+					dispatchWriteEvent(oldValue, serialized);
+				}
+			}
+		} catch (e) {
+			onError(e);
+		}
+	}
+	function read(event) {
+		const rawValue = event ? event.newValue : storage.getItem(keyComputed.value);
+		if (rawValue == null) {
+			if (writeDefaults && rawInit != null) storage.setItem(keyComputed.value, serializer.write(rawInit));
+			return rawInit;
+		} else if (!event && mergeDefaults) {
+			const value = serializer.read(rawValue);
+			if (typeof mergeDefaults === "function") return mergeDefaults(value, rawInit);
+			else if (type === "object" && !Array.isArray(value)) return {
+				...rawInit,
+				...value
+			};
+			return value;
+		} else if (typeof rawValue !== "string") return rawValue;
+		else return serializer.read(rawValue);
+	}
+	function update(event) {
+		if (event && event.storageArea !== storage) return;
+		if (event && event.key == null) {
+			data.value = rawInit;
+			return;
+		}
+		if (event && event.key !== keyComputed.value) return;
+		pauseWatch();
+		try {
+			const serializedData = serializer.write(data.value);
+			if (event === void 0 || (event === null || event === void 0 ? void 0 : event.newValue) !== serializedData) data.value = read(event);
+		} catch (e) {
+			onError(e);
+		} finally {
+			if (event) nextTick(resumeWatch);
+			else resumeWatch();
+		}
+	}
+	function updateFromCustomEvent(event) {
+		update(event.detail);
+	}
+	return data;
+}
+var CSS_DISABLE_TRANS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
+/**
+* Reactive color mode with auto data persistence.
+*
+* @see https://vueuse.org/useColorMode
+* @param options
+*/
+function useColorMode(options = {}) {
+	const { selector = "html", attribute = "class", initialValue = "auto", window = defaultWindow, storage, storageKey = "vueuse-color-scheme", listenToStorageChanges = true, storageRef, emitAuto, disableTransition = true } = options;
+	const modes = {
+		auto: "",
+		light: "light",
+		dark: "dark",
+		...options.modes || {}
+	};
+	const preferredDark = usePreferredDark({ window });
+	const system = computed(() => preferredDark.value ? "dark" : "light");
+	const store = storageRef || (storageKey == null ? toRef$1(initialValue) : useStorage(storageKey, initialValue, storage, {
+		window,
+		listenToStorageChanges
+	}));
+	const state = computed(() => store.value === "auto" ? system.value : store.value);
+	const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector, attribute, value) => {
+		const el = typeof selector === "string" ? window === null || window === void 0 ? void 0 : window.document.querySelector(selector) : unrefElement(selector);
+		if (!el) return;
+		const classesToAdd = /* @__PURE__ */ new Set();
+		const classesToRemove = /* @__PURE__ */ new Set();
+		let attributeToChange = null;
+		if (attribute === "class") {
+			const current = value.split(/\s/g);
+			Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
+				if (current.includes(v)) classesToAdd.add(v);
+				else classesToRemove.add(v);
+			});
+		} else attributeToChange = {
+			key: attribute,
+			value
+		};
+		if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null) return;
+		let style;
+		if (disableTransition) {
+			style = window.document.createElement("style");
+			style.appendChild(document.createTextNode(CSS_DISABLE_TRANS));
+			window.document.head.appendChild(style);
+		}
+		for (const c of classesToAdd) el.classList.add(c);
+		for (const c of classesToRemove) el.classList.remove(c);
+		if (attributeToChange) el.setAttribute(attributeToChange.key, attributeToChange.value);
+		if (disableTransition) {
+			window.getComputedStyle(style).opacity;
+			document.head.removeChild(style);
+		}
+	});
+	function defaultOnChanged(mode) {
+		var _modes$mode;
+		updateHTMLAttrs(selector, attribute, (_modes$mode = modes[mode]) !== null && _modes$mode !== void 0 ? _modes$mode : mode);
+	}
+	function onChanged(mode) {
+		if (options.onChanged) options.onChanged(mode, defaultOnChanged);
+		else defaultOnChanged(mode);
+	}
+	watch(state, onChanged, {
+		flush: "post",
+		immediate: true
+	});
+	tryOnMounted(() => onChanged(state.value));
+	const auto = computed({
+		get() {
+			return emitAuto ? store.value : state.value;
+		},
+		set(v) {
+			store.value = v;
+		}
+	});
+	return Object.assign(auto, {
+		store,
+		system,
+		state
+	});
+}
+function useDropZone(target, options = {}) {
+	const isOverDropZone = shallowRef(false);
+	const files = shallowRef(null);
+	let counter = 0;
+	let isValid = true;
+	if (isClient) {
+		var _options$multiple, _options$preventDefau;
+		const _options = typeof options === "function" ? { onDrop: options } : options;
+		const multiple = (_options$multiple = _options.multiple) !== null && _options$multiple !== void 0 ? _options$multiple : true;
+		const preventDefaultForUnhandled = (_options$preventDefau = _options.preventDefaultForUnhandled) !== null && _options$preventDefau !== void 0 ? _options$preventDefau : false;
+		const getFiles = (event) => {
+			var _event$dataTransfer$f, _event$dataTransfer;
+			const list = Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []);
+			return list.length === 0 ? null : multiple ? list : [list[0]];
+		};
+		const checkDataTypes = (types) => {
+			const dataTypes = unref(_options.dataTypes);
+			if (typeof dataTypes === "function") return dataTypes(types);
+			if (!(dataTypes === null || dataTypes === void 0 ? void 0 : dataTypes.length)) return true;
+			if (types.length === 0) return false;
+			return types.every((type) => dataTypes.some((allowedType) => type.includes(allowedType)));
+		};
+		const checkValidity = (items) => {
+			if (_options.checkValidity) return _options.checkValidity(items);
+			const types = Array.from(items !== null && items !== void 0 ? items : []).map((item) => item.type);
+			const dataTypesValid = checkDataTypes(types);
+			const multipleFilesValid = multiple || items.length <= 1;
+			return dataTypesValid && multipleFilesValid;
+		};
+		const isSafari = () => /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in window);
+		const handleDragEvent = (event, eventType) => {
+			var _event$dataTransfer2, _ref;
+			const dataTransferItemList = (_event$dataTransfer2 = event.dataTransfer) === null || _event$dataTransfer2 === void 0 ? void 0 : _event$dataTransfer2.items;
+			isValid = (_ref = dataTransferItemList && checkValidity(dataTransferItemList)) !== null && _ref !== void 0 ? _ref : false;
+			if (preventDefaultForUnhandled) event.preventDefault();
+			if (!isSafari() && !isValid) {
+				if (event.dataTransfer) event.dataTransfer.dropEffect = "none";
+				return;
+			}
+			event.preventDefault();
+			if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+			const currentFiles = getFiles(event);
+			switch (eventType) {
+				case "enter":
+					var _options$onEnter;
+					counter += 1;
+					isOverDropZone.value = true;
+					(_options$onEnter = _options.onEnter) === null || _options$onEnter === void 0 || _options$onEnter.call(_options, null, event);
+					break;
+				case "over":
+					var _options$onOver;
+					(_options$onOver = _options.onOver) === null || _options$onOver === void 0 || _options$onOver.call(_options, null, event);
+					break;
+				case "leave":
+					var _options$onLeave;
+					counter -= 1;
+					if (counter === 0) isOverDropZone.value = false;
+					(_options$onLeave = _options.onLeave) === null || _options$onLeave === void 0 || _options$onLeave.call(_options, null, event);
+					break;
+				case "drop":
+					counter = 0;
+					isOverDropZone.value = false;
+					if (isValid) {
+						var _options$onDrop;
+						files.value = currentFiles;
+						(_options$onDrop = _options.onDrop) === null || _options$onDrop === void 0 || _options$onDrop.call(_options, currentFiles, event);
+					}
+			}
+		};
+		useEventListener(target, "dragenter", (event) => handleDragEvent(event, "enter"));
+		useEventListener(target, "dragover", (event) => handleDragEvent(event, "over"));
+		useEventListener(target, "dragleave", (event) => handleDragEvent(event, "leave"));
+		useEventListener(target, "drop", (event) => handleDragEvent(event, "drop"));
+	}
+	return {
+		files,
+		isOverDropZone
+	};
+}
+/**
+* Reports changes to the dimensions of an Element's content or the border-box
+*
+* @see https://vueuse.org/useResizeObserver
+* @param target
+* @param callback
+* @param options
+*/
+function useResizeObserver(target, callback, options = {}) {
+	const { window = defaultWindow, ...observerOptions } = options;
+	let observer;
+	const isSupported = /* @__PURE__ */ useSupported(() => window && "ResizeObserver" in window);
+	const cleanup = () => {
+		if (observer) {
+			observer.disconnect();
+			observer = void 0;
+		}
+	};
+	const stopWatch = watch(computed(() => {
+		const _targets = toValue(target);
+		return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+	}), (els) => {
+		cleanup();
+		if (isSupported.value && window) {
+			observer = new ResizeObserver(callback);
+			for (const _el of els) if (_el) observer.observe(_el, observerOptions);
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	const stop = () => {
+		cleanup();
+		stopWatch();
+	};
+	tryOnScopeDispose(stop);
+	return {
+		isSupported,
+		stop
+	};
+}
+/**
+* Reactive bounding box of an HTML element.
+*
+* @see https://vueuse.org/useElementBounding
+* @param target
+*/
+function useElementBounding(target, options = {}) {
+	const { reset = true, windowResize = true, windowScroll = true, immediate = true, updateTiming = "sync" } = options;
+	const height = shallowRef(0);
+	const bottom = shallowRef(0);
+	const left = shallowRef(0);
+	const right = shallowRef(0);
+	const top = shallowRef(0);
+	const width = shallowRef(0);
+	const x = shallowRef(0);
+	const y = shallowRef(0);
+	function recalculate() {
+		const el = unrefElement(target);
+		if (!el) {
+			if (reset) {
+				height.value = 0;
+				bottom.value = 0;
+				left.value = 0;
+				right.value = 0;
+				top.value = 0;
+				width.value = 0;
+				x.value = 0;
+				y.value = 0;
+			}
+			return;
+		}
+		const rect = el.getBoundingClientRect();
+		height.value = rect.height;
+		bottom.value = rect.bottom;
+		left.value = rect.left;
+		right.value = rect.right;
+		top.value = rect.top;
+		width.value = rect.width;
+		x.value = rect.x;
+		y.value = rect.y;
+	}
+	function update() {
+		if (updateTiming === "sync") recalculate();
+		else if (updateTiming === "next-frame") requestAnimationFrame(() => recalculate());
+	}
+	useResizeObserver(target, update);
+	watch(() => unrefElement(target), (ele) => !ele && update());
+	useMutationObserver(target, update, { attributeFilter: ["style", "class"] });
+	if (windowScroll) useEventListener("scroll", update, {
+		capture: true,
+		passive: true
+	});
+	if (windowResize) useEventListener("resize", update, { passive: true });
+	tryOnMounted(() => {
+		if (immediate) update();
+	});
+	return {
+		height,
+		bottom,
+		left,
+		right,
+		top,
+		width,
+		x,
+		y,
+		update
+	};
+}
+/**
+* Reactive size of an HTML element.
+*
+* @see https://vueuse.org/useElementSize
+*/
+function useElementSize(target, initialSize = {
+	width: 0,
+	height: 0
+}, options = {}) {
+	const { window = defaultWindow, box = "content-box" } = options;
+	const isSVG = computed(() => {
+		var _unrefElement;
+		return (_unrefElement = unrefElement(target)) === null || _unrefElement === void 0 || (_unrefElement = _unrefElement.namespaceURI) === null || _unrefElement === void 0 ? void 0 : _unrefElement.includes("svg");
+	});
+	const width = shallowRef(initialSize.width);
+	const height = shallowRef(initialSize.height);
+	const { stop: stop1 } = useResizeObserver(target, ([entry]) => {
+		const boxSize = box === "border-box" ? entry.borderBoxSize : box === "content-box" ? entry.contentBoxSize : entry.devicePixelContentBoxSize;
+		if (window && isSVG.value) {
+			const $elem = unrefElement(target);
+			if ($elem) {
+				const rect = $elem.getBoundingClientRect();
+				width.value = rect.width;
+				height.value = rect.height;
+			}
+		} else if (boxSize) {
+			const formatBoxSize = toArray(boxSize);
+			width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+			height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+		} else {
+			width.value = entry.contentRect.width;
+			height.value = entry.contentRect.height;
+		}
+	}, options);
+	tryOnMounted(() => {
+		const ele = unrefElement(target);
+		if (ele && "offsetWidth" in ele) if (box === "content-box" && window) {
+			const cs = window.getComputedStyle(ele);
+			const padX = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight);
+			const padY = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom);
+			const bdX = Number.parseFloat(cs.borderLeftWidth) + Number.parseFloat(cs.borderRightWidth);
+			const bdY = Number.parseFloat(cs.borderTopWidth) + Number.parseFloat(cs.borderBottomWidth);
+			width.value = ele.offsetWidth - padX - bdX;
+			height.value = ele.offsetHeight - padY - bdY;
+		} else {
+			width.value = ele.offsetWidth;
+			height.value = ele.offsetHeight;
+		}
+		else if (ele) {
+			width.value = initialSize.width;
+			height.value = initialSize.height;
+		}
+	});
+	const stop2 = watch(() => unrefElement(target), (ele) => {
+		width.value = ele ? initialSize.width : 0;
+		height.value = ele ? initialSize.height : 0;
+	});
+	function stop() {
+		stop1();
+		stop2();
+	}
+	return {
+		width,
+		height,
+		stop
+	};
+}
+/**
+* Detects changes to a target element's visibility.
+*
+* @see https://vueuse.org/useIntersectionObserver
+* @param target
+* @param callback
+* @param options
+*/
+function useIntersectionObserver(target, callback, options = {}) {
+	const { root, rootMargin, threshold = 0, window = defaultWindow, immediate = true } = options;
+	const isSupported = /* @__PURE__ */ useSupported(() => window && "IntersectionObserver" in window);
+	const targets = computed(() => {
+		return toArray(toValue(target)).map(unrefElement).filter(notNullish);
+	});
+	let cleanup = noop;
+	const isActive = shallowRef(immediate);
+	const stopWatch = isSupported.value ? watch(() => [
+		targets.value,
+		unrefElement(root),
+		toValue(rootMargin),
+		isActive.value
+	], ([targets, root, rootMargin]) => {
+		cleanup();
+		if (!isActive.value) return;
+		if (!targets.length) return;
+		const observer = new IntersectionObserver(callback, {
+			root: unrefElement(root),
+			rootMargin,
+			threshold
+		});
+		targets.forEach((el) => el && observer.observe(el));
+		cleanup = () => {
+			observer.disconnect();
+			cleanup = noop;
+		};
+	}, {
+		immediate,
+		flush: "post"
+	}) : noop;
+	const stop = () => {
+		cleanup();
+		stopWatch();
+		isActive.value = false;
+	};
+	tryOnScopeDispose(stop);
+	return {
+		isSupported,
+		isActive,
+		pause() {
+			cleanup();
+			isActive.value = false;
+		},
+		resume() {
+			isActive.value = true;
+		},
+		stop
+	};
+}
+/**
+* Track or set the focus state of a DOM element.
+*
+* @see https://vueuse.org/useFocus
+* @param target The target element for the focus and blur events.
+* @param options
+*/
+function useFocus(target, options = {}) {
+	const { initialValue = false, focusVisible = false, preventScroll = false } = options;
+	const innerFocused = shallowRef(false);
+	const targetElement = computed(() => unrefElement(target));
+	const listenerOptions = { passive: true };
+	useEventListener(targetElement, "focus", (event) => {
+		var _matches, _ref;
+		if (!focusVisible || ((_matches = (_ref = event.target).matches) === null || _matches === void 0 ? void 0 : _matches.call(_ref, ":focus-visible"))) innerFocused.value = true;
+	}, listenerOptions);
+	useEventListener(targetElement, "blur", () => innerFocused.value = false, listenerOptions);
+	const focused = computed({
+		get: () => innerFocused.value,
+		set(value) {
+			var _targetElement$value, _targetElement$value2;
+			if (!value && innerFocused.value) (_targetElement$value = targetElement.value) === null || _targetElement$value === void 0 || _targetElement$value.blur();
+			else if (value && !innerFocused.value) (_targetElement$value2 = targetElement.value) === null || _targetElement$value2 === void 0 || _targetElement$value2.focus({ preventScroll });
+		}
+	});
+	watch(targetElement, () => {
+		focused.value = initialValue;
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	return { focused };
+}
+var EVENT_FOCUS_IN = "focusin";
+var EVENT_FOCUS_OUT = "focusout";
+var PSEUDO_CLASS_FOCUS_WITHIN = ":focus-within";
+/**
+* Track if focus is contained within the target element
+*
+* @see https://vueuse.org/useFocusWithin
+* @param target The target element to track
+* @param options Focus within options
+*/
+function useFocusWithin(target, options = {}) {
+	const { window = defaultWindow } = options;
+	const targetElement = computed(() => unrefElement(target));
+	const _focused = shallowRef(false);
+	const focused = computed(() => _focused.value);
+	const activeElement = useActiveElement(options);
+	if (!window || !activeElement.value) return { focused };
+	const listenerOptions = { passive: true };
+	useEventListener(targetElement, EVENT_FOCUS_IN, () => _focused.value = true, listenerOptions);
+	useEventListener(targetElement, EVENT_FOCUS_OUT, () => {
+		var _targetElement$value$, _targetElement$value, _targetElement$value$2;
+		return _focused.value = (_targetElement$value$ = (_targetElement$value = targetElement.value) === null || _targetElement$value === void 0 || (_targetElement$value$2 = _targetElement$value.matches) === null || _targetElement$value$2 === void 0 ? void 0 : _targetElement$value$2.call(_targetElement$value, PSEUDO_CLASS_FOCUS_WITHIN)) !== null && _targetElement$value$ !== void 0 ? _targetElement$value$ : false;
+	}, listenerOptions);
+	return { focused };
+}
+/**
+* We have to check if the scroll amount is close enough to some threshold in order to
+* more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
+* numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
+* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
+*/
+var ARRIVED_STATE_THRESHOLD_PIXELS = 1;
+/**
+* Reactive scroll.
+*
+* @see https://vueuse.org/useScroll
+* @param element
+* @param options
+*/
+function useScroll(element, options = {}) {
+	const { throttle = 0, idle = 200, onStop = noop, onScroll = noop, offset = {
+		left: 0,
+		right: 0,
+		top: 0,
+		bottom: 0
+	}, observe: _observe = { mutation: false }, eventListenerOptions = {
+		capture: false,
+		passive: true
+	}, behavior = "auto", window = defaultWindow, onError = (e) => {
+		console.error(e);
+	} } = options;
+	const observe = typeof _observe === "boolean" ? { mutation: _observe } : _observe;
+	const internalX = shallowRef(0);
+	const internalY = shallowRef(0);
+	const x = computed({
+		get() {
+			return internalX.value;
+		},
+		set(x) {
+			scrollTo(x, void 0);
+		}
+	});
+	const y = computed({
+		get() {
+			return internalY.value;
+		},
+		set(y) {
+			scrollTo(void 0, y);
+		}
+	});
+	function scrollTo(_x, _y) {
+		var _ref, _toValue, _toValue2, _document;
+		if (!window) return;
+		const _element = toValue(element);
+		if (!_element) return;
+		(_ref = _element instanceof Document ? window.document.body : _element) === null || _ref === void 0 || _ref.scrollTo({
+			top: (_toValue = toValue(_y)) !== null && _toValue !== void 0 ? _toValue : y.value,
+			left: (_toValue2 = toValue(_x)) !== null && _toValue2 !== void 0 ? _toValue2 : x.value,
+			behavior: toValue(behavior)
+		});
+		const scrollContainer = (_element === null || _element === void 0 || (_document = _element.document) === null || _document === void 0 ? void 0 : _document.documentElement) || (_element === null || _element === void 0 ? void 0 : _element.documentElement) || _element;
+		if (x != null) internalX.value = scrollContainer.scrollLeft;
+		if (y != null) internalY.value = scrollContainer.scrollTop;
+	}
+	const isScrolling = shallowRef(false);
+	const arrivedState = reactive({
+		left: true,
+		right: false,
+		top: true,
+		bottom: false
+	});
+	const directions = reactive({
+		left: false,
+		right: false,
+		top: false,
+		bottom: false
+	});
+	const onScrollEnd = (e) => {
+		if (!isScrolling.value) return;
+		isScrolling.value = false;
+		directions.left = false;
+		directions.right = false;
+		directions.top = false;
+		directions.bottom = false;
+		onStop(e);
+	};
+	const onScrollEndDebounced = useDebounceFn(onScrollEnd, throttle + idle);
+	const setArrivedState = (target) => {
+		var _document2;
+		if (!window) return;
+		const el = (target === null || target === void 0 || (_document2 = target.document) === null || _document2 === void 0 ? void 0 : _document2.documentElement) || (target === null || target === void 0 ? void 0 : target.documentElement) || unrefElement(target);
+		const { display, flexDirection, direction } = window.getComputedStyle(el);
+		const directionMultipler = direction === "rtl" ? -1 : 1;
+		const scrollLeft = el.scrollLeft;
+		directions.left = scrollLeft < internalX.value;
+		directions.right = scrollLeft > internalX.value;
+		const left = Math.abs(scrollLeft * directionMultipler) <= (offset.left || 0);
+		const right = Math.abs(scrollLeft * directionMultipler) + el.clientWidth >= el.scrollWidth - (offset.right || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+		if (display === "flex" && flexDirection === "row-reverse") {
+			arrivedState.left = right;
+			arrivedState.right = left;
+		} else {
+			arrivedState.left = left;
+			arrivedState.right = right;
+		}
+		internalX.value = scrollLeft;
+		let scrollTop = el.scrollTop;
+		if (target === window.document && !scrollTop) scrollTop = window.document.body.scrollTop;
+		directions.top = scrollTop < internalY.value;
+		directions.bottom = scrollTop > internalY.value;
+		const top = Math.abs(scrollTop) <= (offset.top || 0);
+		const bottom = Math.abs(scrollTop) + el.clientHeight >= el.scrollHeight - (offset.bottom || 0) - ARRIVED_STATE_THRESHOLD_PIXELS;
+		/**
+		* reverse columns and rows behave exactly the other way around,
+		* bottom is treated as top and top is treated as the negative version of bottom
+		*/
+		if (display === "flex" && flexDirection === "column-reverse") {
+			arrivedState.top = bottom;
+			arrivedState.bottom = top;
+		} else {
+			arrivedState.top = top;
+			arrivedState.bottom = bottom;
+		}
+		internalY.value = scrollTop;
+	};
+	const onScrollHandler = (e) => {
+		var _documentElement;
+		if (!window) return;
+		const eventTarget = (_documentElement = e.target.documentElement) !== null && _documentElement !== void 0 ? _documentElement : e.target;
+		setArrivedState(eventTarget);
+		isScrolling.value = true;
+		onScrollEndDebounced(e);
+		onScroll(e);
+	};
+	useEventListener(element, "scroll", throttle ? useThrottleFn(onScrollHandler, throttle, true, false) : onScrollHandler, eventListenerOptions);
+	tryOnMounted(() => {
+		try {
+			const _element = toValue(element);
+			if (!_element) return;
+			setArrivedState(_element);
+		} catch (e) {
+			onError(e);
+		}
+	});
+	if ((observe === null || observe === void 0 ? void 0 : observe.mutation) && element != null && element !== window && element !== document) useMutationObserver(element, () => {
+		const _element = toValue(element);
+		if (!_element) return;
+		setArrivedState(_element);
+	}, {
+		attributes: true,
+		childList: true,
+		subtree: true
+	});
+	useEventListener(element, "scrollend", onScrollEnd, eventListenerOptions);
+	return {
+		x,
+		y,
+		isScrolling,
+		arrivedState,
+		directions,
+		measure() {
+			const _element = toValue(element);
+			if (window && _element) setArrivedState(_element);
+		}
+	};
+}
+/**
+* Reactive prefers-reduced-motion media query.
+*
+* @see https://vueuse.org/usePreferredReducedMotion
+* @param [options]
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function usePreferredReducedMotion(options) {
+	const isReduced = useMediaQuery("(prefers-reduced-motion: reduce)", options);
+	return computed(() => {
+		if (isReduced.value) return "reduce";
+		return "no-preference";
+	});
+}
+Number.POSITIVE_INFINITY;
+/**
+* Please consider using [`vue-virtual-scroller`](https://github.com/Akryum/vue-virtual-scroller) if you are looking for more features.
+*/
+function useVirtualList(list, options) {
+	const { containerStyle, wrapperProps, scrollTo, calculateRange, currentList, containerRef } = "itemHeight" in options ? useVerticalVirtualList(options, list) : useHorizontalVirtualList(options, list);
+	return {
+		list: currentList,
+		scrollTo,
+		containerProps: {
+			ref: containerRef,
+			onScroll: () => {
+				calculateRange();
+			},
+			style: containerStyle
+		},
+		wrapperProps
+	};
+}
+function useVirtualListResources(list) {
+	const containerRef = shallowRef(null);
+	const size = useElementSize(containerRef);
+	const currentList = ref([]);
+	const source = shallowRef(list);
+	return {
+		state: ref({
+			start: 0,
+			end: 10
+		}),
+		source,
+		currentList,
+		size,
+		containerRef
+	};
+}
+function createGetViewCapacity(state, source, itemSize) {
+	return (containerSize) => {
+		if (typeof itemSize === "number") return Math.ceil(containerSize / itemSize);
+		const { start = 0 } = state.value;
+		let sum = 0;
+		let capacity = 0;
+		for (let i = start; i < source.value.length; i++) {
+			const size = itemSize(i);
+			sum += size;
+			capacity = i;
+			if (sum > containerSize) break;
+		}
+		return capacity - start;
+	};
+}
+function createGetOffset(source, itemSize) {
+	return (scrollDirection) => {
+		if (typeof itemSize === "number") return Math.floor(scrollDirection / itemSize) + 1;
+		let sum = 0;
+		let offset = 0;
+		for (let i = 0; i < source.value.length; i++) {
+			const size = itemSize(i);
+			sum += size;
+			if (sum >= scrollDirection) {
+				offset = i;
+				break;
+			}
+		}
+		return offset + 1;
+	};
+}
+function createCalculateRange(type, overscan, getOffset, getViewCapacity, { containerRef, state, currentList, source }) {
+	return () => {
+		const element = containerRef.value;
+		if (element) {
+			const offset = getOffset(type === "vertical" ? element.scrollTop : element.scrollLeft);
+			const viewCapacity = getViewCapacity(type === "vertical" ? element.clientHeight : element.clientWidth);
+			const from = offset - overscan;
+			const to = offset + viewCapacity + overscan;
+			state.value = {
+				start: from < 0 ? 0 : from,
+				end: to > source.value.length ? source.value.length : to
+			};
+			currentList.value = source.value.slice(state.value.start, state.value.end).map((ele, index) => ({
+				data: ele,
+				index: index + state.value.start
+			}));
+		}
+	};
+}
+function createGetDistance(itemSize, source) {
+	return (index) => {
+		if (typeof itemSize === "number") return index * itemSize;
+		return source.value.slice(0, index).reduce((sum, _, i) => sum + itemSize(i), 0);
+	};
+}
+function useWatchForSizes(size, listRef, totalSize, containerRef, calculateRange) {
+	watch([
+		size.width,
+		size.height,
+		listRef,
+		totalSize,
+		containerRef
+	], () => {
+		calculateRange();
+	});
+}
+function createComputedTotalSize(itemSize, source) {
+	return computed(() => {
+		if (typeof itemSize === "number") return source.value.length * itemSize;
+		return source.value.reduce((sum, _, index) => sum + itemSize(index), 0);
+	});
+}
+var scrollToDictionaryForElementScrollKey = {
+	horizontal: "scrollLeft",
+	vertical: "scrollTop"
+};
+var scrollToDictionaryForElementScrollToKey = {
+	horizontal: "left",
+	vertical: "top"
+};
+var defaultScrollToOptions = {
+	behavior: "auto",
+	block: "start",
+	inline: "nearest"
+};
+function createScrollTo(type, calculateRange, getDistance, containerRef, itemSize) {
+	return (index, options = defaultScrollToOptions) => {
+		if (!containerRef.value) return;
+		options = {
+			...defaultScrollToOptions,
+			...options
+		};
+		let offset = 0;
+		const axisToCheck = options[type === "horizontal" ? "inline" : "block"];
+		if (axisToCheck) {
+			const containerSize = type === "horizontal" ? containerRef.value.clientWidth : containerRef.value.clientHeight;
+			const fullItemSize = typeof itemSize === "number" ? itemSize : itemSize(index);
+			if (axisToCheck === "center") offset = containerSize / 2 - fullItemSize / 2;
+			else if (axisToCheck === "end") offset = containerSize - fullItemSize;
+			else if (axisToCheck === "nearest") {
+				const containerScrollPosition = containerRef.value[scrollToDictionaryForElementScrollKey[type]];
+				if (getDistance(index) > containerScrollPosition + containerSize / 2) offset = containerSize - fullItemSize;
+			}
+		}
+		containerRef.value.scrollTo({
+			[scrollToDictionaryForElementScrollToKey[type]]: getDistance(index) - offset,
+			behavior: options.behavior
+		});
+		calculateRange();
+	};
+}
+function useHorizontalVirtualList(options, list) {
+	const resources = useVirtualListResources(list);
+	const { state, source, currentList, size, containerRef } = resources;
+	const containerStyle = { overflowX: "auto" };
+	const { itemWidth, overscan = 5 } = options;
+	const getViewCapacity = createGetViewCapacity(state, source, itemWidth);
+	const calculateRange = createCalculateRange("horizontal", overscan, createGetOffset(source, itemWidth), getViewCapacity, resources);
+	const getDistanceLeft = createGetDistance(itemWidth, source);
+	const offsetLeft = computed(() => getDistanceLeft(state.value.start));
+	const totalWidth = createComputedTotalSize(itemWidth, source);
+	useWatchForSizes(size, source, totalWidth, containerRef, calculateRange);
+	return {
+		scrollTo: createScrollTo("horizontal", calculateRange, getDistanceLeft, containerRef, itemWidth),
+		calculateRange,
+		wrapperProps: computed(() => {
+			return { style: {
+				height: "100%",
+				width: `${totalWidth.value - offsetLeft.value}px`,
+				marginLeft: `${offsetLeft.value}px`,
+				display: "flex"
+			} };
+		}),
+		containerStyle,
+		currentList,
+		containerRef
+	};
+}
+function useVerticalVirtualList(options, list) {
+	const resources = useVirtualListResources(list);
+	const { state, source, currentList, size, containerRef } = resources;
+	const containerStyle = { overflowY: "auto" };
+	const { itemHeight, overscan = 5 } = options;
+	const getViewCapacity = createGetViewCapacity(state, source, itemHeight);
+	const calculateRange = createCalculateRange("vertical", overscan, createGetOffset(source, itemHeight), getViewCapacity, resources);
+	const getDistanceTop = createGetDistance(itemHeight, source);
+	const offsetTop = computed(() => getDistanceTop(state.value.start));
+	const totalHeight = createComputedTotalSize(itemHeight, source);
+	useWatchForSizes(size, source, totalHeight, containerRef, calculateRange);
+	return {
+		calculateRange,
+		scrollTo: createScrollTo("vertical", calculateRange, getDistanceTop, containerRef, itemHeight),
+		containerStyle,
+		wrapperProps: computed(() => {
+			return { style: {
+				width: "100%",
+				height: `${totalHeight.value - offsetTop.value}px`,
+				marginTop: `${offsetTop.value}px`
+			} };
+		}),
+		currentList,
+		containerRef
+	};
+}
+/**
+* Reactive window size.
+*
+* @see https://vueuse.org/useWindowSize
+* @param options
+*
+* @__NO_SIDE_EFFECTS__
+*/
+function useWindowSize(options = {}) {
+	const { window = defaultWindow, initialWidth = Number.POSITIVE_INFINITY, initialHeight = Number.POSITIVE_INFINITY, listenOrientation = true, includeScrollbar = true, type = "inner" } = options;
+	const width = shallowRef(initialWidth);
+	const height = shallowRef(initialHeight);
+	const update = () => {
+		if (window) if (type === "outer") {
+			width.value = window.outerWidth;
+			height.value = window.outerHeight;
+		} else if (type === "visual" && window.visualViewport) {
+			const { width: visualViewportWidth, height: visualViewportHeight, scale } = window.visualViewport;
+			width.value = Math.round(visualViewportWidth * scale);
+			height.value = Math.round(visualViewportHeight * scale);
+		} else if (includeScrollbar) {
+			width.value = window.innerWidth;
+			height.value = window.innerHeight;
+		} else {
+			width.value = window.document.documentElement.clientWidth;
+			height.value = window.document.documentElement.clientHeight;
+		}
+	};
+	update();
+	tryOnMounted(update);
+	const listenerOptions = { passive: true };
+	useEventListener("resize", update, listenerOptions);
+	if (window && type === "visual" && window.visualViewport) useEventListener(window.visualViewport, "resize", update, listenerOptions);
+	if (listenOrientation) watch(useMediaQuery("(orientation: portrait)"), () => update());
+	return {
+		width,
+		height
+	};
+}
+//#endregion
+export { StorageSerializers, breakpointsTailwind, bypassFilter, clamp, createFilterWrapper, createSharedComposable, createSingletonPromise, customStorageEventName, debounceFilter, defaultNavigator, defaultWindow, get, getLifeCycleTarget, getSSRHandler, increaseWithUnit, injectLocal, isClient, isDefined, isIOS, isObject, noop, notNullish, objectOmit, objectPick, onClickOutside, onElementRemoval, pausableFilter, pxValue, refDebounced, set, throttleFilter, toArray, toRef$1 as toRef, tryOnMounted, tryOnScopeDispose, unrefElement, useActiveElement, useArrayMap, useBreakpoints, useClipboard, useColorMode, useDebounceFn, useDropZone, useElementBounding, useElementSize, useEventListener, useFocus, useFocusWithin, useIntersectionObserver, useMediaQuery, useMounted, useMutationObserver, usePermission, usePreferredDark, usePreferredReducedMotion, useResizeObserver, useSSRWidth, useScroll, useStorage, useSupported, useThrottleFn, useTimeoutFn, useVirtualList, useWindowSize, watchDebounced, watchIgnorable, watchImmediate, watchPausable, watchWithFilter, whenever };
+
+//# sourceMappingURL=index.js.map