@onereach/ui-components 8.20.1 → 8.20.2-beta.4019.0

package/dist/bundled/v3/components/OrBottomSheetV3-7c3a2189.js

@@ -0,0 +1,1469 @@
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, createElementBlock, normalizeClass, createCommentVNode, renderSlot } from 'vue';
+import { effectScope, isRef, ref, watch, customRef, getCurrentScope, onScopeDispose, unref, toRef as toRef$1, readonly, toRefs as toRefs$1, getCurrentInstance, onMounted, nextTick, computed, reactive, isVue2, watchEffect, defineComponent } from 'vue-demi';
+import { useTheme } from '../hooks/useTheme.js';
+import { s as script$1 } from './OrOverlayV3-94073bd6.js';
+import { usePopoverState } from '../hooks/usePopoverState.js';
+
+function computedWithControl(source, fn) {
+  let v = void 0;
+  let track;
+  let trigger;
+  const dirty = ref(true);
+  const update = () => {
+    dirty.value = true;
+    trigger();
+  };
+  watch(source, update, { flush: "sync" });
+  const get = typeof fn === "function" ? fn : fn.get;
+  const set = typeof fn === "function" ? void 0 : fn.set;
+  const result = customRef((_track, _trigger) => {
+    track = _track;
+    trigger = _trigger;
+    return {
+      get() {
+        if (dirty.value) {
+          v = get();
+          dirty.value = false;
+        }
+        track();
+        return v;
+      },
+      set(v2) {
+        set == null ? void 0 : set(v2);
+      }
+    };
+  });
+  if (Object.isExtensible(result))
+    result.trigger = update;
+  return result;
+}
+
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+function createSharedComposable(composable) {
+  let subscribers = 0;
+  let state;
+  let scope;
+  const dispose = () => {
+    subscribers -= 1;
+    if (scope && subscribers <= 0) {
+      scope.stop();
+      state = void 0;
+      scope = void 0;
+    }
+  };
+  return (...args) => {
+    subscribers += 1;
+    if (!state) {
+      scope = effectScope(true);
+      state = scope.run(() => composable(...args));
+    }
+    tryOnScopeDispose(dispose);
+    return state;
+  };
+}
+
+function toValue(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+
+const isClient = typeof window !== "undefined" && typeof document !== "undefined";
+const isDef = (val) => typeof val !== "undefined";
+const toString = Object.prototype.toString;
+const isObject = (val) => toString.call(val) === "[object Object]";
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+const noop = () => {
+};
+const isIOS = /* @__PURE__ */ getIsIOS();
+function getIsIOS() {
+  var _a;
+  return isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
+}
+
+function createFilterWrapper(filter, fn) {
+  function wrapper(...args) {
+    return new Promise((resolve, reject) => {
+      Promise.resolve(filter(() => fn.apply(this, args), { fn, thisArg: this, args })).then(resolve).catch(reject);
+    });
+  }
+  return wrapper;
+}
+const bypassFilter = (invoke) => {
+  return invoke();
+};
+function debounceFilter(ms, options = {}) {
+  let timer;
+  let maxTimer;
+  let lastRejector = noop;
+  const _clearTimeout = (timer2) => {
+    clearTimeout(timer2);
+    lastRejector();
+    lastRejector = noop;
+  };
+  const filter = (invoke) => {
+    const duration = toValue(ms);
+    const maxDuration = toValue(options.maxWait);
+    if (timer)
+      _clearTimeout(timer);
+    if (duration <= 0 || maxDuration !== void 0 && maxDuration <= 0) {
+      if (maxTimer) {
+        _clearTimeout(maxTimer);
+        maxTimer = null;
+      }
+      return Promise.resolve(invoke());
+    }
+    return new Promise((resolve, reject) => {
+      lastRejector = options.rejectOnCancel ? reject : resolve;
+      if (maxDuration && !maxTimer) {
+        maxTimer = setTimeout(() => {
+          if (timer)
+            _clearTimeout(timer);
+          maxTimer = null;
+          resolve(invoke());
+        }, maxDuration);
+      }
+      timer = setTimeout(() => {
+        if (maxTimer)
+          _clearTimeout(maxTimer);
+        maxTimer = null;
+        resolve(invoke());
+      }, duration);
+    });
+  };
+  return filter;
+}
+
+function toRef(...args) {
+  if (args.length !== 1)
+    return toRef$1(...args);
+  const r = args[0];
+  return typeof r === "function" ? readonly(customRef(() => ({ get: r, set: noop }))) : ref(r);
+}
+
+function useDebounceFn(fn, ms = 200, options = {}) {
+  return createFilterWrapper(
+    debounceFilter(ms, options),
+    fn
+  );
+}
+
+function refDebounced(value, ms = 200, options = {}) {
+  const debounced = ref(value.value);
+  const updater = useDebounceFn(() => {
+    debounced.value = value.value;
+  }, ms, options);
+  watch(value, () => updater());
+  return debounced;
+}
+
+function watchWithFilter(source, cb, options = {}) {
+  const {
+    eventFilter = bypassFilter,
+    ...watchOptions
+  } = options;
+  return watch(
+    source,
+    createFilterWrapper(
+      eventFilter,
+      cb
+    ),
+    watchOptions
+  );
+}
+
+function toRefs(objectRef, options = {}) {
+  if (!isRef(objectRef))
+    return toRefs$1(objectRef);
+  const result = Array.isArray(objectRef.value) ? Array.from({ length: objectRef.value.length }) : {};
+  for (const key in objectRef.value) {
+    result[key] = customRef(() => ({
+      get() {
+        return objectRef.value[key];
+      },
+      set(v) {
+        var _a;
+        const replaceRef = (_a = toValue(options.replaceRef)) != null ? _a : true;
+        if (replaceRef) {
+          if (Array.isArray(objectRef.value)) {
+            const copy = [...objectRef.value];
+            copy[key] = v;
+            objectRef.value = copy;
+          } else {
+            const newObject = { ...objectRef.value, [key]: v };
+            Object.setPrototypeOf(newObject, Object.getPrototypeOf(objectRef.value));
+            objectRef.value = newObject;
+          }
+        } else {
+          objectRef.value[key] = v;
+        }
+      }
+    }));
+  }
+  return result;
+}
+
+function tryOnMounted(fn, sync = true) {
+  if (getCurrentInstance())
+    onMounted(fn);
+  else if (sync)
+    fn();
+  else
+    nextTick(fn);
+}
+
+function useToggle(initialValue = false, options = {}) {
+  const {
+    truthyValue = true,
+    falsyValue = false
+  } = options;
+  const valueIsRef = isRef(initialValue);
+  const _value = ref(initialValue);
+  function toggle(value) {
+    if (arguments.length) {
+      _value.value = value;
+      return _value.value;
+    } else {
+      const truthy = toValue(truthyValue);
+      _value.value = _value.value === truthy ? toValue(falsyValue) : truthy;
+      return _value.value;
+    }
+  }
+  if (valueIsRef)
+    return toggle;
+  else
+    return [_value, toggle];
+}
+
+function watchDebounced(source, cb, options = {}) {
+  const {
+    debounce = 0,
+    maxWait = void 0,
+    ...watchOptions
+  } = options;
+  return watchWithFilter(
+    source,
+    cb,
+    {
+      ...watchOptions,
+      eventFilter: debounceFilter(debounce, { maxWait })
+    }
+  );
+}
+
+function whenever(source, cb, options) {
+  return watch(
+    source,
+    (v, ov, onInvalidate) => {
+      if (v)
+        cb(v, ov, onInvalidate);
+    },
+    options
+  );
+}
+
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+
+const defaultWindow = isClient ? window : void 0;
+
+function useEventListener(...args) {
+  let target;
+  let events;
+  let listeners;
+  let options;
+  if (typeof args[0] === "string" || Array.isArray(args[0])) {
+    [events, listeners, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, events, listeners, options] = args;
+  }
+  if (!target)
+    return noop;
+  if (!Array.isArray(events))
+    events = [events];
+  if (!Array.isArray(listeners))
+    listeners = [listeners];
+  const cleanups = [];
+  const cleanup = () => {
+    cleanups.forEach((fn) => fn());
+    cleanups.length = 0;
+  };
+  const register = (el, event, listener, options2) => {
+    el.addEventListener(event, listener, options2);
+    return () => el.removeEventListener(event, listener, options2);
+  };
+  const stopWatch = watch(
+    () => [unrefElement(target), toValue(options)],
+    ([el, options2]) => {
+      cleanup();
+      if (!el)
+        return;
+      const optionsClone = isObject(options2) ? { ...options2 } : options2;
+      cleanups.push(
+        ...events.flatMap((event) => {
+          return listeners.map((listener) => register(el, event, listener, optionsClone));
+        })
+      );
+    },
+    { immediate: true, flush: "post" }
+  );
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+
+let _iOSWorkaround = false;
+function onClickOutside(target, handler, options = {}) {
+  const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;
+  if (!window)
+    return;
+  if (isIOS && !_iOSWorkaround) {
+    _iOSWorkaround = true;
+    Array.from(window.document.body.children).forEach((el) => el.addEventListener("click", noop));
+    window.document.documentElement.addEventListener("click", noop);
+  }
+  let shouldListen = true;
+  const shouldIgnore = (event) => {
+    return ignore.some((target2) => {
+      if (typeof target2 === "string") {
+        return Array.from(window.document.querySelectorAll(target2)).some((el) => el === event.target || event.composedPath().includes(el));
+      } else {
+        const el = unrefElement(target2);
+        return el && (event.target === el || event.composedPath().includes(el));
+      }
+    });
+  };
+  const listener = (event) => {
+    const el = unrefElement(target);
+    if (!el || el === event.target || event.composedPath().includes(el))
+      return;
+    if (event.detail === 0)
+      shouldListen = !shouldIgnore(event);
+    if (!shouldListen) {
+      shouldListen = true;
+      return;
+    }
+    handler(event);
+  };
+  const cleanup = [
+    useEventListener(window, "click", listener, { passive: true, capture }),
+    useEventListener(window, "pointerdown", (e) => {
+      const el = unrefElement(target);
+      if (el)
+        shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);
+    }, { passive: true }),
+    detectIframe && useEventListener(window, "blur", (event) => {
+      setTimeout(() => {
+        var _a;
+        const el = unrefElement(target);
+        if (((_a = window.document.activeElement) == null ? void 0 : _a.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(window.document.activeElement)))
+          handler(event);
+      }, 0);
+    })
+  ].filter(Boolean);
+  const stop = () => cleanup.forEach((fn) => fn());
+  return stop;
+}
+
+function useActiveElement(options = {}) {
+  var _a;
+  const {
+    window = defaultWindow,
+    deep = true
+  } = options;
+  const document = (_a = options.document) != null ? _a : window == null ? void 0 : window.document;
+  const getDeepActiveElement = () => {
+    var _a2;
+    let element = document == null ? void 0 : document.activeElement;
+    if (deep) {
+      while (element == null ? void 0 : element.shadowRoot)
+        element = (_a2 = element == null ? void 0 : element.shadowRoot) == null ? void 0 : _a2.activeElement;
+    }
+    return element;
+  };
+  const activeElement = computedWithControl(
+    () => null,
+    () => getDeepActiveElement()
+  );
+  if (window) {
+    useEventListener(window, "blur", (event) => {
+      if (event.relatedTarget !== null)
+        return;
+      activeElement.trigger();
+    }, true);
+    useEventListener(window, "focus", activeElement.trigger, true);
+  }
+  return activeElement;
+}
+
+function useMounted() {
+  const isMounted = ref(false);
+  if (getCurrentInstance()) {
+    onMounted(() => {
+      isMounted.value = true;
+    });
+  }
+  return isMounted;
+}
+
+function useSupported(callback) {
+  const isMounted = useMounted();
+  return computed(() => {
+    isMounted.value;
+    return Boolean(callback());
+  });
+}
+
+function useMediaQuery(query, options = {}) {
+  const { window = defaultWindow } = options;
+  const isSupported = useSupported(() => window && "matchMedia" in window && typeof window.matchMedia === "function");
+  let mediaQuery;
+  const matches = ref(false);
+  const handler = (event) => {
+    matches.value = event.matches;
+  };
+  const cleanup = () => {
+    if (!mediaQuery)
+      return;
+    if ("removeEventListener" in mediaQuery)
+      mediaQuery.removeEventListener("change", handler);
+    else
+      mediaQuery.removeListener(handler);
+  };
+  const stopWatch = watchEffect(() => {
+    if (!isSupported.value)
+      return;
+    cleanup();
+    mediaQuery = window.matchMedia(toValue(query));
+    if ("addEventListener" in mediaQuery)
+      mediaQuery.addEventListener("change", handler);
+    else
+      mediaQuery.addListener(handler);
+    matches.value = mediaQuery.matches;
+  });
+  tryOnScopeDispose(() => {
+    stopWatch();
+    cleanup();
+    mediaQuery = void 0;
+  });
+  return matches;
+}
+
+function cloneFnJSON(source) {
+  return JSON.parse(JSON.stringify(source));
+}
+
+function useMutationObserver(target, callback, options = {}) {
+  const { window = defaultWindow, ...mutationOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window && "MutationObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const stopWatch = watch(
+    () => unrefElement(target),
+    (el) => {
+      cleanup();
+      if (isSupported.value && window && el) {
+        observer = new MutationObserver(callback);
+        observer.observe(el, mutationOptions);
+      }
+    },
+    { immediate: true }
+  );
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+function useDraggable(target, options = {}) {
+  var _a, _b;
+  const {
+    pointerTypes,
+    preventDefault,
+    stopPropagation,
+    exact,
+    onMove,
+    onEnd,
+    onStart,
+    initialValue,
+    axis = "both",
+    draggingElement = defaultWindow,
+    containerElement,
+    handle: draggingHandle = target
+  } = options;
+  const position = ref(
+    (_a = toValue(initialValue)) != null ? _a : { x: 0, y: 0 }
+  );
+  const pressedDelta = ref();
+  const filterEvent = (e) => {
+    if (pointerTypes)
+      return pointerTypes.includes(e.pointerType);
+    return true;
+  };
+  const handleEvent = (e) => {
+    if (toValue(preventDefault))
+      e.preventDefault();
+    if (toValue(stopPropagation))
+      e.stopPropagation();
+  };
+  const start = (e) => {
+    var _a2;
+    if (!filterEvent(e))
+      return;
+    if (toValue(exact) && e.target !== toValue(target))
+      return;
+    const container = (_a2 = toValue(containerElement)) != null ? _a2 : toValue(target);
+    const rect = container.getBoundingClientRect();
+    const pos = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+    if ((onStart == null ? void 0 : onStart(pos, e)) === false)
+      return;
+    pressedDelta.value = pos;
+    handleEvent(e);
+  };
+  const move = (e) => {
+    if (!filterEvent(e))
+      return;
+    if (!pressedDelta.value)
+      return;
+    let { x, y } = position.value;
+    if (axis === "x" || axis === "both")
+      x = e.clientX - pressedDelta.value.x;
+    if (axis === "y" || axis === "both")
+      y = e.clientY - pressedDelta.value.y;
+    position.value = {
+      x,
+      y
+    };
+    onMove == null ? void 0 : onMove(position.value, e);
+    handleEvent(e);
+  };
+  const end = (e) => {
+    if (!filterEvent(e))
+      return;
+    if (!pressedDelta.value)
+      return;
+    pressedDelta.value = void 0;
+    onEnd == null ? void 0 : onEnd(position.value, e);
+    handleEvent(e);
+  };
+  if (isClient) {
+    const config = { capture: (_b = options.capture) != null ? _b : true };
+    useEventListener(draggingHandle, "pointerdown", start, config);
+    useEventListener(draggingElement, "pointermove", move, config);
+    useEventListener(draggingElement, "pointerup", end, config);
+  }
+  return {
+    ...toRefs(position),
+    position,
+    isDragging: computed(() => !!pressedDelta.value),
+    style: computed(
+      () => `left:${position.value.x}px;top:${position.value.y}px;`
+    )
+  };
+}
+
+function useResizeObserver(target, callback, options = {}) {
+  const { window = defaultWindow, ...observerOptions } = options;
+  let observer;
+  const isSupported = useSupported(() => window && "ResizeObserver" in window);
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = void 0;
+    }
+  };
+  const targets = computed(
+    () => Array.isArray(target) ? target.map((el) => unrefElement(el)) : [unrefElement(target)]
+  );
+  const stopWatch = watch(
+    targets,
+    (els) => {
+      cleanup();
+      if (isSupported.value && window) {
+        observer = new ResizeObserver(callback);
+        for (const _el of els)
+          _el && observer.observe(_el, observerOptions);
+      }
+    },
+    { immediate: true, flush: "post", deep: true }
+  );
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+  tryOnScopeDispose(stop);
+  return {
+    isSupported,
+    stop
+  };
+}
+
+function useElementBounding(target, options = {}) {
+  const {
+    reset = true,
+    windowResize = true,
+    windowScroll = true,
+    immediate = true
+  } = options;
+  const height = ref(0);
+  const bottom = ref(0);
+  const left = ref(0);
+  const right = ref(0);
+  const top = ref(0);
+  const width = ref(0);
+  const x = ref(0);
+  const y = ref(0);
+  function update() {
+    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;
+  }
+  useResizeObserver(target, update);
+  watch(() => unrefElement(target), (ele) => !ele && update());
+  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
+  };
+}
+
+function useElementHover(el, options = {}) {
+  const {
+    delayEnter = 0,
+    delayLeave = 0,
+    window = defaultWindow
+  } = options;
+  const isHovered = ref(false);
+  let timer;
+  const toggle = (entering) => {
+    const delay = entering ? delayEnter : delayLeave;
+    if (timer) {
+      clearTimeout(timer);
+      timer = void 0;
+    }
+    if (delay)
+      timer = setTimeout(() => isHovered.value = entering, delay);
+    else
+      isHovered.value = entering;
+  };
+  if (!window)
+    return isHovered;
+  useEventListener(el, "mouseenter", () => toggle(true), { passive: true });
+  useEventListener(el, "mouseleave", () => toggle(false), { passive: true });
+  return isHovered;
+}
+
+function useElementSize(target, initialSize = { width: 0, height: 0 }, options = {}) {
+  const { window = defaultWindow, box = "content-box" } = options;
+  const isSVG = computed(() => {
+    var _a, _b;
+    return (_b = (_a = unrefElement(target)) == null ? void 0 : _a.namespaceURI) == null ? void 0 : _b.includes("svg");
+  });
+  const width = ref(initialSize.width);
+  const height = ref(initialSize.height);
+  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 styles = window.getComputedStyle($elem);
+          width.value = Number.parseFloat(styles.width);
+          height.value = Number.parseFloat(styles.height);
+        }
+      } else {
+        if (boxSize) {
+          const formatBoxSize = Array.isArray(boxSize) ? boxSize : [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
+  );
+  watch(
+    () => unrefElement(target),
+    (ele) => {
+      width.value = ele ? initialSize.width : 0;
+      height.value = ele ? initialSize.height : 0;
+    }
+  );
+  return {
+    width,
+    height
+  };
+}
+
+const events = /* @__PURE__ */ new Map();
+
+function useEventBus(key) {
+  const scope = getCurrentScope();
+  function on(listener) {
+    var _a;
+    const listeners = events.get(key) || /* @__PURE__ */ new Set();
+    listeners.add(listener);
+    events.set(key, listeners);
+    const _off = () => off(listener);
+    (_a = scope == null ? void 0 : scope.cleanups) == null ? void 0 : _a.push(_off);
+    return _off;
+  }
+  function once(listener) {
+    function _listener(...args) {
+      off(_listener);
+      listener(...args);
+    }
+    return on(_listener);
+  }
+  function off(listener) {
+    const listeners = events.get(key);
+    if (!listeners)
+      return;
+    listeners.delete(listener);
+    if (!listeners.size)
+      reset();
+  }
+  function reset() {
+    events.delete(key);
+  }
+  function emit(event, payload) {
+    var _a;
+    (_a = events.get(key)) == null ? void 0 : _a.forEach((v) => v(event, payload));
+  }
+  return { on, once, off, emit, reset };
+}
+
+function useFocus(target, options = {}) {
+  const { initialValue = false, focusVisible = false } = options;
+  const innerFocused = ref(false);
+  const targetElement = computed(() => unrefElement(target));
+  useEventListener(targetElement, "focus", (event) => {
+    var _a, _b;
+    if (!focusVisible || ((_b = (_a = event.target).matches) == null ? void 0 : _b.call(_a, ":focus-visible")))
+      innerFocused.value = true;
+  });
+  useEventListener(targetElement, "blur", () => innerFocused.value = false);
+  const focused = computed({
+    get: () => innerFocused.value,
+    set(value) {
+      var _a, _b;
+      if (!value && innerFocused.value)
+        (_a = targetElement.value) == null ? void 0 : _a.blur();
+      else if (value && !innerFocused.value)
+        (_b = targetElement.value) == null ? void 0 : _b.focus();
+    }
+  });
+  watch(
+    targetElement,
+    () => {
+      focused.value = initialValue;
+    },
+    { immediate: true, flush: "post" }
+  );
+  return { focused };
+}
+
+function resolveElement(el) {
+  if (typeof Window !== "undefined" && el instanceof Window)
+    return el.document.documentElement;
+  if (typeof Document !== "undefined" && el instanceof Document)
+    return el.documentElement;
+  return el;
+}
+
+const DefaultMagicKeysAliasMap = {
+  ctrl: "control",
+  command: "meta",
+  cmd: "meta",
+  option: "alt",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright"
+};
+
+function useMagicKeys(options = {}) {
+  const {
+    reactive: useReactive = false,
+    target = defaultWindow,
+    aliasMap = DefaultMagicKeysAliasMap,
+    passive = true,
+    onEventFired = noop
+  } = options;
+  const current = reactive(/* @__PURE__ */ new Set());
+  const obj = {
+    toJSON() {
+      return {};
+    },
+    current
+  };
+  const refs = useReactive ? reactive(obj) : obj;
+  const metaDeps = /* @__PURE__ */ new Set();
+  const usedKeys = /* @__PURE__ */ new Set();
+  function setRefs(key, value) {
+    if (key in refs) {
+      if (useReactive)
+        refs[key] = value;
+      else
+        refs[key].value = value;
+    }
+  }
+  function reset() {
+    current.clear();
+    for (const key of usedKeys)
+      setRefs(key, false);
+  }
+  function updateRefs(e, value) {
+    var _a, _b;
+    const key = (_a = e.key) == null ? void 0 : _a.toLowerCase();
+    const code = (_b = e.code) == null ? void 0 : _b.toLowerCase();
+    const values = [code, key].filter(Boolean);
+    if (key) {
+      if (value)
+        current.add(key);
+      else
+        current.delete(key);
+    }
+    for (const key2 of values) {
+      usedKeys.add(key2);
+      setRefs(key2, value);
+    }
+    if (key === "meta" && !value) {
+      metaDeps.forEach((key2) => {
+        current.delete(key2);
+        setRefs(key2, false);
+      });
+      metaDeps.clear();
+    } else if (typeof e.getModifierState === "function" && e.getModifierState("Meta") && value) {
+      [...current, ...values].forEach((key2) => metaDeps.add(key2));
+    }
+  }
+  useEventListener(target, "keydown", (e) => {
+    updateRefs(e, true);
+    return onEventFired(e);
+  }, { passive });
+  useEventListener(target, "keyup", (e) => {
+    updateRefs(e, false);
+    return onEventFired(e);
+  }, { passive });
+  useEventListener("blur", reset, { passive: true });
+  useEventListener("focus", reset, { passive: true });
+  const proxy = new Proxy(
+    refs,
+    {
+      get(target2, prop, rec) {
+        if (typeof prop !== "string")
+          return Reflect.get(target2, prop, rec);
+        prop = prop.toLowerCase();
+        if (prop in aliasMap)
+          prop = aliasMap[prop];
+        if (!(prop in refs)) {
+          if (/[+_-]/.test(prop)) {
+            const keys = prop.split(/[+_-]/g).map((i) => i.trim());
+            refs[prop] = computed(() => keys.every((key) => toValue(proxy[key])));
+          } else {
+            refs[prop] = ref(false);
+          }
+        }
+        const r = Reflect.get(target2, prop, rec);
+        return useReactive ? toValue(r) : r;
+      }
+    }
+  );
+  return proxy;
+}
+
+function usePointerSwipe(target, options = {}) {
+  const targetRef = toRef(target);
+  const {
+    threshold = 50,
+    onSwipe,
+    onSwipeEnd,
+    onSwipeStart
+  } = options;
+  const posStart = reactive({ x: 0, y: 0 });
+  const updatePosStart = (x, y) => {
+    posStart.x = x;
+    posStart.y = y;
+  };
+  const posEnd = reactive({ x: 0, y: 0 });
+  const updatePosEnd = (x, y) => {
+    posEnd.x = x;
+    posEnd.y = y;
+  };
+  const distanceX = computed(() => posStart.x - posEnd.x);
+  const distanceY = computed(() => posStart.y - posEnd.y);
+  const { max, abs } = Math;
+  const isThresholdExceeded = computed(() => max(abs(distanceX.value), abs(distanceY.value)) >= threshold);
+  const isSwiping = ref(false);
+  const isPointerDown = ref(false);
+  const direction = computed(() => {
+    if (!isThresholdExceeded.value)
+      return "none";
+    if (abs(distanceX.value) > abs(distanceY.value)) {
+      return distanceX.value > 0 ? "left" : "right";
+    } else {
+      return distanceY.value > 0 ? "up" : "down";
+    }
+  });
+  const eventIsAllowed = (e) => {
+    var _a, _b, _c;
+    const isReleasingButton = e.buttons === 0;
+    const isPrimaryButton = e.buttons === 1;
+    return (_c = (_b = (_a = options.pointerTypes) == null ? void 0 : _a.includes(e.pointerType)) != null ? _b : isReleasingButton || isPrimaryButton) != null ? _c : true;
+  };
+  const stops = [
+    useEventListener(target, "pointerdown", (e) => {
+      var _a, _b;
+      if (!eventIsAllowed(e))
+        return;
+      isPointerDown.value = true;
+      (_b = (_a = targetRef.value) == null ? void 0 : _a.style) == null ? void 0 : _b.setProperty("touch-action", "none");
+      const eventTarget = e.target;
+      eventTarget == null ? void 0 : eventTarget.setPointerCapture(e.pointerId);
+      const { clientX: x, clientY: y } = e;
+      updatePosStart(x, y);
+      updatePosEnd(x, y);
+      onSwipeStart == null ? void 0 : onSwipeStart(e);
+    }),
+    useEventListener(target, "pointermove", (e) => {
+      if (!eventIsAllowed(e))
+        return;
+      if (!isPointerDown.value)
+        return;
+      const { clientX: x, clientY: y } = e;
+      updatePosEnd(x, y);
+      if (!isSwiping.value && isThresholdExceeded.value)
+        isSwiping.value = true;
+      if (isSwiping.value)
+        onSwipe == null ? void 0 : onSwipe(e);
+    }),
+    useEventListener(target, "pointerup", (e) => {
+      var _a, _b;
+      if (!eventIsAllowed(e))
+        return;
+      if (isSwiping.value)
+        onSwipeEnd == null ? void 0 : onSwipeEnd(e, direction.value);
+      isPointerDown.value = false;
+      isSwiping.value = false;
+      (_b = (_a = targetRef.value) == null ? void 0 : _a.style) == null ? void 0 : _b.setProperty("touch-action", "initial");
+    })
+  ];
+  const stop = () => stops.forEach((s) => s());
+  return {
+    isSwiping: readonly(isSwiping),
+    direction: readonly(direction),
+    posStart: readonly(posStart),
+    posEnd: readonly(posEnd),
+    distanceX,
+    distanceY,
+    stop
+  };
+}
+
+function checkOverflowScroll(ele) {
+  const style = window.getComputedStyle(ele);
+  if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientWidth < ele.scrollWidth || style.overflowY === "auto" && ele.clientHeight < ele.scrollHeight) {
+    return true;
+  } else {
+    const parent = ele.parentNode;
+    if (!parent || parent.tagName === "BODY")
+      return false;
+    return checkOverflowScroll(parent);
+  }
+}
+function preventDefault(rawEvent) {
+  const e = rawEvent || window.event;
+  const _target = e.target;
+  if (checkOverflowScroll(_target))
+    return false;
+  if (e.touches.length > 1)
+    return true;
+  if (e.preventDefault)
+    e.preventDefault();
+  return false;
+}
+function useScrollLock(element, initialState = false) {
+  const isLocked = ref(initialState);
+  let stopTouchMoveListener = null;
+  let initialOverflow;
+  watch(toRef(element), (el) => {
+    const target = resolveElement(toValue(el));
+    if (target) {
+      const ele = target;
+      initialOverflow = ele.style.overflow;
+      if (isLocked.value)
+        ele.style.overflow = "hidden";
+    }
+  }, {
+    immediate: true
+  });
+  const lock = () => {
+    const el = resolveElement(toValue(element));
+    if (!el || isLocked.value)
+      return;
+    if (isIOS) {
+      stopTouchMoveListener = useEventListener(
+        el,
+        "touchmove",
+        (e) => {
+          preventDefault(e);
+        },
+        { passive: false }
+      );
+    }
+    el.style.overflow = "hidden";
+    isLocked.value = true;
+  };
+  const unlock = () => {
+    const el = resolveElement(toValue(element));
+    if (!el || !isLocked.value)
+      return;
+    isIOS && (stopTouchMoveListener == null ? void 0 : stopTouchMoveListener());
+    el.style.overflow = initialOverflow;
+    isLocked.value = false;
+  };
+  tryOnScopeDispose(unlock);
+  return computed({
+    get() {
+      return isLocked.value;
+    },
+    set(v) {
+      if (v)
+        lock();
+      else
+        unlock();
+    }
+  });
+}
+
+const DEFAULT_UNITS = [
+  { max: 6e4, value: 1e3, name: "second" },
+  { max: 276e4, value: 6e4, name: "minute" },
+  { max: 72e6, value: 36e5, name: "hour" },
+  { max: 5184e5, value: 864e5, name: "day" },
+  { max: 24192e5, value: 6048e5, name: "week" },
+  { max: 28512e6, value: 2592e6, name: "month" },
+  { max: Number.POSITIVE_INFINITY, value: 31536e6, name: "year" }
+];
+const DEFAULT_MESSAGES = {
+  justNow: "just now",
+  past: (n) => n.match(/\d/) ? `${n} ago` : n,
+  future: (n) => n.match(/\d/) ? `in ${n}` : n,
+  month: (n, past) => n === 1 ? past ? "last month" : "next month" : `${n} month${n > 1 ? "s" : ""}`,
+  year: (n, past) => n === 1 ? past ? "last year" : "next year" : `${n} year${n > 1 ? "s" : ""}`,
+  day: (n, past) => n === 1 ? past ? "yesterday" : "tomorrow" : `${n} day${n > 1 ? "s" : ""}`,
+  week: (n, past) => n === 1 ? past ? "last week" : "next week" : `${n} week${n > 1 ? "s" : ""}`,
+  hour: (n) => `${n} hour${n > 1 ? "s" : ""}`,
+  minute: (n) => `${n} minute${n > 1 ? "s" : ""}`,
+  second: (n) => `${n} second${n > 1 ? "s" : ""}`,
+  invalid: ""
+};
+function DEFAULT_FORMATTER(date) {
+  return date.toISOString().slice(0, 10);
+}
+function formatTimeAgo(from, options = {}, now = Date.now()) {
+  var _a;
+  const {
+    max,
+    messages = DEFAULT_MESSAGES,
+    fullDateFormatter = DEFAULT_FORMATTER,
+    units = DEFAULT_UNITS,
+    showSecond = false,
+    rounding = "round"
+  } = options;
+  const roundFn = typeof rounding === "number" ? (n) => +n.toFixed(rounding) : Math[rounding];
+  const diff = +now - +from;
+  const absDiff = Math.abs(diff);
+  function getValue(diff2, unit) {
+    return roundFn(Math.abs(diff2) / unit.value);
+  }
+  function format(diff2, unit) {
+    const val = getValue(diff2, unit);
+    const past = diff2 > 0;
+    const str = applyFormat(unit.name, val, past);
+    return applyFormat(past ? "past" : "future", str, past);
+  }
+  function applyFormat(name, val, isPast) {
+    const formatter = messages[name];
+    if (typeof formatter === "function")
+      return formatter(val, isPast);
+    return formatter.replace("{0}", val.toString());
+  }
+  if (absDiff < 6e4 && !showSecond)
+    return messages.justNow;
+  if (typeof max === "number" && absDiff > max)
+    return fullDateFormatter(new Date(from));
+  if (typeof max === "string") {
+    const unitMax = (_a = units.find((i) => i.name === max)) == null ? void 0 : _a.max;
+    if (unitMax && absDiff > unitMax)
+      return fullDateFormatter(new Date(from));
+  }
+  for (const [idx, unit] of units.entries()) {
+    const val = getValue(diff, unit);
+    if (val <= 0 && units[idx - 1])
+      return format(diff, units[idx - 1]);
+    if (absDiff < unit.max)
+      return format(diff, unit);
+  }
+  return messages.invalid;
+}
+
+function useVModel(props, key, emit, options = {}) {
+  var _a, _b, _c, _d, _e;
+  const {
+    clone = false,
+    passive = false,
+    eventName,
+    deep = false,
+    defaultValue,
+    shouldEmit
+  } = options;
+  const vm = getCurrentInstance();
+  const _emit = emit || (vm == null ? void 0 : vm.emit) || ((_a = vm == null ? void 0 : vm.$emit) == null ? void 0 : _a.bind(vm)) || ((_c = (_b = vm == null ? void 0 : vm.proxy) == null ? void 0 : _b.$emit) == null ? void 0 : _c.bind(vm == null ? void 0 : vm.proxy));
+  let event = eventName;
+  if (!key) {
+    if (isVue2) {
+      const modelOptions = (_e = (_d = vm == null ? void 0 : vm.proxy) == null ? void 0 : _d.$options) == null ? void 0 : _e.model;
+      key = (modelOptions == null ? void 0 : modelOptions.value) || "value";
+      if (!eventName)
+        event = (modelOptions == null ? void 0 : modelOptions.event) || "input";
+    } else {
+      key = "modelValue";
+    }
+  }
+  event = event || `update:${key.toString()}`;
+  const cloneFn = (val) => !clone ? val : typeof clone === "function" ? clone(val) : cloneFnJSON(val);
+  const getValue = () => isDef(props[key]) ? cloneFn(props[key]) : defaultValue;
+  const triggerEmit = (value) => {
+    if (shouldEmit) {
+      if (shouldEmit(value))
+        _emit(event, value);
+    } else {
+      _emit(event, value);
+    }
+  };
+  if (passive) {
+    const initialValue = getValue();
+    const proxy = ref(initialValue);
+    let isUpdating = false;
+    watch(
+      () => props[key],
+      (v) => {
+        if (!isUpdating) {
+          isUpdating = true;
+          proxy.value = cloneFn(v);
+          nextTick(() => isUpdating = false);
+        }
+      }
+    );
+    watch(
+      proxy,
+      (v) => {
+        if (!isUpdating && (v !== props[key] || deep))
+          triggerEmit(v);
+      },
+      { deep }
+    );
+    return proxy;
+  } else {
+    return computed({
+      get() {
+        return getValue();
+      },
+      set(value) {
+        triggerEmit(value);
+      }
+    });
+  }
+}
+
+var BottomSheetVariant;
+(function (BottomSheetVariant) {
+  BottomSheetVariant["Basic"] = "basic";
+  BottomSheetVariant["Advanced"] = "advanced";
+})(BottomSheetVariant || (BottomSheetVariant = {}));
+
+function useBottomSheetSwipeState(root, content, fullscreen, variant, close) {
+  const inlineSwipingStyles = ref({});
+  const skipSwipe = ref(false);
+  const theme = useTheme();
+  const isEventSkipped = event => {
+    // eslint-disable-next-line max-len
+    return variant.value === BottomSheetVariant.Basic || event.composedPath().includes(content.value) && fullscreen.value;
+  };
+  const {
+    isSwiping
+  } = usePointerSwipe(root, {
+    threshold: 12,
+    onSwipe(event) {
+      skipSwipe.value = isEventSkipped(event);
+      if (variant.value === BottomSheetVariant.Advanced) {
+        const rootElement = unref(root);
+        inlineSwipingStyles.value = {
+          transitionProperty: 'none',
+          minHeight: `${rootElement.clientHeight - event.offsetY}px`,
+          maxHeight: `${rootElement.clientHeight - event.offsetY}px`
+        };
+      }
+    },
+    onSwipeEnd(event, direction) {
+      if (isEventSkipped(event)) {
+        return;
+      }
+      if (variant.value === BottomSheetVariant.Advanced) {
+        switch (direction) {
+          case 'up':
+            fullscreen.value = true;
+            break;
+          case 'down':
+            if (fullscreen.value) {
+              fullscreen.value = false;
+            } else {
+              close();
+            }
+            break;
+        }
+      }
+    }
+  });
+  const rootInlineStyles = computed(() => {
+    if (variant.value === BottomSheetVariant.Basic) {
+      return {
+        transitionProperty: 'min-height, max-height',
+        minHeight: '0',
+        maxHeight: `calc(100% - ${theme.spacing.xl})`
+      };
+    }
+    return isSwiping.value && !skipSwipe.value ? inlineSwipingStyles.value : fullscreen.value ? {
+      transitionProperty: 'min-height, max-height',
+      minHeight: `calc(100% - ${theme.spacing.xl})`,
+      maxHeight: `calc(100% - ${theme.spacing.xl})`
+    } : {
+      transitionProperty: 'min-height, max-height',
+      minHeight: '0',
+      maxHeight: '50%'
+    };
+  });
+  return {
+    rootInlineStyles
+  };
+}
+
+const BottomSheet = [
+// Position
+'fixed', 'left-0', 'right-0', 'bottom-0',
+// Layout
+'layout-column',
+// Shape
+'rounded-t-lg',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-base', 'dark:theme-background-base-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const BottomSheetVariants = {
+  [BottomSheetVariant.Basic]: [],
+  [BottomSheetVariant.Advanced]: [
+  // Box
+  'max-h-[50%]',
+  // Transition
+  'transition-[min-height]', 'transition-[max-height]']
+};
+const BottomSheetHandle = [
+// Layout
+'layout-row justify-center',
+// Interactivity
+'interactivity-drag',
+// Box
+'after:w-2xl', 'after:h-xs',
+// Spacing
+'px-sm', 'py-sm',
+// Shape
+'after:rounded-full',
+// Theme
+'after:bg-outline', 'after:dark:bg-outline'];
+const BottomSheetHeader = [
+// Layout (empty)
+'empty:hidden',
+// Spacing
+'px-lg', 'py-md',
+// Typography
+'typography-headline-3'];
+const BottomSheetContent = [
+// Layout
+'layout-column', 'grow'];
+
+var script = defineComponent({
+  name: 'OrBottomSheet',
+  components: {
+    OrOverlay: script$1
+  },
+  inheritAttrs: false,
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    variant: {
+      type: String,
+      default: () => BottomSheetVariant.Advanced
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    const content = ref();
+    // Props
+    const {
+      variant,
+      isOpen
+    } = toRefs$1(props);
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(isOpen, context.emit);
+    const fullscreen = ref(false);
+    // Styles
+    const rootStyles = computed(() => ['or-bottom-sheet-v3', ...BottomSheet, ...BottomSheetVariants[props.variant]]);
+    const handleStyles = computed(() => [...BottomSheetHandle]);
+    const headerStyles = computed(() => [...BottomSheetHeader]);
+    const contentStyles = computed(() => [...BottomSheetContent, fullscreen.value || variant.value === 'basic' ? 'overflow-y-auto' : 'overflow-hidden']);
+    // Effects
+    // #region Swipe
+    const {
+      rootInlineStyles
+    } = useBottomSheetSwipeState(root, content, fullscreen, variant, close);
+    // #endregion
+    watch(state, value => {
+      if (value === 'closed') {
+        fullscreen.value = false;
+      }
+    });
+    // #region Click Outside
+    onClickOutside(root, event => {
+      const path = event.composedPath();
+      if (!path.some(_ref => {
+        let {
+          classList
+        } = _ref;
+        return (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) || (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3'));
+      })) {
+        close();
+      }
+    });
+    // #endregion
+    return {
+      root,
+      content,
+      rootStyles,
+      rootInlineStyles,
+      handleStyles,
+      headerStyles,
+      contentStyles,
+      state,
+      fullscreen,
+      open,
+      close,
+      toggle
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrOverlay = resolveComponent("OrOverlay");
+  return _ctx.state === 'open' ? (openBlock(), createBlock(_component_OrOverlay, {
+    key: 0,
+    fullscreen: _ctx.fullscreen
+  }, {
+    default: withCtx(() => [createElementVNode("div", mergeProps({
+      ref: "root"
+    }, _ctx.$attrs, {
+      class: _ctx.rootStyles,
+      style: _ctx.rootInlineStyles
+    }), [_ctx.variant === 'advanced' ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      class: normalizeClass(_ctx.handleStyles)
+    }, null, 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
+      class: normalizeClass(_ctx.headerStyles)
+    }, [renderSlot(_ctx.$slots, "header")], 2 /* CLASS */), createElementVNode("div", {
+      ref: "content",
+      class: normalizeClass(_ctx.contentStyles)
+    }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)], 16 /* FULL_PROPS */)]),
+
+    _: 3 /* FORWARDED */
+  }, 8 /* PROPS */, ["fullscreen"])) : createCommentVNode("v-if", true);
+}
+
+script.render = render;
+script.__file = "src/components/or-bottom-sheet-v3/OrBottomSheet.vue";
+
+export { useMediaQuery as A, BottomSheetVariant as B, useBottomSheetSwipeState as C, BottomSheet as D, BottomSheetVariants as E, BottomSheetHandle as F, BottomSheetHeader as G, BottomSheetContent as H, useElementHover as a, useMagicKeys as b, useActiveElement as c, useVModel as d, useElementSize as e, unrefElement as f, tryOnScopeDispose as g, useScrollLock as h, useElementBounding as i, useDraggable as j, clamp as k, useResizeObserver as l, useDebounceFn as m, watchDebounced as n, onClickOutside as o, useFocus as p, formatTimeAgo as q, createSharedComposable as r, script as s, toValue as t, useToggle as u, useEventBus as v, whenever as w, noop as x, useMutationObserver as y, refDebounced as z };