vrembem 3.0.18 → 3.0.19

package/dev/scripts.modern.mjs

@@ -0,0 +1,4114 @@
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+var id = 0;
+function _classPrivateFieldLooseKey(name) {
+  return "__private_" + id++ + "_" + name;
+}
+function _classPrivateFieldLooseBase(receiver, privateKey) {
+  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
+    throw new TypeError("attempted to use private field on non-instance");
+  }
+  return receiver;
+}
+
+var _handler = /*#__PURE__*/_classPrivateFieldLooseKey("handler");
+class Breakpoint {
+  constructor(value, handler) {
+    Object.defineProperty(this, _handler, {
+      writable: true,
+      value: void 0
+    });
+    this.value = value;
+    _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
+    this.mql = null;
+  }
+  get handler() {
+    return _classPrivateFieldLooseBase(this, _handler)[_handler];
+  }
+
+  // Unmount existing handler before setting a new one.
+  set handler(func) {
+    if (this.mql) {
+      // Conditionally use removeListener() for IE11 support.
+      if (typeof this.mql.removeEventListener === 'function') {
+        this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
+      } else {
+        this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
+      }
+    }
+    _classPrivateFieldLooseBase(this, _handler)[_handler] = func;
+  }
+  mount(value, handler) {
+    // Update passed params.
+    if (value) this.value = value;
+    if (handler) _classPrivateFieldLooseBase(this, _handler)[_handler] = handler;
+
+    // Guard if no breakpoint was set.
+    if (!this.value) return this;
+
+    // Setup and store the MediaQueryList instance.
+    this.mql = window.matchMedia(`(min-width: ${this.value})`);
+
+    // Conditionally use addListener() for IE11 support.
+    if (typeof this.mql.addEventListener === 'function') {
+      this.mql.addEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
+    } else {
+      this.mql.addListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
+    }
+
+    // Run the handler.
+    _classPrivateFieldLooseBase(this, _handler)[_handler](this.mql);
+    return this;
+  }
+  unmount() {
+    // Guard if no MediaQueryList instance exists.
+    if (!this.mql) return this;
+
+    // Conditionally use removeListener() for IE11 support.
+    if (typeof this.mql.removeEventListener === 'function') {
+      this.mql.removeEventListener('change', _classPrivateFieldLooseBase(this, _handler)[_handler]);
+    } else {
+      this.mql.removeListener(_classPrivateFieldLooseBase(this, _handler)[_handler]);
+    }
+
+    // Set value, handler and MediaQueryList to null.
+    this.value = null;
+    _classPrivateFieldLooseBase(this, _handler)[_handler] = null;
+    this.mql = null;
+    return this;
+  }
+}
+
+class Collection {
+  constructor() {
+    this.collection = [];
+  }
+  async register(item) {
+    await this.deregister(item);
+    this.collection.push(item);
+    return this.collection;
+  }
+  async deregister(ref) {
+    const index = this.collection.findIndex(entry => {
+      return entry === ref;
+    });
+    if (index >= 0) {
+      const entry = this.collection[index];
+      Object.getOwnPropertyNames(entry).forEach(prop => {
+        delete entry[prop];
+      });
+      this.collection.splice(index, 1);
+    }
+    return this.collection;
+  }
+  async registerCollection(items) {
+    await Promise.all(Array.from(items, item => {
+      this.register(item);
+    }));
+    return this.collection;
+  }
+  async deregisterCollection() {
+    while (this.collection.length > 0) {
+      await this.deregister(this.collection[0]);
+    }
+    return this.collection;
+  }
+  get(value, key = 'id') {
+    return this.collection.find(item => {
+      return item[key] === value;
+    });
+  }
+}
+
+const not = {
+  inert: ':not([inert]):not([inert] *)',
+  negTabIndex: ':not([tabindex^="-"])',
+  disabled: ':not(:disabled)',
+};
+
+var e = [
+  `a[href]${not.inert}${not.negTabIndex}`,
+  `area[href]${not.inert}${not.negTabIndex}`,
+  `input:not([type="hidden"]):not([type="radio"])${not.inert}${not.negTabIndex}${not.disabled}`,
+  `input[type="radio"]${not.inert}${not.negTabIndex}${not.disabled}`,
+  `select${not.inert}${not.negTabIndex}${not.disabled}`,
+  `textarea${not.inert}${not.negTabIndex}${not.disabled}`,
+  `button${not.inert}${not.negTabIndex}${not.disabled}`,
+  `details${not.inert} > summary:first-of-type${not.negTabIndex}`,
+  // Discard until Firefox supports `:has()`
+  // See: https://github.com/KittyGiraudel/focusable-selectors/issues/12
+  // `details:not(:has(> summary))${not.inert}${not.negTabIndex}`,
+  `iframe${not.inert}${not.negTabIndex}`,
+  `audio[controls]${not.inert}${not.negTabIndex}`,
+  `video[controls]${not.inert}${not.negTabIndex}`,
+  `[contenteditable]${not.inert}${not.negTabIndex}`,
+  `[tabindex]${not.inert}${not.negTabIndex}`,
+];
+
+var _focusable = /*#__PURE__*/_classPrivateFieldLooseKey("focusable");
+var _handleFocusTrap = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusTrap");
+var _handleFocusLock = /*#__PURE__*/_classPrivateFieldLooseKey("handleFocusLock");
+class FocusTrap {
+  constructor(el = null, selectorFocus = '[data-focus]') {
+    Object.defineProperty(this, _focusable, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleFocusTrap, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleFocusLock, {
+      writable: true,
+      value: void 0
+    });
+    this.el = el;
+    this.selectorFocus = selectorFocus;
+    _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap] = handleFocusTrap.bind(this);
+    _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock] = handleFocusLock.bind(this);
+  }
+  get focusable() {
+    return _classPrivateFieldLooseBase(this, _focusable)[_focusable];
+  }
+  set focusable(value) {
+    // Update the focusable value.
+    _classPrivateFieldLooseBase(this, _focusable)[_focusable] = value;
+
+    // Apply event listeners based on new focusable array length.
+    if (_classPrivateFieldLooseBase(this, _focusable)[_focusable].length) {
+      document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
+      document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
+    } else {
+      document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
+      document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
+    }
+  }
+  get focusableFirst() {
+    return this.focusable[0];
+  }
+  get focusableLast() {
+    return this.focusable[this.focusable.length - 1];
+  }
+  mount(el, selectorFocus) {
+    // Update passed params.
+    if (el) this.el = el;
+    if (selectorFocus) this.selectorFocus = selectorFocus;
+
+    // Get the focusable elements.
+    this.focusable = this.getFocusable();
+
+    // Set the focus on the element.
+    this.focus();
+  }
+  unmount() {
+    // Set element to null.
+    this.el = null;
+
+    // Apply empty array to focusable.
+    this.focusable = [];
+
+    // Remove event listeners
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusTrap)[_handleFocusTrap]);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleFocusLock)[_handleFocusLock]);
+  }
+  focus(el = this.el, selectorFocus = this.selectorFocus) {
+    // Query for the focus selector, otherwise return this element.
+    const result = el.querySelector(selectorFocus) || el;
+    // Give the returned element focus.
+    result.focus();
+  }
+  getFocusable(el = this.el) {
+    // Initialize the focusable array.
+    const focusable = [];
+
+    // Store the initial focus and scroll position.
+    const initFocus = document.activeElement;
+    const initScrollTop = el.scrollTop;
+
+    // Query for all the focusable elements.
+    const els = el.querySelectorAll(e.join(','));
+
+    // Loop through all focusable elements.
+    els.forEach(el => {
+      // Set them to focus and check 
+      el.focus();
+      // Test that the element took focus.
+      if (document.activeElement === el) {
+        // Add element to the focusable array.
+        focusable.push(el);
+      }
+    });
+
+    // Restore the initial scroll position and focus.
+    el.scrollTop = initScrollTop;
+    initFocus.focus();
+
+    // Return the focusable array.
+    return focusable;
+  }
+}
+function handleFocusTrap(event) {
+  // Check if the click was a tab and return if not.
+  const isTab = event.key === 'Tab' || event.keyCode === 9;
+  if (!isTab) return;
+
+  // If the shift key is pressed.
+  if (event.shiftKey) {
+    // If the active element is either the root el or first focusable.
+    if (document.activeElement === this.focusableFirst || document.activeElement === this.el) {
+      // Prevent default and focus the last focusable element instead.
+      event.preventDefault();
+      this.focusableLast.focus();
+    }
+  } else {
+    // If the active element is either the root el or last focusable.
+    if (document.activeElement === this.focusableLast || document.activeElement === this.el) {
+      // Prevent default and focus the first focusable element instead.
+      event.preventDefault();
+      this.focusableFirst.focus();
+    }
+  }
+}
+function handleFocusLock(event) {
+  // Ignore the tab key by preventing default.
+  const isTab = event.key === 'Tab' || event.keyCode === 9;
+  if (isTab) event.preventDefault();
+}
+
+function getConfig$1(el, dataConfig) {
+  const string = el.getAttribute(`data-${dataConfig}`) || '';
+  const json = string.replace(/'/g, '"');
+  return json ? JSON.parse(json) : {};
+}
+
+function getPrefix() {
+  return getComputedStyle(document.body).getPropertyValue('--vrembem-variable-prefix').trim();
+}
+
+function localStore(key, enable = true) {
+  const local = localStorage.getItem(key);
+  const store = local ? JSON.parse(local) : {};
+  return {
+    get(prop) {
+      return prop ? store[prop] : store;
+    },
+    set(prop, value) {
+      if (value) {
+        store[prop] = value;
+      } else {
+        delete store[prop];
+      }
+      if (enable) localStorage.setItem(key, JSON.stringify(store));
+      return store;
+    }
+  };
+}
+
+/**
+ * Teleports an element in the DOM based on a reference and teleport method.
+ * Provide the comment node as the reference to teleport the element back to its
+ * previous location.
+ * @param {Node} what - What element to teleport.
+ * @param {String || Node} where - Where to teleport the element.
+ * @param {String} how - How (method) to teleport the element, e.g: 'after',
+ *   'before', 'append' or 'prepend'.
+ * @return {Node} Return the return reference if it was teleported else return
+ *   null if it was returned to a comment reference.
+ */
+function teleport(what, where, how) {
+  // Check if ref is either a comment or element node.
+  const isComment = where.nodeType === Node.COMMENT_NODE;
+  const isElement = where.nodeType === Node.ELEMENT_NODE;
+
+  // Get the reference element.
+  where = isComment || isElement ? where : document.querySelector(where);
+
+  // If ref is a comment, set teleport type to 'after'.
+  if (isComment) how = 'after';
+
+  // Must be a valid reference element and method.
+  if (!where) throw new Error(`Not a valid teleport reference: '${where}'`);
+  if (typeof where[how] != 'function') throw new Error(`Not a valid teleport method: '${how}'`);
+
+  // Initial return ref is null.
+  let returnRef = null;
+
+  // If ref is not a comment, set a return reference comment.
+  if (!isComment) {
+    returnRef = document.createComment('teleported #' + what.id);
+    what.before(returnRef);
+  }
+
+  // Teleport the target node.
+  where[how](what);
+
+  // Delete the comment node if element was returned to a comment reference.
+  if (isComment) {
+    where.remove();
+  }
+
+  // Return the return reference if it was teleported else return null if it was
+  // returned to a comment reference.
+  return returnRef;
+}
+
+const openTransition = (el, settings) => {
+  return new Promise(resolve => {
+    // Check if transitions are enabled.
+    if (settings.transition) {
+      // Toggle classes for opening transition.
+      el.classList.remove(settings.stateClosed);
+      el.classList.add(settings.stateOpening);
+
+      // Add event listener for when the transition is finished.
+      el.addEventListener('transitionend', function _f(event) {
+        // Prevent child transition bubbling from firing this event.
+        if (event.target != el) return;
+
+        // Toggle final opened state classes.
+        el.classList.add(settings.stateOpened);
+        el.classList.remove(settings.stateOpening);
+
+        // Resolve the promise and remove the event listener.
+        resolve(el);
+        this.removeEventListener('transitionend', _f);
+      });
+    } else {
+      // Toggle final opened state classes and resolve the promise.
+      el.classList.add(settings.stateOpened);
+      el.classList.remove(settings.stateClosed);
+      resolve(el);
+    }
+  });
+};
+const closeTransition = (el, settings) => {
+  return new Promise(resolve => {
+    // Check if transitions are enabled.
+    if (settings.transition) {
+      // Toggle classes for closing transition.
+      el.classList.add(settings.stateClosing);
+      el.classList.remove(settings.stateOpened);
+
+      // Add event listener for when the transition is finished.
+      el.addEventListener('transitionend', function _f(event) {
+        // Prevent child transition bubbling from firing this event.
+        if (event.target != el) return;
+
+        // Toggle final closed state classes.
+        el.classList.remove(settings.stateClosing);
+        el.classList.add(settings.stateClosed);
+
+        // Resolve the promise and remove the event listener.
+        resolve(el);
+        this.removeEventListener('transitionend', _f);
+      });
+    } else {
+      // Toggle final closed state classes and resolve the promise.
+      el.classList.add(settings.stateClosed);
+      el.classList.remove(settings.stateOpened);
+      resolve(el);
+    }
+  });
+};
+
+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(param, config) {
+  // Set inert state based on if a modal is active.
+  setInert(!!param, config.selectorInert);
+
+  // Set overflow state based on if a modal is active.
+  setOverflowHidden(!!param, config.selectorOverflow);
+}
+
+var index = {
+  __proto__: null,
+  Breakpoint: Breakpoint,
+  Collection: Collection,
+  FocusTrap: FocusTrap,
+  getConfig: getConfig$1,
+  getPrefix: getPrefix,
+  localStore: localStore,
+  teleport: teleport,
+  openTransition: openTransition,
+  closeTransition: closeTransition,
+  updateGlobalState: updateGlobalState
+};
+
+var defaults$3 = {
+  autoInit: false,
+  stateAttr: 'aria-checked',
+  stateValue: 'mixed'
+};
+
+class Checkbox {
+  constructor(options) {
+    this.defaults = defaults$3;
+    this.settings = _extends({}, this.defaults, options);
+    this.__handlerClick = this.handlerClick.bind(this);
+    if (this.settings.autoInit) this.init();
+  }
+  init(options = null) {
+    if (options) this.settings = _extends({}, this.settings, options);
+    const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
+    const mixed = document.querySelectorAll(selector);
+    this.setIndeterminate(mixed);
+    document.addEventListener('click', this.__handlerClick, false);
+  }
+  destroy() {
+    document.removeEventListener('click', this.__handlerClick, false);
+  }
+  handlerClick(event) {
+    const selector = `[${this.settings.stateAttr}="${this.settings.stateValue}"]`;
+    const el = event.target.closest(selector);
+    if (!el) return;
+    this.removeAriaState(el);
+    this.setIndeterminate(el);
+  }
+  setAriaState(el, value = this.settings.stateValue) {
+    el = el.forEach ? el : [el];
+    el.forEach(el => {
+      el.setAttribute(this.settings.stateAttr, value);
+    });
+  }
+  removeAriaState(el) {
+    el = el.forEach ? el : [el];
+    el.forEach(el => {
+      el.removeAttribute(this.settings.stateAttr);
+    });
+  }
+  setIndeterminate(el) {
+    el = el.forEach ? el : [el];
+    el.forEach(el => {
+      if (el.hasAttribute(this.settings.stateAttr)) {
+        el.indeterminate = true;
+      } else {
+        el.indeterminate = false;
+      }
+    });
+  }
+}
+
+var defaults$2 = {
+  autoInit: false,
+  // Data attributes
+  dataOpen: 'drawer-open',
+  dataClose: 'drawer-close',
+  dataToggle: 'drawer-toggle',
+  dataBreakpoint: 'drawer-breakpoint',
+  dataConfig: 'drawer-config',
+  // Selectors
+  selectorDrawer: '.drawer',
+  selectorDialog: '.drawer__dialog',
+  selectorFocus: '[data-focus]',
+  selectorInert: null,
+  selectorOverflow: 'body',
+  // State classes
+  stateOpened: 'is-opened',
+  stateOpening: 'is-opening',
+  stateClosing: 'is-closing',
+  stateClosed: 'is-closed',
+  // Classes
+  classModal: 'drawer_modal',
+  // Feature toggles
+  breakpoints: null,
+  customEventPrefix: 'drawer:',
+  eventListeners: true,
+  store: true,
+  storeKey: 'VB:DrawerState',
+  setTabindex: true,
+  transition: true
+};
+
+function handleClick$2(event) {
+  // If an open, close or toggle button was clicked, handle the click event.
+  const trigger = event.target.closest(`
+    [data-${this.settings.dataOpen}],
+    [data-${this.settings.dataToggle}],
+    [data-${this.settings.dataClose}]
+  `);
+  if (trigger) {
+    // Prevent the default behavior of the trigger.
+    event.preventDefault();
+
+    // If it's a toggle trigger...
+    if (trigger.matches(`[data-${this.settings.dataToggle}]`)) {
+      const selectors = trigger.getAttribute(`data-${this.settings.dataToggle}`).trim().split(' ');
+      selectors.forEach(selector => {
+        // Get the entry from collection using the attribute value.
+        const entry = this.get(selector);
+        // Store the trigger on the entry.
+        entry.trigger = trigger;
+        // Toggle the drawer
+        entry.toggle();
+      });
+    }
+
+    // If it's a open trigger...
+    if (trigger.matches(`[data-${this.settings.dataOpen}]`)) {
+      const selectors = trigger.getAttribute(`data-${this.settings.dataOpen}`).trim().split(' ');
+      selectors.forEach(selector => {
+        // Get the entry from collection using the attribute value.
+        const entry = this.get(selector);
+        // Store the trigger on the entry.
+        entry.trigger = trigger;
+        // Open the drawer.
+        entry.open();
+      });
+    }
+
+    // If it's a close trigger...
+    if (trigger.matches(`[data-${this.settings.dataClose}]`)) {
+      const selectors = trigger.getAttribute(`data-${this.settings.dataClose}`).trim().split(' ');
+      selectors.forEach(selector => {
+        if (selector) {
+          // Get the entry from collection using the attribute value.
+          const entry = this.get(selector);
+          // Store the trigger on the entry.
+          entry.trigger = trigger;
+          // Close the drawer.
+          entry.close();
+        } else {
+          // If no value is set on close trigger, get the parent drawer.
+          const parent = event.target.closest(this.settings.selectorDrawer);
+          // If a parent drawer was found, close it.
+          if (parent) this.close(parent);
+        }
+      });
+    }
+    return;
+  }
+
+  // If the modal drawer screen was clicked...
+  if (event.target.matches(this.settings.selectorDrawer)) {
+    // Close the modal drawer.
+    this.close(event.target.id);
+  }
+}
+function handleKeydown$2(event) {
+  if (event.key === 'Escape') {
+    const modal = this.activeModal;
+    if (modal) this.close(modal);
+  }
+}
+
+async function deregister$2(obj, close = true) {
+  // Return collection if nothing was passed.
+  if (!obj) return this.collection;
+
+  // Check if entry has been registered in the collection.
+  const index = this.collection.findIndex(entry => {
+    return entry.id === obj.id;
+  });
+  if (index >= 0) {
+    // Get the collection entry.
+    const entry = this.collection[index];
+
+    // If entry is in the opened state.
+    if (close && entry.state === 'opened') {
+      // Close the drawer.
+      await entry.close(false);
+    }
+
+    // Remove entry from local store.
+    this.store.set(entry.id);
+
+    // Unmount the MatchMedia functionality.
+    entry.unmountBreakpoint();
+
+    // Delete properties from collection entry.
+    Object.getOwnPropertyNames(entry).forEach(prop => {
+      delete entry[prop];
+    });
+
+    // Remove entry from collection.
+    this.collection.splice(index, 1);
+  }
+
+  // Return the modified collection.
+  return this.collection;
+}
+
+function E() {
+  return getComputedStyle(document.body).getPropertyValue("--vrembem-variable-prefix").trim();
+}
+
+function getBreakpoint(drawer) {
+  const prefix = E();
+  const bp = drawer.getAttribute(`data-${this.settings.dataBreakpoint}`);
+  if (this.settings.breakpoints && this.settings.breakpoints[bp]) {
+    return this.settings.breakpoints[bp];
+  } else if (getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim()) {
+    return getComputedStyle(document.body).getPropertyValue(`--${prefix}breakpoint-${bp}`).trim();
+  } else {
+    return bp;
+  }
+}
+
+function getDrawer(query) {
+  // Get the entry from collection.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
+
+  // Return entry if it was resolved, otherwise throw error.
+  if (entry) {
+    return entry;
+  } else {
+    throw new Error(`Drawer not found in collection with id of "${query.id || query}".`);
+  }
+}
+
+function getDrawerID(obj) {
+  // If it's a string, return the string.
+  if (typeof obj === 'string') {
+    return obj;
+  }
+
+  // If it's an HTML element.
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a drawer open trigger, return data value.
+    if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
+      return obj.getAttribute(`data-${this.settings.dataOpen}`);
+    }
+
+    // If it's a drawer close trigger, return data value or false.
+    else if (obj.hasAttribute(`data-${this.settings.dataClose}`)) {
+      return obj.getAttribute(`data-${this.settings.dataClose}`) || false;
+    }
+
+    // If it's a drawer toggle trigger, return data value.
+    else if (obj.hasAttribute(`data-${this.settings.dataToggle}`)) {
+      return obj.getAttribute(`data-${this.settings.dataToggle}`);
+    }
+
+    // If it's a drawer element, return the id.
+    else if (obj.closest(this.settings.selectorDrawer)) {
+      obj = obj.closest(this.settings.selectorDrawer);
+      return obj.id || false;
+    }
+
+    // Return false if no id was found.
+    else return false;
+  }
+
+  // If it has an id property, return its value.
+  else if (obj.id) {
+    return obj.id;
+  }
+
+  // Return false if no id was found.
+  else return false;
+}
+
+function getDrawerElements(query) {
+  const id = getDrawerID.call(this, query);
+  if (id) {
+    const drawer = document.querySelector(`#${id}`);
+    const dialog = drawer ? drawer.querySelector(this.settings.selectorDialog) : null;
+    if (!drawer && !dialog) {
+      return {
+        error: new Error(`No drawer elements found using the ID: "${id}".`)
+      };
+    } else if (!dialog) {
+      return {
+        error: new Error('Drawer is missing dialog element.')
+      };
+    } else {
+      return {
+        drawer,
+        dialog
+      };
+    }
+  } else {
+    return {
+      error: new Error('Could not resolve the drawer ID.')
+    };
+  }
+}
+
+async function initialState(entry) {
+  // Setup initial state using the following priority:
+  //  1. If a store state is available, restore from local store.
+  //  2. If opened state class is set, set state to opened.
+  //  3. Else, initialize default state.
+  if (this.store.get(entry.id)) {
+    // Restore drawers to saved inline state.
+    if (this.store.get(entry.id) === 'opened') {
+      await entry.open(false, false);
+    } else {
+      await entry.close(false, false);
+    }
+  } else if (entry.el.classList.contains(this.settings.stateOpened)) {
+    // Update drawer state.
+    entry.state = 'opened';
+  } else {
+    // Remove transition state classes.
+    entry.el.classList.remove(this.settings.stateOpening);
+    entry.el.classList.remove(this.settings.stateClosing);
+    // Add closed state class.
+    entry.el.classList.add(this.settings.stateClosed);
+  }
+}
+
+function updateFocusState$1(entry) {
+  // Check if there's an active modal
+  if (entry.state === 'opened') {
+    // Mount the focus trap on the opened drawer.
+    if (entry.mode === 'modal') {
+      this.focusTrap.mount(entry.dialog, this.settings.selectorFocus);
+    } else {
+      this.focusTrap.focus(entry.dialog, this.settings.selectorFocus);
+    }
+  } else {
+    // Set focus to root trigger and unmount the focus trap.
+    if (entry.trigger) {
+      entry.trigger.focus();
+      entry.trigger = null;
+    }
+    this.focusTrap.unmount();
+  }
+}
+
+async function open$2(query, transition, focus = true) {
+  // Get the drawer from collection.
+  const drawer = getDrawer.call(this, query);
+
+  // Get the modal configuration.
+  const config = _extends({}, this.settings, drawer.settings);
+
+  // Add transition parameter to configuration.
+  if (transition !== undefined) config.transition = transition;
+
+  // If drawer is closed.
+  if (drawer.state === 'closed') {
+    // Update drawer state.
+    drawer.state = 'opening';
+
+    // Run the open transition.
+    await openTransition(drawer.el, config);
+
+    // Update the global state if mode is modal.
+    if (drawer.mode === 'modal') updateGlobalState(true, config);
+
+    // Update drawer state.
+    drawer.state = 'opened';
+  }
+
+  // Set focus to the drawer element if the focus param is true.
+  if (focus) {
+    updateFocusState$1.call(this, drawer);
+  }
+
+  // Dispatch custom opened event.
+  drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+    detail: this,
+    bubbles: true
+  }));
+
+  // Return the drawer.
+  return drawer;
+}
+
+async function close$2(query, transition, focus = true) {
+  // Get the drawer from collection.
+  const drawer = getDrawer.call(this, query);
+
+  // Get the modal configuration.
+  const config = _extends({}, this.settings, drawer.settings);
+
+  // Add transition parameter to configuration.
+  if (transition !== undefined) config.transition = transition;
+
+  // If drawer is opened.
+  if (drawer.state === 'opened') {
+    // Update drawer state.
+    drawer.state = 'closing';
+
+    // Remove focus from active element.
+    document.activeElement.blur();
+
+    // Run the close transition.
+    await closeTransition(drawer.el, config);
+
+    // Update the global state if mode is modal.
+    if (drawer.mode === 'modal') updateGlobalState(false, config);
+
+    // Set focus to the trigger element if the focus param is true.
+    if (focus) {
+      updateFocusState$1.call(this, drawer);
+    }
+
+    // Update drawer state.
+    drawer.state = 'closed';
+
+    // Dispatch custom closed event.
+    drawer.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+      detail: this,
+      bubbles: true
+    }));
+  }
+
+  // Return the drawer.
+  return drawer;
+}
+
+async function toggle(query, transition, focus) {
+  // Get the drawer from collection.
+  const drawer = getDrawer.call(this, query);
+
+  // Open or close the drawer based on its current state.
+  if (drawer.state === 'closed') {
+    return open$2.call(this, drawer, transition, focus);
+  } else {
+    return close$2.call(this, drawer, transition, 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) {
+  // Remove the modal class.
+  entry.el.classList.remove(entry.getSetting('classModal'));
+
+  // Remove the aria-modal attribute.
+  entry.dialog.removeAttribute('aria-modal');
+
+  // Update the global state.
+  updateGlobalState(false, _extends({}, this.settings, entry.settings));
+
+  // Remove any focus traps.
+  this.focusTrap.unmount();
+
+  // Setup initial state.
+  await initialState.call(this, entry);
+
+  // Dispatch custom switch event.
+  entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
+    detail: this,
+    bubbles: true
+  }));
+
+  // Return the entry.
+  return entry;
+}
+async function toModal(entry) {
+  // Get the drawer configuration.
+
+  // Add the modal class.
+  entry.el.classList.add(entry.getSetting('classModal'));
+
+  // Set aria-modal attribute to true.
+  entry.dialog.setAttribute('aria-modal', 'true');
+
+  // If there isn't a stored state but also has the opened state class...
+  if (!this.store.get(entry.id) && entry.el.classList.contains(entry.getSetting('stateOpened'))) {
+    // Save the opened state in local store.
+    this.store.set(entry.id, 'opened');
+  }
+
+  // Modal drawer defaults to closed state.
+  await close$2.call(this, entry, false, false);
+
+  // Dispatch custom switch event.
+  entry.el.dispatchEvent(new CustomEvent(entry.getSetting('customEventPrefix') + 'switchMode', {
+    detail: this,
+    bubbles: true
+  }));
+
+  // Return the entry.
+  return entry;
+}
+
+async function register$2(el, dialog) {
+  // Deregister entry incase it has already been registered.
+  await deregister$2.call(this, el, false);
+
+  // Save root this for use inside methods API.
+  const root = this;
+
+  // Create an instance of the Breakpoint class.
+  const breakpoint = new Breakpoint();
+
+  // Setup methods API.
+  const methods = {
+    open(transition, focus) {
+      return open$2.call(root, this, transition, focus);
+    },
+    close(transition, focus) {
+      return close$2.call(root, this, transition, focus);
+    },
+    toggle(transition, focus) {
+      return toggle.call(root, this, transition, 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) {
+      this.mode = event.matches ? 'inline' : 'modal';
+      return this;
+    },
+    getSetting(key) {
+      return key in this.settings ? this.settings[key] : root.settings[key];
+    }
+  };
+
+  // Setup the drawer object.
+  const entry = _extends({
+    id: el.id,
+    el: el,
+    dialog: dialog,
+    trigger: null,
+    settings: getConfig$1(el, this.settings.dataConfig),
+    get breakpoint() {
+      return getBreakpoint.call(root, el);
+    },
+    get state() {
+      return __state;
+    },
+    set state(value) {
+      __state = value;
+      // Save 'opened' and 'closed' states to store if mode is inline.
+      if (value === 'opened' || value === 'closed') {
+        if (this.mode === 'inline') root.store.set(this.id, this.state);
+      }
+    },
+    get mode() {
+      return __mode;
+    },
+    set mode(value) {
+      __mode = value;
+      switchMode.call(root, this);
+    }
+  }, methods);
+
+  // Create the state var with the initial state.
+  let __state = el.classList.contains(entry.getSetting('stateOpened')) ? 'opened' : 'closed';
+
+  // Create the mode var with the initial mode.
+  let __mode = el.classList.contains(entry.getSetting('classModal')) ? 'modal' : 'inline';
+
+  // Setup mode specific attributes.
+  if (entry.mode === 'modal') {
+    // Set aria-modal attribute to true.
+    entry.dialog.setAttribute('aria-modal', 'true');
+  } else {
+    // Remove the aria-modal attribute.
+    entry.dialog.removeAttribute('aria-modal');
+  }
+
+  // Set tabindex="-1" so dialog is focusable via JS or click.
+  if (entry.getSetting('setTabindex')) {
+    entry.dialog.setAttribute('tabindex', '-1');
+  }
+
+  // Add entry to collection.
+  this.collection.push(entry);
+
+  // If the entry has a breakpoint...
+  if (entry.breakpoint) {
+    // Mount media query breakpoint functionality.
+    entry.mountBreakpoint();
+  } else {
+    // Else, Setup initial state.
+    await initialState.call(this, entry);
+  }
+
+  // Return the registered entry.
+  return entry;
+}
+
+var _handleClick$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
+var _handleKeydown$2 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+class Drawer extends Collection {
+  constructor(options) {
+    super();
+    Object.defineProperty(this, _handleClick$1, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleKeydown$2, {
+      writable: true,
+      value: void 0
+    });
+    this.defaults = defaults$2;
+    this.settings = _extends({}, this.defaults, options);
+    this.focusTrap = new FocusTrap();
+
+    // Setup local store for inline drawer state management.
+    this.store = localStore(this.settings.storeKey, this.settings.store);
+    _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1] = handleClick$2.bind(this);
+    _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2] = handleKeydown$2.bind(this);
+    if (this.settings.autoInit) this.init();
+  }
+  get activeModal() {
+    return this.collection.find(entry => {
+      return entry.state === 'opened' && entry.mode === 'modal';
+    });
+  }
+  async init(options = null) {
+    // Update settings with passed options.
+    if (options) this.settings = _extends({}, this.settings, options);
+
+    // Get all the modals.
+    const drawers = document.querySelectorAll(this.settings.selectorDrawer);
+
+    // Register the collections array with modal instances.
+    await this.registerCollection(drawers);
+
+    // If eventListeners are enabled, init event listeners.
+    if (this.settings.eventListeners) {
+      this.initEventListeners();
+    }
+    return this;
+  }
+  async destroy() {
+    // Remove all entries from the collection.
+    await this.deregisterCollection();
+
+    // If eventListeners are enabled, init event listeners.
+    if (this.settings.eventListeners) {
+      this.destroyEventListeners();
+    }
+    return this;
+  }
+  initEventListeners() {
+    document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
+  }
+  destroyEventListeners() {
+    document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick$1)[_handleClick$1], false);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$2)[_handleKeydown$2], false);
+  }
+  register(query) {
+    const els = getDrawerElements.call(this, query);
+    if (els.error) return Promise.reject(els.error);
+    return register$2.call(this, els.drawer, els.dialog);
+  }
+  deregister(query) {
+    const entry = this.get(getDrawerID.call(this, query));
+    return deregister$2.call(this, entry);
+  }
+  open(id, transition, focus) {
+    return open$2.call(this, id, transition, focus);
+  }
+  close(id, transition, focus) {
+    return close$2.call(this, id, transition, focus);
+  }
+  toggle(id, transition, focus) {
+    return toggle.call(this, id, transition, focus);
+  }
+}
+
+var defaults$1 = {
+  autoInit: false,
+  // Data attributes
+  dataOpen: 'modal-open',
+  dataClose: 'modal-close',
+  dataReplace: 'modal-replace',
+  dataConfig: 'modal-config',
+  // Selectors
+  selectorModal: '.modal',
+  selectorDialog: '.modal__dialog',
+  selectorRequired: '[role="alertdialog"]',
+  selectorFocus: '[data-focus]',
+  selectorInert: null,
+  selectorOverflow: 'body',
+  // State classes
+  stateOpened: 'is-opened',
+  stateOpening: 'is-opening',
+  stateClosing: 'is-closing',
+  stateClosed: 'is-closed',
+  // Feature settings
+  customEventPrefix: 'modal:',
+  eventListeners: true,
+  teleport: null,
+  teleportMethod: 'append',
+  setTabindex: true,
+  transition: true
+};
+
+function getModal(query) {
+  // Get the entry from collection.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
+
+  // Return entry if it was resolved, otherwise throw error.
+  if (entry) {
+    return entry;
+  } else {
+    throw new Error(`Modal not found in collection with id of "${query.id || query}".`);
+  }
+}
+
+function getModalID(obj) {
+  // If it's a string, return the string.
+  if (typeof obj === 'string') {
+    return obj;
+  }
+
+  // If it's an HTML element.
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a modal open trigger, return data value.
+    if (obj.hasAttribute(`data-${this.settings.dataOpen}`)) {
+      return obj.getAttribute(`data-${this.settings.dataOpen}`);
+    }
+
+    // If it's a modal close trigger, return data value or false.
+    else if (obj.hasAttribute(`data-${this.settings.dataClose}`)) {
+      return obj.getAttribute(`data-${this.settings.dataClose}`) || false;
+    }
+
+    // If it's a modal replace trigger, return data value.
+    else if (obj.hasAttribute(`data-${this.settings.dataReplace}`)) {
+      return obj.getAttribute(`data-${this.settings.dataReplace}`);
+    }
+
+    // If it's a modal element, return the id.
+    else if (obj.closest(this.settings.selectorModal)) {
+      obj = obj.closest(this.settings.selectorModal);
+      return obj.id || false;
+    }
+
+    // Return false if no id was found.
+    else return false;
+  }
+
+  // If it has an id property, return its value.
+  else if (obj.id) {
+    return obj.id;
+  }
+
+  // Return false if no id was found.
+  else return false;
+}
+
+function getModalElements(query) {
+  const id = getModalID.call(this, query);
+  if (id) {
+    const modal = document.querySelector(`#${id}`);
+    const dialog = modal ? modal.querySelector(this.settings.selectorDialog) : null;
+    if (!modal && !dialog) {
+      return {
+        error: new Error(`No modal elements found using the ID: "${id}".`)
+      };
+    } else if (!dialog) {
+      return {
+        error: new Error('Modal is missing dialog element.')
+      };
+    } else {
+      return {
+        modal,
+        dialog
+      };
+    }
+  } else {
+    return {
+      error: new Error('Could not resolve the modal ID.')
+    };
+  }
+}
+
+function updateFocusState() {
+  // Check if there's an active modal
+  if (this.active) {
+    // Mount the focus trap on the active modal.
+    this.focusTrap.mount(this.active.dialog, this.settings.selectorFocus);
+  } else {
+    // Set focus to root trigger and unmount the focus trap.
+    if (this.trigger) {
+      this.trigger.focus();
+      this.trigger = null;
+    }
+    this.focusTrap.unmount();
+  }
+}
+
+async function handleClick$1(event) {
+  // If an open or replace button was clicked, open or replace the modal.
+  let trigger = event.target.closest(`[data-${this.settings.dataOpen}], [data-${this.settings.dataReplace}]`);
+  if (trigger) {
+    event.preventDefault();
+    // Save the trigger if it's not coming from inside a modal.
+    const fromModal = event.target.closest(this.settings.selectorModal);
+    if (!fromModal) this.trigger = trigger;
+    // Get the modal.
+    const modal = this.get(getModalID.call(this, trigger));
+    // Depending on the button type, either open or replace the modal.
+    return trigger.matches(`[data-${this.settings.dataOpen}]`) ? modal.open() : modal.replace();
+  }
+
+  // If a close button was clicked, close the modal.
+  trigger = event.target.closest(`[data-${this.settings.dataClose}]`);
+  if (trigger) {
+    event.preventDefault();
+    // Get the value of the data attribute.
+    const value = trigger.getAttribute(`data-${this.settings.dataClose}`);
+    // Close all if * wildcard is passed, otherwise close a single modal.
+    return value === '*' ? this.closeAll() : this.close(value);
+  }
+
+  // If the modal screen was clicked, close the modal.
+  if (event.target.matches(this.settings.selectorModal) && !event.target.querySelector(this.settings.selectorRequired)) {
+    return this.close(getModalID.call(this, event.target));
+  }
+}
+function handleKeydown$1(event) {
+  // If escape key was pressed.
+  if (event.key === 'Escape') {
+    // If a modal is opened and not required, close the modal.
+    if (this.active && !this.active.dialog.matches(this.settings.selectorRequired)) {
+      return this.close();
+    }
+  }
+}
+
+async function deregister$1(obj, close = true) {
+  // Return collection if nothing was passed.
+  if (!obj) return this.collection;
+
+  // Check if entry has been registered in the collection.
+  const index = this.collection.findIndex(entry => {
+    return entry.id === obj.id;
+  });
+  if (index >= 0) {
+    // Get the collection entry.
+    const entry = this.collection[index];
+
+    // If entry is in the opened state, close it.
+    if (close && entry.state === 'opened') {
+      await entry.close(false);
+    } else {
+      // Remove modal from stack.
+      this.stack.remove(entry);
+    }
+
+    // Return teleported modal if a reference has been set.
+    if (entry.getSetting('teleport')) {
+      entry.teleportReturn();
+    }
+
+    // Delete properties from collection entry.
+    Object.getOwnPropertyNames(entry).forEach(prop => {
+      delete entry[prop];
+    });
+
+    // Remove entry from collection.
+    this.collection.splice(index, 1);
+  }
+
+  // Return the modified collection.
+  return this.collection;
+}
+
+async function open$1(query, transition, focus = true) {
+  // Get the modal from collection.
+  const modal = getModal.call(this, query);
+
+  // Get the modal configuration.
+  const config = _extends({}, this.settings, modal.settings);
+
+  // Add transition parameter to configuration.
+  if (transition !== undefined) config.transition = transition;
+
+  // Maybe add modal to top of stack.
+  this.stack.moveToTop(modal);
+
+  // If modal is closed.
+  if (modal.state === 'closed') {
+    // Update modal state.
+    modal.state = 'opening';
+
+    // Add modal to stack.
+    this.stack.add(modal);
+
+    // Run the open transition.
+    await openTransition(modal.el, config);
+
+    // Update modal state.
+    modal.state = 'opened';
+  }
+
+  // Update focus if the focus param is true.
+  if (focus) {
+    updateFocusState.call(this);
+  }
+
+  // Dispatch custom opened event.
+  modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'opened', {
+    detail: this,
+    bubbles: true
+  }));
+
+  // Return the modal.
+  return modal;
+}
+
+async function close$1(query, transition, focus = true) {
+  // Get the modal from collection, or top modal in stack if no query is provided.
+  const modal = query ? getModal.call(this, query) : this.active;
+
+  // If a modal exists and its state is opened.
+  if (modal && modal.state === 'opened') {
+    // Update modal state.
+    modal.state = 'closing';
+
+    // Get the modal configuration.
+    const config = _extends({}, this.settings, modal.settings);
+
+    // Add transition parameter to configuration.
+    if (transition !== undefined) config.transition = transition;
+
+    // Remove focus from active element.
+    document.activeElement.blur();
+
+    // Run the close transition.
+    await closeTransition(modal.el, config);
+
+    // Remove modal from stack.
+    this.stack.remove(modal);
+
+    // Update focus if the focus param is true.
+    if (focus) {
+      updateFocusState.call(this);
+    }
+
+    // Update modal state.
+    modal.state = 'closed';
+
+    // Dispatch custom closed event.
+    modal.el.dispatchEvent(new CustomEvent(config.customEventPrefix + 'closed', {
+      detail: this,
+      bubbles: true
+    }));
+  }
+
+  // Return the modal.
+  return modal;
+}
+
+async function closeAll$1(exclude, transition) {
+  const result = [];
+  await Promise.all(this.stack.value.map(async modal => {
+    if (exclude && exclude === modal.id) {
+      Promise.resolve();
+    } else {
+      result.push(await close$1.call(this, modal, transition, false));
+    }
+    modal.trigger = null;
+  }));
+  return result;
+}
+
+async function replace(query, transition, focus = true) {
+  // Get the modal from collection.
+  const modal = getModal.call(this, query);
+
+  // Setup results for return.
+  let resultOpened, resultClosed;
+  if (modal.state === 'opened') {
+    // If modal is open, close all modals except for replacement.
+    resultOpened = modal;
+    resultClosed = await closeAll$1.call(this, modal.id, transition);
+  } else {
+    // If modal is closed, close all and open replacement at the same time.
+    resultOpened = open$1.call(this, modal, transition, false);
+    resultClosed = closeAll$1.call(this, false, transition);
+    await Promise.all([resultOpened, resultClosed]);
+  }
+
+  // Update focus if the focus param is true.
+  if (focus) {
+    updateFocusState.call(this);
+  }
+
+  // Return the modals there were opened and closed.
+  return {
+    opened: resultOpened,
+    closed: resultClosed
+  };
+}
+
+async function register$1(el, dialog) {
+  // Deregister entry incase it has already been registered.
+  await deregister$1.call(this, el, false);
+
+  // Save root this for use inside methods API.
+  const root = this;
+
+  // Setup methods API.
+  const methods = {
+    open(transition, focus) {
+      return open$1.call(root, this, transition, focus);
+    },
+    close(transition, focus) {
+      return close$1.call(root, this, transition, focus);
+    },
+    replace(transition, focus) {
+      return replace.call(root, this, transition, 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];
+    }
+  };
+
+  // Setup the modal object.
+  const entry = _extends({
+    id: el.id,
+    state: 'closed',
+    el: el,
+    dialog: dialog,
+    returnRef: null,
+    settings: getConfig$1(el, this.settings.dataConfig)
+  }, methods);
+
+  // Set aria-modal attribute to true.
+  entry.dialog.setAttribute('aria-modal', 'true');
+
+  // If a role attribute is not set, set it to "dialog" as the default.
+  if (!entry.dialog.hasAttribute('role')) {
+    entry.dialog.setAttribute('role', 'dialog');
+  }
+
+  // Set tabindex="-1" so dialog is focusable via JS or click.
+  if (entry.getSetting('setTabindex')) {
+    entry.dialog.setAttribute('tabindex', '-1');
+  }
+
+  // Teleport modal if a reference has been set.
+  if (entry.getSetting('teleport')) {
+    entry.teleport();
+  }
+
+  // Add entry to collection.
+  this.collection.push(entry);
+
+  // Setup initial state.
+  if (entry.el.classList.contains(this.settings.stateOpened)) {
+    // Open entry with transitions disabled.
+    await entry.open(false);
+  } else {
+    // Remove transition state classes.
+    entry.el.classList.remove(this.settings.stateOpening);
+    entry.el.classList.remove(this.settings.stateClosing);
+    // Add closed state class.
+    entry.el.classList.add(this.settings.stateClosed);
+  }
+
+  // Return the registered entry.
+  return entry;
+}
+
+function stack(settings) {
+  const stackArray = [];
+  return {
+    get value() {
+      return [...stackArray];
+    },
+    get top() {
+      return stackArray[stackArray.length - 1];
+    },
+    updateIndex() {
+      stackArray.forEach((entry, index) => {
+        entry.el.style.zIndex = null;
+        const value = getComputedStyle(entry.el)['z-index'];
+        entry.el.style.zIndex = parseInt(value) + index + 1;
+      });
+    },
+    updateGlobalState() {
+      updateGlobalState(this.top, settings);
+      this.updateIndex();
+    },
+    add(entry) {
+      // Apply z-index styles based on stack length.
+      entry.el.style.zIndex = null;
+      const value = getComputedStyle(entry.el)['z-index'];
+      entry.el.style.zIndex = parseInt(value) + stackArray.length + 1;
+
+      // Move back to end of stack.
+      stackArray.push(entry);
+
+      // Update the global state.
+      this.updateGlobalState();
+    },
+    remove(entry) {
+      // Get the index of the entry.
+      const index = stackArray.findIndex(item => {
+        return item.id === entry.id;
+      });
+
+      // If entry is in stack...
+      if (index >= 0) {
+        // Remove z-index styles.
+        entry.el.style.zIndex = null;
+
+        // Remove entry from stack array.
+        stackArray.splice(index, 1);
+
+        // Update the global state.
+        this.updateGlobalState();
+      }
+    },
+    moveToTop(entry) {
+      // Get the index of the entry.
+      const index = stackArray.findIndex(item => {
+        return item.id === entry.id;
+      });
+
+      // If entry is in stack...
+      if (index >= 0) {
+        // Remove entry from stack array.
+        stackArray.splice(index, 1);
+
+        // Add entry back to top of stack.
+        this.add(entry);
+      }
+    }
+  };
+}
+
+var _handleClick = /*#__PURE__*/_classPrivateFieldLooseKey("handleClick");
+var _handleKeydown$1 = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+class Modal extends Collection {
+  constructor(options) {
+    super();
+    Object.defineProperty(this, _handleClick, {
+      writable: true,
+      value: void 0
+    });
+    Object.defineProperty(this, _handleKeydown$1, {
+      writable: true,
+      value: void 0
+    });
+    this.defaults = defaults$1;
+    this.settings = _extends({}, this.defaults, options);
+    this.trigger = null;
+    this.focusTrap = new FocusTrap();
+
+    // Setup stack module.
+    this.stack = stack(this.settings);
+    _classPrivateFieldLooseBase(this, _handleClick)[_handleClick] = handleClick$1.bind(this);
+    _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1] = handleKeydown$1.bind(this);
+    if (this.settings.autoInit) this.init();
+  }
+  get active() {
+    return this.stack.top;
+  }
+  async init(options) {
+    // Update settings with passed options.
+    if (options) this.settings = _extends({}, this.settings, options);
+
+    // Get all the modals.
+    const modals = document.querySelectorAll(this.settings.selectorModal);
+
+    // Register the collections array with modal instances.
+    await this.registerCollection(modals);
+
+    // If eventListeners are enabled, init event listeners.
+    if (this.settings.eventListeners) {
+      this.initEventListeners();
+    }
+    return this;
+  }
+  async destroy() {
+    // Clear stored trigger.
+    this.trigger = null;
+
+    // Remove all entries from the collection.
+    await this.deregisterCollection();
+
+    // If eventListeners are enabled, destroy event listeners.
+    if (this.settings.eventListeners) {
+      this.destroyEventListeners();
+    }
+    return this;
+  }
+  initEventListeners() {
+    document.addEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
+  }
+  destroyEventListeners() {
+    document.removeEventListener('click', _classPrivateFieldLooseBase(this, _handleClick)[_handleClick], false);
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown$1)[_handleKeydown$1], false);
+  }
+  register(query) {
+    const els = getModalElements.call(this, query);
+    if (els.error) return Promise.reject(els.error);
+    return register$1.call(this, els.modal, els.dialog);
+  }
+  deregister(query) {
+    const modal = this.get(getModalID.call(this, query));
+    return deregister$1.call(this, modal);
+  }
+  open(id, transition, focus) {
+    return open$1.call(this, id, transition, focus);
+  }
+  close(id, transition, focus) {
+    return close$1.call(this, id, transition, focus);
+  }
+  replace(id, transition, focus) {
+    return replace.call(this, id, transition, focus);
+  }
+  async closeAll(exclude = false, transition, focus = true) {
+    const result = await closeAll$1.call(this, exclude, transition);
+    // Update focus if the focus param is true.
+    if (focus) {
+      updateFocusState.call(this);
+    }
+    return result;
+  }
+}
+
+var defaults = {
+  autoInit: false,
+  // Selectors
+  selectorPopover: '.popover',
+  selectorArrow: '.popover__arrow',
+  // State classes
+  stateActive: 'is-active',
+  // Feature settings
+  eventListeners: true,
+  eventType: 'click',
+  placement: 'bottom'
+};
+
+function getConfig(el, settings) {
+  // Get the computed styles of the element.
+  const styles = getComputedStyle(el);
+
+  // Setup the config obj with default values.
+  const config = {
+    'placement': settings.placement,
+    'event': settings.eventType,
+    'offset': 0,
+    'overflow-padding': 0,
+    'flip-padding': 0,
+    'arrow-element': settings.selectorArrow,
+    'arrow-padding': 0
+  };
+
+  // Loop through config obj.
+  for (const prop in config) {
+    // Get the CSS variable property values.
+    const prefix = E();
+    const value = styles.getPropertyValue(`--${prefix}popover-${prop}`).trim();
+
+    // If a value was found, replace the default in config obj.
+    if (value) {
+      config[prop] = value;
+    }
+  }
+
+  // Return the config obj.
+  return config;
+}
+
+function getPadding(value) {
+  let padding;
+
+  // Split the value by spaces if it's a string.
+  const array = typeof value === 'string' ? value.trim().split(' ') : [value];
+
+  // Convert individual values to integers.
+  array.forEach(function (item, index) {
+    array[index] = parseInt(item, 10);
+  });
+
+  // Build the padding object based on the number of values passed.
+  switch (array.length) {
+    case 1:
+      padding = array[0];
+      break;
+    case 2:
+      padding = {
+        top: array[0],
+        right: array[1],
+        bottom: array[0],
+        left: array[1]
+      };
+      break;
+    case 3:
+      padding = {
+        top: array[0],
+        right: array[1],
+        bottom: array[2],
+        left: array[1]
+      };
+      break;
+    case 4:
+      padding = {
+        top: array[0],
+        right: array[1],
+        bottom: array[2],
+        left: array[3]
+      };
+      break;
+    default:
+      padding = false;
+      break;
+  }
+
+  // Return the padding object.
+  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 getPopover(query) {
+  // Get the entry from collection.
+  const entry = typeof query === 'string' ? this.get(query) : this.get(query.id);
+
+  // Return entry if it was resolved, otherwise throw error.
+  if (entry) {
+    return entry;
+  } else {
+    throw new Error(`Popover not found in collection with id of "${query}".`);
+  }
+}
+
+function getPopoverID(obj) {
+  // If it's a string, return the string.
+  if (typeof obj === 'string') {
+    return obj;
+  }
+
+  // If it's an HTML element.
+  else if (typeof obj.hasAttribute === 'function') {
+    // If it's a popover element, return the id.
+    if (obj.closest(this.settings.selectorPopover)) {
+      obj = obj.closest(this.settings.selectorPopover);
+      return obj.id;
+    }
+
+    // If it's a popover trigger, return value of aria-controls.
+    else if (obj.hasAttribute('aria-controls')) {
+      return obj.getAttribute('aria-controls');
+    }
+
+    // If it's a popover tooltip trigger, return the value of aria-describedby.
+    else if (obj.hasAttribute('aria-describedby')) {
+      return obj.getAttribute('aria-describedby');
+    }
+
+    // Return false if no id was found.
+    else return false;
+  }
+
+  // If it has an id property, return its value.
+  else if (obj.id) {
+    return obj.id;
+  }
+
+  // Return false if no id was found.
+  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.')
+      };
+    } else if (!popover) {
+      return {
+        error: new Error('No popover associated with the provided popover trigger.')
+      };
+    } else {
+      return {
+        popover,
+        trigger
+      };
+    }
+  } else {
+    return {
+      error: new Error('Could not resolve the popover ID.')
+    };
+  }
+}
+
+async function close(query) {
+  // Get the popover from collection.
+  const popover = query ? getPopover.call(this, query) : await closeAll.call(this);
+
+  // If a modal exists and its state is opened.
+  if (popover && popover.state === 'opened') {
+    // Update state class.
+    popover.el.classList.remove(this.settings.stateActive);
+
+    // Update accessibility attribute(s).
+    if (popover.trigger.hasAttribute('aria-controls')) {
+      popover.trigger.setAttribute('aria-expanded', 'false');
+    }
+
+    // Disable popper event listeners.
+    popover.popper.setOptions({
+      modifiers: [{
+        name: 'eventListeners',
+        enabled: false
+      }]
+    });
+
+    // Update popover state.
+    popover.state = 'closed';
+
+    // Clear root trigger if popover trigger matches.
+    if (popover.trigger === this.trigger) {
+      this.trigger = null;
+    }
+  }
+
+  // Return the popover.
+  return popover;
+}
+async function closeAll() {
+  const result = [];
+  await Promise.all(this.collection.map(async popover => {
+    if (popover.state === 'opened') {
+      result.push(await close.call(this, popover));
+    }
+  }));
+  return result;
+}
+function closeCheck(popover) {
+  // Only run closeCheck if provided popover is currently open.
+  if (popover.state != 'opened') return;
+
+  // Needed to correctly check which element is currently being focused.
+  setTimeout(() => {
+    // Check if trigger or element are being hovered.
+    const isHovered = popover.el.closest(':hover') === popover.el || popover.trigger.closest(':hover') === popover.trigger;
+
+    // Check if trigger or element are being focused.
+    const isFocused = document.activeElement.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
+
+    // Close if the trigger and element are not currently hovered or focused.
+    if (!isHovered && !isFocused) {
+      popover.close();
+    }
+
+    // Return the popover.
+    return popover;
+  }, 1);
+}
+
+function handleClick(popover) {
+  if (popover.state === 'opened') {
+    popover.close();
+  } else {
+    this.trigger = popover.trigger;
+    popover.open();
+    handleDocumentClick.call(this, popover);
+  }
+}
+function handleKeydown(event) {
+  switch (event.key) {
+    case 'Escape':
+      if (this.trigger) {
+        this.trigger.focus();
+      }
+      closeAll.call(this);
+      return;
+    case 'Tab':
+      this.collection.forEach(popover => {
+        closeCheck.call(this, popover);
+      });
+      return;
+    default:
+      return;
+  }
+}
+function handleDocumentClick(popover) {
+  const root = this;
+  document.addEventListener('click', function _f(event) {
+    // Check if a popover or its trigger was clicked.
+    const wasClicked = event.target.closest(`#${popover.id}, [aria-controls="${popover.id}"], [aria-describedby="${popover.id}"]`);
+
+    // If popover or popover trigger was clicked...
+    if (wasClicked) {
+      // If popover element exists and is not active...
+      if (popover.el && !popover.el.classList.contains(root.settings.stateActive)) {
+        this.removeEventListener('click', _f);
+      }
+    } else {
+      // If popover element exists and is active...
+      if (popover.el && popover.el.classList.contains(root.settings.stateActive)) {
+        popover.close();
+      }
+      this.removeEventListener('click', _f);
+    }
+  });
+}
+
+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]);
+}, []); // modifiers that need to read the DOM
+
+var beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
+
+var beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+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;
+  }
+
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  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) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+
+// and applies them to the HTMLElements such as popper and arrow
+
+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]; // arrow is optional + virtual elements
+
+    if (!isHTMLElement(element) || !getNodeName(element)) {
+      return;
+    } // Flow doesn't support to extend this property, but it's the most
+    // effective way to apply styles to an HTMLElement
+    // $FlowFixMe[cannot-write]
+
+
+    Object.assign(element.style, style);
+    Object.keys(attributes).forEach(function (name) {
+      var value = attributes[name];
+
+      if (value === false) {
+        element.removeAttribute(name);
+      } else {
+        element.setAttribute(name, 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]); // Set all values to an empty string to unset them
+
+      var style = styleProperties.reduce(function (style, property) {
+        style[property] = '';
+        return style;
+      }, {}); // arrow is optional + virtual elements
+
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      }
+
+      Object.assign(element.style, style);
+      Object.keys(attributes).forEach(function (attribute) {
+        element.removeAttribute(attribute);
+      });
+    });
+  };
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var applyStyles$1 = {
+  name: 'applyStyles',
+  enabled: true,
+  phase: 'write',
+  fn: applyStyles,
+  effect: effect$2,
+  requires: ['computeStyles']
+};
+
+function getBasePlacement(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 isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  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 {
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
+  };
+}
+
+// means it doesn't take into account transforms.
+
+function getLayoutRect(element) {
+  var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed.
+  // Fixes https://github.com/popperjs/popper-core/issues/1223
+
+  var width = element.offsetWidth;
+  var height = element.offsetHeight;
+
+  if (Math.abs(clientRect.width - width) <= 1) {
+    width = clientRect.width;
+  }
+
+  if (Math.abs(clientRect.height - height) <= 1) {
+    height = clientRect.height;
+  }
+
+  return {
+    x: element.offsetLeft,
+    y: element.offsetTop,
+    width: width,
+    height: height
+  };
+}
+
+function contains(parent, child) {
+  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
+
+  if (parent.contains(child)) {
+    return true;
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (rootNode && isShadowRoot(rootNode)) {
+      var next = child;
+
+      do {
+        if (next && parent.isSameNode(next)) {
+          return true;
+        } // $FlowFixMe[prop-missing]: need a better way to handle this...
+
+
+        next = next.parentNode || next.host;
+      } while (next);
+    } // Give up, the result is false
+
+
+  return false;
+}
+
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+
+function isTableElement(element) {
+  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
+}
+
+function getDocumentElement(element) {
+  // $FlowFixMe[incompatible-return]: assume body is always available
+  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) // fallback
+
+  );
+}
+
+function getTrueOffsetParent(element) {
+  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
+  getComputedStyle$1(element).position === 'fixed') {
+    return null;
+  }
+
+  return element.offsetParent;
+} // `.offsetParent` reports `null` for fixed elements, while absolute elements
+// return the containing block
+
+
+function getContainingBlock(element) {
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
+
+  if (isIE && isHTMLElement(element)) {
+    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
+    var elementCss = getComputedStyle$1(element);
+
+    if (elementCss.position === 'fixed') {
+      return null;
+    }
+  }
+
+  var currentNode = getParentNode(element);
+
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
+  while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
+    var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+    // create a containing block.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+    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 currentNode;
+    } else {
+      currentNode = currentNode.parentNode;
+    }
+  }
+
+  return null;
+} // Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+
+
+function getOffsetParent(element) {
+  var window = 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 window;
+  }
+
+  return offsetParent || getContainingBlock(element) || window;
+}
+
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
+}
+
+function within(min$1, value, max$1) {
+  return max(min$1, min(value, max$1));
+}
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
+
+function getFreshSideObject() {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+}
+
+function mergePaddingObject(paddingObject) {
+  return Object.assign({}, getFreshSideObject(), paddingObject);
+}
+
+function expandToHashMap(value, keys) {
+  return keys.reduce(function (hashMap, key) {
+    hashMap[key] = value;
+    return hashMap;
+  }, {});
+}
+
+var toPaddingObject = function toPaddingObject(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 popperOffsets = 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 || !popperOffsets) {
+    return;
+  }
+
+  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] - popperOffsets[axis] - state.rects.popper[len];
+  var startDiff = popperOffsets[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; // Make sure the arrow doesn't overflow the popper if the center point is
+  // outside of the popper bounds
+
+  var min = paddingObject[minProp];
+  var max = clientSize - arrowRect[len] - paddingObject[maxProp];
+  var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
+  var offset = within(min, center, max); // Prevents breaking syntax highlighting...
+
+  var axisProp = axis;
+  state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - 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;
+  } // CSS selector
+
+
+  if (typeof arrowElement === 'string') {
+    arrowElement = state.elements.popper.querySelector(arrowElement);
+
+    if (!arrowElement) {
+      return;
+    }
+  }
+
+  if (!contains(state.elements.popper, arrowElement)) {
+    return;
+  }
+
+  state.elements.arrow = arrowElement;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var 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'
+}; // Round the offsets to the nearest suitable subpixel based on the DPR.
+// Zooming can change the DPR, but it seems to report a value that will
+// cleanly divide the values into the appropriate subpixels.
+
+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
+  };
+}
+
+function mapToStyles(_ref2) {
+  var _Object$assign2;
+
+  var popper = _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: x,
+    y: y
+  }) : {
+    x: x,
+    y: 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(popper);
+    var heightProp = 'clientHeight';
+    var widthProp = 'clientWidth';
+
+    if (offsetParent === getWindow(popper)) {
+      offsetParent = getDocumentElement(popper);
+
+      if (getComputedStyle$1(offsetParent).position !== 'static' && position === 'absolute') {
+        heightProp = 'scrollHeight';
+        widthProp = 'scrollWidth';
+      }
+    } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
+
+
+    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;
+    }
+  }
+
+  var commonStyles = Object.assign({
+    position: position
+  }, adaptive && unsetSides);
+
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }, getWindow(popper)) : {
+    x: x,
+    y: 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: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
+  };
+
+  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: adaptive,
+      roundOffsets: 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: roundOffsets
+    })));
+  }
+
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-placement': state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var 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 window = 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);
+    });
+  }
+
+  if (resize) {
+    window.addEventListener('resize', instance.update, passive);
+  }
+
+  return function () {
+    if (scroll) {
+      scrollParents.forEach(function (scrollParent) {
+        scrollParent.removeEventListener('scroll', instance.update, passive);
+      });
+    }
+
+    if (resize) {
+      window.removeEventListener('resize', instance.update, passive);
+    }
+  };
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var eventListeners = {
+  name: 'eventListeners',
+  enabled: true,
+  phase: 'write',
+  fn: function fn() {},
+  effect: 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];
+  });
+}
+
+var hash = {
+  start: 'end',
+  end: 'start'
+};
+function getOppositeVariationPlacement(placement) {
+  return placement.replace(/start|end/g, function (matched) {
+    return hash[matched];
+  });
+}
+
+function getWindowScroll(node) {
+  var win = getWindow(node);
+  var scrollLeft = win.pageXOffset;
+  var scrollTop = win.pageYOffset;
+  return {
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  // Popper 1 is broken in this case and never had a bug report so let's assume
+  // it's not an issue. I don't think anyone ever specifies width on <html>
+  // anyway.
+  // Browsers where the left scrollbar doesn't cause an issue report `0` for
+  // this (e.g. Edge 2019, IE11, Safari)
+  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;
+
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x + getWindowScrollBarX(element),
+    y: y
+  };
+}
+
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable
+
+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;
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x,
+    y: y
+  };
+}
+
+function isScrollParent(element) {
+  // Firefox wants us to check `-x` and `-y` variations as well
+  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) {
+    // $FlowFixMe[incompatible-return]: assume body is always available
+    return node.ownerDocument.body;
+  }
+
+  if (isHTMLElement(node) && isScrollParent(node)) {
+    return node;
+  }
+
+  return getScrollParent(getParentNode(node));
+}
+
+/*
+given a DOM element, return the list of all scroll parents, up the list of ancesors
+until we get to the top window object. This list is what we attach scroll listeners
+to, because if any of these parent elements scroll, we'll need to re-calculate the
+reference element's position.
+*/
+
+function listScrollParents(element, list) {
+  var _element$ownerDocumen;
+
+  if (list === void 0) {
+    list = [];
+  }
+
+  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)));
+} // A "clipping parent" is an overflowable container with the characteristic of
+// clipping (or hiding) overflowing elements with a position different from
+// `initial`
+
+
+function getClippingParents(element) {
+  var clippingParents = 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 [];
+  } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
+
+
+  return clippingParents.filter(function (clippingParent) {
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+  });
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping parents
+
+
+function getClippingRect(element, boundary, rootBoundary, strategy) {
+  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
+  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
+  var firstClippingParent = clippingParents[0];
+  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
+    var rect = getClientRectFromMixedType(element, clippingParent, 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 reference = _ref.reference,
+      element = _ref.element,
+      placement = _ref.placement;
+  var basePlacement = placement ? getBasePlacement(placement) : null;
+  var variation = placement ? getVariation(placement) : null;
+  var commonX = reference.x + reference.width / 2 - element.width / 2;
+  var commonY = reference.y + reference.height / 2 - element.height / 2;
+  var offsets;
+
+  switch (basePlacement) {
+    case top:
+      offsets = {
+        x: commonX,
+        y: reference.y - element.height
+      };
+      break;
+
+    case bottom:
+      offsets = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case right:
+      offsets = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case left:
+      offsets = {
+        x: reference.x - element.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      offsets = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+
+  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
+
+  if (mainAxis != null) {
+    var len = mainAxis === 'y' ? 'height' : 'width';
+
+    switch (variation) {
+      case start:
+        offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
+        break;
+
+      case end:
+        offsets[mainAxis] = offsets[mainAxis] + (reference[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 popperOffsets = computeOffsets({
+    reference: referenceClientRect,
+    element: popperRect,
+    strategy: 'absolute',
+    placement: placement
+  });
+  var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
+  var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
+  // 0 or negative = within the clipping rect
+
+  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; // Offsets can be applied only to the popper element
+
+  if (elementContext === popper && offsetData) {
+    var offset = 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] += offset[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 (placement) {
+    return getVariation(placement) === variation;
+  }) : basePlacements;
+  var allowedPlacements = placements$1.filter(function (placement) {
+    return allowedAutoPlacements.indexOf(placement) >= 0;
+  });
+
+  if (allowedPlacements.length === 0) {
+    allowedPlacements = placements$1;
+  } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
+
+
+  var overflows = allowedPlacements.reduce(function (acc, placement) {
+    acc[placement] = detectOverflow(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding
+    })[getBasePlacement(placement)];
+    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 placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
+    return acc.concat(getBasePlacement(placement) === auto ? computeAutoPlacement(state, {
+      placement: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding,
+      flipVariations: flipVariations,
+      allowedAutoPlacements: allowedAutoPlacements
+    }) : placement);
+  }, []);
+  var referenceRect = state.rects.reference;
+  var popperRect = state.rects.popper;
+  var checksMap = new Map();
+  var makeFallbackChecks = true;
+  var firstFittingPlacement = placements[0];
+
+  for (var i = 0; i < placements.length; i++) {
+    var placement = placements[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: placement,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      altBoundary: altBoundary,
+      padding: 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) {
+    // `2` may be desired in some cases – research later
+    var numberOfChecks = flipVariations ? 3 : 1;
+
+    var _loop = function _loop(_i) {
+      var fittingPlacement = placements.find(function (placement) {
+        var checks = checksMap.get(placement);
+
+        if (checks) {
+          return checks.slice(0, _i).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;
+  }
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var 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
+    };
+  }
+
+  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: referenceClippingOffsets,
+    popperEscapeOffsets: popperEscapeOffsets,
+    isReferenceHidden: isReferenceHidden,
+    hasPopperEscaped: hasPopperEscaped
+  };
+  state.attributes.popper = Object.assign({}, state.attributes.popper, {
+    'data-popper-reference-hidden': isReferenceHidden,
+    'data-popper-escaped': hasPopperEscaped
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var hide$1 = {
+  name: 'hide',
+  enabled: true,
+  phase: 'main',
+  requiresIfExists: ['preventOverflow'],
+  fn: hide
+};
+
+function distanceAndSkiddingToXY(placement, rects, offset) {
+  var basePlacement = getBasePlacement(placement);
+  var invertDistance = [left, top].indexOf(basePlacement) >= 0 ? -1 : 1;
+
+  var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
+    placement: placement
+  })) : offset,
+      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,
+      offset = _options$offset === void 0 ? [0, 0] : _options$offset;
+  var data = placements.reduce(function (acc, placement) {
+    acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
+    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;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var offset$1 = {
+  name: 'offset',
+  enabled: true,
+  phase: 'main',
+  requires: ['popperOffsets'],
+  fn: offset
+};
+
+function popperOffsets(_ref) {
+  var state = _ref.state,
+      name = _ref.name;
+  // Offsets are the actual position the popper needs to have to be
+  // properly positioned near its reference element
+  // This is the most basic placement, and will be adjusted by
+  // the modifiers in the next step
+  state.modifiersData[name] = computeOffsets({
+    reference: state.rects.reference,
+    element: state.rects.popper,
+    strategy: 'absolute',
+    placement: state.placement
+  });
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var 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: boundary,
+    rootBoundary: rootBoundary,
+    padding: padding,
+    altBoundary: altBoundary
+  });
+  var basePlacement = getBasePlacement(state.placement);
+  var variation = getVariation(state.placement);
+  var isBasePlacement = !variation;
+  var mainAxis = getMainAxisFromPlacement(basePlacement);
+  var altAxis = getAltAxis(mainAxis);
+  var popperOffsets = 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 (!popperOffsets) {
+    return;
+  }
+
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
+    var mainSide = mainAxis === 'y' ? top : left;
+    var altSide = mainAxis === 'y' ? bottom : right;
+    var len = mainAxis === 'y' ? 'height' : 'width';
+    var offset = popperOffsets[mainAxis];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - 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]; // We need to include the arrow in the calculation so the arrow doesn't go
+    // outside the reference bounds
+
+    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]; // If the reference length is smaller than the arrow length, we don't want
+    // to include its full size in the calculation. If the reference is small
+    // and near the edge of a boundary, the popper can overflow even if the
+    // reference is not overflowing as well (e.g. virtual elements with no
+    // width or height)
+
+    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 = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
+
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
+
+    var _mainSide = mainAxis === 'x' ? top : left;
+
+    var _altSide = mainAxis === 'x' ? bottom : right;
+
+    var _offset = popperOffsets[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);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
+  }
+
+  state.modifiersData[name] = data;
+} // eslint-disable-next-line import/no-unused-modules
+
+
+var preventOverflow$1 = {
+  name: 'preventOverflow',
+  enabled: true,
+  phase: 'main',
+  fn: preventOverflow,
+  requiresIfExists: ['offset']
+};
+
+function getHTMLElementScroll(element) {
+  return {
+    scrollLeft: element.scrollLeft,
+    scrollTop: element.scrollTop
+  };
+}
+
+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;
+} // Returns the composite rect of an element relative to its offsetParent.
+// Composite means it takes into account transforms as well as layout.
+
+
+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 = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  var offsets = {
+    x: 0,
+    y: 0
+  };
+
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078
+    isScrollParent(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+
+    if (isHTMLElement(offsetParent)) {
+      offsets = getBoundingClientRect(offsetParent, true);
+      offsets.x += offsetParent.clientLeft;
+      offsets.y += offsetParent.clientTop;
+    } else if (documentElement) {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+  }
+
+  return {
+    x: rect.left + scroll.scrollLeft - offsets.x,
+    y: rect.top + scroll.scrollTop - offsets.y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+
+function order(modifiers) {
+  var map = new Map();
+  var visited = new Set();
+  var result = [];
+  modifiers.forEach(function (modifier) {
+    map.set(modifier.name, modifier);
+  }); // On visiting object, check for its dependencies and visit them recursively
+
+  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);
+  }
+
+  modifiers.forEach(function (modifier) {
+    if (!visited.has(modifier.name)) {
+      // check for visited object
+      sort(modifier);
+    }
+  });
+  return result;
+}
+
+function orderModifiers(modifiers) {
+  // order based on dependencies
+  var orderedModifiers = order(modifiers); // order based on phase
+
+  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 = undefined;
+          resolve(fn());
+        });
+      });
+    }
+
+    return pending;
+  };
+}
+
+function mergeByName(modifiers) {
+  var merged = modifiers.reduce(function (merged, current) {
+    var existing = merged[current.name];
+    merged[current.name] = existing ? Object.assign({}, existing, current, {
+      options: Object.assign({}, existing.options, current.options),
+      data: Object.assign({}, existing.data, current.data)
+    }) : current;
+    return merged;
+  }, {}); // IE11 does not support Object.values
+
+  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,
+      defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
+      _generatorOptions$def2 = _generatorOptions.defaultOptions,
+      defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
+  return function createPopper(reference, popper, options) {
+    if (options === void 0) {
+      options = defaultOptions;
+    }
+
+    var state = {
+      placement: 'bottom',
+      orderedModifiers: [],
+      options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
+      modifiersData: {},
+      elements: {
+        reference: reference,
+        popper: popper
+      },
+      attributes: {},
+      styles: {}
+    };
+    var effectCleanupFns = [];
+    var isDestroyed = false;
+    var instance = {
+      state: state,
+      setOptions: function setOptions(setOptionsAction) {
+        var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
+        cleanupModifierEffects();
+        state.options = Object.assign({}, defaultOptions, state.options, options);
+        state.scrollParents = {
+          reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
+          popper: listScrollParents(popper)
+        }; // Orders the modifiers based on their dependencies and `phase`
+        // properties
+
+        var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled 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,
+            reference = _state$elements.reference,
+            popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
+        // anymore
+
+        if (!areValidElements(reference, popper)) {
+          return;
+        } // Store the reference and popper rects to be read by modifiers
+
+
+        state.rects = {
+          reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
+          popper: getLayoutRect(popper)
+        }; // Modifiers have the ability to reset the current update cycle. The
+        // most common use case for this is the `flip` modifier changing the
+        // placement, which then needs to re-run all the modifiers, because the
+        // logic was previously ran for the previous placement and is therefore
+        // stale/incorrect
+
+        state.reset = false;
+        state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
+        // is filled with the initial data specified by the modifier. This means
+        // it doesn't persist and is fresh on each update.
+        // To ensure persistent data, use `${name}#persistent`
+
+        state.orderedModifiers.forEach(function (modifier) {
+          return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
+        });
+
+        for (var index = 0; index < state.orderedModifiers.length; index++) {
+          if (state.reset === true) {
+            state.reset = false;
+            index = -1;
+            continue;
+          }
+
+          var _state$orderedModifie = state.orderedModifiers[index],
+              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: state,
+              options: _options,
+              name: name,
+              instance: instance
+            }) || state;
+          }
+        }
+      },
+      // 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(reference, popper)) {
+      return instance;
+    }
+
+    instance.setOptions(options).then(function (state) {
+      if (!isDestroyed && options.onFirstUpdate) {
+        options.onFirstUpdate(state);
+      }
+    }); // Modifiers have the ability to execute arbitrary code before the first
+    // update cycle runs. They will be executed in the same order as the update
+    // cycle. This is useful when a modifier adds some persistent data that
+    // other modifiers need to use, but the modifier is run after the dependent
+    // one.
+
+    function runModifierEffects() {
+      state.orderedModifiers.forEach(function (_ref) {
+        var name = _ref.name,
+            _ref$options = _ref.options,
+            options = _ref$options === void 0 ? {} : _ref$options,
+            effect = _ref.effect;
+
+        if (typeof effect === 'function') {
+          var cleanupFn = effect({
+            state: state,
+            name: name,
+            instance: instance,
+            options: options
+          });
+
+          var noopFn = function noopFn() {};
+
+          effectCleanupFns.push(cleanupFn || noopFn);
+        }
+      });
+    }
+
+    function cleanupModifierEffects() {
+      effectCleanupFns.forEach(function (fn) {
+        return fn();
+      });
+      effectCleanupFns = [];
+    }
+
+    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: defaultModifiers
+}); // eslint-disable-next-line import/no-unused-modules
+
+async function deregister(obj) {
+  // Return collection if nothing was passed.
+  if (!obj) return this.collection;
+
+  // Check if entry has been registered in the collection.
+  const index = this.collection.findIndex(entry => {
+    return entry.id === obj.id;
+  });
+  if (index >= 0) {
+    // Get the collection entry.
+    const entry = this.collection[index];
+
+    // If entry is in the opened state, close it.
+    if (entry.state === 'opened') {
+      entry.close();
+    }
+
+    // Clean up the popper instance.
+    entry.popper.destroy();
+
+    // Remove event listeners.
+    deregisterEventListeners(entry);
+
+    // Delete properties from collection entry.
+    Object.getOwnPropertyNames(entry).forEach(prop => {
+      delete entry[prop];
+    });
+
+    // Remove entry from collection.
+    this.collection.splice(index, 1);
+  }
+
+  // Return the modified collection.
+  return this.collection;
+}
+function deregisterEventListeners(entry) {
+  // If event listeners have been setup.
+  if (entry.__eventListeners) {
+    // Loop through listeners and remove from the appropriate elements.
+    entry.__eventListeners.forEach(evObj => {
+      evObj.el.forEach(el => {
+        evObj.type.forEach(type => {
+          entry[el].removeEventListener(type, evObj.listener, false);
+        });
+      });
+    });
+
+    // Remove eventListeners object from collection.
+    delete entry.__eventListeners;
+  }
+
+  // Return the entry object.
+  return entry;
+}
+
+async function open(query) {
+  // Get the popover from collection.
+  const popover = getPopover.call(this, query);
+
+  // Update state class.
+  popover.el.classList.add(this.settings.stateActive);
+
+  // Update accessibility attribute(s).
+  if (popover.trigger.hasAttribute('aria-controls')) {
+    popover.trigger.setAttribute('aria-expanded', 'true');
+  }
+
+  // Update popover config.
+  popover.config = getConfig(popover.el, this.settings);
+
+  // Enable popper event listeners and set placement/modifiers.
+  popover.popper.setOptions({
+    placement: popover.config['placement'],
+    modifiers: [{
+      name: 'eventListeners',
+      enabled: true
+    }, ...getModifiers(popover.config)]
+  });
+
+  // Update popover position.
+  popover.popper.update();
+
+  // Update popover state.
+  popover.state = 'opened';
+
+  // Return the popover.
+  return popover;
+}
+
+async function register(el, trigger) {
+  // Deregister entry incase it has already been registered.
+  deregister.call(this, el);
+
+  // Save root this for use inside methods API.
+  const root = this;
+
+  // Setup methods API.
+  const methods = {
+    open() {
+      return open.call(root, this);
+    },
+    close() {
+      return close.call(root, this);
+    },
+    deregister() {
+      return deregister.call(root, this);
+    }
+  };
+
+  // Setup the popover object.
+  const entry = _extends({
+    id: el.id,
+    state: 'closed',
+    el: el,
+    trigger: trigger,
+    popper: createPopper(trigger, el),
+    config: getConfig(el, this.settings)
+  }, methods);
+
+  // Set aria-expanded to false if trigger has aria-controls attribute.
+  if (entry.trigger.hasAttribute('aria-controls')) {
+    entry.trigger.setAttribute('aria-expanded', 'false');
+  }
+
+  // Setup event listeners.
+  registerEventListeners.call(this, entry);
+
+  // Add entry to collection.
+  this.collection.push(entry);
+
+  // Set initial state.
+  if (entry.el.classList.contains(this.settings.stateActive)) {
+    await entry.open();
+    handleDocumentClick.call(this, entry);
+  }
+
+  // Return the registered entry.
+  return entry;
+}
+function registerEventListeners(entry) {
+  // If event listeners aren't already setup.
+  if (!entry.__eventListeners) {
+    // Add event listeners based on event type.
+    const eventType = entry.config['event'];
+
+    // If the event type is hover.
+    if (eventType === 'hover') {
+      // Setup event listeners object for hover.
+      entry.__eventListeners = [{
+        el: ['trigger'],
+        type: ['mouseenter', 'focus'],
+        listener: open.bind(this, entry)
+      }, {
+        el: ['el', 'trigger'],
+        type: ['mouseleave', 'focusout'],
+        listener: closeCheck.bind(this, entry)
+      }];
+
+      // Loop through listeners and apply to the appropriate elements.
+      entry.__eventListeners.forEach(evObj => {
+        evObj.el.forEach(el => {
+          evObj.type.forEach(type => {
+            entry[el].addEventListener(type, evObj.listener, false);
+          });
+        });
+      });
+    }
+
+    // Else the event type is click.
+    else {
+      // Setup event listeners object for click.
+      entry.__eventListeners = [{
+        el: ['trigger'],
+        type: ['click'],
+        listener: handleClick.bind(this, entry)
+      }];
+
+      // Loop through listeners and apply to the appropriate elements.
+      entry.__eventListeners.forEach(evObj => {
+        evObj.el.forEach(el => {
+          evObj.type.forEach(type => {
+            entry[el].addEventListener(type, evObj.listener, false);
+          });
+        });
+      });
+    }
+  }
+
+  // Return the entry object.
+  return entry;
+}
+
+var _handleKeydown = /*#__PURE__*/_classPrivateFieldLooseKey("handleKeydown");
+class Popover extends Collection {
+  constructor(options) {
+    super();
+    Object.defineProperty(this, _handleKeydown, {
+      writable: true,
+      value: void 0
+    });
+    this.defaults = defaults;
+    this.settings = _extends({}, this.defaults, options);
+    this.trigger = null;
+    _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown] = handleKeydown.bind(this);
+    if (this.settings.autoInit) this.init();
+  }
+  async init(options) {
+    // Update settings with passed options.
+    if (options) this.settings = _extends({}, this.settings, options);
+
+    // Get all the popovers.
+    const popovers = document.querySelectorAll(this.settings.selectorPopover);
+
+    // Register the collections array with popover instances.
+    await this.registerCollection(popovers);
+
+    // If eventListeners are enabled, init event listeners.
+    if (this.settings.eventListeners) {
+      // Pass false to initEventListeners() since registerCollection()
+      // already adds event listeners to popovers.
+      this.initEventListeners(false);
+    }
+    return this;
+  }
+  async destroy() {
+    // Clear stored trigger.
+    this.trigger = null;
+
+    // Remove all entries from the collection.
+    await this.deregisterCollection();
+
+    // If eventListeners are enabled, destroy event listeners.
+    if (this.settings.eventListeners) {
+      // Pass false to destroyEventListeners() since deregisterCollection()
+      // already removes event listeners from popovers.
+      this.destroyEventListeners(false);
+    }
+    return this;
+  }
+  initEventListeners(processCollection = true) {
+    if (processCollection) {
+      // Loop through collection and setup event listeners.
+      this.collection.forEach(popover => {
+        registerEventListeners.call(this, popover);
+      });
+    }
+
+    // Add keydown global event listener.
+    document.addEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
+  }
+  destroyEventListeners(processCollection = true) {
+    if (processCollection) {
+      // Loop through collection and remove event listeners.
+      this.collection.forEach(popover => {
+        deregisterEventListeners(popover);
+      });
+    }
+
+    // Remove keydown global event listener.
+    document.removeEventListener('keydown', _classPrivateFieldLooseBase(this, _handleKeydown)[_handleKeydown], false);
+  }
+  register(query) {
+    const els = getPopoverElements.call(this, query);
+    if (els.error) return Promise.reject(els.error);
+    return register.call(this, els.popover, els.trigger);
+  }
+  deregister(query) {
+    const popover = this.get(getPopoverID.call(this, query));
+    return deregister.call(this, popover);
+  }
+  open(id) {
+    return open.call(this, id);
+  }
+  close(id) {
+    return close.call(this, id);
+  }
+}
+
+export { Checkbox, Drawer, Modal, Popover, index as core };
+//# sourceMappingURL=scripts.modern.mjs.map