@orangelogic/design-system 2.19.0-pr77202.21

package/library/components/popup.js

@@ -0,0 +1,3299 @@
+import { a as _e, i as Vt, r as ze, x as j, n as v, C as Be, c as Ie } from "../chunks/custom-element.fmLrnDZr.js";
+import { r as Me } from "../chunks/state.Dt9F_SuS.js";
+import { e as ut } from "../chunks/query.BBf1UFkC.js";
+import { e as He } from "../chunks/base.D76d76ww.js";
+import { o as Tt } from "../chunks/if-defined.CKupVaWs.js";
+import { o as se } from "../chunks/style-map.lEJHEwk3.js";
+import { i as Lt, p as ne, f as We, a as qe } from "../chunks/browser.Va59Ix3P.js";
+import { c as ye } from "../chunks/component.styles.DtouHn2g.js";
+import { L as Ve } from "../chunks/i18n.C6c6_pqI.js";
+import { e as Dt } from "../chunks/class-map.DqNfBvJI.js";
+import { n as Ue } from "../chunks/when.Dr1es41R.js";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function je(e) {
+  return (t, o) => {
+    const { slot: i, selector: s } = e ?? {}, r = "slot" + (i ? `[name=${i}]` : ":not([name])");
+    return He(t, o, { get() {
+      const n = this.renderRoot?.querySelector(r), a = n?.assignedElements(e) ?? [];
+      return s === void 0 ? a : a.filter((l) => l.matches(s));
+    } });
+  };
+}
+const re = /* @__PURE__ */ new Set(), Ye = (e) => typeof e.startManagingContentDirection < "u" || e.tagName === "SP-THEME";
+function Ke(e) {
+  class t extends e {
+    /**
+     * @private
+     */
+    get isLTR() {
+      return this.dir === "ltr";
+    }
+    hasVisibleFocusInTree() {
+      const s = ((r = document) => {
+        let n = r.activeElement;
+        for (; n?.shadowRoot && n.shadowRoot.activeElement; )
+          n = n.shadowRoot.activeElement;
+        const a = n ? [n] : [];
+        for (; n; ) {
+          const l = n.assignedSlot || n.parentElement || n.getRootNode()?.host;
+          l && a.push(l), n = l;
+        }
+        return a;
+      })(this.getRootNode())[0];
+      if (!s)
+        return !1;
+      try {
+        return s.matches(":focus-visible") || s.matches(".focus-visible");
+      } catch {
+        return s.matches(".focus-visible");
+      }
+    }
+    connectedCallback() {
+      if (!this.hasAttribute("dir")) {
+        let i = this.assignedSlot || this.parentNode;
+        for (; i !== document.documentElement && !Ye(i); )
+          i = i.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+          i.parentNode || // DOM Element detected
+          i.host;
+        if (this.dir = i.dir === "rtl" ? i.dir : this.dir || "ltr", i === document.documentElement)
+          re.add(this);
+        else {
+          const { localName: s } = i;
+          s.search("-") > -1 && !customElements.get(s) ? customElements.whenDefined(s).then(() => {
+            i.startManagingContentDirection(this);
+          }) : i.startManagingContentDirection(this);
+        }
+        this._dirParent = i;
+      }
+      super.connectedCallback();
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._dirParent && (this._dirParent === document.documentElement ? re.delete(this) : this._dirParent.stopManagingContentDirection(this), this.removeAttribute("dir"));
+    }
+  }
+  return t;
+}
+class Xe extends Ke(_e) {
+}
+function Ge(e, t, o) {
+  const i = e.getAttribute(t);
+  let s = i ? i.split(/\s+/) : [];
+  s = s.filter(
+    (r) => !o.find((n) => r === n)
+  ), s.length ? e.setAttribute(t, s.join(" ")) : e.removeAttribute(t);
+}
+function $t(e, t, o) {
+  const i = Array.isArray(o) ? o : [o], s = e.getAttribute(t), r = s ? s.split(/\s+/) : [];
+  return i.every((a) => r.indexOf(a) > -1) ? () => {
+  } : (r.push(...i), e.setAttribute(t, r.join(" ")), () => Ge(e, t, i));
+}
+function Qe(e, t) {
+  customElements.get(e) || customElements.define(e, t);
+}
+function Je(e, t, o = []) {
+  for (let i = 0; i < t.length; ++i) {
+    const s = t[i], r = e[i], n = r.parentElement || r.getRootNode();
+    o[i] && o[i](s), n && n !== r && n.replaceChild(s, r), delete e[i];
+  }
+  return t;
+}
+const Ze = (e, t, {
+  position: o,
+  prepareCallback: i
+} = { position: "beforeend" }) => {
+  let { length: s } = e;
+  if (s === 0)
+    return () => e;
+  let r = 1, n = 0;
+  (o === "afterbegin" || o === "afterend") && (r = -1, n = s - 1);
+  const a = new Array(s), l = new Array(s), c = document.createComment(
+    "placeholder for reparented element"
+  );
+  do {
+    const h = e[n];
+    i && (l[n] = i(h)), a[n] = c.cloneNode();
+    const d = h.parentElement || h.getRootNode();
+    d && d !== h && d.replaceChild(a[n], h), t.insertAdjacentElement(o, h), n += r;
+  } while (--s > 0);
+  return function() {
+    return Je(a, e, l);
+  };
+};
+function Ut() {
+  return Array.from(
+    crypto.getRandomValues(new Uint8Array(4)),
+    (e) => `0${(e & 255).toString(16)}`.slice(-2)
+  ).join("");
+}
+const ti = [
+  "button",
+  "[focusable]",
+  "[href]",
+  "input",
+  "label",
+  "select",
+  "textarea",
+  "[tabindex]"
+], ae = ':not([tabindex="-1"])', ft = ti.join(`${ae}, `) + ae, jt = (e) => e.querySelector(
+  ft
+), Yt = (e) => e.assignedElements().find(
+  (o) => o.matches(ft)
+);
+function ei(e) {
+  return typeof window < "u" && window.navigator != null ? e.test(window.navigator.userAgent) : !1;
+}
+function Kt(e) {
+  return typeof window < "u" && window.navigator != null ? e.test(window.navigator.platform) : !1;
+}
+function ii() {
+  return Kt(/^Mac/);
+}
+function oi() {
+  return Kt(/^iPhone/);
+}
+function si() {
+  return Kt(/^iPad/) || // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+  ii() && navigator.maxTouchPoints > 1;
+}
+function ni() {
+  return oi() || si();
+}
+function ri() {
+  return ei(/Android/);
+}
+const ai = 1e3, li = 1e3;
+class ci {
+  constructor(t = {}) {
+    this.warmUpDelay = ai, this.coolDownDelay = li, this.isWarm = !1, this.timeout = 0, Object.assign(this, t);
+  }
+  async openTimer(t) {
+    if (this.cancelCooldownTimer(), !this.component || t !== this.component)
+      return this.component && (this.close(this.component), this.cancelCooldownTimer()), this.component = t, this.isWarm ? !1 : (this.promise = new Promise((o) => {
+        this.resolve = o, this.timeout = window.setTimeout(() => {
+          this.resolve && (this.resolve(!1), this.isWarm = !0);
+        }, this.warmUpDelay);
+      }), this.promise);
+    if (this.promise)
+      return this.promise;
+    throw new Error("Inconsistent state");
+  }
+  close(t) {
+    this.component && this.component === t && (this.resetCooldownTimer(), this.timeout > 0 && (clearTimeout(this.timeout), this.timeout = 0), this.resolve && (this.resolve(!0), delete this.resolve), delete this.promise, delete this.component);
+  }
+  resetCooldownTimer() {
+    this.isWarm && (this.cooldownTimeout && window.clearTimeout(this.cooldownTimeout), this.cooldownTimeout = window.setTimeout(() => {
+      this.isWarm = !1, delete this.cooldownTimeout;
+    }, this.coolDownDelay));
+  }
+  cancelCooldownTimer() {
+    this.cooldownTimeout && window.clearTimeout(this.cooldownTimeout), delete this.cooldownTimeout;
+  }
+}
+const bt = new ci(), it = () => {
+}, Xt = (e, t, o) => {
+  const i = new AbortController(), s = /* @__PURE__ */ new Map(), r = () => {
+    i.abort(), o();
+  };
+  let n, a;
+  const l = requestAnimationFrame(() => {
+    n = requestAnimationFrame(() => {
+      a = requestAnimationFrame(() => {
+        r();
+      });
+    });
+  }), c = (d) => {
+    d.target === e && (s.set(
+      d.propertyName,
+      s.get(d.propertyName) - 1
+    ), s.get(d.propertyName) || s.delete(d.propertyName), s.size === 0 && r());
+  }, h = (d) => {
+    d.target === e && (s.has(d.propertyName) || s.set(d.propertyName, 0), s.set(
+      d.propertyName,
+      s.get(d.propertyName) + 1
+    ), cancelAnimationFrame(l), cancelAnimationFrame(n), cancelAnimationFrame(a));
+  };
+  e.addEventListener("transitionrun", h, {
+    signal: i.signal
+  }), e.addEventListener("transitionend", c, {
+    signal: i.signal
+  }), e.addEventListener("transitioncancel", c, {
+    signal: i.signal
+  }), t();
+};
+function k() {
+  return new Promise((e) => requestAnimationFrame(() => e()));
+}
+class ht extends Xe {
+  constructor() {
+    super(...arguments), this.dispose = it, this.offset = 0, this.willPreventClose = !1;
+  }
+  async applyFocus(t, o) {
+  }
+  /* c8 ignore next 6 */
+  get delayed() {
+    return !1;
+  }
+  set delayed(t) {
+  }
+  /* c8 ignore next 6 */
+  get disabled() {
+    return !1;
+  }
+  set disabled(t) {
+  }
+  get elementResolver() {
+    return this._elementResolver;
+  }
+  set elementResolver(t) {
+    this._elementResolver = t;
+  }
+  /* c8 ignore next 3 */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async ensureOnDOM(t) {
+  }
+  /* c8 ignore next 5 */
+  async makeTransition(t) {
+    return null;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async manageDelay(t) {
+  }
+  /* c8 ignore next 3 */
+  async manageDialogOpen() {
+  }
+  /* c8 ignore next 3 */
+  async managePopoverOpen() {
+  }
+  /* c8 ignore next 3 */
+  managePosition() {
+  }
+  /* c8 ignore next 6 */
+  get open() {
+    return !1;
+  }
+  set open(t) {
+  }
+  get placementController() {
+    return this._placementController;
+  }
+  set placementController(t) {
+    this._placementController = t;
+  }
+  requestSlottable() {
+  }
+  returnFocus() {
+  }
+  /* c8 ignore next 6 */
+  get state() {
+    return "closed";
+  }
+  set state(t) {
+  }
+  /* c8 ignore next 3 */
+  manuallyKeepOpen() {
+  }
+  static update() {
+    const t = new CustomEvent("cx-update-overlays", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    });
+    document.dispatchEvent(t);
+  }
+  static async open(t, o, i, s) {
+    await Promise.resolve().then(() => Ne);
+    const r = arguments.length === 2, n = i || t, a = new this();
+    let l = !1;
+    a.dispose = () => {
+      a.addEventListener("cx-closed", () => {
+        l || (c(), l = !0), requestAnimationFrame(() => {
+          a.remove();
+        });
+      }), a.open = !1, a.dispose = it;
+    };
+    const c = Ze([n], a, {
+      position: "beforeend",
+      prepareCallback: (u) => {
+        const p = u.slot;
+        return u.removeAttribute("slot"), () => {
+          u.slot = p;
+        };
+      }
+    });
+    if (!r && n && s) {
+      const u = t, p = o, f = s;
+      return ht.applyOptions(a, {
+        ...f,
+        delayed: f.delayed || n.hasAttribute("delayed"),
+        trigger: f.virtualTrigger || u,
+        type: p === "modal" ? "modal" : p === "hover" ? "hint" : "auto"
+      }), u.insertAdjacentElement("afterend", a), await a.updateComplete, a.open = !0, a.dispose;
+    }
+    const d = o;
+    return a.append(n), ht.applyOptions(a, {
+      ...d,
+      delayed: d.delayed || n.hasAttribute("delayed")
+    }), a.updateComplete.then(() => {
+      a.open = !0;
+    }), a;
+  }
+  static applyOptions(t, o) {
+    t.delayed = !!o.delayed, t.receivesFocus = o.receivesFocus ?? "auto", t.triggerElement = o.trigger || null, t.type = o.type || "modal", t.offset = o.offset ?? 0, t.placement = o.placement, t.willPreventClose = !!o.notImmediatelyClosable;
+  }
+}
+const ve = Symbol("element resolver updated");
+class hi {
+  constructor(t, { selector: o } = { selector: "" }) {
+    this._element = null, this._selector = "", this.mutationCallback = (i) => {
+      let s = !1;
+      i.forEach((r) => {
+        if (!s) {
+          if (r.type === "childList") {
+            const n = this.element && [...r.removedNodes].includes(this.element), a = !!this.selector && [...r.addedNodes].some(
+              this.elementIsSelected
+            );
+            s = s || n || a;
+          }
+          if (r.type === "attributes") {
+            const n = r.target === this.element, a = !!this.selector && this.elementIsSelected(r.target);
+            s = s || n || a;
+          }
+        }
+      }), s && this.resolveElement();
+    }, this.elementIsSelected = (i) => this.selectorIsId ? i?.id === this.selectorAsId : i?.matches?.(this.selector), this.host = t, this.selector = o, this.observer = new MutationObserver(this.mutationCallback), this.host.addController(this);
+  }
+  get element() {
+    return this._element;
+  }
+  set element(t) {
+    if (t === this.element)
+      return;
+    const o = this.element;
+    this._element = t, this.host.requestUpdate(ve, o);
+  }
+  get selector() {
+    return this._selector;
+  }
+  set selector(t) {
+    t !== this.selector && (this.releaseElement(), this._selector = t, this.resolveElement());
+  }
+  get selectorAsId() {
+    return this.selector.slice(1);
+  }
+  get selectorIsId() {
+    return !!this.selector && this.selector.startsWith("#");
+  }
+  hostConnected() {
+    this.resolveElement(), this.observer.observe(this.host.getRootNode(), {
+      attributes: !0,
+      childList: !0,
+      subtree: !0
+    });
+  }
+  hostDisconnected() {
+    this.releaseElement(), this.observer.disconnect();
+  }
+  resolveElement() {
+    if (!this.selector) {
+      this.releaseElement();
+      return;
+    }
+    const t = this.host.getRootNode();
+    this.element = this.selectorIsId ? t.getElementById(this.selectorAsId) : t.querySelector(this.selector);
+  }
+  releaseElement() {
+    this.element = null;
+  }
+}
+class Gt extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: !1,
+      composed: !1
+    }), this.currentState = "open", this.newState = "closed";
+  }
+}
+class Qt extends Event {
+  constructor() {
+    super("beforetoggle", {
+      bubbles: !1,
+      composed: !1
+    }), this.currentState = "closed", this.newState = "open";
+  }
+}
+class _ extends Event {
+  constructor(t, o, {
+    interaction: i,
+    publish: s,
+    reason: r
+  }) {
+    super(t, {
+      bubbles: s,
+      composed: s
+    }), this.overlay = o, this.detail = {
+      interaction: i,
+      reason: r
+    };
+  }
+}
+class Pt {
+  constructor(t, o) {
+    this.x = 0, this.y = 0, this.x = t, this.y = o;
+  }
+  updateBoundingClientRect(t, o) {
+    this.x = t, this.y = o, ht.update();
+  }
+  getBoundingClientRect() {
+    return {
+      bottom: this.y,
+      height: 0,
+      left: this.x,
+      right: this.x,
+      /* c8 ignore next 3 */
+      toJSON() {
+      },
+      top: this.y,
+      width: 0,
+      x: this.x,
+      y: this.y
+    };
+  }
+}
+function di(e) {
+  class t extends e {
+    async manageDialogOpen() {
+      const i = this.open;
+      if (await this.managePosition(), this.open !== i)
+        return;
+      const s = await this.dialogMakeTransition(i);
+      this.open === i && await this.dialogApplyFocus(i, s);
+    }
+    async dialogMakeTransition(i) {
+      let s = null;
+      const r = (a, l) => async () => {
+        if (a.open = i, !i) {
+          const h = () => {
+            a.removeEventListener("close", h);
+          };
+          a.addEventListener("close", h);
+        }
+        if (l > 0)
+          return;
+        const c = i ? Qt : Gt;
+        this.dispatchEvent(new c()), i && (a.matches(ft) && (s = a), s = s || jt(a), s || a.querySelectorAll("slot").forEach((d) => {
+          s || (s = Yt(d));
+        }), !(!this.isConnected || this.dialogEl.open) && this.dialogEl.showModal());
+      }, n = (a, l) => () => {
+        if (this.open !== i)
+          return;
+        const c = i ? "cx-opened" : "cx-closed";
+        if (l > 0) {
+          a.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          );
+          return;
+        }
+        if (!this.isConnected || i !== this.open)
+          return;
+        const h = async () => {
+          const d = this.triggerElement instanceof Pt;
+          this.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: d
+            })
+          ), a.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          ), this.triggerElement && !d && this.triggerElement.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: !0
+            })
+          ), this.state = i ? "opened" : "closed", this.returnFocus(), await k(), await k(), i === this.open && i === !1 && this.requestSlottable();
+        };
+        !i && this.dialogEl.open ? (this.dialogEl.addEventListener(
+          "close",
+          () => {
+            h();
+          },
+          { once: !0 }
+        ), this.dialogEl.close()) : h();
+      };
+      return this.elements.forEach((a, l) => {
+        Xt(a, r(a, l), n(a, l));
+      }), s;
+    }
+    async dialogApplyFocus(i, s) {
+      this.applyFocus(i, s);
+    }
+  }
+  return t;
+}
+function pi(e) {
+  class t extends e {
+    async managePopoverOpen() {
+      await this.managePosition();
+    }
+    async manageDelay(i) {
+      if (i === !1 || i !== this.open) {
+        bt.close(this);
+        return;
+      }
+      this.delayed && await bt.openTimer(this) && (this.open = !i);
+    }
+    async ensureOnDOM(i) {
+      document.body.offsetHeight;
+    }
+    async makeTransition(i) {
+      if (this.open !== i)
+        return null;
+      let s = null;
+      const r = (a, l) => () => {
+        if (i !== this.open)
+          return;
+        if (a.open = i, l === 0) {
+          const h = i ? Qt : Gt;
+          this.dispatchEvent(new h());
+        }
+        if (i !== !0 || (a.matches(ft) && (s = a), s = s || jt(a), s))
+          return;
+        a.querySelectorAll("slot").forEach((h) => {
+          s || (s = Yt(h));
+        });
+      }, n = (a, l) => async () => {
+        if (this.open !== i)
+          return;
+        const c = i ? "cx-opened" : "cx-closed";
+        if (a.dispatchEvent(
+          new _(c, this, {
+            interaction: this.type
+          })
+        ), l > 0)
+          return;
+        const h = this.triggerElement instanceof Pt;
+        this.dispatchEvent(
+          new _(c, this, {
+            interaction: this.type,
+            publish: h
+          })
+        ), this.triggerElement && !h && this.triggerElement.dispatchEvent(
+          new _(c, this, {
+            interaction: this.type,
+            publish: !0
+          })
+        ), this.state = i ? "opened" : "closed", this.returnFocus(), await k(), await k(), i === this.open && i === !1 && this.requestSlottable();
+      };
+      return this.elements.forEach((a, l) => {
+        Xt(a, r(a, l), n(a, l));
+      }), s;
+    }
+  }
+  return t;
+}
+const ui = CSS.supports("(overlay: auto)");
+function kt(e) {
+  let t = !1;
+  try {
+    t = e.matches(":popover-open");
+  } catch {
+  }
+  let o = !1;
+  try {
+    o = e.matches(":open");
+  } catch {
+  }
+  return t || o;
+}
+function fi(e) {
+  class t extends e {
+    constructor(...i) {
+      super(...i), this.handleFullscreenChange = this.handleFullscreenChange.bind(this);
+    }
+    async manageDelay(i) {
+      if (i === !1 || i !== this.open) {
+        bt.close(this);
+        return;
+      }
+      this.delayed && await bt.openTimer(this) && (this.open = !i);
+    }
+    /**
+     * A popover should be hidden _after_ it is no longer on top-layer because
+     * the position metrics will have changed from when it was originally positioned.
+     */
+    async shouldHidePopover(i) {
+      if (i && this.open !== i)
+        return;
+      const s = async ({
+        newState: r
+      } = {}) => {
+        r !== "open" && await this.placementController.resetOverlayPosition();
+      };
+      if (!kt(this.dialogEl)) {
+        s();
+        return;
+      }
+      this.dialogEl.addEventListener("toggle", s, {
+        once: !0
+      });
+    }
+    async shouldShowPopover(i) {
+      let s = !1;
+      try {
+        s = this.dialogEl.matches(":popover-open");
+      } catch {
+      }
+      let r = !1;
+      try {
+        r = this.dialogEl.matches(":open");
+      } catch {
+      }
+      i && this.open === i && !s && !r && this.isConnected && (this.dialogEl.showPopover(), await this.managePosition());
+    }
+    handleFullscreenChange() {
+      kt(this.dialogEl) && (this.dialogEl.hidePopover(), this.dialogEl.showPopover());
+    }
+    firstUpdated(i) {
+      super.firstUpdated(i), Lt() && (k().then(() => {
+        this.dialogEl.showPopover();
+      }), document.addEventListener(
+        "fullscreenchange",
+        this.handleFullscreenChange
+      ));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), Lt() && document.removeEventListener(
+        "fullscreenchange",
+        this.handleFullscreenChange
+      );
+    }
+    async ensureOnDOM(i) {
+      await k(), ui || await this.shouldHidePopover(i), await this.shouldShowPopover(i), await k();
+    }
+    async makeTransition(i) {
+      if (this.open !== i)
+        return null;
+      let s = null;
+      const r = (a, l) => () => {
+        if (a.open = i, l === 0) {
+          const h = i ? Qt : Gt;
+          this.dispatchEvent(new h());
+        }
+        if (!i || (a.matches(ft) && (s = a), s = s || jt(a), s))
+          return;
+        a.querySelectorAll("slot").forEach((h) => {
+          s || (s = Yt(h));
+        });
+      }, n = (a, l) => async () => {
+        if (this.open !== i)
+          return;
+        const c = i ? "cx-opened" : "cx-closed";
+        if (l > 0) {
+          a.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          );
+          return;
+        }
+        const h = async () => {
+          if (this.open !== i)
+            return;
+          await k();
+          const u = this.triggerElement instanceof Pt;
+          this.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: u
+            })
+          ), a.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: !1
+            })
+          ), this.triggerElement && !u && this.triggerElement.dispatchEvent(
+            new _(c, this, {
+              interaction: this.type,
+              publish: !0
+            })
+          ), this.state = i ? "opened" : "closed", this.returnFocus(), await k(), await k(), i === this.open && i === !1 && this.requestSlottable();
+        };
+        if (this.open !== i)
+          return;
+        const d = kt(this.dialogEl);
+        i !== !0 && d && this.isConnected ? (this.dialogEl.addEventListener(
+          "beforetoggle",
+          () => {
+            h();
+          },
+          { once: !0 }
+        ), Lt() || this.dialogEl.hidePopover()) : h();
+      };
+      return this.elements.forEach((a, l) => {
+        Xt(a, r(a, l), n(a, l));
+      }), s;
+    }
+  }
+  return t;
+}
+const gi = "showPopover" in document.createElement("div");
+class mi {
+  constructor() {
+    this.root = document.body, this.stack = [], this.handlePointerdown = (t) => {
+      this.pointerdownPath = t.composedPath(), this.lastOverlay = this.stack[this.stack.length - 1];
+    }, this.handlePointerup = () => {
+      const t = this.pointerdownPath;
+      if (this.pointerdownPath = void 0, !this.stack.length || !t?.length)
+        return;
+      const o = this.stack.length - 1, i = this.stack.filter((s, r) => !t.find(
+        (a) => (
+          // The Overlay is in the stack
+          a === s || // The Overlay trigger is in the stack and the Overlay is a "hint"
+          a === s?.triggerElement && s?.type === "hint" || // The last Overlay in the stack is not the last Overlay at `pointerdown` time and has a
+          // `triggerInteraction` of "longpress", meaning it was opened by this poitner interaction
+          r === o && s !== this.lastOverlay && s.triggerInteraction === "longpress"
+        )
+      ) && !s.shouldPreventClose() && s.type !== "manual");
+      i.reverse(), i.forEach((s) => {
+        this.closeOverlay(s);
+        let r = s.parentOverlayToForceClose;
+        for (; r; )
+          this.closeOverlay(r), r = r.parentOverlayToForceClose;
+      });
+    }, this.handleBeforetoggle = (t) => {
+      const { newState: o, target: i } = t;
+      o !== "open" && this.closeOverlay(i);
+    }, this.handleKeydown = (t) => {
+      if (t.code !== "Escape" || !this.stack.length)
+        return;
+      const o = this.stack[this.stack.length - 1];
+      if (o?.type === "page") {
+        t.preventDefault();
+        return;
+      }
+      gi || o?.type !== "manual" && o && this.closeOverlay(o);
+    }, this.bindEvents();
+  }
+  get document() {
+    return this.root?.ownerDocument || document;
+  }
+  bindEvents() {
+    this.document.addEventListener("pointerdown", this.handlePointerdown), this.document.addEventListener("pointerup", this.handlePointerup), this.document.addEventListener("keydown", this.handleKeydown);
+  }
+  closeOverlay(t) {
+    const o = this.stack.indexOf(t);
+    o > -1 && this.stack.splice(o, 1), t.open = !1;
+  }
+  /**
+   * Get an array of Overlays that all share the same trigger element.
+   *
+   * @param triggerElement {HTMLELement}
+   * @returns {Overlay[]}
+   */
+  overlaysByTriggerElement(t) {
+    return this.stack.filter(
+      (o) => o.triggerElement === t
+    );
+  }
+  /**
+   * When overlays are added manage the open state of exisiting overlays appropriately:
+   * - 'modal': should close other overlays
+   * - 'page': should close other overlays
+   * - 'auto': should close other 'auto' overlays and other 'hint' overlays, but not 'manual' overlays
+   * - 'manual': shouldn't close other overlays
+   * - 'hint': shouldn't close other overlays and give way to all other overlays on a trigger
+   */
+  add(t) {
+    if (this.stack.includes(t)) {
+      const o = this.stack.indexOf(t);
+      o > -1 && (this.stack.splice(o, 1), this.stack.push(t));
+      return;
+    }
+    if (t.type === "auto" || t.type === "modal" || t.type === "page") {
+      const o = "cx-overlay-query-path", i = new Event(o, {
+        bubbles: !0,
+        composed: !0
+      });
+      t.addEventListener(
+        o,
+        (s) => {
+          const r = s.composedPath();
+          this.stack.forEach((n) => {
+            !r.find((l) => l === n) && n.type !== "manual" && this.closeOverlay(n);
+          });
+        },
+        { once: !0 }
+      ), t.dispatchEvent(i);
+    } else if (t.type === "hint") {
+      if (this.stack.some((i) => i.type !== "manual" && i.triggerElement && i.triggerElement === t.triggerElement)) {
+        t.open = !1;
+        return;
+      }
+      this.stack.forEach((i) => {
+        i.type === "hint" && this.closeOverlay(i);
+      });
+    }
+    requestAnimationFrame(() => {
+      this.stack.push(t), t.addEventListener("beforetoggle", this.handleBeforetoggle, {
+        once: !0
+      });
+    });
+  }
+  remove(t) {
+    this.closeOverlay(t);
+  }
+}
+const le = new mi(), yi = ["top", "right", "bottom", "left"], J = Math.min, T = Math.max, wt = Math.round, mt = Math.floor, H = (e) => ({
+  x: e,
+  y: e
+}), vi = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+}, bi = {
+  start: "end",
+  end: "start"
+};
+function _t(e, t, o) {
+  return T(e, J(t, o));
+}
+function st(e, t) {
+  return typeof e == "function" ? e(t) : e;
+}
+function Z(e) {
+  return e.split("-")[0];
+}
+function at(e) {
+  return e.split("-")[1];
+}
+function be(e) {
+  return e === "x" ? "y" : "x";
+}
+function Jt(e) {
+  return e === "y" ? "height" : "width";
+}
+const wi = /* @__PURE__ */ new Set(["top", "bottom"]);
+function Y(e) {
+  return wi.has(Z(e)) ? "y" : "x";
+}
+function Zt(e) {
+  return be(Y(e));
+}
+function xi(e, t, o) {
+  o === void 0 && (o = !1);
+  const i = at(e), s = Zt(e), r = Jt(s);
+  let n = s === "x" ? i === (o ? "end" : "start") ? "right" : "left" : i === "start" ? "bottom" : "top";
+  return t.reference[r] > t.floating[r] && (n = xt(n)), [n, xt(n)];
+}
+function Ei(e) {
+  const t = xt(e);
+  return [zt(e), t, zt(t)];
+}
+function zt(e) {
+  return e.replace(/start|end/g, (t) => bi[t]);
+}
+const ce = ["left", "right"], he = ["right", "left"], Pi = ["top", "bottom"], Ci = ["bottom", "top"];
+function Oi(e, t, o) {
+  switch (e) {
+    case "top":
+    case "bottom":
+      return o ? t ? he : ce : t ? ce : he;
+    case "left":
+    case "right":
+      return t ? Pi : Ci;
+    default:
+      return [];
+  }
+}
+function Ai(e, t, o, i) {
+  const s = at(e);
+  let r = Oi(Z(e), o === "start", i);
+  return s && (r = r.map((n) => n + "-" + s), t && (r = r.concat(r.map(zt)))), r;
+}
+function xt(e) {
+  return e.replace(/left|right|bottom|top/g, (t) => vi[t]);
+}
+function Si(e) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...e
+  };
+}
+function we(e) {
+  return typeof e != "number" ? Si(e) : {
+    top: e,
+    right: e,
+    bottom: e,
+    left: e
+  };
+}
+function Et(e) {
+  const {
+    x: t,
+    y: o,
+    width: i,
+    height: s
+  } = e;
+  return {
+    width: i,
+    height: s,
+    top: o,
+    left: t,
+    right: t + i,
+    bottom: o + s,
+    x: t,
+    y: o
+  };
+}
+function de(e, t, o) {
+  let {
+    reference: i,
+    floating: s
+  } = e;
+  const r = Y(t), n = Zt(t), a = Jt(n), l = Z(t), c = r === "y", h = i.x + i.width / 2 - s.width / 2, d = i.y + i.height / 2 - s.height / 2, u = i[a] / 2 - s[a] / 2;
+  let p;
+  switch (l) {
+    case "top":
+      p = {
+        x: h,
+        y: i.y - s.height
+      };
+      break;
+    case "bottom":
+      p = {
+        x: h,
+        y: i.y + i.height
+      };
+      break;
+    case "right":
+      p = {
+        x: i.x + i.width,
+        y: d
+      };
+      break;
+    case "left":
+      p = {
+        x: i.x - s.width,
+        y: d
+      };
+      break;
+    default:
+      p = {
+        x: i.x,
+        y: i.y
+      };
+  }
+  switch (at(t)) {
+    case "start":
+      p[n] -= u * (o && c ? -1 : 1);
+      break;
+    case "end":
+      p[n] += u * (o && c ? -1 : 1);
+      break;
+  }
+  return p;
+}
+const Ri = async (e, t, o) => {
+  const {
+    placement: i = "bottom",
+    strategy: s = "absolute",
+    middleware: r = [],
+    platform: n
+  } = o, a = r.filter(Boolean), l = await (n.isRTL == null ? void 0 : n.isRTL(t));
+  let c = await n.getElementRects({
+    reference: e,
+    floating: t,
+    strategy: s
+  }), {
+    x: h,
+    y: d
+  } = de(c, i, l), u = i, p = {}, f = 0;
+  for (let g = 0; g < a.length; g++) {
+    const {
+      name: m,
+      fn: y
+    } = a[g], {
+      x,
+      y: E,
+      data: C,
+      reset: P
+    } = await y({
+      x: h,
+      y: d,
+      initialPlacement: i,
+      placement: u,
+      strategy: s,
+      middlewareData: p,
+      rects: c,
+      platform: n,
+      elements: {
+        reference: e,
+        floating: t
+      }
+    });
+    h = x ?? h, d = E ?? d, p = {
+      ...p,
+      [m]: {
+        ...p[m],
+        ...C
+      }
+    }, P && f <= 50 && (f++, typeof P == "object" && (P.placement && (u = P.placement), P.rects && (c = P.rects === !0 ? await n.getElementRects({
+      reference: e,
+      floating: t,
+      strategy: s
+    }) : P.rects), {
+      x: h,
+      y: d
+    } = de(c, u, l)), g = -1);
+  }
+  return {
+    x: h,
+    y: d,
+    placement: u,
+    strategy: s,
+    middlewareData: p
+  };
+};
+async function dt(e, t) {
+  var o;
+  t === void 0 && (t = {});
+  const {
+    x: i,
+    y: s,
+    platform: r,
+    rects: n,
+    elements: a,
+    strategy: l
+  } = e, {
+    boundary: c = "clippingAncestors",
+    rootBoundary: h = "viewport",
+    elementContext: d = "floating",
+    altBoundary: u = !1,
+    padding: p = 0
+  } = st(t, e), f = we(p), m = a[u ? d === "floating" ? "reference" : "floating" : d], y = Et(await r.getClippingRect({
+    element: (o = await (r.isElement == null ? void 0 : r.isElement(m))) == null || o ? m : m.contextElement || await (r.getDocumentElement == null ? void 0 : r.getDocumentElement(a.floating)),
+    boundary: c,
+    rootBoundary: h,
+    strategy: l
+  })), x = d === "floating" ? {
+    x: i,
+    y: s,
+    width: n.floating.width,
+    height: n.floating.height
+  } : n.reference, E = await (r.getOffsetParent == null ? void 0 : r.getOffsetParent(a.floating)), C = await (r.isElement == null ? void 0 : r.isElement(E)) ? await (r.getScale == null ? void 0 : r.getScale(E)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  }, P = Et(r.convertOffsetParentRelativeRectToViewportRelativeRect ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements: a,
+    rect: x,
+    offsetParent: E,
+    strategy: l
+  }) : x);
+  return {
+    top: (y.top - P.top + f.top) / C.y,
+    bottom: (P.bottom - y.bottom + f.bottom) / C.y,
+    left: (y.left - P.left + f.left) / C.x,
+    right: (P.right - y.right + f.right) / C.x
+  };
+}
+const Ti = (e) => ({
+  name: "arrow",
+  options: e,
+  async fn(t) {
+    const {
+      x: o,
+      y: i,
+      placement: s,
+      rects: r,
+      platform: n,
+      elements: a,
+      middlewareData: l
+    } = t, {
+      element: c,
+      padding: h = 0
+    } = st(e, t) || {};
+    if (c == null)
+      return {};
+    const d = we(h), u = {
+      x: o,
+      y: i
+    }, p = Zt(s), f = Jt(p), g = await n.getDimensions(c), m = p === "y", y = m ? "top" : "left", x = m ? "bottom" : "right", E = m ? "clientHeight" : "clientWidth", C = r.reference[f] + r.reference[p] - u[p] - r.floating[f], P = u[p] - r.reference[p], F = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(c));
+    let O = F ? F[E] : 0;
+    (!O || !await (n.isElement == null ? void 0 : n.isElement(F))) && (O = a.floating[E] || r.floating[f]);
+    const V = C / 2 - P / 2, I = O / 2 - g[f] / 2 - 1, D = J(d[y], I), X = J(d[x], I), M = D, G = O - g[f] - X, S = O / 2 - g[f] / 2 + V, et = _t(M, S, G), U = !l.arrow && at(s) != null && S !== et && r.reference[f] / 2 - (S < M ? D : X) - g[f] / 2 < 0, N = U ? S < M ? S - M : S - G : 0;
+    return {
+      [p]: u[p] + N,
+      data: {
+        [p]: et,
+        centerOffset: S - et - N,
+        ...U && {
+          alignmentOffset: N
+        }
+      },
+      reset: U
+    };
+  }
+}), Li = function(e) {
+  return e === void 0 && (e = {}), {
+    name: "flip",
+    options: e,
+    async fn(t) {
+      var o, i;
+      const {
+        placement: s,
+        middlewareData: r,
+        rects: n,
+        initialPlacement: a,
+        platform: l,
+        elements: c
+      } = t, {
+        mainAxis: h = !0,
+        crossAxis: d = !0,
+        fallbackPlacements: u,
+        fallbackStrategy: p = "bestFit",
+        fallbackAxisSideDirection: f = "none",
+        flipAlignment: g = !0,
+        ...m
+      } = st(e, t);
+      if ((o = r.arrow) != null && o.alignmentOffset)
+        return {};
+      const y = Z(s), x = Y(a), E = Z(a) === a, C = await (l.isRTL == null ? void 0 : l.isRTL(c.floating)), P = u || (E || !g ? [xt(a)] : Ei(a)), F = f !== "none";
+      !u && F && P.push(...Ai(a, g, f, C));
+      const O = [a, ...P], V = await dt(t, m), I = [];
+      let D = ((i = r.flip) == null ? void 0 : i.overflows) || [];
+      if (h && I.push(V[y]), d) {
+        const S = xi(s, n, C);
+        I.push(V[S[0]], V[S[1]]);
+      }
+      if (D = [...D, {
+        placement: s,
+        overflows: I
+      }], !I.every((S) => S <= 0)) {
+        var X, M;
+        const S = (((X = r.flip) == null ? void 0 : X.index) || 0) + 1, et = O[S];
+        if (et && (!(d === "alignment" ? x !== Y(et) : !1) || // We leave the current main axis only if every placement on that axis
+        // overflows the main axis.
+        D.every(($) => Y($.placement) === x ? $.overflows[0] > 0 : !0)))
+          return {
+            data: {
+              index: S,
+              overflows: D
+            },
+            reset: {
+              placement: et
+            }
+          };
+        let U = (M = D.filter((N) => N.overflows[0] <= 0).sort((N, $) => N.overflows[1] - $.overflows[1])[0]) == null ? void 0 : M.placement;
+        if (!U)
+          switch (p) {
+            case "bestFit": {
+              var G;
+              const N = (G = D.filter(($) => {
+                if (F) {
+                  const Q = Y($.placement);
+                  return Q === x || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  Q === "y";
+                }
+                return !0;
+              }).map(($) => [$.placement, $.overflows.filter((Q) => Q > 0).reduce((Q, $e) => Q + $e, 0)]).sort(($, Q) => $[1] - Q[1])[0]) == null ? void 0 : G[0];
+              N && (U = N);
+              break;
+            }
+            case "initialPlacement":
+              U = a;
+              break;
+          }
+        if (s !== U)
+          return {
+            reset: {
+              placement: U
+            }
+          };
+      }
+      return {};
+    }
+  };
+};
+function pe(e, t) {
+  return {
+    top: e.top - t.height,
+    right: e.right - t.width,
+    bottom: e.bottom - t.height,
+    left: e.left - t.width
+  };
+}
+function ue(e) {
+  return yi.some((t) => e[t] >= 0);
+}
+const Di = function(e) {
+  return e === void 0 && (e = {}), {
+    name: "hide",
+    options: e,
+    async fn(t) {
+      const {
+        rects: o
+      } = t, {
+        strategy: i = "referenceHidden",
+        ...s
+      } = st(e, t);
+      switch (i) {
+        case "referenceHidden": {
+          const r = await dt(t, {
+            ...s,
+            elementContext: "reference"
+          }), n = pe(r, o.reference);
+          return {
+            data: {
+              referenceHiddenOffsets: n,
+              referenceHidden: ue(n)
+            }
+          };
+        }
+        case "escaped": {
+          const r = await dt(t, {
+            ...s,
+            altBoundary: !0
+          }), n = pe(r, o.floating);
+          return {
+            data: {
+              escapedOffsets: n,
+              escaped: ue(n)
+            }
+          };
+        }
+        default:
+          return {};
+      }
+    }
+  };
+}, ki = /* @__PURE__ */ new Set(["left", "top"]);
+async function Fi(e, t) {
+  const {
+    placement: o,
+    platform: i,
+    elements: s
+  } = e, r = await (i.isRTL == null ? void 0 : i.isRTL(s.floating)), n = Z(o), a = at(o), l = Y(o) === "y", c = ki.has(n) ? -1 : 1, h = r && l ? -1 : 1, d = st(t, e);
+  let {
+    mainAxis: u,
+    crossAxis: p,
+    alignmentAxis: f
+  } = typeof d == "number" ? {
+    mainAxis: d,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: d.mainAxis || 0,
+    crossAxis: d.crossAxis || 0,
+    alignmentAxis: d.alignmentAxis
+  };
+  return a && typeof f == "number" && (p = a === "end" ? f * -1 : f), l ? {
+    x: p * h,
+    y: u * c
+  } : {
+    x: u * c,
+    y: p * h
+  };
+}
+const Ni = function(e) {
+  return e === void 0 && (e = 0), {
+    name: "offset",
+    options: e,
+    async fn(t) {
+      var o, i;
+      const {
+        x: s,
+        y: r,
+        placement: n,
+        middlewareData: a
+      } = t, l = await Fi(t, e);
+      return n === ((o = a.offset) == null ? void 0 : o.placement) && (i = a.arrow) != null && i.alignmentOffset ? {} : {
+        x: s + l.x,
+        y: r + l.y,
+        data: {
+          ...l,
+          placement: n
+        }
+      };
+    }
+  };
+}, $i = function(e) {
+  return e === void 0 && (e = {}), {
+    name: "shift",
+    options: e,
+    async fn(t) {
+      const {
+        x: o,
+        y: i,
+        placement: s
+      } = t, {
+        mainAxis: r = !0,
+        crossAxis: n = !1,
+        limiter: a = {
+          fn: (m) => {
+            let {
+              x: y,
+              y: x
+            } = m;
+            return {
+              x: y,
+              y: x
+            };
+          }
+        },
+        ...l
+      } = st(e, t), c = {
+        x: o,
+        y: i
+      }, h = await dt(t, l), d = Y(Z(s)), u = be(d);
+      let p = c[u], f = c[d];
+      if (r) {
+        const m = u === "y" ? "top" : "left", y = u === "y" ? "bottom" : "right", x = p + h[m], E = p - h[y];
+        p = _t(x, p, E);
+      }
+      if (n) {
+        const m = d === "y" ? "top" : "left", y = d === "y" ? "bottom" : "right", x = f + h[m], E = f - h[y];
+        f = _t(x, f, E);
+      }
+      const g = a.fn({
+        ...t,
+        [u]: p,
+        [d]: f
+      });
+      return {
+        ...g,
+        data: {
+          x: g.x - o,
+          y: g.y - i,
+          enabled: {
+            [u]: r,
+            [d]: n
+          }
+        }
+      };
+    }
+  };
+}, _i = function(e) {
+  return e === void 0 && (e = {}), {
+    name: "size",
+    options: e,
+    async fn(t) {
+      var o, i;
+      const {
+        placement: s,
+        rects: r,
+        platform: n,
+        elements: a
+      } = t, {
+        apply: l = () => {
+        },
+        ...c
+      } = st(e, t), h = await dt(t, c), d = Z(s), u = at(s), p = Y(s) === "y", {
+        width: f,
+        height: g
+      } = r.floating;
+      let m, y;
+      d === "top" || d === "bottom" ? (m = d, y = u === (await (n.isRTL == null ? void 0 : n.isRTL(a.floating)) ? "start" : "end") ? "left" : "right") : (y = d, m = u === "end" ? "top" : "bottom");
+      const x = g - h.top - h.bottom, E = f - h.left - h.right, C = J(g - h[m], x), P = J(f - h[y], E), F = !t.middlewareData.shift;
+      let O = C, V = P;
+      if ((o = t.middlewareData.shift) != null && o.enabled.x && (V = E), (i = t.middlewareData.shift) != null && i.enabled.y && (O = x), F && !u) {
+        const D = T(h.left, 0), X = T(h.right, 0), M = T(h.top, 0), G = T(h.bottom, 0);
+        p ? V = f - 2 * (D !== 0 || X !== 0 ? D + X : T(h.left, h.right)) : O = g - 2 * (M !== 0 || G !== 0 ? M + G : T(h.top, h.bottom));
+      }
+      await l({
+        ...t,
+        availableWidth: V,
+        availableHeight: O
+      });
+      const I = await n.getDimensions(a.floating);
+      return f !== I.width || g !== I.height ? {
+        reset: {
+          rects: !0
+        }
+      } : {};
+    }
+  };
+};
+function Ct() {
+  return typeof window < "u";
+}
+function lt(e) {
+  return xe(e) ? (e.nodeName || "").toLowerCase() : "#document";
+}
+function L(e) {
+  var t;
+  return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
+}
+function q(e) {
+  var t;
+  return (t = (xe(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
+}
+function xe(e) {
+  return Ct() ? e instanceof Node || e instanceof L(e).Node : !1;
+}
+function z(e) {
+  return Ct() ? e instanceof Element || e instanceof L(e).Element : !1;
+}
+function W(e) {
+  return Ct() ? e instanceof HTMLElement || e instanceof L(e).HTMLElement : !1;
+}
+function fe(e) {
+  return !Ct() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof L(e).ShadowRoot;
+}
+const zi = /* @__PURE__ */ new Set(["inline", "contents"]);
+function gt(e) {
+  const {
+    overflow: t,
+    overflowX: o,
+    overflowY: i,
+    display: s
+  } = B(e);
+  return /auto|scroll|overlay|hidden|clip/.test(t + i + o) && !zi.has(s);
+}
+const Bi = /* @__PURE__ */ new Set(["table", "td", "th"]);
+function Ii(e) {
+  return Bi.has(lt(e));
+}
+const Mi = [":popover-open", ":modal"];
+function Ot(e) {
+  return Mi.some((t) => {
+    try {
+      return e.matches(t);
+    } catch {
+      return !1;
+    }
+  });
+}
+const Hi = ["transform", "translate", "scale", "rotate", "perspective"], Wi = ["transform", "translate", "scale", "rotate", "perspective", "filter"], qi = ["paint", "layout", "strict", "content"];
+function At(e) {
+  const t = te(), o = z(e) ? B(e) : e;
+  return Hi.some((i) => o[i] ? o[i] !== "none" : !1) || (o.containerType ? o.containerType !== "normal" : !1) || !t && (o.backdropFilter ? o.backdropFilter !== "none" : !1) || !t && (o.filter ? o.filter !== "none" : !1) || Wi.some((i) => (o.willChange || "").includes(i)) || qi.some((i) => (o.contain || "").includes(i));
+}
+function Vi(e) {
+  let t = tt(e);
+  for (; W(t) && !rt(t); ) {
+    if (At(t))
+      return t;
+    if (Ot(t))
+      return null;
+    t = tt(t);
+  }
+  return null;
+}
+function te() {
+  return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
+}
+const Ui = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+function rt(e) {
+  return Ui.has(lt(e));
+}
+function B(e) {
+  return L(e).getComputedStyle(e);
+}
+function St(e) {
+  return z(e) ? {
+    scrollLeft: e.scrollLeft,
+    scrollTop: e.scrollTop
+  } : {
+    scrollLeft: e.scrollX,
+    scrollTop: e.scrollY
+  };
+}
+function tt(e) {
+  if (lt(e) === "html")
+    return e;
+  const t = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    e.assignedSlot || // DOM Element detected.
+    e.parentNode || // ShadowRoot detected.
+    fe(e) && e.host || // Fallback.
+    q(e)
+  );
+  return fe(t) ? t.host : t;
+}
+function Ee(e) {
+  const t = tt(e);
+  return rt(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : W(t) && gt(t) ? t : Ee(t);
+}
+function pt(e, t, o) {
+  var i;
+  t === void 0 && (t = []), o === void 0 && (o = !0);
+  const s = Ee(e), r = s === ((i = e.ownerDocument) == null ? void 0 : i.body), n = L(s);
+  if (r) {
+    const a = Bt(n);
+    return t.concat(n, n.visualViewport || [], gt(s) ? s : [], a && o ? pt(a) : []);
+  }
+  return t.concat(s, pt(s, [], o));
+}
+function Bt(e) {
+  return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
+}
+function Pe(e) {
+  const t = B(e);
+  let o = parseFloat(t.width) || 0, i = parseFloat(t.height) || 0;
+  const s = W(e), r = s ? e.offsetWidth : o, n = s ? e.offsetHeight : i, a = wt(o) !== r || wt(i) !== n;
+  return a && (o = r, i = n), {
+    width: o,
+    height: i,
+    $: a
+  };
+}
+function ee(e) {
+  return z(e) ? e : e.contextElement;
+}
+function nt(e) {
+  const t = ee(e);
+  if (!W(t))
+    return H(1);
+  const o = t.getBoundingClientRect(), {
+    width: i,
+    height: s,
+    $: r
+  } = Pe(t);
+  let n = (r ? wt(o.width) : o.width) / i, a = (r ? wt(o.height) : o.height) / s;
+  return (!n || !Number.isFinite(n)) && (n = 1), (!a || !Number.isFinite(a)) && (a = 1), {
+    x: n,
+    y: a
+  };
+}
+const ji = /* @__PURE__ */ H(0);
+function Ce(e) {
+  const t = L(e);
+  return !te() || !t.visualViewport ? ji : {
+    x: t.visualViewport.offsetLeft,
+    y: t.visualViewport.offsetTop
+  };
+}
+function Yi(e, t, o) {
+  return t === void 0 && (t = !1), !o || t && o !== L(e) ? !1 : t;
+}
+function ot(e, t, o, i) {
+  t === void 0 && (t = !1), o === void 0 && (o = !1);
+  const s = e.getBoundingClientRect(), r = ee(e);
+  let n = H(1);
+  t && (i ? z(i) && (n = nt(i)) : n = nt(e));
+  const a = Yi(r, o, i) ? Ce(r) : H(0);
+  let l = (s.left + a.x) / n.x, c = (s.top + a.y) / n.y, h = s.width / n.x, d = s.height / n.y;
+  if (r) {
+    const u = L(r), p = i && z(i) ? L(i) : i;
+    let f = u, g = Bt(f);
+    for (; g && i && p !== f; ) {
+      const m = nt(g), y = g.getBoundingClientRect(), x = B(g), E = y.left + (g.clientLeft + parseFloat(x.paddingLeft)) * m.x, C = y.top + (g.clientTop + parseFloat(x.paddingTop)) * m.y;
+      l *= m.x, c *= m.y, h *= m.x, d *= m.y, l += E, c += C, f = L(g), g = Bt(f);
+    }
+  }
+  return Et({
+    width: h,
+    height: d,
+    x: l,
+    y: c
+  });
+}
+function ie(e, t) {
+  const o = St(e).scrollLeft;
+  return t ? t.left + o : ot(q(e)).left + o;
+}
+function Oe(e, t, o) {
+  o === void 0 && (o = !1);
+  const i = e.getBoundingClientRect(), s = i.left + t.scrollLeft - (o ? 0 : (
+    // RTL <body> scrollbar.
+    ie(e, i)
+  )), r = i.top + t.scrollTop;
+  return {
+    x: s,
+    y: r
+  };
+}
+function Ki(e) {
+  let {
+    elements: t,
+    rect: o,
+    offsetParent: i,
+    strategy: s
+  } = e;
+  const r = s === "fixed", n = q(i), a = t ? Ot(t.floating) : !1;
+  if (i === n || a && r)
+    return o;
+  let l = {
+    scrollLeft: 0,
+    scrollTop: 0
+  }, c = H(1);
+  const h = H(0), d = W(i);
+  if ((d || !d && !r) && ((lt(i) !== "body" || gt(n)) && (l = St(i)), W(i))) {
+    const p = ot(i);
+    c = nt(i), h.x = p.x + i.clientLeft, h.y = p.y + i.clientTop;
+  }
+  const u = n && !d && !r ? Oe(n, l, !0) : H(0);
+  return {
+    width: o.width * c.x,
+    height: o.height * c.y,
+    x: o.x * c.x - l.scrollLeft * c.x + h.x + u.x,
+    y: o.y * c.y - l.scrollTop * c.y + h.y + u.y
+  };
+}
+function Xi(e) {
+  return Array.from(e.getClientRects());
+}
+function Gi(e) {
+  const t = q(e), o = St(e), i = e.ownerDocument.body, s = T(t.scrollWidth, t.clientWidth, i.scrollWidth, i.clientWidth), r = T(t.scrollHeight, t.clientHeight, i.scrollHeight, i.clientHeight);
+  let n = -o.scrollLeft + ie(e);
+  const a = -o.scrollTop;
+  return B(i).direction === "rtl" && (n += T(t.clientWidth, i.clientWidth) - s), {
+    width: s,
+    height: r,
+    x: n,
+    y: a
+  };
+}
+function Qi(e, t) {
+  const o = L(e), i = q(e), s = o.visualViewport;
+  let r = i.clientWidth, n = i.clientHeight, a = 0, l = 0;
+  if (s) {
+    r = s.width, n = s.height;
+    const c = te();
+    (!c || c && t === "fixed") && (a = s.offsetLeft, l = s.offsetTop);
+  }
+  return {
+    width: r,
+    height: n,
+    x: a,
+    y: l
+  };
+}
+const Ji = /* @__PURE__ */ new Set(["absolute", "fixed"]);
+function Zi(e, t) {
+  const o = ot(e, !0, t === "fixed"), i = o.top + e.clientTop, s = o.left + e.clientLeft, r = W(e) ? nt(e) : H(1), n = e.clientWidth * r.x, a = e.clientHeight * r.y, l = s * r.x, c = i * r.y;
+  return {
+    width: n,
+    height: a,
+    x: l,
+    y: c
+  };
+}
+function ge(e, t, o) {
+  let i;
+  if (t === "viewport")
+    i = Qi(e, o);
+  else if (t === "document")
+    i = Gi(q(e));
+  else if (z(t))
+    i = Zi(t, o);
+  else {
+    const s = Ce(e);
+    i = {
+      x: t.x - s.x,
+      y: t.y - s.y,
+      width: t.width,
+      height: t.height
+    };
+  }
+  return Et(i);
+}
+function Ae(e, t) {
+  const o = tt(e);
+  return o === t || !z(o) || rt(o) ? !1 : B(o).position === "fixed" || Ae(o, t);
+}
+function to(e, t) {
+  const o = t.get(e);
+  if (o)
+    return o;
+  let i = pt(e, [], !1).filter((a) => z(a) && lt(a) !== "body"), s = null;
+  const r = B(e).position === "fixed";
+  let n = r ? tt(e) : e;
+  for (; z(n) && !rt(n); ) {
+    const a = B(n), l = At(n);
+    !l && a.position === "fixed" && (s = null), (r ? !l && !s : !l && a.position === "static" && !!s && Ji.has(s.position) || gt(n) && !l && Ae(e, n)) ? i = i.filter((h) => h !== n) : s = a, n = tt(n);
+  }
+  return t.set(e, i), i;
+}
+function eo(e) {
+  let {
+    element: t,
+    boundary: o,
+    rootBoundary: i,
+    strategy: s
+  } = e;
+  const n = [...o === "clippingAncestors" ? Ot(t) ? [] : to(t, this._c) : [].concat(o), i], a = n[0], l = n.reduce((c, h) => {
+    const d = ge(t, h, s);
+    return c.top = T(d.top, c.top), c.right = J(d.right, c.right), c.bottom = J(d.bottom, c.bottom), c.left = T(d.left, c.left), c;
+  }, ge(t, a, s));
+  return {
+    width: l.right - l.left,
+    height: l.bottom - l.top,
+    x: l.left,
+    y: l.top
+  };
+}
+function io(e) {
+  const {
+    width: t,
+    height: o
+  } = Pe(e);
+  return {
+    width: t,
+    height: o
+  };
+}
+function oo(e, t, o) {
+  const i = W(t), s = q(t), r = o === "fixed", n = ot(e, !0, r, t);
+  let a = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const l = H(0);
+  function c() {
+    l.x = ie(s);
+  }
+  if (i || !i && !r)
+    if ((lt(t) !== "body" || gt(s)) && (a = St(t)), i) {
+      const p = ot(t, !0, r, t);
+      l.x = p.x + t.clientLeft, l.y = p.y + t.clientTop;
+    } else s && c();
+  r && !i && s && c();
+  const h = s && !i && !r ? Oe(s, a) : H(0), d = n.left + a.scrollLeft - l.x - h.x, u = n.top + a.scrollTop - l.y - h.y;
+  return {
+    x: d,
+    y: u,
+    width: n.width,
+    height: n.height
+  };
+}
+function Ft(e) {
+  return B(e).position === "static";
+}
+function me(e, t) {
+  if (!W(e) || B(e).position === "fixed")
+    return null;
+  if (t)
+    return t(e);
+  let o = e.offsetParent;
+  return q(e) === o && (o = o.ownerDocument.body), o;
+}
+function Se(e, t) {
+  const o = L(e);
+  if (Ot(e))
+    return o;
+  if (!W(e)) {
+    let s = tt(e);
+    for (; s && !rt(s); ) {
+      if (z(s) && !Ft(s))
+        return s;
+      s = tt(s);
+    }
+    return o;
+  }
+  let i = me(e, t);
+  for (; i && Ii(i) && Ft(i); )
+    i = me(i, t);
+  return i && rt(i) && Ft(i) && !At(i) ? o : i || Vi(e) || o;
+}
+const so = async function(e) {
+  const t = this.getOffsetParent || Se, o = this.getDimensions, i = await o(e.floating);
+  return {
+    reference: oo(e.reference, await t(e.floating), e.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: i.width,
+      height: i.height
+    }
+  };
+};
+function no(e) {
+  return B(e).direction === "rtl";
+}
+const It = {
+  convertOffsetParentRelativeRectToViewportRelativeRect: Ki,
+  getDocumentElement: q,
+  getClippingRect: eo,
+  getOffsetParent: Se,
+  getElementRects: so,
+  getClientRects: Xi,
+  getDimensions: io,
+  getScale: nt,
+  isElement: z,
+  isRTL: no
+};
+function Re(e, t) {
+  return e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height;
+}
+function ro(e, t) {
+  let o = null, i;
+  const s = q(e);
+  function r() {
+    var a;
+    clearTimeout(i), (a = o) == null || a.disconnect(), o = null;
+  }
+  function n(a, l) {
+    a === void 0 && (a = !1), l === void 0 && (l = 1), r();
+    const c = e.getBoundingClientRect(), {
+      left: h,
+      top: d,
+      width: u,
+      height: p
+    } = c;
+    if (a || t(), !u || !p)
+      return;
+    const f = mt(d), g = mt(s.clientWidth - (h + u)), m = mt(s.clientHeight - (d + p)), y = mt(h), E = {
+      rootMargin: -f + "px " + -g + "px " + -m + "px " + -y + "px",
+      threshold: T(0, J(1, l)) || 1
+    };
+    let C = !0;
+    function P(F) {
+      const O = F[0].intersectionRatio;
+      if (O !== l) {
+        if (!C)
+          return n();
+        O ? n(!1, O) : i = setTimeout(() => {
+          n(!1, 1e-7);
+        }, 1e3);
+      }
+      O === 1 && !Re(c, e.getBoundingClientRect()) && n(), C = !1;
+    }
+    try {
+      o = new IntersectionObserver(P, {
+        ...E,
+        // Handle <iframe>s
+        root: s.ownerDocument
+      });
+    } catch {
+      o = new IntersectionObserver(P, E);
+    }
+    o.observe(e);
+  }
+  return n(!0), r;
+}
+function Mt(e, t, o, i) {
+  i === void 0 && (i = {});
+  const {
+    ancestorScroll: s = !0,
+    ancestorResize: r = !0,
+    elementResize: n = typeof ResizeObserver == "function",
+    layoutShift: a = typeof IntersectionObserver == "function",
+    animationFrame: l = !1
+  } = i, c = ee(e), h = s || r ? [...c ? pt(c) : [], ...pt(t)] : [];
+  h.forEach((y) => {
+    s && y.addEventListener("scroll", o, {
+      passive: !0
+    }), r && y.addEventListener("resize", o);
+  });
+  const d = c && a ? ro(c, o) : null;
+  let u = -1, p = null;
+  n && (p = new ResizeObserver((y) => {
+    let [x] = y;
+    x && x.target === c && p && (p.unobserve(t), cancelAnimationFrame(u), u = requestAnimationFrame(() => {
+      var E;
+      (E = p) == null || E.observe(t);
+    })), o();
+  }), c && !l && p.observe(c), p.observe(t));
+  let f, g = l ? ot(e) : null;
+  l && m();
+  function m() {
+    const y = ot(e);
+    g && !Re(g, y) && o(), g = y, f = requestAnimationFrame(m);
+  }
+  return o(), () => {
+    var y;
+    h.forEach((x) => {
+      s && x.removeEventListener("scroll", o), r && x.removeEventListener("resize", o);
+    }), d?.(), (y = p) == null || y.disconnect(), p = null, l && cancelAnimationFrame(f);
+  };
+}
+const Ht = Ni, Te = $i, Wt = Li, qt = _i, ao = Di, Le = Ti, De = (e, t, o) => {
+  const i = /* @__PURE__ */ new Map(), s = {
+    platform: It,
+    ...o
+  }, r = {
+    ...s.platform,
+    _c: i
+  };
+  return Ri(e, t, {
+    ...s,
+    platform: r
+  });
+};
+function yt(e) {
+  if (typeof e > "u")
+    return 0;
+  const t = window.devicePixelRatio || 1;
+  return Math.round(e * t) / t || -1e4;
+}
+const vt = 8, lo = 100, co = (e) => ({
+  bottom: ["top", "left", "right"],
+  "bottom-end": ["top-end", "left", "right"],
+  "bottom-start": ["top-start", "left", "right"],
+  left: ["right", "bottom", "top"],
+  "left-end": ["right-end", "bottom", "top"],
+  "left-start": ["right-start", "bottom", "top"],
+  right: ["left", "bottom", "top"],
+  "right-end": ["left-end", "bottom", "top"],
+  "right-start": ["left-start", "bottom", "top"],
+  top: ["bottom", "left", "right"],
+  "top-end": ["bottom-end", "left", "right"],
+  "top-start": ["bottom-start", "left", "right"]
+})[e] ?? [e];
+class ho {
+  constructor(t) {
+    this.originalPlacements = /* @__PURE__ */ new WeakMap(), this.allowPlacementUpdate = !1, this.closeForAncestorUpdate = () => {
+      !this.allowPlacementUpdate && this.options.type !== "modal" && this.cleanup && this.target.dispatchEvent(new Event("close", { bubbles: !0 })), this.allowPlacementUpdate = !1;
+    }, this.updatePlacement = () => {
+      this.computePlacement();
+    }, this.resetOverlayPosition = () => {
+      !this.target || !this.options || (this.clearOverlayPosition(), this.host.offsetHeight, this.computePlacement());
+    }, this.host = t, this.host.addController(this);
+  }
+  async placeOverlay(t = this.target, o = this.options) {
+    if (this.target = t, this.options = o, !t || !o)
+      return;
+    const i = Mt(
+      o.trigger,
+      t,
+      this.closeForAncestorUpdate,
+      {
+        ancestorResize: !1,
+        elementResize: !1,
+        layoutShift: !1
+      }
+    ), s = Mt(
+      o.trigger,
+      t,
+      this.updatePlacement,
+      {
+        ancestorScroll: !1
+      }
+    );
+    this.cleanup = () => {
+      this.host.elements?.forEach((r) => {
+        r.addEventListener(
+          "cx-closed",
+          () => {
+            const n = this.originalPlacements.get(r);
+            n && r.setAttribute("placement", n), this.originalPlacements.delete(r);
+          },
+          { once: !0 }
+        );
+      }), i(), s();
+    };
+  }
+  async computePlacement() {
+    const { options: t, target: o } = this;
+    await (document.fonts ? document.fonts.ready : Promise.resolve());
+    const i = t.trigger instanceof HTMLElement ? Wt() : Wt({
+      fallbackPlacements: co(t.placement),
+      padding: vt
+    }), [s = 0, r = 0] = Array.isArray(t?.offset) ? t.offset : [t.offset, 0], n = this.host.elements.find(
+      (u) => u.tipElement
+    )?.tipElement, a = [
+      Ht({
+        crossAxis: r,
+        mainAxis: s
+      }),
+      Te({ padding: vt }),
+      i,
+      qt({
+        apply: ({ availableHeight: u, availableWidth: p, rects: { floating: f } }) => {
+          const g = Math.max(
+            lo,
+            Math.floor(u)
+          ), m = f.height;
+          this.initialHeight = this.isConstrained && this.initialHeight || m, this.isConstrained = m < this.initialHeight || g <= m;
+          const y = this.isConstrained ? `${g}px` : "";
+          Object.assign(o.style, {
+            maxHeight: y,
+            maxWidth: `${Math.floor(p)}px`
+          });
+        },
+        padding: vt
+      }),
+      ...n ? [
+        Le({
+          element: n,
+          padding: t.tipPadding || vt
+        })
+      ] : []
+    ], { middlewareData: l, placement: c, x: h, y: d } = await De(
+      t.trigger,
+      o,
+      {
+        middleware: a,
+        placement: t.placement,
+        strategy: "fixed"
+      }
+    );
+    if (Object.assign(o.style, {
+      left: "0px",
+      top: "0px",
+      translate: `${yt(h)}px ${yt(d)}px`
+    }), o.setAttribute("actual-placement", c), this.host.elements?.forEach((u) => {
+      this.originalPlacements.has(u) || this.originalPlacements.set(
+        u,
+        u.getAttribute("placement")
+      ), u.setAttribute("placement", c);
+    }), n && l.arrow) {
+      const { x: u, y: p } = l.arrow;
+      Object.assign(n.style, {
+        left: c.startsWith("bottom") || c.startsWith("top") ? "0px" : "",
+        top: c.startsWith("right") || c.startsWith("left") ? "0px" : "",
+        translate: `${yt(u)}px ${yt(p)}px`
+      });
+    }
+  }
+  clearOverlayPosition() {
+    this.target && (this.target.style.removeProperty("max-height"), this.target.style.removeProperty("max-width"), this.initialHeight = void 0, this.isConstrained = !1);
+  }
+  hostConnected() {
+    document.addEventListener("cx-update-overlays", this.resetOverlayPosition);
+  }
+  hostUpdated() {
+    this.host.open || (this.cleanup?.(), this.cleanup = void 0);
+  }
+  hostDisconnected() {
+    this.cleanup?.(), this.cleanup = void 0, document.removeEventListener(
+      "cx-update-overlays",
+      this.resetOverlayPosition
+    );
+  }
+}
+var Rt = /* @__PURE__ */ ((e) => (e.Click = "click", e.Hover = "hover", e.LongPress = "longpress", e))(Rt || {});
+class oe {
+  constructor(t, { handleOverlayReady: o, isPersistent: i, overlay: s }) {
+    this.target = t, this.isLazilyOpen = !1, this.isPersistent = !1, this.isPersistent = !!i, this.handleOverlayReady = o, this.isPersistent && this.init(), this.overlay = s;
+  }
+  get activelyOpening() {
+    return !1;
+  }
+  get open() {
+    return this.overlay?.open ?? this.isLazilyOpen;
+  }
+  /**
+   * Set `open` against the associated Overlay lazily.
+   */
+  set open(t) {
+    if (t !== this.open) {
+      if (this.isLazilyOpen = t, this.overlay) {
+        this.overlay.open = t;
+        return;
+      }
+      t && (customElements.whenDefined("cx-overlay").then(async () => {
+        const { Overlay: o } = await Promise.resolve().then(() => Co);
+        this.overlay = new o(), this.overlay.open = !0;
+      }), Promise.resolve().then(() => Ne));
+    }
+  }
+  get overlay() {
+    return this._overlay;
+  }
+  set overlay(t) {
+    t && this.overlay !== t && (this.overlay && this.overlay.removeController(this), this._overlay = t, this.overlay.addController(this), this.initOverlay(), this.prepareDescription(this.target), this.handleOverlayReady?.(this.overlay));
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  prepareDescription(t) {
+  }
+  releaseDescription() {
+  }
+  shouldCompleteOpen() {
+  }
+  /* c8 ignore next 3 */
+  init() {
+  }
+  /* c8 ignore next 3 */
+  initOverlay() {
+  }
+  abort() {
+    this.releaseDescription(), this.abortController?.abort();
+  }
+  hostConnected() {
+    this.init();
+  }
+  hostDisconnected() {
+    this.isPersistent || this.abort();
+  }
+}
+const po = 300, ke = {
+  keyboard: "Press Space or Alt+Down Arrow for additional options",
+  mouse: "Click and hold for additional options",
+  touch: "Double tap and long press for additional options"
+};
+class uo extends oe {
+  constructor() {
+    super(...arguments), this.type = Rt.LongPress, this.longpressState = null, this.releaseDescription = it, this.handlePointerup = () => {
+      clearTimeout(this.timeout), this.target && (this.longpressState = this.overlay?.state === "opening" ? "pressed" : null, document.removeEventListener("pointerup", this.handlePointerup), document.removeEventListener("pointercancel", this.handlePointerup));
+    };
+  }
+  get activelyOpening() {
+    return this.longpressState === "opening" || this.longpressState === "pressed";
+  }
+  handleLongpress() {
+    this.open = !0, this.longpressState = this.longpressState === "potential" ? "opening" : "pressed";
+  }
+  handlePointerdown(t) {
+    !this.target || t.button !== 0 || (this.longpressState = "potential", document.addEventListener("pointerup", this.handlePointerup), document.addEventListener("pointercancel", this.handlePointerup), "holdAffordance" in this.target) || (this.timeout = setTimeout(() => {
+      this.target && this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            source: "pointer"
+          }
+        })
+      );
+    }, po));
+  }
+  handleKeydown(t) {
+    const { altKey: o, code: i } = t;
+    o && i === "ArrowDown" && (t.stopPropagation(), t.stopImmediatePropagation());
+  }
+  handleKeyup(t) {
+    const { altKey: o, code: i } = t;
+    if (i === "Space" || o && i === "ArrowDown") {
+      if (!this.target)
+        return;
+      t.stopPropagation(), this.target.dispatchEvent(
+        new CustomEvent("longpress", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            source: "keyboard"
+          }
+        })
+      ), setTimeout(() => {
+        this.longpressState = null;
+      });
+    }
+  }
+  prepareDescription(t) {
+    if (
+      // do not reapply until target is recycled
+      this.releaseDescription !== it || // require "longpress content" to apply relationship
+      !this.overlay.elements.length
+    )
+      return;
+    const o = document.createElement("div");
+    o.id = `longpress-describedby-descriptor-${Ut()}`;
+    const i = ni() || ri() ? "touch" : "keyboard";
+    o.textContent = ke[i], o.slot = "longpress-describedby-descriptor";
+    const s = t.getRootNode(), r = this.overlay.getRootNode();
+    s === r ? this.overlay.append(o) : (o.hidden = !("host" in s), t.insertAdjacentElement("afterend", o));
+    const n = $t(
+      t,
+      "aria-describedby",
+      [o.id]
+    );
+    this.releaseDescription = () => {
+      n(), o.remove(), this.releaseDescription = it;
+    };
+  }
+  shouldCompleteOpen() {
+    this.longpressState = this.longpressState === "pressed" ? null : this.longpressState;
+  }
+  init() {
+    this.abortController?.abort(), this.abortController = new AbortController();
+    const { signal: t } = this.abortController;
+    this.target.addEventListener("longpress", () => this.handleLongpress(), {
+      signal: t
+    }), this.target.addEventListener(
+      "pointerdown",
+      (o) => this.handlePointerdown(o),
+      { signal: t }
+    ), this.prepareDescription(this.target), !this.target.holdAffordance && (this.target.addEventListener(
+      "keydown",
+      (o) => this.handleKeydown(o),
+      { signal: t }
+    ), this.target.addEventListener(
+      "keyup",
+      (o) => this.handleKeyup(o),
+      { signal: t }
+    ));
+  }
+}
+const fo = Vt`
+  /*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+  :host {
+    display: contents;
+    pointer-events: none;
+
+    /**
+     * Duplicate --spectrum-overlay-animation-distance, which is out of scope.
+     * Currently is is statically '--cx-spacing-medium' across a number of places
+     * so that is leveraged here as the default.
+     **/
+
+    --swc-overlay-animation-distance: var(--cx-spacing-medium);
+  }
+
+  .dialog {
+    margin: 0;
+    border: 0;
+    background: none;
+    padding: 0;
+    display: flex;
+    position: fixed;
+    overflow: visible;
+    opacity: 1 !important;
+    box-sizing: border-box;
+    max-height: calc(100vh - 16px);
+    max-height: calc(100dvh - 16px);
+    max-width: calc(100vw - 16px);
+    height: auto;
+    inset: auto;
+    top: 0;
+    left: 0;
+
+    --cx-overlay-open: true;
+  }
+
+  .dialog:not([is-visible]) {
+    display: none;
+  }
+
+  .dialog:focus {
+    outline: none;
+  }
+
+  :host(:not([open])) .dialog {
+    --cx-overlay-open: false;
+  }
+
+  .dialog::backdrop {
+    display: none;
+  }
+
+  .dialog::before {
+    position: absolute;
+    inset: -999em;
+    content: '';
+    pointer-events: auto !important;
+  }
+
+  .dialog:not(.not-immediately-closable)::before {
+    display: none;
+  }
+
+  .dialog > div {
+    width: 100%;
+  }
+
+  ::slotted(*) {
+    pointer-events: auto;
+    visibility: visible !important;
+  }
+
+  /**
+ * Offset the transition displacement from the trigger edge by
+ * padding the equivelent distance off of the opposite edge.
+ *
+ * <HACK>
+ * Prepare for Context Menus with [popover] by adding margin/border
+ * that _should_ still be under the pointer when 'pointerup' is dispatched.
+ * </HACK>
+ **/
+  .dialog:not([actual-placement])[placement*='top'] {
+    padding-block: var(--swc-overlay-animation-distance);
+    margin-top: var(--swc-overlay-animation-distance);
+  }
+
+  .dialog:not([actual-placement])[placement*='right'] {
+    padding-inline: var(--swc-overlay-animation-distance);
+    margin-left: calc(-1 * var(--swc-overlay-animation-distance));
+  }
+
+  .dialog:not([actual-placement])[placement*='bottom'] {
+    padding-block: var(--swc-overlay-animation-distance);
+    margin-top: calc(-1 * var(--swc-overlay-animation-distance));
+  }
+
+  .dialog:not([actual-placement])[placement*='left'] {
+    padding-inline: var(--swc-overlay-animation-distance);
+    margin-left: var(--swc-overlay-animation-distance);
+  }
+
+  .dialog[actual-placement*='top'] {
+    padding-block: var(--swc-overlay-animation-distance);
+    margin-top: var(--swc-overlay-animation-distance);
+  }
+
+  .dialog[actual-placement*='right'] {
+    padding-inline: var(--swc-overlay-animation-distance);
+    margin-left: calc(-1 * var(--swc-overlay-animation-distance));
+  }
+
+  .dialog[actual-placement*='bottom'] {
+    padding-block: var(--swc-overlay-animation-distance);
+    margin-top: calc(-1 * var(--swc-overlay-animation-distance));
+  }
+
+  .dialog[actual-placement*='left'] {
+    padding-inline: var(--swc-overlay-animation-distance);
+    margin-left: var(--swc-overlay-animation-distance);
+  }
+
+  slot[name='longpress-describedby-descriptor'] {
+    display: none;
+  }
+
+  /* stylelint-disable */
+  @supports selector(:open) {
+    .dialog {
+      opacity: 0;
+    }
+
+    .dialog:open {
+      opacity: 1;
+    }
+  }
+
+  @supports selector(:popover-open) {
+    .dialog {
+      opacity: 0;
+    }
+
+    .dialog:popover-open {
+      opacity: 1;
+    }
+  }
+
+  @supports (overlay: auto) {
+    .dialog {
+      display: none;
+      transition:
+        all var(--cx-transition-fast, 0.13s),
+        translate 0s,
+        display var(--cx-transition-fast, 0.13s);
+      transition-behavior: allow-discrete;
+    }
+
+    .dialog:popover-open,
+    .dialog:modal {
+      display: flex;
+    }
+  }
+  .dialog[actual-placement] {
+    z-index: calc(
+      var(--swc-overlay-z-index-base, 1000) + var(--swc-overlay-open-count)
+    );
+  }
+  @supports (not selector(:open)) and (not selector(:popover-open)) {
+    :host:not([open]) .dialog {
+      pointer-events: none;
+    }
+  }
+`;
+class go extends Event {
+  constructor(t, o, i) {
+    super("slottable-request", {
+      bubbles: !1,
+      cancelable: !0,
+      composed: !1
+    }), this.name = t, this.data = o, this.slotName = i !== void 0 ? `${t}.${i}` : t;
+  }
+}
+const mo = Symbol("remove-slottable-request");
+class yo extends oe {
+  constructor() {
+    super(...arguments), this.type = Rt.Click, this.preventNextToggle = !1;
+  }
+  handleClick() {
+    this.preventNextToggle || (this.open = !this.open), this.preventNextToggle = !1;
+  }
+  handlePointerdown() {
+    this.preventNextToggle = this.open;
+  }
+  init() {
+    this.abortController?.abort(), this.abortController = new AbortController();
+    const { signal: t } = this.abortController;
+    this.target.addEventListener("click", () => this.handleClick(), {
+      signal: t
+    }), this.target.addEventListener(
+      "pointerdown",
+      () => this.handlePointerdown(),
+      { signal: t }
+    );
+  }
+}
+const vo = 300;
+class bo extends oe {
+  constructor() {
+    super(...arguments), this.type = Rt.Hover, this.elementIds = [], this.focusedin = !1, this.pointerentered = !1;
+  }
+  handleTargetFocusin() {
+    this.target.matches(":focus-visible") && (this.open = !0, this.focusedin = !0);
+  }
+  handleTargetFocusout() {
+    this.focusedin = !1, !this.pointerentered && (this.open = !1);
+  }
+  handleTargetPointerenter() {
+    this.hoverTimeout && (clearTimeout(this.hoverTimeout), this.hoverTimeout = void 0), !this.overlay?.disabled && (this.open = !0, this.pointerentered = !0);
+  }
+  handleTargetPointerleave() {
+    this.doPointerleave();
+  }
+  // set a timeout once the pointer enters and the overlay is shown
+  // give the user time to enter the overlay
+  handleHostPointerenter() {
+    this.hoverTimeout && (clearTimeout(this.hoverTimeout), this.hoverTimeout = void 0);
+  }
+  handleHostPointerleave() {
+    this.doPointerleave();
+  }
+  prepareDescription() {
+    if (!this.overlay.elements.length)
+      return;
+    const t = this.target.getRootNode(), o = this.overlay.elements[0].getRootNode(), i = this.overlay.getRootNode();
+    t === i ? this.prepareOverlayRelativeDescription() : t === o && this.prepareContentRelativeDescription();
+  }
+  prepareOverlayRelativeDescription() {
+    const t = $t(
+      this.target,
+      "aria-describedby",
+      [this.overlay.id]
+    );
+    this.releaseDescription = () => {
+      t(), this.releaseDescription = it;
+    };
+  }
+  prepareContentRelativeDescription() {
+    const t = [], o = this.overlay.elements.map((s) => (t.push(s.id), s.id || (s.id = `${this.overlay.tagName.toLowerCase()}-helper-${Ut()}`), s.id));
+    this.elementIds = t;
+    const i = $t(
+      this.target,
+      "aria-describedby",
+      o
+    );
+    this.releaseDescription = () => {
+      i(), this.overlay.elements.map((s, r) => {
+        s.id = this.elementIds[r];
+      }), this.releaseDescription = it;
+    };
+  }
+  doPointerleave() {
+    this.pointerentered = !1;
+    const t = this.target;
+    this.focusedin && t.matches(":focus-visible") || (this.hoverTimeout = setTimeout(() => {
+      this.open = !1;
+    }, vo));
+  }
+  init() {
+    this.abortController?.abort(), this.abortController = new AbortController();
+    const { signal: t } = this.abortController;
+    this.target.addEventListener("focusin", () => this.handleTargetFocusin(), {
+      signal: t
+    }), this.target.addEventListener(
+      "focusout",
+      () => this.handleTargetFocusout(),
+      { signal: t }
+    ), this.target.addEventListener(
+      "pointerenter",
+      () => this.handleTargetPointerenter(),
+      { signal: t }
+    ), this.target.addEventListener(
+      "pointerleave",
+      () => this.handleTargetPointerleave(),
+      { signal: t }
+    ), this.overlay && this.initOverlay();
+  }
+  initOverlay() {
+    if (!this.abortController)
+      return;
+    const { signal: t } = this.abortController;
+    this.overlay.addEventListener(
+      "pointerenter",
+      () => this.handleHostPointerenter(),
+      { signal: t }
+    ), this.overlay.addEventListener(
+      "pointerleave",
+      () => this.handleHostPointerleave(),
+      { signal: t }
+    );
+  }
+}
+const wo = {
+  click: yo,
+  hover: bo,
+  longpress: uo
+};
+var xo = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, R = (e, t, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? Eo(t, o) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (s = (i ? n(t, o, s) : n(s)) || s);
+  return i && s && xo(t, o, s), s;
+};
+const Po = "showPopover" in document.createElement("div");
+let ct = di(ht);
+Po ? ct = fi(ct) : ct = pi(ct);
+var K;
+const A = (K = class extends ct {
+  constructor() {
+    super(), this._delayed = !1, this._disabled = !1, this.offset = 0, this._open = !1, this.lastRequestSlottableState = !1, this.receivesFocus = "auto", this._state = "closed", this.triggerElement = null, this.type = "auto", this.wasOpen = !1, this.closeOnFocusOut = (t) => {
+      if (!t.relatedTarget)
+        return;
+      const o = new Event("overlay-relation-query", {
+        bubbles: !0,
+        composed: !0
+      });
+      t.relatedTarget.addEventListener(o.type, (i) => {
+        i.composedPath().includes(this) || (this.open = !1);
+      }), t.relatedTarget.dispatchEvent(o);
+    }, this.handleClose = this.handleClose.bind(this);
+  }
+  get delayed() {
+    return this.elements.length ? this.elements[this.elements.length - 1].hasAttribute("delayed") || this._delayed : this._delayed;
+  }
+  set delayed(t) {
+    this._delayed = t;
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  set disabled(t) {
+    this._disabled = t, t ? (this.strategy?.abort(), this.wasOpen = this.open, this.open = !1) : (this.bindEvents(), this.open = this.open || this.wasOpen, this.wasOpen = !1);
+  }
+  get hasNonVirtualTrigger() {
+    return !!this.triggerElement && !(this.triggerElement instanceof Pt);
+  }
+  get placementController() {
+    return this._placementController || (this._placementController = new ho(this)), this._placementController;
+  }
+  get open() {
+    return this._open;
+  }
+  set open(t) {
+    t && this.disabled || t !== this.open && (this.strategy?.activelyOpening && !t || (this._open = t, this.open && (K.openCount += 1), this.requestUpdate("open", !this.open), this.open && this.requestSlottable()));
+  }
+  get state() {
+    return this._state;
+  }
+  set state(t) {
+    if (t === this.state)
+      return;
+    const o = this.state;
+    this._state = t, (this.state === "opened" || this.state === "closed") && this.strategy?.shouldCompleteOpen(), this.requestUpdate("state", o);
+  }
+  get elementResolver() {
+    return this._elementResolver || (this._elementResolver = new hi(this)), this._elementResolver;
+  }
+  get usesDialog() {
+    return this.type === "modal" || this.type === "page";
+  }
+  get popoverValue() {
+    if ("popover" in this)
+      switch (this.type) {
+        case "modal":
+        case "page":
+          return;
+        case "hint":
+          return "manual";
+        default:
+          return this.type;
+      }
+  }
+  get requiresPosition() {
+    return !(this.type === "page" || !this.open || !this.triggerElement || !this.placement && this.type !== "hint");
+  }
+  managePosition() {
+    if (!this.requiresPosition || !this.open)
+      return;
+    const t = this.offset || 0, o = this.triggerElement, i = this.placement || "right", s = this.tipPadding;
+    this.placementController.placeOverlay(this.dialogEl, {
+      offset: t,
+      placement: i,
+      tipPadding: s,
+      trigger: o,
+      type: this.type
+    });
+  }
+  async managePopoverOpen() {
+    super.managePopoverOpen();
+    const t = this.open;
+    if (this.open !== t || (await this.manageDelay(t), this.open !== t) || (await this.ensureOnDOM(t), this.open !== t))
+      return;
+    const o = await this.makeTransition(t);
+    this.open === t && await this.applyFocus(t, o);
+  }
+  async applyFocus(t, o) {
+    if (!(this.receivesFocus === "false" || this.type === "hint")) {
+      if (await k(), await k(), t === this.open && !this.open) {
+        this.hasNonVirtualTrigger && this.contains(this.getRootNode().activeElement) && this.triggerElement.focus();
+        return;
+      }
+      o?.focus();
+    }
+  }
+  returnFocus() {
+    if (this.open || this.type === "hint")
+      return;
+    const t = () => {
+      const o = [];
+      let i = document.activeElement;
+      for (; i?.shadowRoot?.activeElement; )
+        i = i.shadowRoot.activeElement;
+      for (; i; ) {
+        const s = i.assignedSlot || i.parentElement || i.getRootNode()?.host;
+        s && o.push(s), i = s;
+      }
+      return o;
+    };
+    this.receivesFocus !== "false" && this.triggerElement?.focus && (this.contains(this.getRootNode().activeElement) || t().includes(this) || document.activeElement === document.body) && this.triggerElement.focus();
+  }
+  async manageOpen(t) {
+    if (!(!this.isConnected && this.open) && (this.hasUpdated || await this.updateComplete, this.open ? (le.add(this), this.willPreventClose && (document.addEventListener(
+      "pointerup",
+      () => {
+        this.dialogEl.classList.toggle("not-immediately-closable", !1), this.willPreventClose = !1;
+      },
+      { once: !0 }
+    ), this.dialogEl.classList.toggle("not-immediately-closable", !0))) : (t && this.dispose(), le.remove(this)), this.open && this.state !== "opened" ? this.state = "opening" : !this.open && this.state !== "closed" && (this.state = "closing"), this.usesDialog ? this.manageDialogOpen() : this.managePopoverOpen(), this.type === "auto")) {
+      const o = this.getRootNode();
+      this.open ? o.addEventListener("focusout", this.closeOnFocusOut, {
+        capture: !0
+      }) : o.removeEventListener("focusout", this.closeOnFocusOut, {
+        capture: !0
+      });
+    }
+  }
+  bindEvents() {
+    this.strategy?.abort(), this.strategy = void 0, this.hasNonVirtualTrigger && this.triggerInteraction && (this.strategy = new wo[this.triggerInteraction](
+      this.triggerElement,
+      {
+        overlay: this
+      }
+    ));
+  }
+  handleBeforetoggle(t) {
+    t.newState !== "open" && this.handleBrowserClose();
+  }
+  handleBrowserClose() {
+    if (!this.strategy?.activelyOpening) {
+      this.open = !1;
+      return;
+    }
+    this.manuallyKeepOpen();
+  }
+  manuallyKeepOpen() {
+    this.open = !0, this.placementController.allowPlacementUpdate = !0, this.manageOpen(!1);
+  }
+  handleSlotchange() {
+    this.elements.length ? this.hasNonVirtualTrigger && this.strategy?.prepareDescription(this.triggerElement) : this.strategy?.releaseDescription();
+  }
+  shouldPreventClose() {
+    const t = this.willPreventClose;
+    return this.willPreventClose = !1, t;
+  }
+  requestSlottable() {
+    this.lastRequestSlottableState !== this.open && (this.open || document.body.offsetHeight, this.dispatchEvent(
+      new go(
+        "overlay-content",
+        this.open ? {} : mo
+      )
+    ), this.lastRequestSlottableState = this.open);
+  }
+  willUpdate(t) {
+    if (this.hasAttribute("id") || this.setAttribute("id", `${this.tagName.toLowerCase()}-${Ut()}`), t.has("open") && (this.hasUpdated || this.open) && this.manageOpen(t.get("open")), t.has("trigger")) {
+      const [i, s] = this.trigger?.split("@") || [];
+      this.elementResolver.selector = i ? `#${i}` : "", this.triggerInteraction = s;
+    }
+    let o = !1;
+    t.has(ve) && (o = this.triggerElement, this.triggerElement = this.elementResolver.element), t.has("triggerElement") && (o = t.get("triggerElement")), o !== !1 && this.bindEvents();
+  }
+  updated(t) {
+    super.updated(t), t.has("placement") && (this.placement ? this.dialogEl.setAttribute("actual-placement", this.placement) : this.dialogEl.removeAttribute("actual-placement"), this.open && typeof t.get("placement") < "u" && this.placementController.resetOverlayPosition()), t.has("state") && this.state === "closed" && typeof t.get("state") < "u" && this.placementController.clearOverlayPosition();
+  }
+  renderContent() {
+    return j` <slot @slotchange=${this.handleSlotchange}></slot> `;
+  }
+  get dialogStyleMap() {
+    return {
+      "--swc-overlay-open-count": K.openCount.toString()
+    };
+  }
+  handleClose() {
+    this.open = !1;
+  }
+  renderDialog() {
+    return j`
+      <dialog
+        class="dialog"
+        part="dialog"
+        placement=${Tt(
+      this.requiresPosition ? this.placement || "right" : void 0
+    )}
+        style=${se(this.dialogStyleMap)}
+        @close=${this.handleBrowserClose}
+        @cancel=${this.handleBrowserClose}
+        @beforetoggle=${this.handleBeforetoggle}
+        ?is-visible=${this.state !== "closed"}
+      >
+        ${this.renderContent()}
+      </dialog>
+    `;
+  }
+  renderPopover() {
+    return j`
+      <div
+        class="dialog"
+        part="dialog"
+        placement=${Tt(
+      this.requiresPosition ? this.placement || "right" : void 0
+    )}
+        popover=${Tt(this.popoverValue)}
+        style=${se(this.dialogStyleMap)}
+        @beforetoggle=${this.handleBeforetoggle}
+        @close=${this.handleBrowserClose}
+        ?is-visible=${this.state !== "closed"}
+      >
+        ${this.renderContent()}
+      </div>
+    `;
+  }
+  render() {
+    const t = this.type === "modal" || this.type === "page";
+    return j`
+      ${t ? this.renderDialog() : this.renderPopover()}
+      <slot name="longpress-describedby-descriptor"></slot>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("close", this.handleClose), this.hasUpdated && this.bindEvents();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("close", this.handleClose), this.strategy?.releaseDescription(), this.open = !1;
+  }
+}, K.styles = [
+  ye,
+  Vt`
+      ${ze(fo)}
+    `
+], K.openCount = 1, K);
+R([
+  v({ type: Boolean })
+], A.prototype, "delayed", 1);
+R([
+  ut(".dialog")
+], A.prototype, "dialogEl", 2);
+R([
+  v({ type: Boolean })
+], A.prototype, "disabled", 1);
+R([
+  je({
+    flatten: !0,
+    selector: ':not([slot="longpress-describedby-descriptor"], slot)'
+    // gather only elements slotted into the default slot
+  })
+], A.prototype, "elements", 2);
+R([
+  v({ type: Number })
+], A.prototype, "offset", 2);
+R([
+  v({ reflect: !0, type: Boolean })
+], A.prototype, "open", 1);
+R([
+  v()
+], A.prototype, "placement", 2);
+R([
+  v({ attribute: "receives-focus" })
+], A.prototype, "receivesFocus", 2);
+R([
+  ut("slot")
+], A.prototype, "slotEl", 2);
+R([
+  Me()
+], A.prototype, "state", 1);
+R([
+  v({ attribute: "tip-padding", type: Number })
+], A.prototype, "tipPadding", 2);
+R([
+  v()
+], A.prototype, "trigger", 2);
+R([
+  v({ attribute: "trigger-element" })
+], A.prototype, "triggerElement", 2);
+R([
+  v({ attribute: "trigger-interaction" })
+], A.prototype, "triggerInteraction", 2);
+R([
+  v()
+], A.prototype, "type", 2);
+let Fe = A;
+const Co = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  LONGPRESS_INSTRUCTIONS: ke,
+  Overlay: Fe
+}, Symbol.toStringTag, { value: "Module" }));
+Qe("cx-overlay", Fe);
+const Ne = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null
+}, Symbol.toStringTag, { value: "Module" }));
+function Oo(e) {
+  return Ao(e);
+}
+function Nt(e) {
+  return e.assignedSlot ? e.assignedSlot : e.parentNode instanceof ShadowRoot ? e.parentNode.host : e.parentNode;
+}
+function Ao(e) {
+  for (let t = e; t; t = Nt(t)) if (t instanceof Element && getComputedStyle(t).display === "none") return null;
+  for (let t = Nt(e); t; t = Nt(t)) {
+    if (!(t instanceof Element)) continue;
+    const o = getComputedStyle(t);
+    if (o.display !== "contents" && (o.position !== "static" || At(o) || t.tagName === "BODY"))
+      return t;
+  }
+  return null;
+}
+const So = Vt`
+  :host {
+    --arrow-color: var(--cx-color-neutral-1000);
+    --arrow-size: 6px;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     */
+    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+    --arrow-padding-offset: calc(
+      var(--arrow-size-diagonal) - var(--arrow-size)
+    );
+
+    display: contents;
+    /**
+     * Reset -webkit-overflow-scrolling style to fix issue with popup being hidden on mobile devices.
+     * See https://link.orangelogic.com/Tasks/293FXQ
+     */
+    -webkit-overflow-scrolling: auto;
+  }
+
+  .popup {
+    position: absolute;
+    isolation: isolate;
+    max-width: var(--auto-size-available-width, none);
+    max-height: var(--auto-size-available-height, none);
+  }
+
+  .popup--use-size-middleware {
+    /*
+     * Prevent update loops when using the size middleware.
+     * https://github.com/floating-ui/floating-ui/issues/1740#issuecomment-1563544849
+     */
+    width: max-content;
+  }
+
+  .popup--fixed {
+    position: fixed;
+    z-index: var(--cx-z-index-dialog);
+  }
+
+  .popup:not(.popup--active) {
+    display: none;
+  }
+
+  .popup__arrow {
+    position: absolute;
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
+    rotate: 45deg;
+    background: var(--arrow-color);
+    z-index: -1;
+  }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
+    display: none;
+  }
+
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: calc(var(--cx-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0)
+        var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
+`;
+var Ro = Object.defineProperty, To = Object.getOwnPropertyDescriptor, w = (e, t, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? To(t, o) : t, r = e.length - 1, n; r >= 0; r--)
+    (n = e[r]) && (s = (i ? n(t, o, s) : n(s)) || s);
+  return i && s && Ro(t, o, s), s;
+};
+function Lo(e) {
+  if (e == null || typeof e != "object")
+    return !1;
+  const t = "contextElement" in e ? e.contextElement.ownerDocument.defaultView : null;
+  return "getBoundingClientRect" in e && ("contextElement" in e ? e.contextElement instanceof (t?.Element ?? Element) : !0);
+}
+let b = class extends Be {
+  constructor() {
+    super(...arguments), this.localize = new Ve(this), this.active = !1, this.placement = "top", this.strategy = "absolute", this.distance = 0, this.skidding = 0, this.arrow = !1, this.arrowPlacement = "anchor", this.arrowPadding = 10, this.flip = !1, this.hide = !1, this.hideBoundaryStrategy = "escaped", this.flipFallbackPlacements = "", this.flipFallbackStrategy = "best-fit", this.flipPadding = 0, this.shift = !1, this.shiftPadding = 0, this.autoSizePadding = 0, this.hoverBridge = !1, this.autoWidthFactor = 1, this.updateHoverBridge = () => {
+      if (this.hoverBridge && this.anchorEl) {
+        const e = this.anchorEl.getBoundingClientRect(), t = this.popup.getBoundingClientRect(), o = this.placement.includes("top") || this.placement.includes("bottom") || this.placement === "center";
+        let i = 0, s = 0, r = 0, n = 0, a = 0, l = 0, c = 0, h = 0;
+        o ? e.top < t.top ? (i = e.left, s = e.bottom, r = e.right, n = e.bottom, a = t.left, l = t.top, c = t.right, h = t.top) : (i = t.left, s = t.bottom, r = t.right, n = t.bottom, a = e.left, l = e.top, c = e.right, h = e.top) : e.left < t.left ? (i = e.right, s = e.top, r = t.left, n = t.top, a = e.right, l = e.bottom, c = t.left, h = t.bottom) : (i = t.right, s = t.top, r = e.left, n = e.top, a = t.right, l = t.bottom, c = e.left, h = e.bottom), this.style.setProperty("--hover-bridge-top-left-x", `${i}px`), this.style.setProperty("--hover-bridge-top-left-y", `${s}px`), this.style.setProperty("--hover-bridge-top-right-x", `${r}px`), this.style.setProperty("--hover-bridge-top-right-y", `${n}px`), this.style.setProperty(
+          "--hover-bridge-bottom-left-x",
+          `${a}px`
+        ), this.style.setProperty(
+          "--hover-bridge-bottom-left-y",
+          `${l}px`
+        ), this.style.setProperty(
+          "--hover-bridge-bottom-right-x",
+          `${c}px`
+        ), this.style.setProperty(
+          "--hover-bridge-bottom-right-y",
+          `${h}px`
+        );
+      }
+    };
+  }
+  /*
+   * Use to prevent update loops when using the size middleware.
+   * https://github.com/floating-ui/floating-ui/issues/1740#issuecomment-1563544849
+   */
+  get isSizeMiddleWareUsed() {
+    return this.sync || this.autoSize;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.stop();
+  }
+  async runFirstUpdated() {
+    if (this.start(), this.strategy === "overlay" && !ne) {
+      const e = We(this);
+      e && (this.autoSizeBoundary = e, this.flipBoundary = e, this.shiftBoundary = e);
+    }
+  }
+  async updated(e) {
+    super.updated(e), e.has("active") && (this.active ? (this.start(), this.emit("cx-opened")) : this.stop()), e.has("anchor") && this.handleAnchorChange(), this.active && (await this.updateComplete, this.reposition());
+  }
+  async handleAnchorChange() {
+    if (await this.stop(), this.anchor && typeof this.anchor == "string") {
+      const e = this.getRootNode();
+      this.anchorEl = e.getElementById(this.anchor);
+    } else this.anchor instanceof Element || Lo(this.anchor) ? this.anchorEl = this.anchor : this.anchorEl = this.querySelector('[slot="anchor"]');
+    this.anchorEl instanceof HTMLSlotElement && (this.anchorEl = this.anchorEl.assignedElements({
+      flatten: !0
+    })[0]), this.anchorEl instanceof Element && this.anchorEl.tagName.toLowerCase() === "cx-dialog" && (this.anchorEl = this.anchorEl?.shadowRoot?.querySelector(
+      '[part="panel"]'
+    )), this.anchorEl && this.start();
+  }
+  async handleOverlayOpened(e) {
+    e.target === this.overlay && (this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"), this.reposition(), await this.updateComplete, this.emit("cx-opened"));
+  }
+  start() {
+    this.anchorEl && (this.cleanup = Mt(this.anchorEl, this.popup, () => {
+      this.reposition();
+    }));
+  }
+  async stop() {
+    return new Promise((e) => {
+      this.cleanup ? (this.cleanup(), this.cleanup = void 0, this.removeAttribute("data-current-placement"), this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height"), requestAnimationFrame(() => e())) : e();
+    });
+  }
+  /** Forces the popup to recalculate and reposition itself. */
+  reposition() {
+    if (!this.active || !this.anchorEl)
+      return;
+    const e = [
+      // The offset middleware goes first
+      this.placement === "center" ? Ht(
+        ({ rects: t }) => -t.reference.height / 2 - t.floating.height / 2
+      ) : Ht({ crossAxis: this.skidding, mainAxis: this.distance })
+    ];
+    if (this.sync ? e.push(
+      qt({
+        apply: ({ rects: t }) => {
+          const o = this.sync === "width" || this.sync === "both", i = this.sync === "height" || this.sync === "both", s = this.syncElement ? this.syncElement.getBoundingClientRect() : t.reference;
+          this.popup.style.width = o ? `${s.width}px` : "", this.popup.style.height = i ? `${s.height}px` : "";
+        }
+      })
+    ) : (this.popup.style.width = "", this.popup.style.height = ""), this.flip) {
+      let t = this.flipBoundary;
+      !t && ["fixed", "overlay"].includes(this.strategy) && (t = document.body), e.push(
+        Wt({
+          boundary: t,
+          // @ts-expect-error - We're converting a string attribute to an array here
+          fallbackPlacements: this.flipFallbackPlacements,
+          fallbackStrategy: this.flipFallbackStrategy === "best-fit" ? "bestFit" : "initialPlacement",
+          padding: this.flipPadding
+        })
+      );
+    }
+    if (this.shift) {
+      let t = this.shiftBoundary;
+      !t && ["fixed", "overlay"].includes(this.strategy) && (t = document.body), e.push(
+        Te({
+          boundary: t,
+          padding: this.shiftPadding
+        })
+      );
+    }
+    if (this.autoSize) {
+      let t = this.autoSizeBoundary;
+      !t && ["fixed", "overlay"].includes(this.strategy) && (t = document.body), e.push(
+        qt({
+          apply: ({ availableHeight: o, availableWidth: i }) => {
+            this.autoSize === "vertical" || this.autoSize === "both" ? this.style.setProperty(
+              "--auto-size-available-height",
+              `${o}px`
+            ) : this.style.removeProperty("--auto-size-available-height"), this.autoSize === "horizontal" || this.autoSize === "both" ? this.style.setProperty(
+              "--auto-size-available-width",
+              `${i * this.autoWidthFactor}px`
+            ) : this.style.removeProperty("--auto-size-available-width");
+          },
+          boundary: t,
+          padding: this.autoSizePadding
+        })
+      );
+    } else
+      this.style.removeProperty("--auto-size-available-width"), this.style.removeProperty("--auto-size-available-height");
+    this.arrow && e.push(
+      Le({
+        element: this.arrowEl,
+        padding: this.arrowPadding
+      })
+    ), this.hide && e.push(
+      ao({
+        boundary: this.hideBoundary,
+        strategy: this.hideBoundaryStrategy
+      })
+    ), De(this.anchorEl, this.popup, {
+      middleware: e,
+      placement: this.placement === "center" ? "bottom" : this.placement,
+      platform: {
+        ...It,
+        getOffsetParent: (t) => this.strategy === "absolute" ? It.getOffsetParent(t, Oo) : this.strategy === "overlay" && ne ? window : qe(t) || window
+      },
+      strategy: ["overlay", "fixed"].includes(this.strategy) ? "fixed" : "absolute"
+    }).then(({ middlewareData: t, placement: o, x: i, y: s }) => {
+      const r = this.localize.dir() === "rtl", n = {
+        bottom: "top",
+        left: "right",
+        right: "left",
+        top: "bottom"
+      }[o.split("-")[0]];
+      if (this.setAttribute("data-current-placement", o), this.anchorEl === document.body && this.placement === "center") {
+        const a = window.innerWidth, l = window.innerHeight, c = this.popup.offsetWidth, h = this.popup.offsetHeight, d = (a - c) / 2, u = (l - h) / 2;
+        Object.assign(this.popup.style, { left: `${d}px`, top: `${u}px` });
+      } else
+        Object.assign(this.popup.style, {
+          left: `${i}px`,
+          top: `${s}px`
+        });
+      if (this.arrow) {
+        const a = t.arrow.x, l = t.arrow.y;
+        let c = "", h = "", d = "", u = "";
+        if (this.arrowPlacement === "start") {
+          const p = typeof a == "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          c = typeof l == "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "", h = r ? p : "", u = r ? "" : p;
+        } else if (this.arrowPlacement === "end") {
+          const p = typeof a == "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          h = r ? "" : p, u = r ? p : "", d = typeof l == "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+        } else this.arrowPlacement === "center" ? (u = typeof a == "number" ? "calc(50% - var(--arrow-size-diagonal))" : "", c = typeof l == "number" ? "calc(50% - var(--arrow-size-diagonal))" : "") : (u = typeof a == "number" ? `${a}px` : "", c = typeof l == "number" ? `${l}px` : "");
+        Object.assign(this.arrowEl.style, {
+          bottom: d,
+          left: u,
+          right: h,
+          top: c
+        }), this.arrowEl.style.setProperty(
+          n,
+          "calc(var(--arrow-size-diagonal) * -1)"
+        );
+      }
+      t.hide && Object.assign(this.popup.style, {
+        visibility: t.hide.escaped ? "hidden" : "visible"
+      });
+    }), requestAnimationFrame(() => {
+      this.updateHoverBridge(), this.emit("cx-reposition");
+    });
+  }
+  render() {
+    const e = j`<cx-overlay
+      open
+      placement="bottom"
+      type="manual"
+      @cx-opened=${this.handleOverlayOpened}
+    >
+      <div
+        part="popup"
+        class=${Dt({
+      popup: !0,
+      "popup--active": this.active,
+      "popup--fixed": !0,
+      "popup--has-arrow": this.arrow,
+      "popup--use-size-middleware": this.isSizeMiddleWareUsed
+    })}
+      >
+        <slot></slot>
+        ${this.arrow ? j`<div
+              part="arrow"
+              class="popup__arrow"
+              role="presentation"
+            ></div>` : ""}
+      </div>
+    </cx-overlay>`;
+    return j`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+
+      <span
+        part="hover-bridge"
+        class=${Dt({
+      "popup-hover-bridge": !0,
+      "popup-hover-bridge--visible": this.hoverBridge && this.active
+    })}
+      ></span>
+
+      ${Ue(
+      this.strategy === "overlay",
+      () => e,
+      () => j`<div
+            part="popup"
+            class=${Dt({
+        popup: !0,
+        "popup--active": this.active,
+        "popup--fixed": this.strategy === "fixed",
+        "popup--has-arrow": this.arrow,
+        "popup--use-size-middleware": this.isSizeMiddleWareUsed
+      })}
+          >
+            <slot></slot>
+            ${this.arrow ? j`<div
+                  part="arrow"
+                  class="popup__arrow"
+                  role="presentation"
+                ></div>` : ""}
+          </div>`
+    )}
+    `;
+  }
+};
+b.styles = [ye, So];
+w([
+  ut(".popup")
+], b.prototype, "popup", 2);
+w([
+  ut(".popup__arrow")
+], b.prototype, "arrowEl", 2);
+w([
+  ut("cx-overlay")
+], b.prototype, "overlay", 2);
+w([
+  v()
+], b.prototype, "anchor", 2);
+w([
+  v({ reflect: !0, type: Boolean })
+], b.prototype, "active", 2);
+w([
+  v({ reflect: !0 })
+], b.prototype, "placement", 2);
+w([
+  v({ reflect: !0 })
+], b.prototype, "strategy", 2);
+w([
+  v({ type: Number })
+], b.prototype, "distance", 2);
+w([
+  v({ type: Number })
+], b.prototype, "skidding", 2);
+w([
+  v({ type: Boolean })
+], b.prototype, "arrow", 2);
+w([
+  v({ attribute: "arrow-placement" })
+], b.prototype, "arrowPlacement", 2);
+w([
+  v({ attribute: "arrow-padding", type: Number })
+], b.prototype, "arrowPadding", 2);
+w([
+  v({ type: Boolean })
+], b.prototype, "flip", 2);
+w([
+  v({ type: Boolean })
+], b.prototype, "hide", 2);
+w([
+  v({ attribute: "hide-boundary", type: Object })
+], b.prototype, "hideBoundary", 2);
+w([
+  v({ attribute: "hide-boundary-strategy" })
+], b.prototype, "hideBoundaryStrategy", 2);
+w([
+  v({
+    attribute: "flip-fallback-placements",
+    converter: {
+      fromAttribute: (e) => e.split(" ").map((t) => t.trim()).filter((t) => t !== ""),
+      toAttribute: (e) => e.join(" ")
+    }
+  })
+], b.prototype, "flipFallbackPlacements", 2);
+w([
+  v({ attribute: "flip-fallback-strategy" })
+], b.prototype, "flipFallbackStrategy", 2);
+w([
+  v({ attribute: "flip-boundary", type: Object })
+], b.prototype, "flipBoundary", 2);
+w([
+  v({ attribute: "flip-padding", type: Number })
+], b.prototype, "flipPadding", 2);
+w([
+  v({ type: Boolean })
+], b.prototype, "shift", 2);
+w([
+  v({ attribute: "shift-boundary", type: Object })
+], b.prototype, "shiftBoundary", 2);
+w([
+  v({ attribute: "shift-padding", type: Number })
+], b.prototype, "shiftPadding", 2);
+w([
+  v({ attribute: "auto-size" })
+], b.prototype, "autoSize", 2);
+w([
+  v()
+], b.prototype, "sync", 2);
+w([
+  v({ attribute: "sync-element" })
+], b.prototype, "syncElement", 2);
+w([
+  v({ attribute: "auto-size-boundary", type: Object })
+], b.prototype, "autoSizeBoundary", 2);
+w([
+  v({ attribute: "auto-size-padding", type: Number })
+], b.prototype, "autoSizePadding", 2);
+w([
+  v({ attribute: "hover-bridge", type: Boolean })
+], b.prototype, "hoverBridge", 2);
+w([
+  v({ attribute: "auto-width-factor" })
+], b.prototype, "autoWidthFactor", 2);
+b = w([
+  Ie("cx-popup")
+], b);
+export {
+  b as default
+};