vrembem 4.0.0-next.25 → 4.0.0-next.27

package/dev/index.umd.cjs

@@ -9,7 +9,126 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 
-  var _handler, _focusable, _handleFocusTrap, _handleFocusLock, _handleClick, _handleKeydown, _handleClick2, _handleKeydown2, _handleKeydown3;
+  var _handler, _focusable, _handleFocusTrap, _handleFocusLock, _mode, _state, _breakpoint, _handleClick, _handleKeydown, _handleClick2, _handleKeydown2, _eventListeners, _isHovered, _handleKeydown3;
+  function toCamel(value) {
+    return value.split("-").map((word, index2) => index2 === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)).join("");
+  }
+  function toKebab(value) {
+    return value.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  }
+  function toMilliseconds(value) {
+    if (typeof value === "number") {
+      return value;
+    }
+    const parsed = parseFloat(value);
+    if (!Number.isNaN(parsed)) {
+      const isMilliseconds = value.includes("ms");
+      return parsed * (isMilliseconds ? 1 : 1e3);
+    }
+    throw new Error(`Could not convert value to milliseconds: ${value}`);
+  }
+  function getPrefix() {
+    return getComputedStyle(document.body).getPropertyValue("--vb-prefix").trim();
+  }
+  function cssVar(property, options) {
+    const settings = {
+      fallback: null,
+      element: document.body,
+      ...options
+    };
+    if (property.slice(0, 2) !== "--") {
+      const prefixValue = getPrefix();
+      if (prefixValue) {
+        property = `${prefixValue}${property}`;
+      }
+      property = `--${property}`;
+    }
+    const cssValue = getComputedStyle(settings.element).getPropertyValue(property).trim();
+    if (cssValue) {
+      return cssValue;
+    } else {
+      if (settings.fallback) {
+        return settings.fallback;
+      } else {
+        throw new Error(`CSS variable "${property}" was not found!`);
+      }
+    }
+  }
+  function getConfig(el, dataConfig = "config") {
+    const string = el.getAttribute(`data-${dataConfig}`) || "";
+    const json = string.replace(/'/g, '"');
+    return json ? JSON.parse(json) : {};
+  }
+  function getCustomProps(entry) {
+    const styles = getComputedStyle(entry.el);
+    const result = {};
+    const keys = Object.keys(entry.context.settings);
+    for (let i = 0; i < keys.length; i++) {
+      const prefix = getPrefix();
+      const module2 = entry.context.module.toLowerCase();
+      const key = toKebab(keys[i]);
+      const value = styles.getPropertyValue(`--${prefix}${module2}-${key}`).trim();
+      if (value) {
+        result[key] = value;
+      }
+    }
+    return result;
+  }
+  function getElement(query) {
+    if (typeof query === "string") {
+      return document.getElementById(query);
+    } else if (query instanceof HTMLElement) {
+      return query;
+    } else {
+      return null;
+    }
+  }
+  async function lifecycleHook(name, ...args) {
+    if (name in this && typeof this[name] === "function") {
+      await this[name](...args);
+    }
+  }
+  function transition(el, init, interim, final, duration = 0) {
+    return new Promise((resolve) => {
+      el.classList.remove(init);
+      el.classList.add(interim);
+      setTimeout(() => {
+        el.classList.add(final);
+        el.classList.remove(interim);
+        resolve(el);
+      }, toMilliseconds(duration));
+    });
+  }
+  function setOverflowHidden(state, selector) {
+    if (selector) {
+      const els = document.querySelectorAll(selector);
+      els.forEach((el) => {
+        if (state) {
+          el.style.overflow = "hidden";
+        } else {
+          el.style.removeProperty("overflow");
+        }
+      });
+    }
+  }
+  function setInert(state, selector) {
+    if (selector) {
+      const els = document.querySelectorAll(selector);
+      els.forEach((el) => {
+        if (state) {
+          el.inert = true;
+          el.setAttribute("aria-hidden", true);
+        } else {
+          el.inert = null;
+          el.removeAttribute("aria-hidden");
+        }
+      });
+    }
+  }
+  function setGlobalState(state, selectorInert, selectorOverflow) {
+    setInert(!!state, selectorInert);
+    setOverflowHidden(!!state, selectorOverflow);
+  }
   class Breakpoint {
     constructor(value, handler) {
       __privateAdd(this, _handler);
@@ -47,43 +166,145 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   }
   _handler = new WeakMap();
   class Collection {
-    constructor() {
+    constructor(options = {}) {
+      this.module = this.constructor.name;
       this.collection = [];
+      this.settings = Object.assign({
+        dataConfig: "config",
+        teleport: null,
+        teleportMethod: "append"
+      }, options);
     }
-    async register(item) {
-      await this.deregister(item);
-      this.collection.push(item);
-      return this.collection;
+    get(value, key = "id") {
+      return this.collection.find((entry) => entry[key] === value);
+    }
+    applySettings(obj) {
+      return Object.assign(this.settings, obj);
+    }
+    async createEntry(query, config) {
+      return new CollectionEntry(this, query, config);
+    }
+    async register(query, config = {}) {
+      await this.deregister((query == null ? void 0 : query.id) || query, true);
+      const entry = await this.createEntry(query, config);
+      await entry.mount();
+      await lifecycleHook.call(this, "beforeRegister", entry);
+      await lifecycleHook.call(entry, "beforeRegister");
+      this.collection.push(entry);
+      await lifecycleHook.call(entry, "afterRegister");
+      await lifecycleHook.call(this, "afterRegister", entry);
+      return entry;
     }
-    async deregister(ref) {
-      const index2 = this.collection.findIndex((entry) => {
-        return entry === ref;
-      });
-      if (index2 >= 0) {
+    async deregister(id, reReg = false) {
+      const index2 = this.collection.findIndex((entry) => entry.id === id);
+      if (~index2) {
         const entry = this.collection[index2];
+        await entry.unmount(reReg);
+        await lifecycleHook.call(this, "beforeDeregister", entry);
+        await lifecycleHook.call(entry, "beforeDeregister", reReg);
         Object.getOwnPropertyNames(entry).forEach((prop) => {
-          delete entry[prop];
+          if (prop != "beforeDeregister" && prop != "afterDeregister") {
+            delete entry[prop];
+          }
         });
         this.collection.splice(index2, 1);
+        await lifecycleHook.call(entry, "afterDeregister", reReg);
+        await lifecycleHook.call(this, "afterDeregister", entry);
       }
       return this.collection;
     }
-    async registerCollection(items) {
-      await Promise.all(Array.from(items, (item) => {
-        this.register(item);
-      }));
-      return this.collection;
+    async mount(options = {}) {
+      this.applySettings(options);
+      await lifecycleHook.call(this, "beforeMount");
+      const els = document.querySelectorAll(this.settings.selector);
+      for (const el of els) {
+        await this.register(el);
+      }
+      await lifecycleHook.call(this, "afterMount");
+      return this;
     }
-    async deregisterCollection() {
+    async unmount() {
+      await lifecycleHook.call(this, "beforeUnmount");
       while (this.collection.length > 0) {
-        await this.deregister(this.collection[0]);
+        await this.deregister(this.collection[0].id);
       }
-      return this.collection;
+      await lifecycleHook.call(this, "afterUnmount");
+      return this;
     }
-    get(value, key = "id") {
-      return this.collection.find((item) => {
-        return item[key] === value;
-      });
+  }
+  class CollectionEntry {
+    constructor(context, query, options = {}) {
+      this.context = context;
+      this.id = (query == null ? void 0 : query.id) || query;
+      this.el = getElement(query);
+      this.settings = Object.assign({}, options);
+      this.dataConfig = {};
+      this.customProps = {};
+      this.returnRef = null;
+    }
+    applySettings(obj) {
+      return Object.assign(this.settings, obj);
+    }
+    getDataConfig() {
+      return Object.assign(this.dataConfig, getConfig(this.el, this.getSetting("dataConfig")));
+    }
+    getCustomProps() {
+      return Object.assign(this.customProps, getCustomProps(this));
+    }
+    getSetting(key) {
+      const camel = toCamel(key);
+      const kebab = toKebab(key);
+      if ("dataConfig" in this && camel in this.dataConfig) {
+        return this.dataConfig[camel];
+      }
+      if ("customProps" in this && kebab in this.customProps) {
+        return this.customProps[kebab];
+      }
+      if ("settings" in this && camel in this.settings) {
+        return this.settings[camel];
+      }
+      if ("settings" in this.context && camel in this.context.settings) {
+        return this.context.settings[camel];
+      }
+      throw new Error(`${this.context.module} setting does not exist: ${key}`);
+    }
+    async mount(options = {}) {
+      if (this.el === null) {
+        throw new Error(`${this.context.module} element was not found with ID: "${this.id}"`);
+      }
+      this.applySettings(options);
+      this.getDataConfig();
+      this.getCustomProps();
+      await lifecycleHook.call(this, "beforeMount");
+      if (this.getSetting("teleport")) {
+        this.teleport();
+      }
+      await lifecycleHook.call(this, "afterMount");
+    }
+    async unmount(reMount = false) {
+      await lifecycleHook.call(this, "beforeUnmount", reMount);
+      if (this.getSetting("teleport")) {
+        this.teleportReturn();
+      }
+      await lifecycleHook.call(this, "afterUnmount", reMount);
+    }
+    teleport(ref = this.getSetting("teleport"), method = this.getSetting("teleportMethod")) {
+      if (!this.returnRef) {
+        this.returnRef = teleport(this.el, ref, method);
+        return this.el;
+      } else {
+        console.error("Element has already been teleported:", this.el);
+        return false;
+      }
+    }
+    teleportReturn() {
+      if (this.returnRef) {
+        this.returnRef = teleport(this.el, this.returnRef);
+        return this.el;
+      } else {
+        console.error("No return reference found:", this.el);
+        return false;
+      }
     }
   }
   class FocusTrap {
@@ -188,38 +409,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     const isTab = event.key === "Tab" || event.keyCode === 9;
     if (isTab) event.preventDefault();
   }
-  function getPrefix() {
-    return getComputedStyle(document.body).getPropertyValue("--vb-prefix").trim();
-  }
-  function cssVar(property, options) {
-    const settings = {
-      fallback: null,
-      element: document.body,
-      ...options
-    };
-    if (property.slice(0, 2) !== "--") {
-      const prefixValue = getPrefix();
-      if (prefixValue) {
-        property = `${prefixValue}${property}`;
-      }
-      property = `--${property}`;
-    }
-    const cssValue = getComputedStyle(settings.element).getPropertyValue(property).trim();
-    if (cssValue) {
-      return cssValue;
-    } else {
-      if (settings.fallback) {
-        return settings.fallback;
-      } else {
-        throw new Error(`CSS variable "${property}" was not found!`);
-      }
-    }
-  }
-  function getConfig$1(el, dataConfig) {
-    const string = el.getAttribute(`data-${dataConfig}`) || "";
-    const json = string.replace(/'/g, '"');
-    return json ? JSON.parse(json) : {};
-  }
   function localStore(key, enable = true) {
     const local = localStorage.getItem(key);
     const store = local ? JSON.parse(local) : {};
@@ -323,76 +512,35 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     api.callback("onInit");
     return api;
   }
-  function transition(el, from, to, duration = "transition-duration") {
-    return new Promise((resolve) => {
-      if (typeof duration === "string") {
-        const cssValue = cssVar(duration, { element: el });
-        const ms = cssValue.includes("ms") ? true : false;
-        duration = parseFloat(cssValue) * (ms ? 1 : 1e3);
-      }
-      el.classList.remove(from.finish);
-      el.classList.add(to.start);
-      setTimeout(() => {
-        el.classList.add(to.finish);
-        el.classList.remove(to.start);
-        resolve(el);
-      }, duration);
-    });
-  }
-  function setOverflowHidden(state, selector) {
-    if (selector) {
-      const els = document.querySelectorAll(selector);
-      els.forEach((el) => {
-        if (state) {
-          el.style.overflow = "hidden";
-        } else {
-          el.style.removeProperty("overflow");
-        }
-      });
-    }
-  }
-  function setInert(state, selector) {
-    if (selector) {
-      const els = document.querySelectorAll(selector);
-      els.forEach((el) => {
-        if (state) {
-          el.inert = true;
-          el.setAttribute("aria-hidden", true);
-        } else {
-          el.inert = null;
-          el.removeAttribute("aria-hidden");
-        }
-      });
-    }
-  }
-  function updateGlobalState(state, config) {
-    setInert(!!state, config.selectorInert);
-    setOverflowHidden(!!state, config.selectorOverflow);
-  }
   const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     Breakpoint,
     Collection,
+    CollectionEntry,
     FocusTrap,
     cssVar,
-    getConfig: getConfig$1,
+    getConfig,
+    getCustomProps,
+    getElement,
     getPrefix,
+    lifecycleHook,
     localStore,
+    setGlobalState,
     teleport,
     themeStore,
-    transition,
-    updateGlobalState
+    toCamel,
+    toKebab,
+    toMilliseconds,
+    transition
   }, Symbol.toStringTag, { value: "Module" }));
   const defaults$2 = {
-    autoMount: false,
     // Data attributes
     dataOpen: "drawer-open",
     dataClose: "drawer-close",
     dataToggle: "drawer-toggle",
     dataBreakpoint: "drawer-breakpoint",
-    dataConfig: "drawer-config",
     // Selectors
-    selectorDrawer: ".drawer",
+    selector: ".drawer",
     selectorDialog: ".drawer__dialog",
     selectorScreen: ".drawer",
     selectorFocus: "[data-focus]",
@@ -408,10 +556,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     // Feature toggles
     breakpoints: null,
     customEventPrefix: "drawer:",
-    eventListeners: true,
     store: true,
     storeKey: "VB:DrawerState",
     setTabindex: true,
+    teleport: null,
+    teleportMethod: "prepend",
     transition: true,
     transitionDuration: "drawer-transition-duration"
   };
@@ -464,7 +613,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
   }
   function getDrawer(query) {
-    const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
+    const entry = typeof query === "string" ? this.get(query) : query;
     if (entry) {
       return entry;
     } else {
@@ -486,6 +635,132 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       this.focusTrap.unmount();
     }
   }
+  function switchMode(entry) {
+    switch (entry.mode) {
+      case "inline":
+        return toInline.call(this, entry);
+      case "modal":
+        return toModal.call(this, entry);
+      default:
+        throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
+    }
+  }
+  async function toInline(entry) {
+    entry.el.classList.remove(entry.getSetting("classModal"));
+    entry.dialog.removeAttribute("aria-modal");
+    setGlobalState(false, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
+    this.focusTrap.unmount();
+    await applyInlineState(entry);
+    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
+      detail: this,
+      bubbles: true
+    }));
+    return entry;
+  }
+  async function toModal(entry) {
+    entry.el.classList.add(entry.getSetting("classModal"));
+    entry.dialog.setAttribute("aria-modal", "true");
+    await entry.close(false, false);
+    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
+      detail: this,
+      bubbles: true
+    }));
+    return entry;
+  }
+  class DrawerEntry extends CollectionEntry {
+    constructor(context, query, options = {}) {
+      super(context, query, options);
+      __privateAdd(this, _mode);
+      __privateAdd(this, _state);
+      __privateAdd(this, _breakpoint);
+      this.dialog = null;
+      this.trigger = null;
+      __privateSet(this, _breakpoint, new Breakpoint());
+      __privateSet(this, _mode, "indeterminate");
+      __privateSet(this, _state, "indeterminate");
+      this.inlineState = "indeterminate";
+    }
+    get breakpoint() {
+      return getBreakpoint.call(this.context, this.el);
+    }
+    get store() {
+      return this.context.store.get(this.id);
+    }
+    get mode() {
+      return __privateGet(this, _mode);
+    }
+    set mode(value) {
+      __privateSet(this, _mode, value);
+      switchMode.call(this.context, this);
+    }
+    get state() {
+      return __privateGet(this, _state);
+    }
+    set state(value) {
+      __privateSet(this, _state, value);
+      if (this.mode === "inline" && value != "opening" && value != "closing") {
+        this.inlineState = value;
+        if (this.getSetting("store")) {
+          this.context.store.set(this.id, value);
+        }
+      }
+      if (value === "indeterminate") {
+        this.el.classList.remove(this.getSetting("stateOpened"));
+        this.el.classList.remove(this.getSetting("stateOpening"));
+        this.el.classList.remove(this.getSetting("stateClosed"));
+        this.el.classList.remove(this.getSetting("stateClosing"));
+      }
+    }
+    async open(transition2, focus) {
+      return this.context.open(this, transition2, focus);
+    }
+    async close(transition2, focus) {
+      return this.context.close(this, transition2, focus);
+    }
+    async toggle(transition2, focus) {
+      return this.context.toggle(this, transition2, focus);
+    }
+    async deregister() {
+      return this.context.deregister(this.id);
+    }
+    mountBreakpoint() {
+      const value = this.breakpoint;
+      const handler = this.handleBreakpoint.bind(this);
+      __privateGet(this, _breakpoint).mount(value, handler);
+    }
+    unmountBreakpoint() {
+      __privateGet(this, _breakpoint).unmount();
+    }
+    handleBreakpoint(event) {
+      const bpMode = event.matches ? "inline" : "modal";
+      if (this.mode != bpMode) {
+        this.mode = bpMode;
+      }
+    }
+    async beforeMount() {
+      const dialog = this.el.querySelector(this.getSetting("selectorDialog"));
+      this.dialog = dialog ? dialog : this.el;
+      if (this.getSetting("setTabindex")) {
+        this.dialog.setAttribute("tabindex", "-1");
+      }
+      applyInitialState(this);
+      this.inlineState = this.state;
+      this.mode = this.el.classList.contains(this.getSetting("classModal")) ? "modal" : "inline";
+      if (this.breakpoint) {
+        this.mountBreakpoint();
+      }
+    }
+    async beforeUnmount(close2 = true) {
+      if (close2 && this.state === "opened") {
+        await this.close(false);
+      }
+      this.context.store.set(this.id);
+      this.unmountBreakpoint();
+    }
+  }
+  _mode = new WeakMap();
+  _state = new WeakMap();
+  _breakpoint = new WeakMap();
   async function handleClick$2(event) {
     const trigger = event.target.closest(`
     [data-${this.settings.dataOpen}],
@@ -518,8 +793,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
             entry.trigger = trigger;
             return entry.close();
           } else {
-            const parent = event.target.closest(this.settings.selectorDrawer);
-            if (parent) return this.close(parent);
+            const parent = event.target.closest(this.settings.selector);
+            if (parent) return this.close(parent.id);
           }
         });
       }
@@ -531,82 +806,60 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   }
   function handleKeydown$2(event) {
     if (event.key === "Escape") {
-      if (this.activeModal) return this.close(this.activeModal);
-    }
-  }
-  async function deregister$2(obj, close2 = true) {
-    const index2 = this.collection.findIndex((entry) => {
-      return entry.id === obj.id;
-    });
-    if (index2 >= 0) {
-      const entry = this.collection[index2];
-      if (close2 && entry.state === "opened") {
-        await entry.close(false);
-      }
-      this.store.set(entry.id);
-      entry.unmountBreakpoint();
-      Object.getOwnPropertyNames(entry).forEach((prop) => {
-        delete entry[prop];
-      });
-      this.collection.splice(index2, 1);
+      if (this.activeModal) return this.close(this.activeModal.id);
     }
-    return this.collection;
   }
-  async function open$2(query, enableTransition, focus = true) {
+  async function open$2(query, transitionOverride, focus = true) {
     const entry = getDrawer.call(this, query);
-    const config = { ...this.settings, ...entry.settings };
-    if (enableTransition !== void 0) config.transition = enableTransition;
     if (entry.state === "closed" || entry.state === "indeterminate") {
       entry.state = "opening";
-      if (config.transition) {
-        await transition(entry.el, {
-          start: config.stateClosing,
-          finish: config.stateClosed
-        }, {
-          start: config.stateOpening,
-          finish: config.stateOpened
-        }, config.transitionDuration);
+      if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
+        await transition(
+          entry.el,
+          entry.getSetting("stateClosed"),
+          entry.getSetting("stateOpening"),
+          entry.getSetting("stateOpened"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
-        entry.el.classList.add(config.stateOpened);
-        entry.el.classList.remove(config.stateClosed);
+        entry.el.classList.add(entry.getSetting("stateOpened"));
+        entry.el.classList.remove(entry.getSetting("stateClosed"));
       }
       entry.state = "opened";
-      if (entry.mode === "modal") updateGlobalState(true, config);
+      if (entry.mode === "modal") setGlobalState(true, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
       if (focus) {
         updateFocusState$1.call(this, entry);
       }
-      entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
+      entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "opened", {
         detail: this,
         bubbles: true
       }));
     }
     return entry;
   }
-  async function close$2(query, enableTransition, focus = true) {
+  async function close$2(query, transitionOverride, focus = true) {
     const entry = getDrawer.call(this, query);
-    const config = { ...this.settings, ...entry.settings };
-    if (enableTransition !== void 0) config.transition = enableTransition;
     if (entry.state === "opened" || entry.state === "indeterminate") {
       entry.state = "closing";
       document.activeElement.blur();
-      if (config.transition) {
-        await transition(entry.el, {
-          start: config.stateOpening,
-          finish: config.stateOpened
-        }, {
-          start: config.stateClosing,
-          finish: config.stateClosed
-        }, config.transitionDuration);
+      if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
+        await transition(
+          entry.el,
+          entry.getSetting("stateOpened"),
+          entry.getSetting("stateClosing"),
+          entry.getSetting("stateClosed"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
-        entry.el.classList.add(config.stateClosed);
-        entry.el.classList.remove(config.stateOpened);
+        entry.el.classList.add(entry.getSetting("stateClosed"));
+        entry.el.classList.remove(entry.getSetting("stateOpened"));
       }
       entry.state = "closed";
-      if (entry.mode === "modal") updateGlobalState(false, config);
+      if (entry.mode === "modal") setGlobalState(false, entry.getSetting("selectorInert"), entry.getSetting("selectorOverflow"));
       if (focus) {
         updateFocusState$1.call(this, entry);
       }
-      entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
+      entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "closed", {
         detail: this,
         bubbles: true
       }));
@@ -621,199 +874,54 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       return close$2.call(this, entry, transition2, focus);
     }
   }
-  function switchMode(entry) {
-    switch (entry.mode) {
-      case "inline":
-        return toInline.call(this, entry);
-      case "modal":
-        return toModal.call(this, entry);
-      default:
-        throw new Error(`"${entry.mode}" is not a valid drawer mode.`);
-    }
-  }
-  async function toInline(entry) {
-    entry.el.classList.remove(entry.getSetting("classModal"));
-    entry.dialog.removeAttribute("aria-modal");
-    updateGlobalState(false, { ...this.settings, ...entry.settings });
-    this.focusTrap.unmount();
-    await applyInlineState(entry);
-    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
-      detail: this,
-      bubbles: true
-    }));
-    return entry;
-  }
-  async function toModal(entry) {
-    entry.el.classList.add(entry.getSetting("classModal"));
-    entry.dialog.setAttribute("aria-modal", "true");
-    await close$2.call(this, entry, false, false);
-    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "switchMode", {
-      detail: this,
-      bubbles: true
-    }));
-    return entry;
-  }
-  async function register$2(el, config = {}) {
-    await deregister$2.call(this, el, false);
-    const root = this;
-    const breakpoint = new Breakpoint();
-    let _mode, _state = "indeterminate";
-    const entry = {
-      id: el.id,
-      el,
-      dialog: null,
-      trigger: null,
-      settings: { ...getConfig$1(el, this.settings.dataConfig), ...config },
-      inlineState: "indeterminate",
-      get breakpoint() {
-        return getBreakpoint.call(root, el);
-      },
-      get store() {
-        return root.store.get(this.id);
-      },
-      get mode() {
-        return _mode;
-      },
-      set mode(value) {
-        _mode = value;
-        switchMode.call(root, this);
-      },
-      get state() {
-        return _state;
-      },
-      set state(value) {
-        _state = value;
-        if (this.mode === "inline" && value != "opening" && value != "closing") {
-          this.inlineState = value;
-          if (this.getSetting("store")) {
-            root.store.set(this.id, value);
-          }
-        }
-        if (value === "indeterminate") {
-          this.el.classList.remove(this.getSetting("stateOpened"));
-          this.el.classList.remove(this.getSetting("stateOpening"));
-          this.el.classList.remove(this.getSetting("stateClosed"));
-          this.el.classList.remove(this.getSetting("stateClosing"));
-        }
-      },
-      open(transition2, focus) {
-        return open$2.call(root, this, transition2, focus);
-      },
-      close(transition2, focus) {
-        return close$2.call(root, this, transition2, focus);
-      },
-      toggle(transition2, focus) {
-        return toggle.call(root, this, transition2, focus);
-      },
-      deregister() {
-        return deregister$2.call(root, this);
-      },
-      mountBreakpoint() {
-        const value = this.breakpoint;
-        const handler = this.handleBreakpoint.bind(this);
-        breakpoint.mount(value, handler);
-        return this;
-      },
-      unmountBreakpoint() {
-        breakpoint.unmount();
-        return this;
-      },
-      handleBreakpoint(event) {
-        const bpMode = event.matches ? "inline" : "modal";
-        if (this.mode != bpMode) {
-          this.mode = bpMode;
-        }
-        return this;
-      },
-      getSetting(key) {
-        return key in this.settings ? this.settings[key] : root.settings[key];
-      }
-    };
-    this.collection.push(entry);
-    const dialog = el.querySelector(entry.getSetting("selectorDialog"));
-    entry.dialog = dialog ? dialog : el;
-    if (entry.getSetting("setTabindex")) {
-      entry.dialog.setAttribute("tabindex", "-1");
-    }
-    await applyInitialState(entry);
-    entry.inlineState = entry.state;
-    entry.mode = el.classList.contains(entry.getSetting("classModal")) ? "modal" : "inline";
-    if (entry.breakpoint) {
-      entry.mountBreakpoint();
-    }
-    return entry;
-  }
   class Drawer extends Collection {
     constructor(options) {
-      super();
+      super({ ...defaults$2, ...options });
       __privateAdd(this, _handleClick);
       __privateAdd(this, _handleKeydown);
-      this.defaults = defaults$2;
-      this.settings = { ...this.defaults, ...options };
       this.focusTrap = new FocusTrap();
-      this.store = localStore(this.settings.storeKey, this.settings.store);
       __privateSet(this, _handleClick, handleClick$2.bind(this));
       __privateSet(this, _handleKeydown, handleKeydown$2.bind(this));
-      if (this.settings.autoMount) this.mount();
+      this.store = localStore(this.settings.storeKey, this.settings.store);
     }
     get activeModal() {
       return this.collection.find((entry) => {
         return entry.state === "opened" && entry.mode === "modal";
       });
     }
-    async mount(options = null) {
-      if (options) this.settings = { ...this.settings, ...options };
-      const drawers = document.querySelectorAll(this.settings.selectorDrawer);
-      await this.registerCollection(drawers);
-      if (this.settings.eventListeners) {
-        this.mountEventListeners();
-      }
-      return this;
+    async createEntry(query, config) {
+      return new DrawerEntry(this, query, config);
     }
-    async unmount() {
-      await this.deregisterCollection();
-      if (this.settings.eventListeners) {
-        this.unmountEventListeners();
-      }
-      return this;
+    async open(id, transition2, focus) {
+      return open$2.call(this, id, transition2, focus);
+    }
+    async close(id, transition2, focus) {
+      return close$2.call(this, id, transition2, focus);
     }
-    mountEventListeners() {
+    async toggle(id, transition2, focus) {
+      return toggle.call(this, id, transition2, focus);
+    }
+    async afterMount() {
       document.addEventListener("click", __privateGet(this, _handleClick), false);
       document.addEventListener("keydown", __privateGet(this, _handleKeydown), false);
     }
-    unmountEventListeners() {
+    async beforeUnmount() {
+      this.trigger = null;
+    }
+    async afterUnmount() {
       document.removeEventListener("click", __privateGet(this, _handleClick), false);
       document.removeEventListener("keydown", __privateGet(this, _handleKeydown), false);
     }
-    register(query, config = {}) {
-      let el = typeof query == "string" ? document.getElementById(query) : query;
-      return el ? register$2.call(this, el, config) : Promise.reject(new Error(`Failed to register; drawer not found with ID of: "${query.id || query}".`));
-    }
-    deregister(query) {
-      let obj = this.get(query.id || query);
-      return obj ? deregister$2.call(this, obj) : Promise.reject(new Error(`Failed to deregister; drawer does not exist in collection with ID of: "${query.id || query}".`));
-    }
-    open(id, transition2, focus) {
-      return open$2.call(this, id, transition2, focus);
-    }
-    close(id, transition2, focus) {
-      return close$2.call(this, id, transition2, focus);
-    }
-    toggle(id, transition2, focus) {
-      return toggle.call(this, id, transition2, focus);
-    }
   }
   _handleClick = new WeakMap();
   _handleKeydown = new WeakMap();
   const defaults$1 = {
-    autoMount: false,
     // Data attributes
     dataOpen: "modal-open",
     dataClose: "modal-close",
     dataReplace: "modal-replace",
-    dataConfig: "modal-config",
     // Selectors
-    selectorModal: ".modal",
+    selector: ".modal",
     selectorDialog: ".modal__dialog",
     selectorScreen: ".modal",
     selectorRequired: '[role="alertdialog"]',
@@ -827,13 +935,61 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     stateClosed: "is-closed",
     // Feature settings
     customEventPrefix: "modal:",
-    eventListeners: true,
+    setTabindex: true,
     teleport: null,
     teleportMethod: "append",
-    setTabindex: true,
     transition: true,
     transitionDuration: "modal-transition-duration"
   };
+  class ModalEntry extends CollectionEntry {
+    constructor(context, query, options = {}) {
+      super(context, query, options);
+      this.state = "closed";
+      this.dialog = null;
+    }
+    get isRequired() {
+      return this.dialog.matches(this.getSetting("selectorRequired"));
+    }
+    async open(transition2, focus) {
+      return this.context.open(this, transition2, focus);
+    }
+    async close(transition2, focus) {
+      return this.context.close(this, transition2, focus);
+    }
+    async replace(transition2, focus) {
+      return this.context.replace(this, transition2, focus);
+    }
+    async deregister() {
+      return this.context.deregister(this.id);
+    }
+    async beforeMount() {
+      const dialog = this.el.querySelector(this.getSetting("selectorDialog"));
+      this.dialog = dialog ? dialog : this.el;
+      this.dialog.setAttribute("aria-modal", "true");
+      if (!this.dialog.hasAttribute("role")) {
+        this.dialog.setAttribute("role", "dialog");
+      }
+      if (this.getSetting("setTabindex")) {
+        this.dialog.setAttribute("tabindex", "-1");
+      }
+    }
+    async afterRegister() {
+      if (this.el.classList.contains(this.getSetting("stateOpened"))) {
+        await this.open(false);
+      } else {
+        this.el.classList.remove(this.getSetting("stateOpening"));
+        this.el.classList.remove(this.getSetting("stateClosing"));
+        this.el.classList.add(this.getSetting("stateClosed"));
+      }
+    }
+    async beforeUnmount(reMount = false) {
+      if (!reMount && this.state === "opened") {
+        await this.close(false);
+      } else {
+        this.context.stack.remove(this);
+      }
+    }
+  }
   function getModal(query) {
     const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
     if (entry) {
@@ -864,14 +1020,14 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
         const selector = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim();
         const entry = getModal.call(this, selector);
-        const fromModal = event.target.closest(this.settings.selectorModal);
+        const fromModal = event.target.closest(this.settings.selector);
         if (!fromModal) this.trigger = trigger;
         return entry.open();
       }
       if (trigger.matches(`[data-${this.settings.dataReplace}]`)) {
         const selector = trigger.getAttribute(`data-${this.settings.dataReplace}`).trim();
         const entry = getModal.call(this, selector);
-        const fromModal = event.target.closest(this.settings.selectorModal);
+        const fromModal = event.target.closest(this.settings.selector);
         if (!fromModal) this.trigger = trigger;
         return entry.replace();
       }
@@ -880,7 +1036,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         return selector === "*" ? this.closeAll() : this.close(selector);
       }
     }
-    if (this.active && event.target.matches(this.settings.selectorScreen) && !this.active.required) {
+    if (this.active && event.target.matches(this.settings.selectorScreen) && !this.active.isRequired) {
       return this.close(this.active.id);
     }
   }
@@ -891,83 +1047,58 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     }
   }
-  async function deregister$1(obj, close2 = true) {
-    const index2 = this.collection.findIndex((entry) => {
-      return entry.id === obj.id;
-    });
-    if (index2 >= 0) {
-      const entry = this.collection[index2];
-      if (close2 && entry.state === "opened") {
-        await entry.close(false);
-      } else {
-        this.stack.remove(entry);
-      }
-      if (entry.getSetting("teleport")) {
-        entry.teleportReturn();
-      }
-      Object.getOwnPropertyNames(entry).forEach((prop) => {
-        delete entry[prop];
-      });
-      this.collection.splice(index2, 1);
-    }
-    return this.collection;
-  }
-  async function open$1(query, enableTransition, focus = true) {
+  async function open$1(query, transitionOverride = void 0, focus = true) {
     const entry = getModal.call(this, query);
-    const config = { ...this.settings, ...entry.settings };
-    if (enableTransition !== void 0) config.transition = enableTransition;
     this.stack.moveToTop(entry);
     if (entry.state === "closed") {
       entry.state = "opening";
       this.stack.add(entry);
-      if (config.transition) {
-        await transition(entry.el, {
-          start: config.stateClosing,
-          finish: config.stateClosed
-        }, {
-          start: config.stateOpening,
-          finish: config.stateOpened
-        }, config.transitionDuration);
+      if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
+        await transition(
+          entry.el,
+          entry.getSetting("stateClosed"),
+          entry.getSetting("stateOpening"),
+          entry.getSetting("stateOpened"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
-        entry.el.classList.add(config.stateOpened);
-        entry.el.classList.remove(config.stateClosed);
+        entry.el.classList.add(entry.getSetting("stateOpened"));
+        entry.el.classList.remove(entry.getSetting("stateClosed"));
       }
       entry.state = "opened";
     }
     if (focus) {
       updateFocusState.call(this);
     }
-    entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "opened", {
+    entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "opened", {
       detail: this,
       bubbles: true
     }));
     return entry;
   }
-  async function close$1(query, enableTransition, focus = true) {
+  async function close$1(query, transitionOverride, focus = true) {
     const entry = query ? getModal.call(this, query) : this.active;
     if (entry && entry.state === "opened") {
       entry.state = "closing";
-      const config = { ...this.settings, ...entry.settings };
-      if (enableTransition !== void 0) config.transition = enableTransition;
       document.activeElement.blur();
-      if (config.transition) {
-        await transition(entry.el, {
-          start: config.stateOpening,
-          finish: config.stateOpened
-        }, {
-          start: config.stateClosing,
-          finish: config.stateClosed
-        }, config.transitionDuration);
+      if (transitionOverride != void 0 ? transitionOverride : entry.getSetting("transition")) {
+        await transition(
+          entry.el,
+          entry.getSetting("stateOpened"),
+          entry.getSetting("stateClosing"),
+          entry.getSetting("stateClosed"),
+          entry.getSetting("transitionDuration")
+        );
       } else {
-        entry.el.classList.add(config.stateClosed);
-        entry.el.classList.remove(config.stateOpened);
+        entry.el.classList.add(entry.getSetting("stateClosed"));
+        entry.el.classList.remove(entry.getSetting("stateOpened"));
       }
       this.stack.remove(entry);
       entry.state = "closed";
       if (focus) {
         updateFocusState.call(this);
       }
-      entry.el.dispatchEvent(new CustomEvent(config.customEventPrefix + "closed", {
+      entry.el.dispatchEvent(new CustomEvent(entry.getSetting("customEventPrefix") + "closed", {
         detail: this,
         bubbles: true
       }));
@@ -1002,75 +1133,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     return { opened: resultOpened, closed: resultClosed };
   }
-  async function register$1(el, config = {}) {
-    await deregister$1.call(this, el, false);
-    const root = this;
-    const entry = {
-      id: el.id,
-      state: "closed",
-      el,
-      dialog: null,
-      get required() {
-        return this.dialog.matches(this.getSetting("selectorRequired"));
-      },
-      returnRef: null,
-      settings: { ...getConfig$1(el, this.settings.dataConfig), ...config },
-      open(transition2, focus) {
-        return open$1.call(root, this, transition2, focus);
-      },
-      close(transition2, focus) {
-        return close$1.call(root, this, transition2, focus);
-      },
-      replace(transition2, focus) {
-        return replace.call(root, this, transition2, focus);
-      },
-      deregister() {
-        return deregister$1.call(root, this);
-      },
-      teleport(ref = this.getSetting("teleport"), method = this.getSetting("teleportMethod")) {
-        if (!this.returnRef) {
-          this.returnRef = teleport(this.el, ref, method);
-          return this.el;
-        } else {
-          console.error("Element has already been teleported:", this.el);
-          return false;
-        }
-      },
-      teleportReturn() {
-        if (this.returnRef) {
-          this.returnRef = teleport(this.el, this.returnRef);
-          return this.el;
-        } else {
-          console.error("No return reference found:", this.el);
-          return false;
-        }
-      },
-      getSetting(key) {
-        return key in this.settings ? this.settings[key] : root.settings[key];
-      }
-    };
-    const dialog = el.querySelector(entry.getSetting("selectorDialog"));
-    entry.dialog = dialog ? dialog : el;
-    entry.dialog.setAttribute("aria-modal", "true");
-    if (!entry.dialog.hasAttribute("role")) {
-      entry.dialog.setAttribute("role", "dialog");
-    }
-    if (entry.getSetting("setTabindex")) {
-      entry.dialog.setAttribute("tabindex", "-1");
-    }
-    if (entry.getSetting("teleport")) {
-      entry.teleport();
-    }
-    this.collection.push(entry);
-    if (entry.el.classList.contains(this.settings.stateOpened)) {
-      await entry.open(false);
-    } else {
-      entry.el.classList.remove(this.settings.stateOpening);
-      entry.el.classList.remove(this.settings.stateClosing);
-      entry.el.classList.add(this.settings.stateClosed);
-    }
-    return entry;
-  }
   function stack(settings) {
     const stackArray = [];
     return {
@@ -1078,7 +1140,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         return [...stackArray];
       },
       get top() {
-        return stackArray[stackArray.length - 1];
+        const result = stackArray[stackArray.length - 1];
+        return result ? result : null;
       },
       updateIndex() {
         stackArray.forEach((entry, index2) => {
@@ -1087,8 +1150,8 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
           entry.el.style.zIndex = parseInt(value) + index2 + 1;
         });
       },
-      updateGlobalState() {
-        updateGlobalState(this.top, settings);
+      setGlobalState() {
+        setGlobalState(this.top, settings.selectorInert, settings.selectorOverflow);
         this.updateIndex();
       },
       add(entry) {
@@ -1096,7 +1159,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         const value = getComputedStyle(entry.el)["z-index"];
         entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
         stackArray.push(entry);
-        this.updateGlobalState();
+        this.setGlobalState();
       },
       remove(entry) {
         const index2 = stackArray.findIndex((item) => {
@@ -1105,7 +1168,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
         if (index2 >= 0) {
           entry.el.style.zIndex = null;
           stackArray.splice(index2, 1);
-          this.updateGlobalState();
+          this.setGlobalState();
         }
       },
       moveToTop(entry) {
@@ -1121,61 +1184,28 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
   }
   class Modal extends Collection {
     constructor(options) {
-      super();
+      super({ ...defaults$1, ...options });
       __privateAdd(this, _handleClick2);
       __privateAdd(this, _handleKeydown2);
-      this.defaults = defaults$1;
-      this.settings = { ...this.defaults, ...options };
       this.trigger = null;
       this.focusTrap = new FocusTrap();
-      this.stack = stack(this.settings);
       __privateSet(this, _handleClick2, handleClick$1.bind(this));
       __privateSet(this, _handleKeydown2, handleKeydown$1.bind(this));
-      if (this.settings.autoMount) this.mount();
+      this.stack = stack(this.settings);
     }
     get active() {
       return this.stack.top;
     }
-    async mount(options) {
-      if (options) this.settings = { ...this.settings, ...options };
-      const modals = document.querySelectorAll(this.settings.selectorModal);
-      await this.registerCollection(modals);
-      if (this.settings.eventListeners) {
-        this.mountEventListeners();
-      }
-      return this;
-    }
-    async unmount() {
-      this.trigger = null;
-      await this.deregisterCollection();
-      if (this.settings.eventListeners) {
-        this.unmountEventListeners();
-      }
-      return this;
-    }
-    mountEventListeners() {
-      document.addEventListener("click", __privateGet(this, _handleClick2), false);
-      document.addEventListener("keydown", __privateGet(this, _handleKeydown2), false);
-    }
-    unmountEventListeners() {
-      document.removeEventListener("click", __privateGet(this, _handleClick2), false);
-      document.removeEventListener("keydown", __privateGet(this, _handleKeydown2), false);
-    }
-    register(query, config = {}) {
-      let el = typeof query == "string" ? document.getElementById(query) : query;
-      return el ? register$1.call(this, el, config) : Promise.reject(new Error(`Failed to register; modal not found with ID of: "${query.id || query}".`));
-    }
-    deregister(query) {
-      let obj = this.get(query.id || query);
-      return obj ? deregister$1.call(this, obj) : Promise.reject(new Error(`Failed to deregister; modal does not exist in collection with ID of: "${query.id || query}".`));
+    async createEntry(query, config) {
+      return new ModalEntry(this, query, config);
     }
-    open(id, transition2, focus) {
+    async open(id, transition2, focus) {
       return open$1.call(this, id, transition2, focus);
     }
-    close(id, transition2, focus) {
+    async close(id, transition2, focus) {
       return close$1.call(this, id, transition2, focus);
     }
-    replace(id, transition2, focus) {
+    async replace(id, transition2, focus) {
       return replace.call(this, id, transition2, focus);
     }
     async closeAll(exclude = false, transition2, focus = true) {
@@ -1185,50 +1215,71 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
       return result;
     }
+    async afterMount() {
+      document.addEventListener("click", __privateGet(this, _handleClick2), false);
+      document.addEventListener("keydown", __privateGet(this, _handleKeydown2), false);
+    }
+    async beforeUnmount() {
+      this.trigger = null;
+    }
+    async afterUnmount() {
+      document.removeEventListener("click", __privateGet(this, _handleClick2), false);
+      document.removeEventListener("keydown", __privateGet(this, _handleKeydown2), false);
+    }
   }
   _handleClick2 = new WeakMap();
   _handleKeydown2 = new WeakMap();
   const defaults = {
-    autoMount: false,
     // Selectors
-    selectorPopover: ".popover",
+    selector: ".popover",
     selectorTooltip: ".popover_tooltip",
     selectorArrow: ".popover__arrow",
     // State classes
     stateActive: "is-active",
-    // Feature settings
-    eventListeners: true,
-    eventType: "click",
+    // Custom properties and their defaults
     placement: "bottom",
-    hoverToggleDelay: 0
+    event: "click",
+    offset: 0,
+    flipPadding: 0,
+    shiftPadding: 0,
+    arrowPadding: 0,
+    toggleDelay: 0,
+    // Feature settings
+    teleport: null,
+    teleportMethod: "append"
   };
-  function getConfig(el, settings) {
-    const styles = getComputedStyle(el);
-    const config = {
-      "placement": settings.placement,
-      "event": settings.eventType,
-      "offset": 0,
-      "overflow-padding": 0,
-      "flip-padding": 0,
-      "arrow-element": settings.selectorArrow,
-      "arrow-padding": 0,
-      "toggle-delay": settings.hoverToggleDelay
-    };
-    for (const prop in config) {
-      const prefix = getPrefix();
-      const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim();
-      if (value) {
-        config[prop] = value;
+  function applyPositionStyle(el, x, y) {
+    Object.assign(el.style, {
+      left: x != null ? `${x}px` : "",
+      top: y != null ? `${y}px` : ""
+    });
+  }
+  function getDelay(popover, index2) {
+    let value = popover.getSetting("toggle-delay");
+    if (typeof value == "string") {
+      if (value.indexOf(",") > -1) {
+        value = value.split(",");
       }
+      if (value.indexOf(" ") > -1) {
+        value = value.split(" ");
+      }
+    }
+    if (Array.isArray(value)) {
+      value = value[index2];
+    }
+    const number = Number(value);
+    if (!Number.isNaN(number)) {
+      return number;
+    } else {
+      throw new Error(`Provided delay value is not a number: "${value}"`);
     }
-    return config;
   }
   function getPadding(value) {
     let padding;
     const array = typeof value === "string" ? value.trim().split(" ") : [value];
-    array.forEach(function(item, index2) {
-      array[index2] = parseInt(item, 10);
-    });
+    for (let index2 = 0; index2 < array.length; index2++) {
+      array[index2] = Number(array[index2]);
+    }
     switch (array.length) {
       case 1:
         padding = array[0];
@@ -1263,29 +1314,20 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }
     return padding;
   }
-  function getModifiers(options) {
-    return [{
-      name: "offset",
-      options: {
-        offset: [0, parseInt(options["offset"], 10)]
-      }
-    }, {
-      name: "preventOverflow",
-      options: {
-        padding: getPadding(options["overflow-padding"])
-      }
-    }, {
-      name: "flip",
-      options: {
-        padding: getPadding(options["flip-padding"])
-      }
-    }, {
-      name: "arrow",
-      options: {
-        element: options["arrow-element"],
-        padding: getPadding(options["arrow-padding"])
+  function getMiddlewareOptions(popover) {
+    return {
+      offset: Number(popover.getSetting("offset")),
+      flip: {
+        padding: getPadding(popover.getSetting("flip-padding"))
+      },
+      shift: {
+        padding: getPadding(popover.getSetting("shift-padding"))
+      },
+      arrow: {
+        element: popover.getSetting("selectorArrow"),
+        padding: getPadding(popover.getSetting("arrow-padding"))
       }
-    }];
+    };
   }
   function getPopover(query) {
     const entry = typeof query === "string" ? this.get(query) : this.get(query.id);
@@ -1295,38 +1337,6 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       throw new Error(`Popover not found in collection with id of "${query}".`);
     }
   }
-  function getPopoverID(obj) {
-    if (typeof obj === "string") {
-      return obj;
-    } else if (typeof obj.hasAttribute === "function") {
-      if (obj.closest(this.settings.selectorPopover)) {
-        obj = obj.closest(this.settings.selectorPopover);
-        return obj.id;
-      } else if (obj.hasAttribute("aria-controls")) {
-        return obj.getAttribute("aria-controls");
-      } else if (obj.hasAttribute("aria-describedby")) {
-        return obj.getAttribute("aria-describedby");
-      } else return false;
-    } else return false;
-  }
-  function getPopoverElements(query) {
-    const id = getPopoverID.call(this, query);
-    if (id) {
-      const popover = document.querySelector(`#${id}`);
-      const trigger = document.querySelector(`[aria-controls="${id}"]`) || document.querySelector(`[aria-describedby="${id}"]`);
-      if (!trigger && !popover) {
-        return { error: new Error(`No popover elements found using the ID: "${id}".`) };
-      } else if (!trigger) {
-        return { error: new Error(`No popover trigger associated with the provided popover: "${id}".`) };
-      } else if (!popover) {
-        return { error: new Error(`No popover associated with the provided popover trigger: "${id}".`) };
-      } else {
-        return { popover, trigger };
-      }
-    } else {
-      return { error: new Error("Could not resolve the popover ID.") };
-    }
-  }
   async function close(query) {
     const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
     if (popover && popover.state === "opened") {
@@ -1335,13 +1345,7 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       if (!popover.isTooltip) {
         popover.trigger.setAttribute("aria-expanded", "false");
       }
-      popover.popper.setOptions({
-        placement: popover.config["placement"],
-        modifiers: [
-          { name: "eventListeners", enabled: false },
-          ...getModifiers(popover.config)
-        ]
-      });
+      popover.floatingCleanup();
       popover.state = "closed";
       if (popover.trigger === this.trigger) {
         this.trigger = null;
@@ -1373,48 +1377,48 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     }, 1);
   }
   function handleClick(popover) {
-    const tooltipId = popover.trigger.getAttribute("aria-describedby");
-    if (tooltipId) {
-      const entry = this.get(tooltipId);
-      if (entry.isTooltip) {
-        if (entry.toggleDelayId) {
-          clearTimeout(entry.toggleDelayId);
-        }
-        entry.close();
-      }
-    }
     if (popover.state === "opened") {
       popover.close();
     } else {
       this.trigger = popover.trigger;
       popover.open();
-      handleDocumentClick.call(this, popover);
+    }
+  }
+  function handleTooltipClick(popover) {
+    if (popover.isTooltip) {
+      if (popover.toggleDelayId) {
+        clearTimeout(popover.toggleDelayId);
+      }
+      popover.close();
     }
   }
   function handleMouseEnter(popover, event) {
+    popover.isHovered = event;
     if (event.type == "focus" && !popover.trigger.matches(":focus-visible")) {
       return;
     }
-    const isExpanded = popover.trigger.getAttribute("aria-expanded");
-    if (isExpanded && isExpanded == "true") {
-      return;
-    }
     if (popover.toggleDelayId) {
       clearTimeout(popover.toggleDelayId);
     }
-    const delay = this.activeTooltip ? 0 : popover.config["toggle-delay"];
-    if (this.activeTooltip) this.activeTooltip.close();
+    const isExpanded = popover.trigger.getAttribute("aria-expanded");
+    if (isExpanded && isExpanded == "true") return;
+    const delay = this.activeHover ? 0 : getDelay(popover, 0);
+    if (this.activeHover) this.activeHover.close();
     popover.toggleDelayId = setTimeout(() => {
       if (popover.id) popover.open();
     }, delay);
   }
-  function handleMouseLeave(popover) {
-    if (popover.toggleDelayId) {
-      clearTimeout(popover.toggleDelayId);
-    }
-    popover.toggleDelayId = setTimeout(() => {
-      closeCheck.call(this, popover);
-    }, popover.config["toggle-delay"]);
+  function handleMouseLeave(popover, event) {
+    setTimeout(() => {
+      popover.isHovered = event;
+      if (popover.isHovered) return;
+      if (popover.toggleDelayId) {
+        clearTimeout(popover.toggleDelayId);
+      }
+      popover.toggleDelayId = setTimeout(() => {
+        closeCheck.call(this, popover);
+      }, getDelay(popover, 1));
+    }, 1);
   }
   function handleKeydown(event) {
     switch (event.key) {
@@ -1451,567 +1455,1162 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       }
     });
   }
-  var top = "top";
-  var bottom = "bottom";
-  var right = "right";
-  var left = "left";
-  var auto = "auto";
-  var basePlacements = [top, bottom, right, left];
-  var start = "start";
-  var end = "end";
-  var clippingParents = "clippingParents";
-  var viewport = "viewport";
-  var popper = "popper";
-  var reference = "reference";
-  var variationPlacements = /* @__PURE__ */ basePlacements.reduce(function(acc, placement) {
-    return acc.concat([placement + "-" + start, placement + "-" + end]);
-  }, []);
-  var placements = /* @__PURE__ */ [].concat(basePlacements, [auto]).reduce(function(acc, placement) {
-    return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
-  }, []);
-  var beforeRead = "beforeRead";
-  var read = "read";
-  var afterRead = "afterRead";
-  var beforeMain = "beforeMain";
-  var main = "main";
-  var afterMain = "afterMain";
-  var beforeWrite = "beforeWrite";
-  var write = "write";
-  var afterWrite = "afterWrite";
-  var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
-  function getNodeName(element) {
-    return element ? (element.nodeName || "").toLowerCase() : null;
-  }
-  function getWindow(node) {
-    if (node == null) {
-      return window;
+  class PopoverEntry extends CollectionEntry {
+    constructor(context, query, options = {}) {
+      super(context, query, options);
+      __privateAdd(this, _eventListeners);
+      __privateAdd(this, _isHovered);
+      this.state = "closed";
+      this.toggleDelayId = null;
+      this.trigger = null;
+      __privateSet(this, _eventListeners, null);
+      __privateSet(this, _isHovered, {
+        el: false,
+        trigger: false
+      });
+      this.floatingCleanup = () => {
+      };
     }
-    if (node.toString() !== "[object Window]") {
-      var ownerDocument = node.ownerDocument;
-      return ownerDocument ? ownerDocument.defaultView || window : window;
+    get isTooltip() {
+      return !!this.el.closest(this.getSetting("selectorTooltip")) || this.el.getAttribute("role") == "tooltip";
     }
-    return node;
-  }
-  function isElement(node) {
-    var OwnElement = getWindow(node).Element;
-    return node instanceof OwnElement || node instanceof Element;
-  }
-  function isHTMLElement(node) {
-    var OwnElement = getWindow(node).HTMLElement;
-    return node instanceof OwnElement || node instanceof HTMLElement;
-  }
-  function isShadowRoot(node) {
-    if (typeof ShadowRoot === "undefined") {
-      return false;
+    get isHovered() {
+      return __privateGet(this, _isHovered).el || __privateGet(this, _isHovered).trigger;
     }
-    var OwnElement = getWindow(node).ShadowRoot;
-    return node instanceof OwnElement || node instanceof ShadowRoot;
-  }
-  function applyStyles(_ref) {
-    var state = _ref.state;
-    Object.keys(state.elements).forEach(function(name) {
-      var style = state.styles[name] || {};
-      var attributes = state.attributes[name] || {};
-      var element = state.elements[name];
-      if (!isHTMLElement(element) || !getNodeName(element)) {
-        return;
+    set isHovered(event) {
+      const state = event.type == "mouseenter" ? true : event.type == "mouseleave" ? false : void 0;
+      if (state == void 0) return;
+      switch (event.target) {
+        case this.el:
+          __privateGet(this, _isHovered).el = state;
+          break;
+        case this.trigger:
+          __privateGet(this, _isHovered).trigger = state;
+          break;
       }
-      Object.assign(element.style, style);
-      Object.keys(attributes).forEach(function(name2) {
-        var value = attributes[name2];
-        if (value === false) {
-          element.removeAttribute(name2);
+    }
+    async open() {
+      return this.context.open(this);
+    }
+    async close() {
+      return this.context.close(this);
+    }
+    async deregister() {
+      return this.context.deregister(this.id);
+    }
+    registerEventListeners() {
+      if (!__privateGet(this, _eventListeners)) {
+        const eventType = this.getSetting("event");
+        if (eventType === "hover") {
+          __privateSet(this, _eventListeners, [{
+            el: ["el", "trigger"],
+            type: ["mouseenter", "focus"],
+            listener: handleMouseEnter.bind(this.context, this)
+          }, {
+            el: ["el", "trigger"],
+            type: ["mouseleave", "focusout"],
+            listener: handleMouseLeave.bind(this.context, this)
+          }, {
+            el: ["trigger"],
+            type: ["click"],
+            listener: handleTooltipClick.bind(this.context, this)
+          }]);
+          __privateGet(this, _eventListeners).forEach((evObj) => {
+            evObj.el.forEach((el) => {
+              evObj.type.forEach((type) => {
+                this[el].addEventListener(type, evObj.listener, false);
+              });
+            });
+          });
         } else {
-          element.setAttribute(name2, value === true ? "" : value);
-        }
-      });
-    });
-  }
-  function effect$2(_ref2) {
-    var state = _ref2.state;
-    var initialStyles = {
-      popper: {
-        position: state.options.strategy,
-        left: "0",
-        top: "0",
-        margin: "0"
-      },
-      arrow: {
-        position: "absolute"
-      },
-      reference: {}
-    };
-    Object.assign(state.elements.popper.style, initialStyles.popper);
-    state.styles = initialStyles;
-    if (state.elements.arrow) {
-      Object.assign(state.elements.arrow.style, initialStyles.arrow);
-    }
-    return function() {
-      Object.keys(state.elements).forEach(function(name) {
-        var element = state.elements[name];
-        var attributes = state.attributes[name] || {};
-        var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]);
-        var style = styleProperties.reduce(function(style2, property) {
-          style2[property] = "";
-          return style2;
-        }, {});
-        if (!isHTMLElement(element) || !getNodeName(element)) {
-          return;
+          __privateSet(this, _eventListeners, [{
+            el: ["trigger"],
+            type: ["click"],
+            listener: handleClick.bind(this.context, this)
+          }]);
+          __privateGet(this, _eventListeners).forEach((evObj) => {
+            evObj.el.forEach((el) => {
+              evObj.type.forEach((type) => {
+                this[el].addEventListener(type, evObj.listener, false);
+              });
+            });
+          });
         }
-        Object.assign(element.style, style);
-        Object.keys(attributes).forEach(function(attribute) {
-          element.removeAttribute(attribute);
+      }
+    }
+    deregisterEventListeners() {
+      if (__privateGet(this, _eventListeners)) {
+        __privateGet(this, _eventListeners).forEach((evObj) => {
+          evObj.el.forEach((el) => {
+            evObj.type.forEach((type) => {
+              this[el].removeEventListener(type, evObj.listener, false);
+            });
+          });
         });
-      });
-    };
+        __privateSet(this, _eventListeners, null);
+      }
+    }
+    async beforeMount() {
+      this.trigger = document.querySelector(
+        `[aria-controls="${this.id}"], [aria-describedby="${this.id}"]`
+      );
+      if (this.isTooltip) {
+        this.settings.event = "hover";
+        this.el.setAttribute("role", "tooltip");
+      } else {
+        this.trigger.setAttribute("aria-expanded", "false");
+      }
+      this.registerEventListeners();
+    }
+    async afterRegister() {
+      if (this.el.classList.contains(this.getSetting("stateActive"))) {
+        await this.open();
+      } else {
+        this.el.inert = true;
+      }
+    }
+    async beforeUnmount() {
+      if (this.state === "opened") {
+        await this.close();
+      }
+      this.floatingCleanup();
+      this.deregisterEventListeners();
+    }
   }
-  const applyStyles$1 = {
-    name: "applyStyles",
-    enabled: true,
-    phase: "write",
-    fn: applyStyles,
-    effect: effect$2,
-    requires: ["computeStyles"]
+  _eventListeners = new WeakMap();
+  _isHovered = new WeakMap();
+  const min = Math.min;
+  const max = Math.max;
+  const round = Math.round;
+  const floor = Math.floor;
+  const createCoords = (v) => ({
+    x: v,
+    y: v
+  });
+  const oppositeSideMap = {
+    left: "right",
+    right: "left",
+    bottom: "top",
+    top: "bottom"
+  };
+  const oppositeAlignmentMap = {
+    start: "end",
+    end: "start"
   };
-  function getBasePlacement(placement) {
+  function clamp(start, value, end) {
+    return max(start, min(value, end));
+  }
+  function evaluate(value, param) {
+    return typeof value === "function" ? value(param) : value;
+  }
+  function getSide(placement) {
     return placement.split("-")[0];
   }
-  var max = Math.max;
-  var min = Math.min;
-  var round = Math.round;
-  function getUAString() {
-    var uaData = navigator.userAgentData;
-    if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
-      return uaData.brands.map(function(item) {
-        return item.brand + "/" + item.version;
-      }).join(" ");
-    }
-    return navigator.userAgent;
+  function getAlignment(placement) {
+    return placement.split("-")[1];
   }
-  function isLayoutViewport() {
-    return !/^((?!chrome|android).)*safari/i.test(getUAString());
+  function getOppositeAxis(axis) {
+    return axis === "x" ? "y" : "x";
   }
-  function getBoundingClientRect(element, includeScale, isFixedStrategy) {
-    if (includeScale === void 0) {
-      includeScale = false;
+  function getAxisLength(axis) {
+    return axis === "y" ? "height" : "width";
+  }
+  function getSideAxis(placement) {
+    return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
+  }
+  function getAlignmentAxis(placement) {
+    return getOppositeAxis(getSideAxis(placement));
+  }
+  function getAlignmentSides(placement, rects, rtl) {
+    if (rtl === void 0) {
+      rtl = false;
+    }
+    const alignment = getAlignment(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const length = getAxisLength(alignmentAxis);
+    let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+    if (rects.reference[length] > rects.floating[length]) {
+      mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+    }
+    return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+  }
+  function getExpandedPlacements(placement) {
+    const oppositePlacement = getOppositePlacement(placement);
+    return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+  }
+  function getOppositeAlignmentPlacement(placement) {
+    return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+  }
+  function getSideList(side, isStart, rtl) {
+    const lr = ["left", "right"];
+    const rl = ["right", "left"];
+    const tb = ["top", "bottom"];
+    const bt = ["bottom", "top"];
+    switch (side) {
+      case "top":
+      case "bottom":
+        if (rtl) return isStart ? rl : lr;
+        return isStart ? lr : rl;
+      case "left":
+      case "right":
+        return isStart ? tb : bt;
+      default:
+        return [];
     }
-    if (isFixedStrategy === void 0) {
-      isFixedStrategy = false;
+  }
+  function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+    const alignment = getAlignment(placement);
+    let list = getSideList(getSide(placement), direction === "start", rtl);
+    if (alignment) {
+      list = list.map((side) => side + "-" + alignment);
+      if (flipAlignment) {
+        list = list.concat(list.map(getOppositeAlignmentPlacement));
+      }
     }
-    var clientRect = element.getBoundingClientRect();
-    var scaleX = 1;
-    var scaleY = 1;
-    if (includeScale && isHTMLElement(element)) {
-      scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
-      scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
-    }
-    var _ref = isElement(element) ? getWindow(element) : window, visualViewport = _ref.visualViewport;
-    var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
-    var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
-    var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
-    var width = clientRect.width / scaleX;
-    var height = clientRect.height / scaleY;
+    return list;
+  }
+  function getOppositePlacement(placement) {
+    return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+  }
+  function expandPaddingObject(padding) {
     return {
-      width,
-      height,
-      top: y,
-      right: x + width,
-      bottom: y + height,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      ...padding
+    };
+  }
+  function getPaddingObject(padding) {
+    return typeof padding !== "number" ? expandPaddingObject(padding) : {
+      top: padding,
+      right: padding,
+      bottom: padding,
+      left: padding
+    };
+  }
+  function rectToClientRect(rect) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = rect;
+    return {
+      width,
+      height,
+      top: y,
       left: x,
+      right: x + width,
+      bottom: y + height,
       x,
       y
     };
   }
-  function getLayoutRect(element) {
-    var clientRect = getBoundingClientRect(element);
-    var width = element.offsetWidth;
-    var height = element.offsetHeight;
-    if (Math.abs(clientRect.width - width) <= 1) {
-      width = clientRect.width;
+  function computeCoordsFromPlacement(_ref, placement, rtl) {
+    let {
+      reference,
+      floating
+    } = _ref;
+    const sideAxis = getSideAxis(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const alignLength = getAxisLength(alignmentAxis);
+    const side = getSide(placement);
+    const isVertical = sideAxis === "y";
+    const commonX = reference.x + reference.width / 2 - floating.width / 2;
+    const commonY = reference.y + reference.height / 2 - floating.height / 2;
+    const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+    let coords;
+    switch (side) {
+      case "top":
+        coords = {
+          x: commonX,
+          y: reference.y - floating.height
+        };
+        break;
+      case "bottom":
+        coords = {
+          x: commonX,
+          y: reference.y + reference.height
+        };
+        break;
+      case "right":
+        coords = {
+          x: reference.x + reference.width,
+          y: commonY
+        };
+        break;
+      case "left":
+        coords = {
+          x: reference.x - floating.width,
+          y: commonY
+        };
+        break;
+      default:
+        coords = {
+          x: reference.x,
+          y: reference.y
+        };
     }
-    if (Math.abs(clientRect.height - height) <= 1) {
-      height = clientRect.height;
+    switch (getAlignment(placement)) {
+      case "start":
+        coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+      case "end":
+        coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+    }
+    return coords;
+  }
+  const computePosition$1 = async (reference, floating, config) => {
+    const {
+      placement = "bottom",
+      strategy = "absolute",
+      middleware = [],
+      platform: platform2
+    } = config;
+    const validMiddleware = middleware.filter(Boolean);
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
+    let rects = await platform2.getElementRects({
+      reference,
+      floating,
+      strategy
+    });
+    let {
+      x,
+      y
+    } = computeCoordsFromPlacement(rects, placement, rtl);
+    let statefulPlacement = placement;
+    let middlewareData = {};
+    let resetCount = 0;
+    for (let i = 0; i < validMiddleware.length; i++) {
+      const {
+        name,
+        fn
+      } = validMiddleware[i];
+      const {
+        x: nextX,
+        y: nextY,
+        data,
+        reset
+      } = await fn({
+        x,
+        y,
+        initialPlacement: placement,
+        placement: statefulPlacement,
+        strategy,
+        middlewareData,
+        rects,
+        platform: platform2,
+        elements: {
+          reference,
+          floating
+        }
+      });
+      x = nextX != null ? nextX : x;
+      y = nextY != null ? nextY : y;
+      middlewareData = {
+        ...middlewareData,
+        [name]: {
+          ...middlewareData[name],
+          ...data
+        }
+      };
+      if (reset && resetCount <= 50) {
+        resetCount++;
+        if (typeof reset === "object") {
+          if (reset.placement) {
+            statefulPlacement = reset.placement;
+          }
+          if (reset.rects) {
+            rects = reset.rects === true ? await platform2.getElementRects({
+              reference,
+              floating,
+              strategy
+            }) : reset.rects;
+          }
+          ({
+            x,
+            y
+          } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+        }
+        i = -1;
+      }
     }
     return {
-      x: element.offsetLeft,
-      y: element.offsetTop,
-      width,
-      height
+      x,
+      y,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData
+    };
+  };
+  async function detectOverflow(state, options) {
+    var _await$platform$isEle;
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      x,
+      y,
+      platform: platform2,
+      rects,
+      elements,
+      strategy
+    } = state;
+    const {
+      boundary = "clippingAncestors",
+      rootBoundary = "viewport",
+      elementContext = "floating",
+      altBoundary = false,
+      padding = 0
+    } = evaluate(options, state);
+    const paddingObject = getPaddingObject(padding);
+    const altContext = elementContext === "floating" ? "reference" : "floating";
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+      boundary,
+      rootBoundary,
+      strategy
+    }));
+    const rect = elementContext === "floating" ? {
+      x,
+      y,
+      width: rects.floating.width,
+      height: rects.floating.height
+    } : rects.reference;
+    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+      x: 1,
+      y: 1
+    } : {
+      x: 1,
+      y: 1
+    };
+    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    }) : rect);
+    return {
+      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
     };
   }
-  function contains(parent, child) {
-    var rootNode = child.getRootNode && child.getRootNode();
-    if (parent.contains(child)) {
-      return true;
-    } else if (rootNode && isShadowRoot(rootNode)) {
-      var next = child;
-      do {
-        if (next && parent.isSameNode(next)) {
-          return true;
+  const arrow$1 = (options) => ({
+    name: "arrow",
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        rects,
+        platform: platform2,
+        elements,
+        middlewareData
+      } = state;
+      const {
+        element,
+        padding = 0
+      } = evaluate(options, state) || {};
+      if (element == null) {
+        return {};
+      }
+      const paddingObject = getPaddingObject(padding);
+      const coords = {
+        x,
+        y
+      };
+      const axis = getAlignmentAxis(placement);
+      const length = getAxisLength(axis);
+      const arrowDimensions = await platform2.getDimensions(element);
+      const isYAxis = axis === "y";
+      const minProp = isYAxis ? "top" : "left";
+      const maxProp = isYAxis ? "bottom" : "right";
+      const clientProp = isYAxis ? "clientHeight" : "clientWidth";
+      const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+      const startDiff = coords[axis] - rects.reference[axis];
+      const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
+      let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+      if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
+        clientSize = elements.floating[clientProp] || rects.floating[length];
+      }
+      const centerToReference = endDiff / 2 - startDiff / 2;
+      const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+      const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+      const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+      const min$1 = minPadding;
+      const max2 = clientSize - arrowDimensions[length] - maxPadding;
+      const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+      const offset2 = clamp(min$1, center, max2);
+      const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+      const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
+      return {
+        [axis]: coords[axis] + alignmentOffset,
+        data: {
+          [axis]: offset2,
+          centerOffset: center - offset2 - alignmentOffset,
+          ...shouldAddOffset && {
+            alignmentOffset
+          }
+        },
+        reset: shouldAddOffset
+      };
+    }
+  });
+  const flip$1 = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "flip",
+      options,
+      async fn(state) {
+        var _middlewareData$arrow, _middlewareData$flip;
+        const {
+          placement,
+          middlewareData,
+          rects,
+          initialPlacement,
+          platform: platform2,
+          elements
+        } = state;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = true,
+          fallbackPlacements: specifiedFallbackPlacements,
+          fallbackStrategy = "bestFit",
+          fallbackAxisSideDirection = "none",
+          flipAlignment = true,
+          ...detectOverflowOptions
+        } = evaluate(options, state);
+        if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
         }
-        next = next.parentNode || next.host;
-      } while (next);
+        const side = getSide(placement);
+        const initialSideAxis = getSideAxis(initialPlacement);
+        const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+        const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+        const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+        const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
+        if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+          fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+        }
+        const placements = [initialPlacement, ...fallbackPlacements];
+        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const overflows = [];
+        let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+        if (checkMainAxis) {
+          overflows.push(overflow[side]);
+        }
+        if (checkCrossAxis) {
+          const sides = getAlignmentSides(placement, rects, rtl);
+          overflows.push(overflow[sides[0]], overflow[sides[1]]);
+        }
+        overflowsData = [...overflowsData, {
+          placement,
+          overflows
+        }];
+        if (!overflows.every((side2) => side2 <= 0)) {
+          var _middlewareData$flip2, _overflowsData$filter;
+          const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+          const nextPlacement = placements[nextIndex];
+          if (nextPlacement) {
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
+          let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+          if (!resetPlacement) {
+            switch (fallbackStrategy) {
+              case "bestFit": {
+                var _overflowsData$filter2;
+                const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === "y";
+                  }
+                  return true;
+                }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement2) {
+                  resetPlacement = placement2;
+                }
+                break;
+              }
+              case "initialPlacement":
+                resetPlacement = initialPlacement;
+                break;
+            }
+          }
+          if (placement !== resetPlacement) {
+            return {
+              reset: {
+                placement: resetPlacement
+              }
+            };
+          }
+        }
+        return {};
+      }
+    };
+  };
+  async function convertValueToCoords(state, options) {
+    const {
+      placement,
+      platform: platform2,
+      elements
+    } = state;
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+    const side = getSide(placement);
+    const alignment = getAlignment(placement);
+    const isVertical = getSideAxis(placement) === "y";
+    const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
+    const crossAxisMulti = rtl && isVertical ? -1 : 1;
+    const rawValue = evaluate(options, state);
+    let {
+      mainAxis,
+      crossAxis,
+      alignmentAxis
+    } = typeof rawValue === "number" ? {
+      mainAxis: rawValue,
+      crossAxis: 0,
+      alignmentAxis: null
+    } : {
+      mainAxis: rawValue.mainAxis || 0,
+      crossAxis: rawValue.crossAxis || 0,
+      alignmentAxis: rawValue.alignmentAxis
+    };
+    if (alignment && typeof alignmentAxis === "number") {
+      crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
     }
-    return false;
+    return isVertical ? {
+      x: crossAxis * crossAxisMulti,
+      y: mainAxis * mainAxisMulti
+    } : {
+      x: mainAxis * mainAxisMulti,
+      y: crossAxis * crossAxisMulti
+    };
   }
-  function getComputedStyle$1(element) {
-    return getWindow(element).getComputedStyle(element);
+  const offset$1 = function(options) {
+    if (options === void 0) {
+      options = 0;
+    }
+    return {
+      name: "offset",
+      options,
+      async fn(state) {
+        var _middlewareData$offse, _middlewareData$arrow;
+        const {
+          x,
+          y,
+          placement,
+          middlewareData
+        } = state;
+        const diffCoords = await convertValueToCoords(state, options);
+        if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
+        }
+        return {
+          x: x + diffCoords.x,
+          y: y + diffCoords.y,
+          data: {
+            ...diffCoords,
+            placement
+          }
+        };
+      }
+    };
+  };
+  const shift$1 = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "shift",
+      options,
+      async fn(state) {
+        const {
+          x,
+          y,
+          placement
+        } = state;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = false,
+          limiter = {
+            fn: (_ref) => {
+              let {
+                x: x2,
+                y: y2
+              } = _ref;
+              return {
+                x: x2,
+                y: y2
+              };
+            }
+          },
+          ...detectOverflowOptions
+        } = evaluate(options, state);
+        const coords = {
+          x,
+          y
+        };
+        const overflow = await detectOverflow(state, detectOverflowOptions);
+        const crossAxis = getSideAxis(getSide(placement));
+        const mainAxis = getOppositeAxis(crossAxis);
+        let mainAxisCoord = coords[mainAxis];
+        let crossAxisCoord = coords[crossAxis];
+        if (checkMainAxis) {
+          const minSide = mainAxis === "y" ? "top" : "left";
+          const maxSide = mainAxis === "y" ? "bottom" : "right";
+          const min2 = mainAxisCoord + overflow[minSide];
+          const max2 = mainAxisCoord - overflow[maxSide];
+          mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+        }
+        if (checkCrossAxis) {
+          const minSide = crossAxis === "y" ? "top" : "left";
+          const maxSide = crossAxis === "y" ? "bottom" : "right";
+          const min2 = crossAxisCoord + overflow[minSide];
+          const max2 = crossAxisCoord - overflow[maxSide];
+          crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+        }
+        const limitedCoords = limiter.fn({
+          ...state,
+          [mainAxis]: mainAxisCoord,
+          [crossAxis]: crossAxisCoord
+        });
+        return {
+          ...limitedCoords,
+          data: {
+            x: limitedCoords.x - x,
+            y: limitedCoords.y - y,
+            enabled: {
+              [mainAxis]: checkMainAxis,
+              [crossAxis]: checkCrossAxis
+            }
+          }
+        };
+      }
+    };
+  };
+  const limitShift$1 = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      options,
+      fn(state) {
+        const {
+          x,
+          y,
+          placement,
+          rects,
+          middlewareData
+        } = state;
+        const {
+          offset: offset2 = 0,
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = true
+        } = evaluate(options, state);
+        const coords = {
+          x,
+          y
+        };
+        const crossAxis = getSideAxis(placement);
+        const mainAxis = getOppositeAxis(crossAxis);
+        let mainAxisCoord = coords[mainAxis];
+        let crossAxisCoord = coords[crossAxis];
+        const rawOffset = evaluate(offset2, state);
+        const computedOffset = typeof rawOffset === "number" ? {
+          mainAxis: rawOffset,
+          crossAxis: 0
+        } : {
+          mainAxis: 0,
+          crossAxis: 0,
+          ...rawOffset
+        };
+        if (checkMainAxis) {
+          const len = mainAxis === "y" ? "height" : "width";
+          const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
+          const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
+          if (mainAxisCoord < limitMin) {
+            mainAxisCoord = limitMin;
+          } else if (mainAxisCoord > limitMax) {
+            mainAxisCoord = limitMax;
+          }
+        }
+        if (checkCrossAxis) {
+          var _middlewareData$offse, _middlewareData$offse2;
+          const len = mainAxis === "y" ? "width" : "height";
+          const isOriginSide = ["top", "left"].includes(getSide(placement));
+          const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
+          const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
+          if (crossAxisCoord < limitMin) {
+            crossAxisCoord = limitMin;
+          } else if (crossAxisCoord > limitMax) {
+            crossAxisCoord = limitMax;
+          }
+        }
+        return {
+          [mainAxis]: mainAxisCoord,
+          [crossAxis]: crossAxisCoord
+        };
+      }
+    };
+  };
+  function hasWindow() {
+    return typeof window !== "undefined";
   }
-  function isTableElement(element) {
-    return ["table", "td", "th"].indexOf(getNodeName(element)) >= 0;
-  }
-  function getDocumentElement(element) {
-    return ((isElement(element) ? element.ownerDocument : (
-      // $FlowFixMe[prop-missing]
-      element.document
-    )) || window.document).documentElement;
-  }
-  function getParentNode(element) {
-    if (getNodeName(element) === "html") {
-      return element;
-    }
-    return (
-      // this is a quicker (but less type safe) way to save quite some bytes from the bundle
-      // $FlowFixMe[incompatible-return]
-      // $FlowFixMe[prop-missing]
-      element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
-      element.parentNode || // DOM Element detected
-      (isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
-      // $FlowFixMe[incompatible-call]: HTMLElement is a Node
-      getDocumentElement(element)
-    );
+  function getNodeName(node) {
+    if (isNode(node)) {
+      return (node.nodeName || "").toLowerCase();
+    }
+    return "#document";
   }
-  function getTrueOffsetParent(element) {
-    if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
-    getComputedStyle$1(element).position === "fixed") {
-      return null;
+  function getWindow(node) {
+    var _node$ownerDocument;
+    return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  }
+  function getDocumentElement(node) {
+    var _ref;
+    return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+  }
+  function isNode(value) {
+    if (!hasWindow()) {
+      return false;
     }
-    return element.offsetParent;
+    return value instanceof Node || value instanceof getWindow(value).Node;
   }
-  function getContainingBlock(element) {
-    var isFirefox = /firefox/i.test(getUAString());
-    var isIE = /Trident/i.test(getUAString());
-    if (isIE && isHTMLElement(element)) {
-      var elementCss = getComputedStyle$1(element);
-      if (elementCss.position === "fixed") {
-        return null;
-      }
+  function isElement(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof Element || value instanceof getWindow(value).Element;
+  }
+  function isHTMLElement(value) {
+    if (!hasWindow()) {
+      return false;
     }
-    var currentNode = getParentNode(element);
-    if (isShadowRoot(currentNode)) {
-      currentNode = currentNode.host;
+    return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+  }
+  function isShadowRoot(value) {
+    if (!hasWindow() || typeof ShadowRoot === "undefined") {
+      return false;
     }
-    while (isHTMLElement(currentNode) && ["html", "body"].indexOf(getNodeName(currentNode)) < 0) {
-      var css = getComputedStyle$1(currentNode);
-      if (css.transform !== "none" || css.perspective !== "none" || css.contain === "paint" || ["transform", "perspective"].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === "filter" || isFirefox && css.filter && css.filter !== "none") {
+    return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+  }
+  function isOverflowElement(element) {
+    const {
+      overflow,
+      overflowX,
+      overflowY,
+      display
+    } = getComputedStyle$1(element);
+    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
+  }
+  function isTableElement(element) {
+    return ["table", "td", "th"].includes(getNodeName(element));
+  }
+  function isTopLayer(element) {
+    return [":popover-open", ":modal"].some((selector) => {
+      try {
+        return element.matches(selector);
+      } catch (e) {
+        return false;
+      }
+    });
+  }
+  function isContainingBlock(elementOrCss) {
+    const webkit = isWebKit();
+    const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
+    return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
+  }
+  function getContainingBlock(element) {
+    let currentNode = getParentNode(element);
+    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      if (isContainingBlock(currentNode)) {
         return currentNode;
-      } else {
-        currentNode = currentNode.parentNode;
+      } else if (isTopLayer(currentNode)) {
+        return null;
       }
+      currentNode = getParentNode(currentNode);
     }
     return null;
   }
-  function getOffsetParent(element) {
-    var window2 = getWindow(element);
-    var offsetParent = getTrueOffsetParent(element);
-    while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === "static") {
-      offsetParent = getTrueOffsetParent(offsetParent);
-    }
-    if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle$1(offsetParent).position === "static")) {
-      return window2;
-    }
-    return offsetParent || getContainingBlock(element) || window2;
+  function isWebKit() {
+    if (typeof CSS === "undefined" || !CSS.supports) return false;
+    return CSS.supports("-webkit-backdrop-filter", "none");
   }
-  function getMainAxisFromPlacement(placement) {
-    return ["top", "bottom"].indexOf(placement) >= 0 ? "x" : "y";
+  function isLastTraversableNode(node) {
+    return ["html", "body", "#document"].includes(getNodeName(node));
   }
-  function within(min$1, value, max$1) {
-    return max(min$1, min(value, max$1));
-  }
-  function withinMaxClamp(min2, value, max2) {
-    var v = within(min2, value, max2);
-    return v > max2 ? max2 : v;
+  function getComputedStyle$1(element) {
+    return getWindow(element).getComputedStyle(element);
   }
-  function getFreshSideObject() {
+  function getNodeScroll(element) {
+    if (isElement(element)) {
+      return {
+        scrollLeft: element.scrollLeft,
+        scrollTop: element.scrollTop
+      };
+    }
     return {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
+      scrollLeft: element.scrollX,
+      scrollTop: element.scrollY
     };
   }
-  function mergePaddingObject(paddingObject) {
-    return Object.assign({}, getFreshSideObject(), paddingObject);
-  }
-  function expandToHashMap(value, keys) {
-    return keys.reduce(function(hashMap, key) {
-      hashMap[key] = value;
-      return hashMap;
-    }, {});
+  function getParentNode(node) {
+    if (getNodeName(node) === "html") {
+      return node;
+    }
+    const result = (
+      // Step into the shadow DOM of the parent of a slotted node.
+      node.assignedSlot || // DOM Element detected.
+      node.parentNode || // ShadowRoot detected.
+      isShadowRoot(node) && node.host || // Fallback.
+      getDocumentElement(node)
+    );
+    return isShadowRoot(result) ? result.host : result;
   }
-  var toPaddingObject = function toPaddingObject2(padding, state) {
-    padding = typeof padding === "function" ? padding(Object.assign({}, state.rects, {
-      placement: state.placement
-    })) : padding;
-    return mergePaddingObject(typeof padding !== "number" ? padding : expandToHashMap(padding, basePlacements));
-  };
-  function arrow(_ref) {
-    var _state$modifiersData$;
-    var state = _ref.state, name = _ref.name, options = _ref.options;
-    var arrowElement = state.elements.arrow;
-    var popperOffsets2 = state.modifiersData.popperOffsets;
-    var basePlacement = getBasePlacement(state.placement);
-    var axis = getMainAxisFromPlacement(basePlacement);
-    var isVertical = [left, right].indexOf(basePlacement) >= 0;
-    var len = isVertical ? "height" : "width";
-    if (!arrowElement || !popperOffsets2) {
-      return;
+  function getNearestOverflowAncestor(node) {
+    const parentNode = getParentNode(node);
+    if (isLastTraversableNode(parentNode)) {
+      return node.ownerDocument ? node.ownerDocument.body : node.body;
     }
-    var paddingObject = toPaddingObject(options.padding, state);
-    var arrowRect = getLayoutRect(arrowElement);
-    var minProp = axis === "y" ? top : left;
-    var maxProp = axis === "y" ? bottom : right;
-    var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets2[axis] - state.rects.popper[len];
-    var startDiff = popperOffsets2[axis] - state.rects.reference[axis];
-    var arrowOffsetParent = getOffsetParent(arrowElement);
-    var clientSize = arrowOffsetParent ? axis === "y" ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
-    var centerToReference = endDiff / 2 - startDiff / 2;
-    var min2 = paddingObject[minProp];
-    var max2 = clientSize - arrowRect[len] - paddingObject[maxProp];
-    var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
-    var offset2 = within(min2, center, max2);
-    var axisProp = axis;
-    state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset2, _state$modifiersData$.centerOffset = offset2 - center, _state$modifiersData$);
-  }
-  function effect$1(_ref2) {
-    var state = _ref2.state, options = _ref2.options;
-    var _options$element = options.element, arrowElement = _options$element === void 0 ? "[data-popper-arrow]" : _options$element;
-    if (arrowElement == null) {
-      return;
+    if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+      return parentNode;
     }
-    if (typeof arrowElement === "string") {
-      arrowElement = state.elements.popper.querySelector(arrowElement);
-      if (!arrowElement) {
-        return;
-      }
+    return getNearestOverflowAncestor(parentNode);
+  }
+  function getOverflowAncestors(node, list, traverseIframes) {
+    var _node$ownerDocument2;
+    if (list === void 0) {
+      list = [];
     }
-    if (!contains(state.elements.popper, arrowElement)) {
-      return;
+    if (traverseIframes === void 0) {
+      traverseIframes = true;
+    }
+    const scrollableAncestor = getNearestOverflowAncestor(node);
+    const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+    const win = getWindow(scrollableAncestor);
+    if (isBody) {
+      const frameElement = getFrameElement(win);
+      return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+    }
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  }
+  function getFrameElement(win) {
+    return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+  }
+  function getCssDimensions(element) {
+    const css = getComputedStyle$1(element);
+    let width = parseFloat(css.width) || 0;
+    let height = parseFloat(css.height) || 0;
+    const hasOffset = isHTMLElement(element);
+    const offsetWidth = hasOffset ? element.offsetWidth : width;
+    const offsetHeight = hasOffset ? element.offsetHeight : height;
+    const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+    if (shouldFallback) {
+      width = offsetWidth;
+      height = offsetHeight;
     }
-    state.elements.arrow = arrowElement;
-  }
-  const arrow$1 = {
-    name: "arrow",
-    enabled: true,
-    phase: "main",
-    fn: arrow,
-    effect: effect$1,
-    requires: ["popperOffsets"],
-    requiresIfExists: ["preventOverflow"]
-  };
-  function getVariation(placement) {
-    return placement.split("-")[1];
-  }
-  var unsetSides = {
-    top: "auto",
-    right: "auto",
-    bottom: "auto",
-    left: "auto"
-  };
-  function roundOffsetsByDPR(_ref, win) {
-    var x = _ref.x, y = _ref.y;
-    var dpr = win.devicePixelRatio || 1;
     return {
-      x: round(x * dpr) / dpr || 0,
-      y: round(y * dpr) / dpr || 0
+      width,
+      height,
+      $: shouldFallback
     };
   }
-  function mapToStyles(_ref2) {
-    var _Object$assign2;
-    var popper2 = _ref2.popper, popperRect = _ref2.popperRect, placement = _ref2.placement, variation = _ref2.variation, offsets = _ref2.offsets, position = _ref2.position, gpuAcceleration = _ref2.gpuAcceleration, adaptive = _ref2.adaptive, roundOffsets = _ref2.roundOffsets, isFixed = _ref2.isFixed;
-    var _offsets$x = offsets.x, x = _offsets$x === void 0 ? 0 : _offsets$x, _offsets$y = offsets.y, y = _offsets$y === void 0 ? 0 : _offsets$y;
-    var _ref3 = typeof roundOffsets === "function" ? roundOffsets({
-      x,
-      y
-    }) : {
-      x,
-      y
-    };
-    x = _ref3.x;
-    y = _ref3.y;
-    var hasX = offsets.hasOwnProperty("x");
-    var hasY = offsets.hasOwnProperty("y");
-    var sideX = left;
-    var sideY = top;
-    var win = window;
-    if (adaptive) {
-      var offsetParent = getOffsetParent(popper2);
-      var heightProp = "clientHeight";
-      var widthProp = "clientWidth";
-      if (offsetParent === getWindow(popper2)) {
-        offsetParent = getDocumentElement(popper2);
-        if (getComputedStyle$1(offsetParent).position !== "static" && position === "absolute") {
-          heightProp = "scrollHeight";
-          widthProp = "scrollWidth";
-        }
-      }
-      offsetParent = offsetParent;
-      if (placement === top || (placement === left || placement === right) && variation === end) {
-        sideY = bottom;
-        var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : (
-          // $FlowFixMe[prop-missing]
-          offsetParent[heightProp]
-        );
-        y -= offsetY - popperRect.height;
-        y *= gpuAcceleration ? 1 : -1;
-      }
-      if (placement === left || (placement === top || placement === bottom) && variation === end) {
-        sideX = right;
-        var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : (
-          // $FlowFixMe[prop-missing]
-          offsetParent[widthProp]
-        );
-        x -= offsetX - popperRect.width;
-        x *= gpuAcceleration ? 1 : -1;
-      }
+  function unwrapElement(element) {
+    return !isElement(element) ? element.contextElement : element;
+  }
+  function getScale(element) {
+    const domElement = unwrapElement(element);
+    if (!isHTMLElement(domElement)) {
+      return createCoords(1);
     }
-    var commonStyles = Object.assign({
-      position
-    }, adaptive && unsetSides);
-    var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
-      x,
-      y
-    }, getWindow(popper2)) : {
+    const rect = domElement.getBoundingClientRect();
+    const {
+      width,
+      height,
+      $
+    } = getCssDimensions(domElement);
+    let x = ($ ? round(rect.width) : rect.width) / width;
+    let y = ($ ? round(rect.height) : rect.height) / height;
+    if (!x || !Number.isFinite(x)) {
+      x = 1;
+    }
+    if (!y || !Number.isFinite(y)) {
+      y = 1;
+    }
+    return {
       x,
       y
     };
-    x = _ref4.x;
-    y = _ref4.y;
-    if (gpuAcceleration) {
-      var _Object$assign;
-      return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? "0" : "", _Object$assign[sideX] = hasX ? "0" : "", _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
-    }
-    return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : "", _Object$assign2[sideX] = hasX ? x + "px" : "", _Object$assign2.transform = "", _Object$assign2));
-  }
-  function computeStyles(_ref5) {
-    var state = _ref5.state, options = _ref5.options;
-    var _options$gpuAccelerat = options.gpuAcceleration, gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, _options$adaptive = options.adaptive, adaptive = _options$adaptive === void 0 ? true : _options$adaptive, _options$roundOffsets = options.roundOffsets, roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
-    var commonStyles = {
-      placement: getBasePlacement(state.placement),
-      variation: getVariation(state.placement),
-      popper: state.elements.popper,
-      popperRect: state.rects.popper,
-      gpuAcceleration,
-      isFixed: state.options.strategy === "fixed"
+  }
+  const noOffsets = /* @__PURE__ */ createCoords(0);
+  function getVisualOffsets(element) {
+    const win = getWindow(element);
+    if (!isWebKit() || !win.visualViewport) {
+      return noOffsets;
+    }
+    return {
+      x: win.visualViewport.offsetLeft,
+      y: win.visualViewport.offsetTop
     };
-    if (state.modifiersData.popperOffsets != null) {
-      state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
-        offsets: state.modifiersData.popperOffsets,
-        position: state.options.strategy,
-        adaptive,
-        roundOffsets
-      })));
-    }
-    if (state.modifiersData.arrow != null) {
-      state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
-        offsets: state.modifiersData.arrow,
-        position: "absolute",
-        adaptive: false,
-        roundOffsets
-      })));
-    }
-    state.attributes.popper = Object.assign({}, state.attributes.popper, {
-      "data-popper-placement": state.placement
-    });
   }
-  const computeStyles$1 = {
-    name: "computeStyles",
-    enabled: true,
-    phase: "beforeWrite",
-    fn: computeStyles,
-    data: {}
-  };
-  var passive = {
-    passive: true
-  };
-  function effect(_ref) {
-    var state = _ref.state, instance = _ref.instance, options = _ref.options;
-    var _options$scroll = options.scroll, scroll = _options$scroll === void 0 ? true : _options$scroll, _options$resize = options.resize, resize = _options$resize === void 0 ? true : _options$resize;
-    var window2 = getWindow(state.elements.popper);
-    var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
-    if (scroll) {
-      scrollParents.forEach(function(scrollParent) {
-        scrollParent.addEventListener("scroll", instance.update, passive);
-      });
+  function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+    if (isFixed === void 0) {
+      isFixed = false;
     }
-    if (resize) {
-      window2.addEventListener("resize", instance.update, passive);
+    if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+      return false;
     }
-    return function() {
-      if (scroll) {
-        scrollParents.forEach(function(scrollParent) {
-          scrollParent.removeEventListener("scroll", instance.update, passive);
-        });
+    return isFixed;
+  }
+  function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+    if (includeScale === void 0) {
+      includeScale = false;
+    }
+    if (isFixedStrategy === void 0) {
+      isFixedStrategy = false;
+    }
+    const clientRect = element.getBoundingClientRect();
+    const domElement = unwrapElement(element);
+    let scale = createCoords(1);
+    if (includeScale) {
+      if (offsetParent) {
+        if (isElement(offsetParent)) {
+          scale = getScale(offsetParent);
+        }
+      } else {
+        scale = getScale(element);
+      }
+    }
+    const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+    let x = (clientRect.left + visualOffsets.x) / scale.x;
+    let y = (clientRect.top + visualOffsets.y) / scale.y;
+    let width = clientRect.width / scale.x;
+    let height = clientRect.height / scale.y;
+    if (domElement) {
+      const win = getWindow(domElement);
+      const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+      let currentWin = win;
+      let currentIFrame = getFrameElement(currentWin);
+      while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+        const iframeScale = getScale(currentIFrame);
+        const iframeRect = currentIFrame.getBoundingClientRect();
+        const css = getComputedStyle$1(currentIFrame);
+        const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+        const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+        x *= iframeScale.x;
+        y *= iframeScale.y;
+        width *= iframeScale.x;
+        height *= iframeScale.y;
+        x += left;
+        y += top;
+        currentWin = getWindow(currentIFrame);
+        currentIFrame = getFrameElement(currentWin);
+      }
+    }
+    return rectToClientRect({
+      width,
+      height,
+      x,
+      y
+    });
+  }
+  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+    let {
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    } = _ref;
+    const isFixed = strategy === "fixed";
+    const documentElement = getDocumentElement(offsetParent);
+    const topLayer = elements ? isTopLayer(elements.floating) : false;
+    if (offsetParent === documentElement || topLayer && isFixed) {
+      return rect;
+    }
+    let scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    let scale = createCoords(1);
+    const offsets = createCoords(0);
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+        scroll = getNodeScroll(offsetParent);
       }
-      if (resize) {
-        window2.removeEventListener("resize", instance.update, passive);
+      if (isHTMLElement(offsetParent)) {
+        const offsetRect = getBoundingClientRect(offsetParent);
+        scale = getScale(offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
       }
+    }
+    return {
+      width: rect.width * scale.x,
+      height: rect.height * scale.y,
+      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
+      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
     };
   }
-  const eventListeners = {
-    name: "eventListeners",
-    enabled: true,
-    phase: "write",
-    fn: function fn() {
-    },
-    effect,
-    data: {}
-  };
-  var hash$1 = {
-    left: "right",
-    right: "left",
-    bottom: "top",
-    top: "bottom"
-  };
-  function getOppositePlacement(placement) {
-    return placement.replace(/left|right|bottom|top/g, function(matched) {
-      return hash$1[matched];
-    });
+  function getClientRects(element) {
+    return Array.from(element.getClientRects());
   }
-  var hash = {
-    start: "end",
-    end: "start"
-  };
-  function getOppositeVariationPlacement(placement) {
-    return placement.replace(/start|end/g, function(matched) {
-      return hash[matched];
-    });
+  function getWindowScrollBarX(element, rect) {
+    const leftScroll = getNodeScroll(element).scrollLeft;
+    if (!rect) {
+      return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+    }
+    return rect.left + leftScroll;
   }
-  function getWindowScroll(node) {
-    var win = getWindow(node);
-    var scrollLeft = win.pageXOffset;
-    var scrollTop = win.pageYOffset;
+  function getDocumentRect(element) {
+    const html = getDocumentElement(element);
+    const scroll = getNodeScroll(element);
+    const body = element.ownerDocument.body;
+    const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+    const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+    let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+    const y = -scroll.scrollTop;
+    if (getComputedStyle$1(body).direction === "rtl") {
+      x += max(html.clientWidth, body.clientWidth) - width;
+    }
     return {
-      scrollLeft,
-      scrollTop
+      width,
+      height,
+      x,
+      y
     };
   }
-  function getWindowScrollBarX(element) {
-    return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
-  }
   function getViewportRect(element, strategy) {
-    var win = getWindow(element);
-    var html = getDocumentElement(element);
-    var visualViewport = win.visualViewport;
-    var width = html.clientWidth;
-    var height = html.clientHeight;
-    var x = 0;
-    var y = 0;
+    const win = getWindow(element);
+    const html = getDocumentElement(element);
+    const visualViewport = win.visualViewport;
+    let width = html.clientWidth;
+    let height = html.clientHeight;
+    let x = 0;
+    let y = 0;
     if (visualViewport) {
       width = visualViewport.width;
       height = visualViewport.height;
-      var layoutViewport = isLayoutViewport();
-      if (layoutViewport || !layoutViewport && strategy === "fixed") {
+      const visualViewportBased = isWebKit();
+      if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
         x = visualViewport.offsetLeft;
         y = visualViewport.offsetTop;
       }
@@ -2019,22 +2618,19 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     return {
       width,
       height,
-      x: x + getWindowScrollBarX(element),
+      x,
       y
     };
   }
-  function getDocumentRect(element) {
-    var _element$ownerDocumen;
-    var html = getDocumentElement(element);
-    var winScroll = getWindowScroll(element);
-    var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
-    var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
-    var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
-    var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
-    var y = -winScroll.scrollTop;
-    if (getComputedStyle$1(body || html).direction === "rtl") {
-      x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
-    }
+  function getInnerBoundingClientRect(element, strategy) {
+    const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
+    const top = clientRect.top + element.clientTop;
+    const left = clientRect.left + element.clientLeft;
+    const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+    const width = element.clientWidth * scale.x;
+    const height = element.clientHeight * scale.y;
+    const x = left * scale.x;
+    const y = top * scale.y;
     return {
       width,
       height,
@@ -2042,794 +2638,358 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
       y
     };
   }
-  function isScrollParent(element) {
-    var _getComputedStyle = getComputedStyle$1(element), overflow = _getComputedStyle.overflow, overflowX = _getComputedStyle.overflowX, overflowY = _getComputedStyle.overflowY;
-    return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
-  }
-  function getScrollParent(node) {
-    if (["html", "body", "#document"].indexOf(getNodeName(node)) >= 0) {
-      return node.ownerDocument.body;
-    }
-    if (isHTMLElement(node) && isScrollParent(node)) {
-      return node;
+  function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+    let rect;
+    if (clippingAncestor === "viewport") {
+      rect = getViewportRect(element, strategy);
+    } else if (clippingAncestor === "document") {
+      rect = getDocumentRect(getDocumentElement(element));
+    } else if (isElement(clippingAncestor)) {
+      rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+    } else {
+      const visualOffsets = getVisualOffsets(element);
+      rect = {
+        ...clippingAncestor,
+        x: clippingAncestor.x - visualOffsets.x,
+        y: clippingAncestor.y - visualOffsets.y
+      };
     }
-    return getScrollParent(getParentNode(node));
+    return rectToClientRect(rect);
   }
-  function listScrollParents(element, list) {
-    var _element$ownerDocumen;
-    if (list === void 0) {
-      list = [];
+  function hasFixedPositionAncestor(element, stopNode) {
+    const parentNode = getParentNode(element);
+    if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+      return false;
     }
-    var scrollParent = getScrollParent(element);
-    var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
-    var win = getWindow(scrollParent);
-    var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
-    var updatedList = list.concat(target);
-    return isBody ? updatedList : (
-      // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
-      updatedList.concat(listScrollParents(getParentNode(target)))
-    );
-  }
-  function rectToClientRect(rect) {
-    return Object.assign({}, rect, {
-      left: rect.x,
-      top: rect.y,
-      right: rect.x + rect.width,
-      bottom: rect.y + rect.height
-    });
-  }
-  function getInnerBoundingClientRect(element, strategy) {
-    var rect = getBoundingClientRect(element, false, strategy === "fixed");
-    rect.top = rect.top + element.clientTop;
-    rect.left = rect.left + element.clientLeft;
-    rect.bottom = rect.top + element.clientHeight;
-    rect.right = rect.left + element.clientWidth;
-    rect.width = element.clientWidth;
-    rect.height = element.clientHeight;
-    rect.x = rect.left;
-    rect.y = rect.top;
-    return rect;
-  }
-  function getClientRectFromMixedType(element, clippingParent, strategy) {
-    return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
-  }
-  function getClippingParents(element) {
-    var clippingParents2 = listScrollParents(getParentNode(element));
-    var canEscapeClipping = ["absolute", "fixed"].indexOf(getComputedStyle$1(element).position) >= 0;
-    var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
-    if (!isElement(clipperElement)) {
-      return [];
-    }
-    return clippingParents2.filter(function(clippingParent) {
-      return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== "body";
-    });
+    return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  }
+  function getClippingElementAncestors(element, cache) {
+    const cachedResult = cache.get(element);
+    if (cachedResult) {
+      return cachedResult;
+    }
+    let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
+    let currentContainingBlockComputedStyle = null;
+    const elementIsFixed = getComputedStyle$1(element).position === "fixed";
+    let currentNode = elementIsFixed ? getParentNode(element) : element;
+    while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      const computedStyle = getComputedStyle$1(currentNode);
+      const currentNodeIsContaining = isContainingBlock(currentNode);
+      if (!currentNodeIsContaining && computedStyle.position === "fixed") {
+        currentContainingBlockComputedStyle = null;
+      }
+      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+      if (shouldDropCurrentNode) {
+        result = result.filter((ancestor) => ancestor !== currentNode);
+      } else {
+        currentContainingBlockComputedStyle = computedStyle;
+      }
+      currentNode = getParentNode(currentNode);
+    }
+    cache.set(element, result);
+    return result;
   }
-  function getClippingRect(element, boundary, rootBoundary, strategy) {
-    var mainClippingParents = boundary === "clippingParents" ? getClippingParents(element) : [].concat(boundary);
-    var clippingParents2 = [].concat(mainClippingParents, [rootBoundary]);
-    var firstClippingParent = clippingParents2[0];
-    var clippingRect = clippingParents2.reduce(function(accRect, clippingParent) {
-      var rect = getClientRectFromMixedType(element, clippingParent, strategy);
+  function getClippingRect(_ref) {
+    let {
+      element,
+      boundary,
+      rootBoundary,
+      strategy
+    } = _ref;
+    const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+    const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+    const firstClippingAncestor = clippingAncestors[0];
+    const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+      const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
       accRect.top = max(rect.top, accRect.top);
       accRect.right = min(rect.right, accRect.right);
       accRect.bottom = min(rect.bottom, accRect.bottom);
       accRect.left = max(rect.left, accRect.left);
       return accRect;
-    }, getClientRectFromMixedType(element, firstClippingParent, strategy));
-    clippingRect.width = clippingRect.right - clippingRect.left;
-    clippingRect.height = clippingRect.bottom - clippingRect.top;
-    clippingRect.x = clippingRect.left;
-    clippingRect.y = clippingRect.top;
-    return clippingRect;
-  }
-  function computeOffsets(_ref) {
-    var reference2 = _ref.reference, element = _ref.element, placement = _ref.placement;
-    var basePlacement = placement ? getBasePlacement(placement) : null;
-    var variation = placement ? getVariation(placement) : null;
-    var commonX = reference2.x + reference2.width / 2 - element.width / 2;
-    var commonY = reference2.y + reference2.height / 2 - element.height / 2;
-    var offsets;
-    switch (basePlacement) {
-      case top:
-        offsets = {
-          x: commonX,
-          y: reference2.y - element.height
-        };
-        break;
-      case bottom:
-        offsets = {
-          x: commonX,
-          y: reference2.y + reference2.height
-        };
-        break;
-      case right:
-        offsets = {
-          x: reference2.x + reference2.width,
-          y: commonY
-        };
-        break;
-      case left:
-        offsets = {
-          x: reference2.x - element.width,
-          y: commonY
-        };
-        break;
-      default:
-        offsets = {
-          x: reference2.x,
-          y: reference2.y
-        };
-    }
-    var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
-    if (mainAxis != null) {
-      var len = mainAxis === "y" ? "height" : "width";
-      switch (variation) {
-        case start:
-          offsets[mainAxis] = offsets[mainAxis] - (reference2[len] / 2 - element[len] / 2);
-          break;
-        case end:
-          offsets[mainAxis] = offsets[mainAxis] + (reference2[len] / 2 - element[len] / 2);
-          break;
-      }
-    }
-    return offsets;
-  }
-  function detectOverflow(state, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    var _options = options, _options$placement = _options.placement, placement = _options$placement === void 0 ? state.placement : _options$placement, _options$strategy = _options.strategy, strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, _options$boundary = _options.boundary, boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, _options$rootBoundary = _options.rootBoundary, rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, _options$elementConte = _options.elementContext, elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, _options$altBoundary = _options.altBoundary, altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, _options$padding = _options.padding, padding = _options$padding === void 0 ? 0 : _options$padding;
-    var paddingObject = mergePaddingObject(typeof padding !== "number" ? padding : expandToHashMap(padding, basePlacements));
-    var altContext = elementContext === popper ? reference : popper;
-    var popperRect = state.rects.popper;
-    var element = state.elements[altBoundary ? altContext : elementContext];
-    var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
-    var referenceClientRect = getBoundingClientRect(state.elements.reference);
-    var popperOffsets2 = computeOffsets({
-      reference: referenceClientRect,
-      element: popperRect,
-      strategy: "absolute",
-      placement
-    });
-    var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets2));
-    var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect;
-    var overflowOffsets = {
-      top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
-      bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
-      left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
-      right: elementClientRect.right - clippingClientRect.right + paddingObject.right
-    };
-    var offsetData = state.modifiersData.offset;
-    if (elementContext === popper && offsetData) {
-      var offset2 = offsetData[placement];
-      Object.keys(overflowOffsets).forEach(function(key) {
-        var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;
-        var axis = [top, bottom].indexOf(key) >= 0 ? "y" : "x";
-        overflowOffsets[key] += offset2[axis] * multiply;
-      });
-    }
-    return overflowOffsets;
-  }
-  function computeAutoPlacement(state, options) {
-    if (options === void 0) {
-      options = {};
-    }
-    var _options = options, placement = _options.placement, boundary = _options.boundary, rootBoundary = _options.rootBoundary, padding = _options.padding, flipVariations = _options.flipVariations, _options$allowedAutoP = _options.allowedAutoPlacements, allowedAutoPlacements = _options$allowedAutoP === void 0 ? placements : _options$allowedAutoP;
-    var variation = getVariation(placement);
-    var placements$1 = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function(placement2) {
-      return getVariation(placement2) === variation;
-    }) : basePlacements;
-    var allowedPlacements = placements$1.filter(function(placement2) {
-      return allowedAutoPlacements.indexOf(placement2) >= 0;
-    });
-    if (allowedPlacements.length === 0) {
-      allowedPlacements = placements$1;
-    }
-    var overflows = allowedPlacements.reduce(function(acc, placement2) {
-      acc[placement2] = detectOverflow(state, {
-        placement: placement2,
-        boundary,
-        rootBoundary,
-        padding
-      })[getBasePlacement(placement2)];
-      return acc;
-    }, {});
-    return Object.keys(overflows).sort(function(a, b) {
-      return overflows[a] - overflows[b];
-    });
-  }
-  function getExpandedFallbackPlacements(placement) {
-    if (getBasePlacement(placement) === auto) {
-      return [];
-    }
-    var oppositePlacement = getOppositePlacement(placement);
-    return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
-  }
-  function flip(_ref) {
-    var state = _ref.state, options = _ref.options, name = _ref.name;
-    if (state.modifiersData[name]._skip) {
-      return;
-    }
-    var _options$mainAxis = options.mainAxis, checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, _options$altAxis = options.altAxis, checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, specifiedFallbackPlacements = options.fallbackPlacements, padding = options.padding, boundary = options.boundary, rootBoundary = options.rootBoundary, altBoundary = options.altBoundary, _options$flipVariatio = options.flipVariations, flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, allowedAutoPlacements = options.allowedAutoPlacements;
-    var preferredPlacement = state.options.placement;
-    var basePlacement = getBasePlacement(preferredPlacement);
-    var isBasePlacement = basePlacement === preferredPlacement;
-    var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
-    var placements2 = [preferredPlacement].concat(fallbackPlacements).reduce(function(acc, placement2) {
-      return acc.concat(getBasePlacement(placement2) === auto ? computeAutoPlacement(state, {
-        placement: placement2,
-        boundary,
-        rootBoundary,
-        padding,
-        flipVariations,
-        allowedAutoPlacements
-      }) : placement2);
-    }, []);
-    var referenceRect = state.rects.reference;
-    var popperRect = state.rects.popper;
-    var checksMap = /* @__PURE__ */ new Map();
-    var makeFallbackChecks = true;
-    var firstFittingPlacement = placements2[0];
-    for (var i = 0; i < placements2.length; i++) {
-      var placement = placements2[i];
-      var _basePlacement = getBasePlacement(placement);
-      var isStartVariation = getVariation(placement) === start;
-      var isVertical = [top, bottom].indexOf(_basePlacement) >= 0;
-      var len = isVertical ? "width" : "height";
-      var overflow = detectOverflow(state, {
-        placement,
-        boundary,
-        rootBoundary,
-        altBoundary,
-        padding
-      });
-      var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top;
-      if (referenceRect[len] > popperRect[len]) {
-        mainVariationSide = getOppositePlacement(mainVariationSide);
-      }
-      var altVariationSide = getOppositePlacement(mainVariationSide);
-      var checks = [];
-      if (checkMainAxis) {
-        checks.push(overflow[_basePlacement] <= 0);
-      }
-      if (checkAltAxis) {
-        checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);
-      }
-      if (checks.every(function(check) {
-        return check;
-      })) {
-        firstFittingPlacement = placement;
-        makeFallbackChecks = false;
-        break;
-      }
-      checksMap.set(placement, checks);
-    }
-    if (makeFallbackChecks) {
-      var numberOfChecks = flipVariations ? 3 : 1;
-      var _loop = function _loop2(_i2) {
-        var fittingPlacement = placements2.find(function(placement2) {
-          var checks2 = checksMap.get(placement2);
-          if (checks2) {
-            return checks2.slice(0, _i2).every(function(check) {
-              return check;
-            });
-          }
-        });
-        if (fittingPlacement) {
-          firstFittingPlacement = fittingPlacement;
-          return "break";
-        }
-      };
-      for (var _i = numberOfChecks; _i > 0; _i--) {
-        var _ret = _loop(_i);
-        if (_ret === "break") break;
-      }
-    }
-    if (state.placement !== firstFittingPlacement) {
-      state.modifiersData[name]._skip = true;
-      state.placement = firstFittingPlacement;
-      state.reset = true;
-    }
-  }
-  const flip$1 = {
-    name: "flip",
-    enabled: true,
-    phase: "main",
-    fn: flip,
-    requiresIfExists: ["offset"],
-    data: {
-      _skip: false
-    }
-  };
-  function getSideOffsets(overflow, rect, preventedOffsets) {
-    if (preventedOffsets === void 0) {
-      preventedOffsets = {
-        x: 0,
-        y: 0
-      };
-    }
+    }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
     return {
-      top: overflow.top - rect.height - preventedOffsets.y,
-      right: overflow.right - rect.width + preventedOffsets.x,
-      bottom: overflow.bottom - rect.height + preventedOffsets.y,
-      left: overflow.left - rect.width - preventedOffsets.x
-    };
-  }
-  function isAnySideFullyClipped(overflow) {
-    return [top, right, bottom, left].some(function(side) {
-      return overflow[side] >= 0;
-    });
-  }
-  function hide(_ref) {
-    var state = _ref.state, name = _ref.name;
-    var referenceRect = state.rects.reference;
-    var popperRect = state.rects.popper;
-    var preventedOffsets = state.modifiersData.preventOverflow;
-    var referenceOverflow = detectOverflow(state, {
-      elementContext: "reference"
-    });
-    var popperAltOverflow = detectOverflow(state, {
-      altBoundary: true
-    });
-    var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
-    var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
-    var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
-    var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
-    state.modifiersData[name] = {
-      referenceClippingOffsets,
-      popperEscapeOffsets,
-      isReferenceHidden,
-      hasPopperEscaped
+      width: clippingRect.right - clippingRect.left,
+      height: clippingRect.bottom - clippingRect.top,
+      x: clippingRect.left,
+      y: clippingRect.top
     };
-    state.attributes.popper = Object.assign({}, state.attributes.popper, {
-      "data-popper-reference-hidden": isReferenceHidden,
-      "data-popper-escaped": hasPopperEscaped
-    });
-  }
-  const hide$1 = {
-    name: "hide",
-    enabled: true,
-    phase: "main",
-    requiresIfExists: ["preventOverflow"],
-    fn: hide
-  };
-  function distanceAndSkiddingToXY(placement, rects, offset2) {
-    var basePlacement = getBasePlacement(placement);
-    var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
-    var _ref = typeof offset2 === "function" ? offset2(Object.assign({}, rects, {
-      placement
-    })) : offset2, skidding = _ref[0], distance = _ref[1];
-    skidding = skidding || 0;
-    distance = (distance || 0) * invertDistance;
-    return [left, right].indexOf(basePlacement) >= 0 ? {
-      x: distance,
-      y: skidding
-    } : {
-      x: skidding,
-      y: distance
-    };
-  }
-  function offset(_ref2) {
-    var state = _ref2.state, options = _ref2.options, name = _ref2.name;
-    var _options$offset = options.offset, offset2 = _options$offset === void 0 ? [0, 0] : _options$offset;
-    var data = placements.reduce(function(acc, placement) {
-      acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset2);
-      return acc;
-    }, {});
-    var _data$state$placement = data[state.placement], x = _data$state$placement.x, y = _data$state$placement.y;
-    if (state.modifiersData.popperOffsets != null) {
-      state.modifiersData.popperOffsets.x += x;
-      state.modifiersData.popperOffsets.y += y;
-    }
-    state.modifiersData[name] = data;
-  }
-  const offset$1 = {
-    name: "offset",
-    enabled: true,
-    phase: "main",
-    requires: ["popperOffsets"],
-    fn: offset
-  };
-  function popperOffsets(_ref) {
-    var state = _ref.state, name = _ref.name;
-    state.modifiersData[name] = computeOffsets({
-      reference: state.rects.reference,
-      element: state.rects.popper,
-      strategy: "absolute",
-      placement: state.placement
-    });
   }
-  const popperOffsets$1 = {
-    name: "popperOffsets",
-    enabled: true,
-    phase: "read",
-    fn: popperOffsets,
-    data: {}
-  };
-  function getAltAxis(axis) {
-    return axis === "x" ? "y" : "x";
-  }
-  function preventOverflow(_ref) {
-    var state = _ref.state, options = _ref.options, name = _ref.name;
-    var _options$mainAxis = options.mainAxis, checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, _options$altAxis = options.altAxis, checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, boundary = options.boundary, rootBoundary = options.rootBoundary, altBoundary = options.altBoundary, padding = options.padding, _options$tether = options.tether, tether = _options$tether === void 0 ? true : _options$tether, _options$tetherOffset = options.tetherOffset, tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
-    var overflow = detectOverflow(state, {
-      boundary,
-      rootBoundary,
-      padding,
-      altBoundary
-    });
-    var basePlacement = getBasePlacement(state.placement);
-    var variation = getVariation(state.placement);
-    var isBasePlacement = !variation;
-    var mainAxis = getMainAxisFromPlacement(basePlacement);
-    var altAxis = getAltAxis(mainAxis);
-    var popperOffsets2 = state.modifiersData.popperOffsets;
-    var referenceRect = state.rects.reference;
-    var popperRect = state.rects.popper;
-    var tetherOffsetValue = typeof tetherOffset === "function" ? tetherOffset(Object.assign({}, state.rects, {
-      placement: state.placement
-    })) : tetherOffset;
-    var normalizedTetherOffsetValue = typeof tetherOffsetValue === "number" ? {
-      mainAxis: tetherOffsetValue,
-      altAxis: tetherOffsetValue
-    } : Object.assign({
-      mainAxis: 0,
-      altAxis: 0
-    }, tetherOffsetValue);
-    var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
-    var data = {
-      x: 0,
-      y: 0
-    };
-    if (!popperOffsets2) {
-      return;
-    }
-    if (checkMainAxis) {
-      var _offsetModifierState$;
-      var mainSide = mainAxis === "y" ? top : left;
-      var altSide = mainAxis === "y" ? bottom : right;
-      var len = mainAxis === "y" ? "height" : "width";
-      var offset2 = popperOffsets2[mainAxis];
-      var min$1 = offset2 + overflow[mainSide];
-      var max$1 = offset2 - overflow[altSide];
-      var additive = tether ? -popperRect[len] / 2 : 0;
-      var minLen = variation === start ? referenceRect[len] : popperRect[len];
-      var maxLen = variation === start ? -popperRect[len] : -referenceRect[len];
-      var arrowElement = state.elements.arrow;
-      var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
-        width: 0,
-        height: 0
-      };
-      var arrowPaddingObject = state.modifiersData["arrow#persistent"] ? state.modifiersData["arrow#persistent"].padding : getFreshSideObject();
-      var arrowPaddingMin = arrowPaddingObject[mainSide];
-      var arrowPaddingMax = arrowPaddingObject[altSide];
-      var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-      var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
-      var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
-      var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
-      var clientOffset = arrowOffsetParent ? mainAxis === "y" ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-      var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
-      var tetherMin = offset2 + minOffset - offsetModifierValue - clientOffset;
-      var tetherMax = offset2 + maxOffset - offsetModifierValue;
-      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset2, tether ? max(max$1, tetherMax) : max$1);
-      popperOffsets2[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset2;
-    }
-    if (checkAltAxis) {
-      var _offsetModifierState$2;
-      var _mainSide = mainAxis === "x" ? top : left;
-      var _altSide = mainAxis === "x" ? bottom : right;
-      var _offset = popperOffsets2[altAxis];
-      var _len = altAxis === "y" ? "height" : "width";
-      var _min = _offset + overflow[_mainSide];
-      var _max = _offset - overflow[_altSide];
-      var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
-      var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
-      var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
-      var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
-      var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
-      popperOffsets2[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
-    }
-    state.modifiersData[name] = data;
-  }
-  const preventOverflow$1 = {
-    name: "preventOverflow",
-    enabled: true,
-    phase: "main",
-    fn: preventOverflow,
-    requiresIfExists: ["offset"]
-  };
-  function getHTMLElementScroll(element) {
+  function getDimensions(element) {
+    const {
+      width,
+      height
+    } = getCssDimensions(element);
     return {
-      scrollLeft: element.scrollLeft,
-      scrollTop: element.scrollTop
+      width,
+      height
     };
   }
-  function getNodeScroll(node) {
-    if (node === getWindow(node) || !isHTMLElement(node)) {
-      return getWindowScroll(node);
-    } else {
-      return getHTMLElementScroll(node);
-    }
-  }
-  function isElementScaled(element) {
-    var rect = element.getBoundingClientRect();
-    var scaleX = round(rect.width) / element.offsetWidth || 1;
-    var scaleY = round(rect.height) / element.offsetHeight || 1;
-    return scaleX !== 1 || scaleY !== 1;
-  }
-  function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
-    if (isFixed === void 0) {
-      isFixed = false;
-    }
-    var isOffsetParentAnElement = isHTMLElement(offsetParent);
-    var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
-    var documentElement = getDocumentElement(offsetParent);
-    var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
-    var scroll = {
+  function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    const documentElement = getDocumentElement(offsetParent);
+    const isFixed = strategy === "fixed";
+    const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+    let scroll = {
       scrollLeft: 0,
       scrollTop: 0
     };
-    var offsets = {
-      x: 0,
-      y: 0
-    };
+    const offsets = createCoords(0);
     if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-      if (getNodeName(offsetParent) !== "body" || // https://github.com/popperjs/popper-core/issues/1078
-      isScrollParent(documentElement)) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
       }
-      if (isHTMLElement(offsetParent)) {
-        offsets = getBoundingClientRect(offsetParent, true);
-        offsets.x += offsetParent.clientLeft;
-        offsets.y += offsetParent.clientTop;
+      if (isOffsetParentAnElement) {
+        const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
       } else if (documentElement) {
         offsets.x = getWindowScrollBarX(documentElement);
       }
     }
+    let htmlX = 0;
+    let htmlY = 0;
+    if (documentElement && !isOffsetParentAnElement && !isFixed) {
+      const htmlRect = documentElement.getBoundingClientRect();
+      htmlY = htmlRect.top + scroll.scrollTop;
+      htmlX = htmlRect.left + scroll.scrollLeft - // RTL <body> scrollbar.
+      getWindowScrollBarX(documentElement, htmlRect);
+    }
+    const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
+    const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
     return {
-      x: rect.left + scroll.scrollLeft - offsets.x,
-      y: rect.top + scroll.scrollTop - offsets.y,
+      x,
+      y,
       width: rect.width,
       height: rect.height
     };
   }
-  function order(modifiers) {
-    var map = /* @__PURE__ */ new Map();
-    var visited = /* @__PURE__ */ new Set();
-    var result = [];
-    modifiers.forEach(function(modifier) {
-      map.set(modifier.name, modifier);
-    });
-    function sort(modifier) {
-      visited.add(modifier.name);
-      var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
-      requires.forEach(function(dep) {
-        if (!visited.has(dep)) {
-          var depModifier = map.get(dep);
-          if (depModifier) {
-            sort(depModifier);
-          }
-        }
-      });
-      result.push(modifier);
+  function isStaticPositioned(element) {
+    return getComputedStyle$1(element).position === "static";
+  }
+  function getTrueOffsetParent(element, polyfill) {
+    if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
+      return null;
     }
-    modifiers.forEach(function(modifier) {
-      if (!visited.has(modifier.name)) {
-        sort(modifier);
+    if (polyfill) {
+      return polyfill(element);
+    }
+    let rawOffsetParent = element.offsetParent;
+    if (getDocumentElement(element) === rawOffsetParent) {
+      rawOffsetParent = rawOffsetParent.ownerDocument.body;
+    }
+    return rawOffsetParent;
+  }
+  function getOffsetParent(element, polyfill) {
+    const win = getWindow(element);
+    if (isTopLayer(element)) {
+      return win;
+    }
+    if (!isHTMLElement(element)) {
+      let svgOffsetParent = getParentNode(element);
+      while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+        if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+          return svgOffsetParent;
+        }
+        svgOffsetParent = getParentNode(svgOffsetParent);
       }
-    });
-    return result;
+      return win;
+    }
+    let offsetParent = getTrueOffsetParent(element, polyfill);
+    while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+      offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+    }
+    if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+      return win;
+    }
+    return offsetParent || getContainingBlock(element) || win;
   }
-  function orderModifiers(modifiers) {
-    var orderedModifiers = order(modifiers);
-    return modifierPhases.reduce(function(acc, phase) {
-      return acc.concat(orderedModifiers.filter(function(modifier) {
-        return modifier.phase === phase;
-      }));
-    }, []);
-  }
-  function debounce(fn) {
-    var pending;
-    return function() {
-      if (!pending) {
-        pending = new Promise(function(resolve) {
-          Promise.resolve().then(function() {
-            pending = void 0;
-            resolve(fn());
-          });
-        });
+  const getElementRects = async function(data) {
+    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+    const getDimensionsFn = this.getDimensions;
+    const floatingDimensions = await getDimensionsFn(data.floating);
+    return {
+      reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+      floating: {
+        x: 0,
+        y: 0,
+        width: floatingDimensions.width,
+        height: floatingDimensions.height
       }
-      return pending;
     };
-  }
-  function mergeByName(modifiers) {
-    var merged = modifiers.reduce(function(merged2, current) {
-      var existing = merged2[current.name];
-      merged2[current.name] = existing ? Object.assign({}, existing, current, {
-        options: Object.assign({}, existing.options, current.options),
-        data: Object.assign({}, existing.data, current.data)
-      }) : current;
-      return merged2;
-    }, {});
-    return Object.keys(merged).map(function(key) {
-      return merged[key];
-    });
-  }
-  var DEFAULT_OPTIONS = {
-    placement: "bottom",
-    modifiers: [],
-    strategy: "absolute"
   };
-  function areValidElements() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return !args.some(function(element) {
-      return !(element && typeof element.getBoundingClientRect === "function");
-    });
-  }
-  function popperGenerator(generatorOptions) {
-    if (generatorOptions === void 0) {
-      generatorOptions = {};
-    }
-    var _generatorOptions = generatorOptions, _generatorOptions$def = _generatorOptions.defaultModifiers, defaultModifiers2 = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, _generatorOptions$def2 = _generatorOptions.defaultOptions, defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
-    return function createPopper2(reference2, popper2, options) {
-      if (options === void 0) {
-        options = defaultOptions;
+  function isRTL(element) {
+    return getComputedStyle$1(element).direction === "rtl";
+  }
+  const platform = {
+    convertOffsetParentRelativeRectToViewportRelativeRect,
+    getDocumentElement,
+    getClippingRect,
+    getOffsetParent,
+    getElementRects,
+    getClientRects,
+    getDimensions,
+    getScale,
+    isElement,
+    isRTL
+  };
+  function observeMove(element, onMove) {
+    let io = null;
+    let timeoutId;
+    const root = getDocumentElement(element);
+    function cleanup() {
+      var _io;
+      clearTimeout(timeoutId);
+      (_io = io) == null || _io.disconnect();
+      io = null;
+    }
+    function refresh(skip, threshold) {
+      if (skip === void 0) {
+        skip = false;
+      }
+      if (threshold === void 0) {
+        threshold = 1;
+      }
+      cleanup();
+      const {
+        left,
+        top,
+        width,
+        height
+      } = element.getBoundingClientRect();
+      if (!skip) {
+        onMove();
+      }
+      if (!width || !height) {
+        return;
       }
-      var state = {
-        placement: "bottom",
-        orderedModifiers: [],
-        options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
-        modifiersData: {},
-        elements: {
-          reference: reference2,
-          popper: popper2
-        },
-        attributes: {},
-        styles: {}
+      const insetTop = floor(top);
+      const insetRight = floor(root.clientWidth - (left + width));
+      const insetBottom = floor(root.clientHeight - (top + height));
+      const insetLeft = floor(left);
+      const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+      const options = {
+        rootMargin,
+        threshold: max(0, min(1, threshold)) || 1
       };
-      var effectCleanupFns = [];
-      var isDestroyed = false;
-      var instance = {
-        state,
-        setOptions: function setOptions(setOptionsAction) {
-          var options2 = typeof setOptionsAction === "function" ? setOptionsAction(state.options) : setOptionsAction;
-          cleanupModifierEffects();
-          state.options = Object.assign({}, defaultOptions, state.options, options2);
-          state.scrollParents = {
-            reference: isElement(reference2) ? listScrollParents(reference2) : reference2.contextElement ? listScrollParents(reference2.contextElement) : [],
-            popper: listScrollParents(popper2)
-          };
-          var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers2, state.options.modifiers)));
-          state.orderedModifiers = orderedModifiers.filter(function(m) {
-            return m.enabled;
-          });
-          runModifierEffects();
-          return instance.update();
-        },
-        // Sync update – it will always be executed, even if not necessary. This
-        // is useful for low frequency updates where sync behavior simplifies the
-        // logic.
-        // For high frequency updates (e.g. `resize` and `scroll` events), always
-        // prefer the async Popper#update method
-        forceUpdate: function forceUpdate() {
-          if (isDestroyed) {
-            return;
-          }
-          var _state$elements = state.elements, reference3 = _state$elements.reference, popper3 = _state$elements.popper;
-          if (!areValidElements(reference3, popper3)) {
-            return;
+      let isFirstUpdate = true;
+      function handleObserve(entries) {
+        const ratio = entries[0].intersectionRatio;
+        if (ratio !== threshold) {
+          if (!isFirstUpdate) {
+            return refresh();
           }
-          state.rects = {
-            reference: getCompositeRect(reference3, getOffsetParent(popper3), state.options.strategy === "fixed"),
-            popper: getLayoutRect(popper3)
-          };
-          state.reset = false;
-          state.placement = state.options.placement;
-          state.orderedModifiers.forEach(function(modifier) {
-            return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
-          });
-          for (var index2 = 0; index2 < state.orderedModifiers.length; index2++) {
-            if (state.reset === true) {
-              state.reset = false;
-              index2 = -1;
-              continue;
-            }
-            var _state$orderedModifie = state.orderedModifiers[index2], fn = _state$orderedModifie.fn, _state$orderedModifie2 = _state$orderedModifie.options, _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, name = _state$orderedModifie.name;
-            if (typeof fn === "function") {
-              state = fn({
-                state,
-                options: _options,
-                name,
-                instance
-              }) || state;
-            }
+          if (!ratio) {
+            timeoutId = setTimeout(() => {
+              refresh(false, 1e-7);
+            }, 1e3);
+          } else {
+            refresh(false, ratio);
           }
-        },
-        // Async and optimistically optimized update – it will not be executed if
-        // not necessary (debounced to run at most once-per-tick)
-        update: debounce(function() {
-          return new Promise(function(resolve) {
-            instance.forceUpdate();
-            resolve(state);
-          });
-        }),
-        destroy: function destroy() {
-          cleanupModifierEffects();
-          isDestroyed = true;
         }
-      };
-      if (!areValidElements(reference2, popper2)) {
-        return instance;
-      }
-      instance.setOptions(options).then(function(state2) {
-        if (!isDestroyed && options.onFirstUpdate) {
-          options.onFirstUpdate(state2);
-        }
-      });
-      function runModifierEffects() {
-        state.orderedModifiers.forEach(function(_ref) {
-          var name = _ref.name, _ref$options = _ref.options, options2 = _ref$options === void 0 ? {} : _ref$options, effect2 = _ref.effect;
-          if (typeof effect2 === "function") {
-            var cleanupFn = effect2({
-              state,
-              name,
-              instance,
-              options: options2
-            });
-            var noopFn = function noopFn2() {
-            };
-            effectCleanupFns.push(cleanupFn || noopFn);
-          }
-        });
+        isFirstUpdate = false;
       }
-      function cleanupModifierEffects() {
-        effectCleanupFns.forEach(function(fn) {
-          return fn();
+      try {
+        io = new IntersectionObserver(handleObserve, {
+          ...options,
+          // Handle <iframe>s
+          root: root.ownerDocument
         });
-        effectCleanupFns = [];
+      } catch (e) {
+        io = new IntersectionObserver(handleObserve, options);
       }
-      return instance;
-    };
-  }
-  var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
-  var createPopper = /* @__PURE__ */ popperGenerator({
-    defaultModifiers
-  });
-  async function deregister(obj) {
-    const index2 = this.collection.findIndex((entry) => {
-      return entry.id === obj.id;
-    });
-    if (index2 >= 0) {
-      const entry = this.collection[index2];
-      if (entry.state === "opened") {
-        entry.close();
-      }
-      entry.popper.destroy();
-      deregisterEventListeners(entry);
-      Object.getOwnPropertyNames(entry).forEach((prop) => {
-        delete entry[prop];
-      });
-      this.collection.splice(index2, 1);
+      io.observe(element);
     }
-    return this.collection;
+    refresh(true);
+    return cleanup;
   }
-  function deregisterEventListeners(entry) {
-    if (entry.__eventListeners) {
-      entry.__eventListeners.forEach((evObj) => {
-        evObj.el.forEach((el) => {
-          evObj.type.forEach((type) => {
-            entry[el].removeEventListener(type, evObj.listener, false);
+  function autoUpdate(reference, floating, update, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      ancestorScroll = true,
+      ancestorResize = true,
+      elementResize = typeof ResizeObserver === "function",
+      layoutShift = typeof IntersectionObserver === "function",
+      animationFrame = false
+    } = options;
+    const referenceEl = unwrapElement(reference);
+    const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+    ancestors.forEach((ancestor) => {
+      ancestorScroll && ancestor.addEventListener("scroll", update, {
+        passive: true
+      });
+      ancestorResize && ancestor.addEventListener("resize", update);
+    });
+    const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+    let reobserveFrame = -1;
+    let resizeObserver = null;
+    if (elementResize) {
+      resizeObserver = new ResizeObserver((_ref) => {
+        let [firstEntry] = _ref;
+        if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+          resizeObserver.unobserve(floating);
+          cancelAnimationFrame(reobserveFrame);
+          reobserveFrame = requestAnimationFrame(() => {
+            var _resizeObserver;
+            (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
           });
-        });
+        }
+        update();
       });
-      delete entry.__eventListeners;
-    }
-    return entry;
+      if (referenceEl && !animationFrame) {
+        resizeObserver.observe(referenceEl);
+      }
+      resizeObserver.observe(floating);
+    }
+    let frameId;
+    let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+    if (animationFrame) {
+      frameLoop();
+    }
+    function frameLoop() {
+      const nextRefRect = getBoundingClientRect(reference);
+      if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
+        update();
+      }
+      prevRefRect = nextRefRect;
+      frameId = requestAnimationFrame(frameLoop);
+    }
+    update();
+    return () => {
+      var _resizeObserver2;
+      ancestors.forEach((ancestor) => {
+        ancestorScroll && ancestor.removeEventListener("scroll", update);
+        ancestorResize && ancestor.removeEventListener("resize", update);
+      });
+      cleanupIo == null || cleanupIo();
+      (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+      resizeObserver = null;
+      if (animationFrame) {
+        cancelAnimationFrame(frameId);
+      }
+    };
   }
+  const offset = offset$1;
+  const shift = shift$1;
+  const flip = flip$1;
+  const arrow = arrow$1;
+  const limitShift = limitShift$1;
+  const computePosition = (reference, floating, options) => {
+    const cache = /* @__PURE__ */ new Map();
+    const mergedOptions = {
+      platform,
+      ...options
+    };
+    const platformWithCache = {
+      ...mergedOptions.platform,
+      _c: cache
+    };
+    return computePosition$1(reference, floating, {
+      ...mergedOptions,
+      platform: platformWithCache
+    });
+  };
   async function open(query) {
     const popover = getPopover.call(this, query);
     popover.el.inert = false;
@@ -2837,161 +2997,69 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
     if (!popover.isTooltip) {
       popover.trigger.setAttribute("aria-expanded", "true");
     }
-    popover.config = getConfig(popover.el, this.settings);
-    popover.popper.setOptions({
-      placement: popover.config["placement"],
-      modifiers: [
-        { name: "eventListeners", enabled: true },
-        ...getModifiers(popover.config)
-      ]
+    popover.getCustomProps();
+    const middlewareOptions = getMiddlewareOptions(popover);
+    const arrowEl = popover.el.querySelector(middlewareOptions.arrow.element);
+    middlewareOptions.arrow.element = arrowEl ? arrowEl : void 0;
+    popover.floatingCleanup = autoUpdate(popover.trigger, popover.el, () => {
+      computePosition(popover.trigger, popover.el, {
+        placement: popover.getSetting("placement"),
+        middleware: [
+          flip(middlewareOptions.flip),
+          shift({ ...middlewareOptions.shift, limiter: limitShift() }),
+          offset(middlewareOptions.offset),
+          arrow(middlewareOptions.arrow)
+        ]
+      }).then(({ x, y, placement, middlewareData }) => {
+        if (!popover.el) {
+          return;
+        }
+        applyPositionStyle(popover.el, x, y);
+        if (middlewareOptions.arrow.element && middlewareData.arrow) {
+          const { x: x2, y: y2 } = middlewareData.arrow;
+          applyPositionStyle(middlewareOptions.arrow.element, x2, y2);
+        }
+        popover.el.setAttribute("data-floating-placement", placement);
+      });
     });
-    popover.popper.update();
     popover.state = "opened";
-    return popover;
-  }
-  async function register(el, trigger) {
-    deregister.call(this, el);
-    const root = this;
-    const entry = {
-      id: el.id,
-      state: "closed",
-      el,
-      trigger,
-      toggleDelayId: null,
-      popper: createPopper(trigger, el),
-      config: getConfig(el, this.settings),
-      get isTooltip() {
-        return !!el.closest(root.settings.selectorTooltip) || el.getAttribute("role") == "tooltip";
-      },
-      open() {
-        return open.call(root, this);
-      },
-      close() {
-        return close.call(root, this);
-      },
-      deregister() {
-        return deregister.call(root, this);
-      }
-    };
-    if (entry.isTooltip) {
-      entry.el.setAttribute("role", "tooltip");
-    }
-    if (!entry.isTooltip) {
-      entry.trigger.setAttribute("aria-expanded", "false");
-    }
-    registerEventListeners.call(this, entry);
-    this.collection.push(entry);
-    if (entry.el.classList.contains(this.settings.stateActive)) {
-      await entry.open();
-      handleDocumentClick.call(this, entry);
-    } else {
-      entry.el.inert = true;
-    }
-    entry.popper.setOptions({
-      placement: entry.config["placement"]
-    });
-    return entry;
-  }
-  function registerEventListeners(entry) {
-    if (!entry.__eventListeners) {
-      const eventType = entry.isTooltip ? "hover" : entry.config["event"];
-      if (eventType === "hover") {
-        entry.__eventListeners = [{
-          el: ["trigger"],
-          type: ["mouseenter", "focus"],
-          listener: handleMouseEnter.bind(this, entry)
-        }, {
-          el: ["el", "trigger"],
-          type: ["mouseleave", "focusout"],
-          listener: handleMouseLeave.bind(this, entry)
-        }];
-        entry.__eventListeners.forEach((evObj) => {
-          evObj.el.forEach((el) => {
-            evObj.type.forEach((type) => {
-              entry[el].addEventListener(type, evObj.listener, false);
-            });
-          });
-        });
-      } else {
-        entry.__eventListeners = [{
-          el: ["trigger"],
-          type: ["click"],
-          listener: handleClick.bind(this, entry)
-        }];
-        entry.__eventListeners.forEach((evObj) => {
-          evObj.el.forEach((el) => {
-            evObj.type.forEach((type) => {
-              entry[el].addEventListener(type, evObj.listener, false);
-            });
-          });
-        });
-      }
+    if (popover.getSetting("event") === "click") {
+      handleDocumentClick.call(this, popover);
     }
-    return entry;
+    return popover;
   }
   class Popover extends Collection {
-    constructor(options) {
-      super();
+    constructor(options = {}) {
+      super({ ...defaults, ...options });
       __privateAdd(this, _handleKeydown3);
-      this.defaults = defaults;
-      this.settings = { ...this.defaults, ...options };
       this.trigger = null;
       __privateSet(this, _handleKeydown3, handleKeydown.bind(this));
-      if (this.settings.autoMount) this.mount();
     }
     get active() {
-      return this.collection.find((popover) => popover.state == "opened");
+      return this.get("opened", "state");
     }
-    get activeTooltip() {
-      return this.collection.find((popover) => popover.state == "opened" && popover.isTooltip);
-    }
-    async mount(options) {
-      if (options) this.settings = { ...this.settings, ...options };
-      const popovers = document.querySelectorAll(this.settings.selectorPopover);
-      await this.registerCollection(popovers);
-      if (this.settings.eventListeners) {
-        this.mountEventListeners(false);
-      }
-      return this;
-    }
-    async unmount() {
-      this.trigger = null;
-      await this.deregisterCollection();
-      if (this.settings.eventListeners) {
-        this.unmountEventListeners(false);
-      }
-      return this;
+    get activeHover() {
+      return this.collection.find((popover) => {
+        return popover.state == "opened" && popover.getSetting("event") == "hover";
+      });
     }
-    mountEventListeners(processCollection = true) {
-      if (processCollection) {
-        this.collection.forEach((popover) => {
-          registerEventListeners.call(this, popover);
-        });
-      }
-      document.addEventListener("keydown", __privateGet(this, _handleKeydown3), false);
+    async createEntry(query, config) {
+      return new PopoverEntry(this, query, config);
     }
-    unmountEventListeners(processCollection = true) {
-      if (processCollection) {
-        this.collection.forEach((popover) => {
-          deregisterEventListeners(popover);
-        });
-      }
-      document.removeEventListener("keydown", __privateGet(this, _handleKeydown3), false);
+    async open(id) {
+      return open.call(this, id);
     }
-    register(query) {
-      const els = getPopoverElements.call(this, query);
-      if (els.error) return Promise.reject(els.error);
-      return register.call(this, els.popover, els.trigger);
+    async close(id) {
+      return close.call(this, id);
     }
-    deregister(query) {
-      let obj = this.get(query.id || query);
-      return obj ? deregister.call(this, obj) : Promise.reject(new Error(`Failed to deregister; popover does not exist in collection with ID of: "${query.id || query}".`));
+    async afterMount() {
+      document.addEventListener("keydown", __privateGet(this, _handleKeydown3), false);
     }
-    open(id) {
-      return open.call(this, id);
+    async beforeUnmount() {
+      this.trigger = null;
     }
-    close(id) {
-      return close.call(this, id);
+    async afterUnmount() {
+      document.removeEventListener("keydown", __privateGet(this, _handleKeydown3), false);
     }
   }
   _handleKeydown3 = new WeakMap();